From f6d2994afb4dfc6c18e0b23de7e9febb142ca299 Mon Sep 17 00:00:00 2001 From: JCNoguera <88061365+VmMad@users.noreply.github.com> Date: Tue, 29 Oct 2024 19:58:03 +0100 Subject: [PATCH 1/2] feat(wallet-dashboard): add receive popup --- apps/core/package.json | 1 + .../src/ui/app => core/src}/components/QR.tsx | 1 + apps/core/src/components/index.ts | 1 + apps/wallet-dashboard/app/layout.tsx | 6 +- .../components/Dialogs/ReceiveFundsDialog.tsx | 47 ++++++++++ .../components/Dialogs/index.ts | 4 + .../account-balance/AccountBalance.tsx | 94 +++++++++++-------- apps/wallet/package.json | 1 - apps/wallet/src/ui/app/components/index.ts | 1 - .../pages/home/tokens/ReceiveTokensDialog.tsx | 2 +- pnpm-lock.yaml | 42 ++++----- 11 files changed, 135 insertions(+), 65 deletions(-) rename apps/{wallet/src/ui/app => core/src}/components/QR.tsx (96%) create mode 100644 apps/wallet-dashboard/components/Dialogs/ReceiveFundsDialog.tsx create mode 100644 apps/wallet-dashboard/components/Dialogs/index.ts diff --git a/apps/core/package.json b/apps/core/package.json index 31cb3e43e8f..fd24dd7be3d 100644 --- 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 b/apps/core/src/components/QR.tsx similarity index 96% rename from apps/wallet/src/ui/app/components/QR.tsx rename to apps/core/src/components/QR.tsx index 2c4b806b161..7ab47b246e3 100644 --- a/apps/wallet/src/ui/app/components/QR.tsx +++ b/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 index 67d6dc1fbc3..fac843e4062 100644 --- 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 index 328f5fa085e..a9bfecf9d54 100644 --- a/apps/wallet-dashboard/app/layout.tsx +++ b/apps/wallet-dashboard/app/layout.tsx @@ -47,7 +47,11 @@ export default function RootLayout({ > {children} - + diff --git a/apps/wallet-dashboard/components/Dialogs/ReceiveFundsDialog.tsx b/apps/wallet-dashboard/components/Dialogs/ReceiveFundsDialog.tsx new file mode 100644 index 00000000000..83eeb7a9592 --- /dev/null +++ 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 ( + + +
setOpen(false)} /> + +
+
+ +
+
+
+ +
+
+ +
+ ); +} diff --git a/apps/wallet-dashboard/components/Dialogs/index.ts b/apps/wallet-dashboard/components/Dialogs/index.ts new file mode 100644 index 00000000000..4d5196f3dbd --- /dev/null +++ b/apps/wallet-dashboard/components/Dialogs/index.ts @@ -0,0 +1,4 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +export * from './ReceiveFundsDialog'; diff --git a/apps/wallet-dashboard/components/account-balance/AccountBalance.tsx b/apps/wallet-dashboard/components/account-balance/AccountBalance.tsx index 23707407541..55ac2567f89 100644 --- 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 ( - - {isPending &&

Loading...

} - {!isPending && ( -
-
- {address && ( -
+ + {isPending &&

Loading...

} + {!isPending && ( +
+
+ {address && ( +
+ )} + + {formatted} {symbol} + +
+
+
-
-
-
- )} - + )} + + + ); } diff --git a/apps/wallet/package.json b/apps/wallet/package.json index e46dd91b6e4..2ba379d932c 100644 --- 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 index f162a483b93..9bafd9cd168 100644 --- 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 index 9d7d8f69633..e0e0677b74c 100644 --- 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; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 92e2c8a9a2f..ee8308e9fa7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -179,7 +179,7 @@ importers: version: 5.2.1(@types/eslint@8.56.12)(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.3.3) jest: specifier: ^29.5.0 - version: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) + version: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) prettier: specifier: ^3.3.1 version: 3.3.3 @@ -191,7 +191,7 @@ importers: version: 6.3.4 ts-jest: specifier: ^29.1.0 - version: 29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)))(typescript@5.6.2) + version: 29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)))(typescript@5.6.2) ts-loader: specifier: ^9.4.4 version: 9.5.1(typescript@5.6.2)(webpack@5.95.0(@swc/core@1.7.28)) @@ -240,6 +240,9 @@ importers: bignumber.js: specifier: ^9.1.1 version: 9.1.2 + qrcode.react: + specifier: ^4.0.1 + version: 4.0.1(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -789,9 +792,6 @@ importers: poseidon-lite: specifier: ^0.2.0 version: 0.2.1 - qrcode.react: - specifier: ^4.0.1 - version: 4.0.1(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -1045,7 +1045,7 @@ importers: version: 14.2.3(eslint@8.57.1)(typescript@5.6.2) jest: specifier: ^29.5.0 - version: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) + version: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) postcss: specifier: ^8.4.31 version: 8.4.47 @@ -1054,7 +1054,7 @@ importers: version: 3.4.13(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) ts-jest: specifier: ^29.1.0 - version: 29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)))(typescript@5.6.2) + version: 29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)))(typescript@5.6.2) typescript: specifier: ^5.5.3 version: 5.6.2 @@ -20540,7 +20540,7 @@ snapshots: jest-util: 29.7.0 slash: 3.0.0 - '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2))': + '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2))': dependencies: '@jest/console': 29.7.0 '@jest/reporters': 29.7.0(node-notifier@10.0.0) @@ -20554,7 +20554,7 @@ snapshots: exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 29.7.0 - jest-config: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) + jest-config: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) jest-haste-map: 29.7.0 jest-message-util: 29.7.0 jest-regex-util: 29.6.3 @@ -26471,13 +26471,13 @@ snapshots: crc-32@1.2.2: {} - create-jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)): + create-jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)): dependencies: '@jest/types': 29.6.3 chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) + jest-config: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) jest-util: 29.7.0 prompts: 2.4.2 transitivePeerDependencies: @@ -29686,16 +29686,16 @@ snapshots: - babel-plugin-macros - supports-color - jest-cli@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)): + jest-cli@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)): dependencies: - '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) + '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 chalk: 4.1.2 - create-jest: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) + create-jest: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) exit: 0.1.2 import-local: 3.2.0 - jest-config: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) + jest-config: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) jest-util: 29.7.0 jest-validate: 29.7.0 yargs: 17.7.2 @@ -29707,7 +29707,7 @@ snapshots: - supports-color - ts-node - jest-config@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)): + jest-config@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)): dependencies: '@babel/core': 7.25.2 '@jest/test-sequencer': 29.7.0 @@ -29964,12 +29964,12 @@ snapshots: merge-stream: 2.0.0 supports-color: 8.1.1 - jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)): + jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)): dependencies: - '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) + '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) '@jest/types': 29.6.3 import-local: 3.2.0 - jest-cli: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) + jest-cli: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) optionalDependencies: node-notifier: 10.0.0 transitivePeerDependencies: @@ -34556,12 +34556,12 @@ snapshots: ts-interface-checker@0.1.13: {} - ts-jest@29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)))(typescript@5.6.2): + ts-jest@29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)))(typescript@5.6.2): dependencies: bs-logger: 0.2.6 ejs: 3.1.10 fast-json-stable-stringify: 2.1.0 - jest: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) + jest: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) jest-util: 29.7.0 json5: 2.2.3 lodash.memoize: 4.1.2 From ddc76c050a73c63715a5ed4ebf0e63a0faeb8104 Mon Sep 17 00:00:00 2001 From: JCNoguera <88061365+VmMad@users.noreply.github.com> Date: Wed, 30 Oct 2024 11:04:56 +0100 Subject: [PATCH 2/2] styles: add margin Co-authored-by: evavirseda --- apps/wallet-dashboard/components/Dialogs/ReceiveFundsDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/wallet-dashboard/components/Dialogs/ReceiveFundsDialog.tsx b/apps/wallet-dashboard/components/Dialogs/ReceiveFundsDialog.tsx index 83eeb7a9592..953b9299b87 100644 --- a/apps/wallet-dashboard/components/Dialogs/ReceiveFundsDialog.tsx +++ b/apps/wallet-dashboard/components/Dialogs/ReceiveFundsDialog.tsx @@ -33,7 +33,7 @@ export function ReceiveFundsDialog({
- +