Skip to content

Commit ba0a642

Browse files
turnekybcturnekybc
committed
moonpay and coinbase ewk demo
1 parent e99f98c commit ba0a642

File tree

16 files changed

+503
-208
lines changed

16 files changed

+503
-208
lines changed

‎examples/react-components/src/app/dashboard/OnRamp.tsx‎

Lines changed: 75 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,21 @@ interface OnRampProps {
1313
ethAddress: string;
1414
}
1515

16+
type DisplayOption = "iframe" | "popup" | "newTab";
17+
18+
const displayOptions = ["iframe", "popup", "newTab"] as const;
19+
1620
export const OnRamp = ({ ethAddress }: OnRampProps) => {
1721
const { turnkey, indexedDbClient } = useTurnkey();
18-
const [isSignModalOpen, setSignModalOpen] = useState(false);
22+
const [isOnrampModalOpen, setIsOnrampModalOpen] = useState(false);
23+
const [onrampDisplayOption, setOnrampDisplayOption] =
24+
useState<DisplayOption>("popup");
25+
26+
const [moonpayUrl, setMoonpayUrl] = useState<string | null>(null);
27+
const [coinbaseUrl, setCoinbaseUrl] = useState<string | null>(null);
1928

20-
const handleModalOpen = () => setSignModalOpen(true);
21-
const handleModalClose = () => setSignModalOpen(false);
29+
const handleModalOpen = () => setIsOnrampModalOpen(true);
30+
const handleModalClose = () => setIsOnrampModalOpen(false);
2231

2332
const generateCoinbaseUrl = async () => {
2433
try {
@@ -39,11 +48,20 @@ export const OnRamp = ({ ethAddress }: OnRampProps) => {
3948
});
4049

4150
if (response?.onRampUrl) {
42-
window.open(
43-
response.onRampUrl,
44-
"_blank",
45-
"popup,width=500,height=700,scrollbars=yes,resizable=yes",
46-
);
51+
if (onrampDisplayOption === "iframe") {
52+
setCoinbaseUrl(response.onRampUrl);
53+
return;
54+
} else if (onrampDisplayOption === "popup") {
55+
window.open(
56+
response.onRampUrl,
57+
"_blank",
58+
"popup,width=500,height=700,scrollbars=yes,resizable=yes"
59+
);
60+
return;
61+
} else if (onrampDisplayOption === "newTab") {
62+
window.open(response.onRampUrl, "_blank", "noopener,noreferrer");
63+
return;
64+
}
4765
}
4866
} catch (error) {
4967
console.error("Failed to init Coinbase on-ramp:", error);
@@ -67,11 +85,20 @@ export const OnRamp = ({ ethAddress }: OnRampProps) => {
6785
});
6886

6987
if (response?.onRampUrl) {
70-
window.open(
71-
response.onRampUrl,
72-
"_blank",
73-
"popup,width=500,height=700,scrollbars=yes,resizable=yes",
74-
);
88+
if (onrampDisplayOption === "iframe") {
89+
setMoonpayUrl(response.onRampUrl);
90+
return;
91+
} else if (onrampDisplayOption === "popup") {
92+
window.open(
93+
response.onRampUrl,
94+
"_blank",
95+
"popup,width=500,height=700,scrollbars=yes,resizable=yes"
96+
);
97+
return;
98+
} else if (onrampDisplayOption === "newTab") {
99+
window.open(response.onRampUrl, "_blank", "noopener,noreferrer");
100+
return;
101+
}
75102
}
76103
} catch (error) {
77104
console.error("Failed to init MoonPay on-ramp:", error);
@@ -96,7 +123,7 @@ export const OnRamp = ({ ethAddress }: OnRampProps) => {
96123
Add Funds
97124
</button>
98125

99-
<Modal open={isSignModalOpen} onClose={handleModalClose}>
126+
<Modal open={isOnrampModalOpen} onClose={handleModalClose}>
100127
<Box
101128
sx={{
102129
outline: "none",
@@ -133,6 +160,28 @@ export const OnRamp = ({ ethAddress }: OnRampProps) => {
133160
<Typography variant="subtitle2" sx={{ color: "#6C727E", mb: 2 }}>
134161
Your crypto will be deposited directly into your Turnkey wallet
135162
</Typography>
163+
{displayOptions.map((displayOption) => {
164+
const id = `plan-${displayOption}`;
165+
return (
166+
<label
167+
key={displayOption}
168+
htmlFor={id}
169+
style={{ display: "block" }}
170+
>
171+
<input
172+
id={id}
173+
type="radio"
174+
name="plan"
175+
value={displayOption}
176+
checked={onrampDisplayOption === displayOption}
177+
onChange={(e) =>
178+
setOnrampDisplayOption(e.target.value as DisplayOption)
179+
}
180+
/>
181+
{displayOption}
182+
</label>
183+
);
184+
})}
136185
<div className="purchaseButtons">
137186
<button className="whiteButton" onClick={generateMoonPayUrl}>
138187
<img src="/images/moonpay.jpg" alt="MoonPay" />
@@ -143,6 +192,18 @@ export const OnRamp = ({ ethAddress }: OnRampProps) => {
143192
Buy with Coinbase
144193
</button>
145194
</div>
195+
{moonpayUrl && (
196+
<iframe
197+
src={moonpayUrl}
198+
title="MoonPay OnRamp"
199+
style={{
200+
width: "100%",
201+
height: "500px",
202+
border: "none",
203+
marginTop: "20px",
204+
}}
205+
></iframe>
206+
)}
146207
</Box>
147208
</Modal>
148209
</>

‎examples/react-wallet-kit/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@fortawesome/react-fontawesome": "^0.2.2",
2020
"@headlessui/react": "^2.2.4",
2121
"@hello-pangea/dnd": "^17.0.0",
22+
"@moonpay/moonpay-js": "^0.7.0",
2223
"@noble/hashes": "1.4.0",
2324
"@react-three/drei": "^10.6.1",
2425
"@react-three/fiber": "^8.18.0",

‎examples/react-wallet-kit/src/components/Svg.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -322,8 +322,9 @@ export function MoonPaySVG(props: SVGProps) {
322322
width="16"
323323
height="16"
324324
viewBox="0 0 16 16"
325+
fill="currentColor"
326+
{...props}
325327
>
326-
<circle cx="8" cy="8" r="9" fill="#ffffff" />
327328
<rect x="0" y="0" width="16" height="16" fill="none" />
328329
<rect x="12" y="0" width="3" height="1" fill="#7d00ff" />
329330
<rect x="11" y="1" width="5" height="1" fill="#7d00ff" />

‎examples/react-wallet-kit/src/components/demo/DemoPanel.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default function DemoPanel() {
5757
const { pushPage } = useModal();
5858

5959
const [selectedWallet, setSelectedWallet] = useState<Wallet | undefined>(
60-
wallets[0] || null // Initialize with null if wallets[0] is undefined
60+
wallets[0] || null, // Initialize with null if wallets[0] is undefined
6161
);
6262
const [selectedWalletAccount, setSelectedWalletAccount] = useState<
6363
WalletAccount | undefined
@@ -67,7 +67,7 @@ export default function DemoPanel() {
6767
ConnectedWallet[] | undefined
6868
>([]); // Initialize with an empty array
6969
const [connectedWalletIcons, setConnectedWalletIcons] = useState<string[]>(
70-
[]
70+
[],
7171
); // Initialize with an empty array
7272

7373
useEffect(() => {
@@ -95,7 +95,7 @@ export default function DemoPanel() {
9595
}
9696

9797
const cw = wallets.filter(
98-
(w) => w.source === WalletSource.Connected
98+
(w) => w.source === WalletSource.Connected,
9999
) as ConnectedWallet[];
100100
if (cw) {
101101
getConnectedWalletIcons().then((icons) => {
@@ -161,7 +161,7 @@ export default function DemoPanel() {
161161
onClick={() => {
162162
setSelectedWallet(wallet);
163163
setSelectedWalletAccount(
164-
wallet.accounts[0] || undefined
164+
wallet.accounts[0] || undefined,
165165
);
166166
}}
167167
className="flex items-center gap-3 w-full cursor-pointer"
@@ -184,7 +184,7 @@ export default function DemoPanel() {
184184
<Button
185185
onClick={async () => {
186186
const embeddedWallets = wallets.filter(
187-
(w) => w.source === WalletSource.Embedded
187+
(w) => w.source === WalletSource.Embedded,
188188
);
189189
const walletId = await createWallet({
190190
walletName: `Wallet ${embeddedWallets.length + 1}`,
@@ -199,7 +199,7 @@ export default function DemoPanel() {
199199
newWallets[0];
200200
setSelectedWallet(newWallet);
201201
setSelectedWalletAccount(
202-
newWallet.accounts[0] || undefined
202+
newWallet.accounts[0] || undefined,
203203
);
204204
}}
205205
className="relative hover:cursor-pointer flex items-center justify-center gap-2 w-full px-3 py-2 rounded-md text-xs bg-icon-background-light dark:bg-icon-background-dark text-icon-text-light dark:text-icon-text-dark"
@@ -278,7 +278,7 @@ export default function DemoPanel() {
278278
account.addressFormat === "ADDRESS_FORMAT_ETHEREUM"
279279
? `https://etherscan.io/address/${account.address}`
280280
: `https://solscan.io/account/${account.address}`,
281-
"_blank"
281+
"_blank",
282282
);
283283
}}
284284
>
@@ -337,13 +337,13 @@ export default function DemoPanel() {
337337
res.r,
338338
res.s,
339339
res.v,
340-
selectedWalletAccount.address
340+
selectedWalletAccount.address,
341341
)
342342
: verifySolSignatureWithAddress(
343343
messageToSign,
344344
res.r,
345345
res.s,
346-
selectedWalletAccount.address
346+
selectedWalletAccount.address,
347347
);
348348
pushPage({
349349
key: "Signature Verification",
@@ -366,14 +366,14 @@ export default function DemoPanel() {
366366
onClick={async () => {
367367
if (!selectedWalletAccount) return;
368368
pushPage({
369-
key: "Onramp Selector",
369+
key: "Add funds to your wallet",
370370
content: (
371371
<OnrampSelector
372372
selectedWalletAccount={selectedWalletAccount}
373373
/>
374374
),
375375
preventBack: true,
376-
showTitle: false,
376+
showTitle: true,
377377
});
378378
}}
379379
className="bg-primary-light dark:bg-primary-dark text-primary-text-light dark:text-primary-text-dark rounded-lg px-4 py-2 active:scale-95 transition-transform cursor-pointer"
@@ -442,7 +442,7 @@ const StackedImg = ({
442442
alt={`Wallet Icon ${index}`}
443443
className={`w-6 h-6 bg-icon-background-light dark:bg-icon-background-dark rounded-full p-0.5 ${index > 0 ? "-ml-3" : ""}`}
444444
/>
445-
) : null
445+
) : null,
446446
)}
447447
{connectedWalletIcons.length > 2 && (
448448
<span className="text-xs text-text-light dark:text-text-dark">

0 commit comments

Comments
 (0)