diff --git a/package-lock.json b/package-lock.json index 9c65401f..76eecbe8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "axios": "^0.21.1", "copy-to-clipboard": "^3.3.3", "cross-blob": "^3.0.1", + "crypto-js": "^4.2.0", "ethers": "^5.6.9", "file-saver": "^2.0.5", "framer-motion": "^10.12.18", @@ -46,6 +47,7 @@ "@tailwindcss/aspect-ratio": "^0.2.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", + "@types/crypto-js": "^4.2.1", "@types/file-saver": "^2.0.5", "@types/jest": "^29.5.1", "@types/node": "^17.0.9", @@ -7300,6 +7302,12 @@ "@types/har-format": "*" } }, + "node_modules/@types/crypto-js": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.1.tgz", + "integrity": "sha512-FSPGd9+OcSok3RsM0UZ/9fcvMOXJ1ENE/ZbLfOPlBWj7BgXtEAM8VYfTtT760GiLbQIMoVozwVuisjvsVwqYWw==", + "dev": true + }, "node_modules/@types/debug": { "version": "4.1.8", "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.8.tgz", @@ -19733,8 +19741,9 @@ } }, "node_modules/readable-stream": { - "version": "3.6.0", - "license": "MIT", + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", + "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", @@ -28232,6 +28241,12 @@ "@types/har-format": "*" } }, + "@types/crypto-js": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.1.tgz", + "integrity": "sha512-FSPGd9+OcSok3RsM0UZ/9fcvMOXJ1ENE/ZbLfOPlBWj7BgXtEAM8VYfTtT760GiLbQIMoVozwVuisjvsVwqYWw==", + "dev": true + }, "@types/debug": { "version": "4.1.8", "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.8.tgz", @@ -37017,7 +37032,9 @@ } }, "readable-stream": { - "version": "3.6.0", + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", + "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", "requires": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", diff --git a/package.json b/package.json index 588a3457..bea7ec89 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "axios": "^0.21.1", "copy-to-clipboard": "^3.3.3", "cross-blob": "^3.0.1", + "crypto-js": "^4.2.0", "ethers": "^5.6.9", "file-saver": "^2.0.5", "framer-motion": "^10.12.18", @@ -59,6 +60,7 @@ "@tailwindcss/aspect-ratio": "^0.2.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", + "@types/crypto-js": "^4.2.1", "@types/file-saver": "^2.0.5", "@types/jest": "^29.5.1", "@types/node": "^17.0.9", diff --git a/src/components/Connect/Metamask/MetamaskConnect.tsx b/src/components/Connect/Metamask/MetamaskConnect.tsx index 191f85a0..8cd29a1a 100644 --- a/src/components/Connect/Metamask/MetamaskConnect.tsx +++ b/src/components/Connect/Metamask/MetamaskConnect.tsx @@ -2,6 +2,8 @@ import { Button } from '@components/Buttons'; import MetamaskIcon from '@media/UI/metamask.svg'; import { decryptWallet, + encryptMnemonic, + getBasicSignature, getBasicSignatureWallet, getMetamaskDeeplinkUrl, isMetamaskAvailable, @@ -9,7 +11,7 @@ import { import { useRouter } from 'next/router'; import { getDefaultNetwork, useFdpStorage } from '@context/FdpStorageContext'; import MetamaskNotFoundModal from '@components/Modals/MetamaskNotFoundModal/MetamaskNotFoundModal'; -import { useContext, useEffect, useState } from 'react'; +import { useContext, useState } from 'react'; import UserContext from '@context/UserContext'; import Spinner from '@components/Spinner/Spinner'; import { getInvite, login } from '@utils/invite'; @@ -17,6 +19,7 @@ import PasswordModal from '@components/Modals/PasswordModal/PasswordModal'; import { isMobile } from 'react-device-detect'; import { useMetamask } from '@context/MetamaskContext'; import { Network } from '@data/networks'; +import { setMetamaskMnemonic } from '@utils/localStorage'; interface MetamaskConnectProps { onConnect: () => void; @@ -37,8 +40,12 @@ const MetamaskConnect = ({ onConnect }: MetamaskConnectProps) => { } = useFdpStorage(); const { setErrorMessage, setAddress, setMnemonic } = useContext(UserContext); const router = useRouter(); - const { connectMetamask, metamaskProvider, metamaskWalletAddress } = - useMetamask(); + const { + loading: metamaskLoading, + connectMetamask, + metamaskProvider, + metamaskWalletAddress, + } = useMetamask(); const [network] = useState(getDefaultNetwork()); /** @@ -60,7 +67,10 @@ const MetamaskConnect = ({ onConnect }: MetamaskConnectProps) => { * * @param password Password from modal input */ - const handlePassword = async (password: string): Promise => { + const handlePassword = async ( + password: string, + saveMnemonic: boolean + ): Promise => { try { const wallet = await decryptWallet(localBasicWallet, password); const mnemonic = wallet.mnemonic.phrase; @@ -74,6 +84,17 @@ const MetamaskConnect = ({ onConnect }: MetamaskConnectProps) => { setAddress(wallet.address); setMnemonic(mnemonic); + if (saveMnemonic) { + const signature = await getBasicSignature( + metamaskProvider, + metamaskWalletAddress + ); + + setMetamaskMnemonic(encryptMnemonic(mnemonic, signature)); + } else { + setMetamaskMnemonic(''); + } + router.push('/drive'); } catch (error) { console.error(error); @@ -99,45 +120,28 @@ const MetamaskConnect = ({ onConnect }: MetamaskConnectProps) => { try { setLoading(true); - await connectMetamask(); + const { provider, account } = await connectMetamask(); + + setLocalBasicWallet(await getBasicSignatureWallet(provider, account)); + + setShowPasswordModal(true); } catch (error) { console.error(error); setErrorMessage(String(error.message || error)); + } finally { setLoading(false); } }; - useEffect(() => { - async function run() { - if (!(metamaskProvider && metamaskWalletAddress)) { - return; - } - - try { - setLocalBasicWallet( - await getBasicSignatureWallet(metamaskProvider, metamaskWalletAddress) - ); - - setShowPasswordModal(true); - } catch (e) { - console.error(e); - } finally { - setLoading(false); - } - } - - run(); - }, [metamaskProvider, metamaskWalletAddress]); - return ( <>