diff --git a/package-lock.json b/package-lock.json index 3d7bc52..1c23c3b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,21 +10,24 @@ "dependencies": { "@chakra-ui/icons": "^2.0.19", "@chakra-ui/next-js": "^2.1.4", - "@chakra-ui/react": "^2.7.0", + "@chakra-ui/react": "^2.8.1", "@chakra-ui/theme-tools": "^2.0.18", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@multiversx/sdk-dapp": "^2.14.4", "@multiversx/sdk-wallet": "^4.2.0", "@reduxjs/toolkit": "^1.9.7", + "chakra-ui-steps": "^2.1.0", + "clipboard": "^2.0.11", "crypto-js": "^4.1.1", - "framer-motion": "^6.5.1", + "framer-motion": "^7.0.0", "fs": "^0.0.1-security", "next": "13.5.4", "next-auth": "^4.23.2", "next-transpile-modules": "^10.0.1", "react": "^18", "react-dom": "^18", + "react-icons": "^4.11.0", "react-particles": "^2.12.2", "react-redux": "^8.1.3", "redux": "^4.2.1", @@ -1814,14 +1817,14 @@ } }, "node_modules/@motionone/dom": { - "version": "10.12.0", - "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz", - "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==", - "dependencies": { - "@motionone/animation": "^10.12.0", - "@motionone/generators": "^10.12.0", - "@motionone/types": "^10.12.0", - "@motionone/utils": "^10.12.0", + "version": "10.16.4", + "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.16.4.tgz", + "integrity": "sha512-HPHlVo/030qpRj9R8fgY50KTN4Ko30moWRTA3L3imrsRBmob93cTYmodln49HYFbQm01lFF7X523OkKY0DX6UA==", + "dependencies": { + "@motionone/animation": "^10.16.3", + "@motionone/generators": "^10.16.4", + "@motionone/types": "^10.16.3", + "@motionone/utils": "^10.16.3", "hey-listen": "^1.0.8", "tslib": "^2.3.1" } @@ -3579,6 +3582,18 @@ } ] }, + "node_modules/chakra-ui-steps": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/chakra-ui-steps/-/chakra-ui-steps-2.1.0.tgz", + "integrity": "sha512-stGaoMP/3xgSee3Qw70Dq+W2c/9Neulkx/N0tTw4BBVnr4rrnDyG2VVB6jLUDf+Oh85wwSpAkLSL28zLx4CN7g==", + "peerDependencies": { + "@chakra-ui/react": "^2.0.0", + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "framer-motion": "^7.0.0", + "react": "^18.0.0" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -3615,6 +3630,16 @@ "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "node_modules/clipboard": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz", + "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==", + "dependencies": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "node_modules/cliui": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", @@ -3828,6 +3853,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==" + }, "node_modules/dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -4714,23 +4744,20 @@ } }, "node_modules/framer-motion": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz", - "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==", + "version": "7.10.3", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-7.10.3.tgz", + "integrity": "sha512-k2ccYeZNSpPg//HTaqrU+4pRq9f9ZpaaN7rr0+Rx5zA4wZLbk547wtDzge2db1sB+1mnJ6r59P4xb+aEIi/W+w==", "dependencies": { - "@motionone/dom": "10.12.0", - "framesync": "6.0.1", + "@motionone/dom": "^10.15.3", "hey-listen": "^1.0.8", - "popmotion": "11.0.3", - "style-value-types": "5.0.0", - "tslib": "^2.1.0" + "tslib": "2.4.0" }, "optionalDependencies": { "@emotion/is-prop-valid": "^0.8.2" }, "peerDependencies": { - "react": ">=16.8 || ^17.0.0 || ^18.0.0", - "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" } }, "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": { @@ -4748,13 +4775,10 @@ "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", "optional": true }, - "node_modules/framer-motion/node_modules/framesync": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz", - "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==", - "dependencies": { - "tslib": "^2.1.0" - } + "node_modules/framer-motion/node_modules/tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" }, "node_modules/framesync": { "version": "6.1.2", @@ -4956,6 +4980,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==", + "dependencies": { + "delegate": "^3.1.2" + } + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -6333,25 +6365,6 @@ "node": ">=10.13.0" } }, - "node_modules/popmotion": { - "version": "11.0.3", - "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz", - "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==", - "dependencies": { - "framesync": "6.0.1", - "hey-listen": "^1.0.8", - "style-value-types": "5.0.0", - "tslib": "^2.1.0" - } - }, - "node_modules/popmotion/node_modules/framesync": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz", - "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==", - "dependencies": { - "tslib": "^2.1.0" - } - }, "node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", @@ -6603,6 +6616,14 @@ } } }, + "node_modules/react-icons": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", + "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-idle-timer": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/react-idle-timer/-/react-idle-timer-5.0.0.tgz", @@ -7054,6 +7075,11 @@ "resolved": "https://registry.npmjs.org/scryptsy/-/scryptsy-2.1.0.tgz", "integrity": "sha512-1CdSqHQowJBnMAFyPEBRfqag/YP9OF394FV+4YREIJX4ljD7OxvQRDayyoyyCk+senRjSkP6VnUNQmVQqB6g7w==" }, + "node_modules/select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==" + }, "node_modules/semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", @@ -7387,15 +7413,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/style-value-types": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz", - "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==", - "dependencies": { - "hey-listen": "^1.0.8", - "tslib": "^2.1.0" - } - }, "node_modules/styled-jsx": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz", @@ -7480,6 +7497,11 @@ "real-require": "^0.1.0" } }, + "node_modules/tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" + }, "node_modules/tiny-invariant": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", diff --git a/package.json b/package.json index 10b1beb..a8dca5b 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@multiversx/sdk-wallet": "^4.2.0", "@reduxjs/toolkit": "^1.9.7", "chakra-ui-steps": "^2.1.0", + "clipboard": "^2.0.11", "crypto-js": "^4.1.1", "framer-motion": "^7.0.0", "fs": "^0.0.1-security", diff --git a/src/views/Home/components/ExistingUser/ExistingUser.tsx b/src/views/Home/components/ExistingUser/ExistingUser.tsx index 9d79acf..823db30 100644 --- a/src/views/Home/components/ExistingUser/ExistingUser.tsx +++ b/src/views/Home/components/ExistingUser/ExistingUser.tsx @@ -21,11 +21,32 @@ import { import { deleteWallet } from '../../services/calls'; import { createEncryptionKey, decrypt } from '@/utils/functions/cryptography'; import { Box, Button, Text, VStack, HStack, Circle, Icon, List, ListItem } from "@chakra-ui/react"; -import { FaBeer, FaCoffee, FaPhabricator,FaEraser,FaDownload } from 'react-icons/fa'; +import { FaBeer, FaCoffee, FaPhabricator,FaEraser,FaDownload,FaCopy, FaExternalLinkAlt } from 'react-icons/fa'; +import ClipboardJS from 'clipboard'; + const theme = extendTheme({ initialColorMode: 'dark', }); +function copyToClipboard(text: string) { // Specify the type of the 'text' parameter + // Create a temporary textarea element + const textarea = document.createElement('textarea'); + textarea.value = text; + + // Make the textarea invisible + textarea.style.position = 'absolute'; + textarea.style.left = '-9999px'; + + // Append the textarea to the DOM + document.body.appendChild(textarea); + + // Select and copy the text in the textarea + textarea.select(); + document.execCommand('copy'); + + // Remove the temporary textarea + document.body.removeChild(textarea); +} function ExistingUser({ address, email, secretWords, userGid }: { address: string, email: string, secretWords: string[], userGid: string }) { const [isWordsVisible, setWordsVisible] = useState(false); @@ -46,6 +67,16 @@ function ExistingUser({ address, email, secretWords, userGid }: { address: strin } }; + const handleCopyToClipboard = () => { + // Copy the address to the clipboard + copyToClipboard(address); + }; + + const handleOpenExplorer = () => { + // Open the explorer link in a new tab + window.open(`https://devnet-explorer.multiversx.com/accounts/${address}`, '_blank'); + }; + const handlePinSubmit = () => { setEncryptionKey(createEncryptionKey(pin, userGid)); setWordsVisible(true); @@ -65,6 +96,8 @@ function ExistingUser({ address, email, secretWords, userGid }: { address: strin }; useEffect(() => { + + // Make the API call to fetch balance fetch(`https://api.multiversx.com/accounts/${address}`) .then((response) => response.json()) @@ -88,6 +121,8 @@ function ExistingUser({ address, email, secretWords, userGid }: { address: strin }); }, [address]); + + return ( @@ -97,7 +132,11 @@ function ExistingUser({ address, email, secretWords, userGid }: { address: strin {/* Header */} - Wallet Address: {address} + Wallet Address: + + {address} + +