feat(wallet-dashboard): add receive popup (#3772)

* feat(wallet-dashboard): add receive popup * styles: add margin Co-authored-by: evavirseda <[email protected]> --------- Co-authored-by: evavirseda <[email protected]>
iotaledger · Nov 5, 2024 · f3d9af4 · f3d9af4
1 parent 112e777
commit f3d9af4
Show file tree

Hide file tree

Showing 11 changed files with 566 additions and 432 deletions.
diff --git a/apps/core/package.json b/apps/core/package.json
@@ -32,6 +32,7 @@
         "@sentry/react": "^7.59.2",
         "@tanstack/react-query": "^5.50.1",
         "bignumber.js": "^9.1.1",
+        "qrcode.react": "^4.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.45.2",

diff --git a/apps/wallet/src/ui/app/components/QR.tsx → apps/core/src/components/QR.tsx b/apps/wallet/src/ui/app/components/QR.tsx → apps/core/src/components/QR.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import React from 'react';
 import { QRCodeSVG } from 'qrcode.react';
 
 export enum QRLevel {

diff --git a/apps/core/src/components/index.ts b/apps/core/src/components/index.ts
@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './KioskClientProvider';
+export * from './QR';
diff --git a/apps/wallet-dashboard/app/layout.tsx b/apps/wallet-dashboard/app/layout.tsx
@@ -50,7 +50,11 @@ export default function RootLayout({
                                 <ThemeProvider>
                                     <PopupProvider>
                                         {children}
-                                        <Toaster />
+                                        <Toaster
+                                            containerStyle={{
+                                                zIndex: 99999,
+                                            }}
+                                        />
                                         <Popup />
                                     </PopupProvider>
                                 </ThemeProvider>

diff --git a/apps/wallet-dashboard/components/Dialogs/ReceiveFundsDialog.tsx b/apps/wallet-dashboard/components/Dialogs/ReceiveFundsDialog.tsx
@@ -0,0 +1,47 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button, Address, Dialog, DialogContent, DialogBody, Header } from '@iota/apps-ui-kit';
+import { useCopyToClipboard } from '@iota/core';
+import { QR } from '@iota/core';
+import toast from 'react-hot-toast';
+
+interface ReceiveFundsDialogProps {
+    address: string;
+    setOpen: (bool: boolean) => void;
+    open: boolean;
+}
+
+export function ReceiveFundsDialog({
+    address,
+    open,
+    setOpen,
+}: ReceiveFundsDialogProps): React.JSX.Element {
+    const copyToClipboard = useCopyToClipboard();
+
+    async function handleCopyToClipboard() {
+        const success = await copyToClipboard(address);
+        if (success) {
+            toast.success('Address copied');
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogContent containerId="overlay-portal-container">
+                <Header title="Receive" onClose={() => setOpen(false)} />
+                <DialogBody>
+                    <div className="flex flex-col gap-lg text-center [&_span]:w-full [&_span]:break-words">
+                        <div className="self-center">
+                            <QR value={address} size={130} marginSize={2} />
+                        </div>
+                        <Address text={address} />
+                    </div>
+                </DialogBody>
+                <div className="flex w-full flex-row justify-center gap-2 px-md--rs pb-md--rs pt-sm--rs">
+                    <Button onClick={handleCopyToClipboard} fullWidth text="Copy Address" />
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/apps/wallet-dashboard/components/Dialogs/index.ts b/apps/wallet-dashboard/components/Dialogs/index.ts
@@ -1,4 +1,5 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+export * from './ReceiveFundsDialog';
 export * from './Staking';
diff --git a/apps/wallet-dashboard/components/account-balance/AccountBalance.tsx b/apps/wallet-dashboard/components/account-balance/AccountBalance.tsx
@@ -13,13 +13,16 @@ import {
 import { Address, Button, ButtonSize, ButtonType, Panel } from '@iota/apps-ui-kit';
 import { CoinBalance, getNetwork } from '@iota/iota-sdk/client';
 import { SendCoinPopup } from '../Popup';
+import { ReceiveFundsDialog } from '../Dialogs';
 import { usePopups } from '@/hooks';
 import toast from 'react-hot-toast';
+import { useState } from 'react';
 
 export function AccountBalance() {
     const account = useCurrentAccount();
     const address = account?.address;
     const { openPopup, closePopup } = usePopups();
+    const [isReceiveDialogOpen, setIsReceiveDialogOpen] = useState(false);
     const { network } = useIotaClientContext();
     const { explorer } = getNetwork(network);
     const { data: coinBalance, isPending } = useBalance(address!);
@@ -50,52 +53,63 @@ export function AccountBalance() {
         }
     }
 
+    function openReceiveTokenPopup(): void {
+        setIsReceiveDialogOpen(true);
+    }
+
     function handleOnCopySuccess() {
         toast.success('Address copied');
     }
 
     return (
-        <Panel>
-            {isPending && <p>Loading...</p>}
-            {!isPending && (
-                <div className="flex h-full flex-col items-center justify-center gap-y-lg p-lg">
-                    <div className="flex h-full flex-col items-center justify-center gap-y-xs">
-                        {address && (
-                            <Address
-                                text={formattedAddress}
-                                isCopyable
-                                copyText={address}
-                                isExternal
-                                externalLink={explorerLink}
-                                onCopySuccess={handleOnCopySuccess}
+        <>
+            <Panel>
+                {isPending && <p>Loading...</p>}
+                {!isPending && (
+                    <div className="flex h-full flex-col items-center justify-center gap-y-lg p-lg">
+                        <div className="flex h-full flex-col items-center justify-center gap-y-xs">
+                            {address && (
+                                <Address
+                                    text={formattedAddress}
+                                    isCopyable
+                                    copyText={address}
+                                    isExternal
+                                    externalLink={explorerLink}
+                                    onCopySuccess={handleOnCopySuccess}
+                                />
+                            )}
+                            <span className="text-headline-lg text-neutral-10 dark:text-neutral-92">
+                                {formatted} {symbol}
+                            </span>
+                        </div>
+                        <div className="flex w-full max-w-56 gap-xs">
+                            <Button
+                                onClick={() =>
+                                    coinBalance &&
+                                    openSendTokenPopup(coinBalance, account?.address ?? '')
+                                }
+                                text="Send"
+                                size={ButtonSize.Small}
+                                disabled={!address}
+                                testId="send-coin-button"
+                                fullWidth
                             />
-                        )}
-                        <span className="text-headline-lg text-neutral-10 dark:text-neutral-92">
-                            {formatted} {symbol}
-                        </span>
-                    </div>
-                    <div className="flex w-full max-w-56 gap-xs">
-                        <Button
-                            onClick={() =>
-                                coinBalance &&
-                                openSendTokenPopup(coinBalance, account?.address ?? '')
-                            }
-                            text="Send"
-                            size={ButtonSize.Small}
-                            disabled={!address}
-                            testId="send-coin-button"
-                            fullWidth
-                        />
-                        <Button
-                            onClick={() => {}}
-                            type={ButtonType.Secondary}
-                            text="Receive"
-                            size={ButtonSize.Small}
-                            fullWidth
-                        />
+                            <Button
+                                onClick={openReceiveTokenPopup}
+                                type={ButtonType.Secondary}
+                                text="Receive"
+                                size={ButtonSize.Small}
+                                fullWidth
+                            />
+                        </div>
                     </div>
-                </div>
-            )}
-        </Panel>
+                )}
+            </Panel>
+            <ReceiveFundsDialog
+                address={address!}
+                open={isReceiveDialogOpen}
+                setOpen={setIsReceiveDialogOpen}
+            />
+        </>
     );
 }
diff --git a/apps/wallet/package.json b/apps/wallet/package.json
@@ -134,7 +134,6 @@
         "jose": "^5.2.3",
         "mitt": "^3.0.1",
         "poseidon-lite": "^0.2.0",
-        "qrcode.react": "^4.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-error-boundary": "^4.0.10",

diff --git a/apps/wallet/src/ui/app/components/index.ts b/apps/wallet/src/ui/app/components/index.ts
@@ -30,7 +30,6 @@ export * from './navigation';
 export * from './network-selector';
 export * from './nft-display';
 export * from './nft-display/NftImage';
-export * from './QR';
 export * from './receipt-card';
 export * from './receipt-card/TxnAmount';
 export * from './transactions-card';

diff --git a/apps/wallet/src/ui/app/pages/home/tokens/ReceiveTokensDialog.tsx b/apps/wallet/src/ui/app/pages/home/tokens/ReceiveTokensDialog.tsx
@@ -3,7 +3,7 @@
 
 import { Button, Address, Dialog, DialogContent, DialogBody, Header } from '@iota/apps-ui-kit';
 import { useCopyToClipboard } from '_hooks';
-import { QR } from '_src/ui/app/components';
+import { QR } from '@iota/core';
 
 interface ReceiveTokensDialogProps {
     address: string;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@
		// SPDX-License-Identifier: Apache-2.0

		export * from './KioskClientProvider';
		export * from './QR';