From 3672a96b7e3309818c1141e25c893a0de4c8a40a Mon Sep 17 00:00:00 2001 From: Jona Date: Mon, 28 Nov 2022 23:18:52 -0300 Subject: [PATCH 1/6] chore: integrates qr-scanner and react-qr-scanner --- package.json | 4 +- src/components/Modal/Send/index.jsx | 224 +++++++++++++++------------- src/hooks/useTruncatedAddress.tsx | 6 +- 3 files changed, 131 insertions(+), 103 deletions(-) diff --git a/package.json b/package.json index f6db211..0a0158a 100644 --- a/package.json +++ b/package.json @@ -26,11 +26,13 @@ "framer-motion": "^6.3.0", "graphql": "^16.6.0", "next": "latest", + "qr-scanner": "^1.4.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-feather": "^2.0.10", "react-hotjar": "^5.2.0", - "react-qr-code": "^2.0.7" + "react-qr-code": "^2.0.8", + "react-qr-scanner": "^1.0.0-alpha.11" }, "devDependencies": { "@graphprotocol/client-cli": "^2.2.15", diff --git a/src/components/Modal/Send/index.jsx b/src/components/Modal/Send/index.jsx index 69b24d6..947b248 100644 --- a/src/components/Modal/Send/index.jsx +++ b/src/components/Modal/Send/index.jsx @@ -20,6 +20,8 @@ import { } from '@chakra-ui/react'; import { BigNumber, ethers, FixedNumber } from 'ethers'; import { ArrowRight } from 'react-feather'; +import QrReader from 'react-qr-scanner'; +import QrScanner from 'qr-scanner'; import { useBlockchain } from '../../../context/Blockchain'; import { useToken } from '../../../context/Token'; @@ -66,6 +68,9 @@ const Send = ({ onClose }) => { const [price, setPrice] = useState(); const [gasPrice, setGasPrice] = useState(); + // Scan QR + const [openScanQR, setOpenScanQR] = useState(false); + useEffect(() => { // setLoading(true); async function init() { @@ -127,6 +132,16 @@ const Send = ({ onClose }) => { setMount(''); }; + const handleScan = (data) => { + if (data) { + setToAddress(data?.text); + } + }; + + const handleError = (err) => { + console.error(err); + }; + return ( { - - - {/* Address and tokens */} - {!tokenSelected ? ( - <> - - - - - - - - Al enviar siempre verifica que las direcciones pertenecen al ecosistema de Ethereum. - - - {/* Tokens */} - - Elige un token: - - - - - ) : ( - <> - - - - + {openScanQR && !toAddress ? ( + + + + ) : ( + + + {/* Address and tokens */} + {!tokenSelected ? ( + <> + + + {QrScanner?.hasCamera() && ( + + + + )} + + Al enviar siempre verifica que las direcciones pertenecen al ecosistema de + Ethereum. + - - Monto - - + + + ) : ( + <> + + + + - setMount(e.target.value)} /> - - - {/* Gas fee */} - - - - - Gas - - - Comisión de red - - - - ${Number(gasPrice) * price?.eth || '0.00'} - {Number(gasPrice).toFixed(7) || '0.00'} ETH + + Monto + + + setMount(e.target.value)} /> + + + + {/* Gas fee */} + + + + + Gas + + + Comisión de red + + + + ${Number(gasPrice) * price?.eth || '0.00'} + {Number(gasPrice).toFixed(7) || '0.00'} ETH + + + + )} + + + {/* Total */} + {tokenSelected && ( + + + Total + + ${(Number(mount) * price.dai.usd + Number(gasPrice) * price[tokenSelected].usd).toFixed(2)} + - + + + + + )} - - {/* Total */} - {tokenSelected && ( - - - Total - - ${(Number(mount) * price.dai.usd + Number(gasPrice) * price[tokenSelected].usd).toFixed(2)} - - - - - - - - )} - + )} ); diff --git a/src/hooks/useTruncatedAddress.tsx b/src/hooks/useTruncatedAddress.tsx index b00b3eb..9b8d09b 100644 --- a/src/hooks/useTruncatedAddress.tsx +++ b/src/hooks/useTruncatedAddress.tsx @@ -1,5 +1,7 @@ export default function useTruncatedAddress(address: string): string { - const truncated = `${address?.substr(0, 5)}...${address?.substr(-4)}`; + if (address) { + const truncated = `${address?.substr(0, 5)}...${address?.substr(-4)}`; - return truncated; + return truncated; + } } From 4c0534babe4b10923c77764d8583d5bd476d4430 Mon Sep 17 00:00:00 2001 From: Jona Date: Tue, 29 Nov 2022 00:01:52 -0300 Subject: [PATCH 2/6] fix(component): changed facing mode in scan qr for Send modal --- src/components/Modal/Send/index.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/Modal/Send/index.jsx b/src/components/Modal/Send/index.jsx index 947b248..e65530f 100644 --- a/src/components/Modal/Send/index.jsx +++ b/src/components/Modal/Send/index.jsx @@ -172,7 +172,13 @@ const Send = ({ onClose }) => { {openScanQR && !toAddress ? ( - + ) : ( From 57c5f3575f8b9c14a9cdce6cc143d4c01846e686 Mon Sep 17 00:00:00 2001 From: Jona Date: Tue, 29 Nov 2022 00:41:48 -0300 Subject: [PATCH 3/6] fix(component): changed mode for front in Send modal --- src/components/Modal/Send/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Modal/Send/index.jsx b/src/components/Modal/Send/index.jsx index e65530f..cd6d45e 100644 --- a/src/components/Modal/Send/index.jsx +++ b/src/components/Modal/Send/index.jsx @@ -177,7 +177,7 @@ const Send = ({ onClose }) => { style={{ height: '100%' }} onError={handleError} onScan={handleScan} - facingMode='rear' + facingMode='front' /> ) : ( From bc135ac6eefbb44fd86f66a3f54dc39971f46e18 Mon Sep 17 00:00:00 2001 From: Jona Date: Tue, 29 Nov 2022 00:49:39 -0300 Subject: [PATCH 4/6] test: added different scan qr --- src/components/Modal/Send/index.jsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/Modal/Send/index.jsx b/src/components/Modal/Send/index.jsx index cd6d45e..18d178d 100644 --- a/src/components/Modal/Send/index.jsx +++ b/src/components/Modal/Send/index.jsx @@ -179,6 +179,13 @@ const Send = ({ onClose }) => { onScan={handleScan} facingMode='front' /> + ) : ( From 54b79da59b10a2b83b60b4324db8195ceff13300 Mon Sep 17 00:00:00 2001 From: Jona Date: Tue, 29 Nov 2022 02:11:22 -0300 Subject: [PATCH 5/6] fix(component): changed facing mode for environment in scan qr --- src/components/Modal/Send/index.jsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/Modal/Send/index.jsx b/src/components/Modal/Send/index.jsx index 18d178d..dd56ac0 100644 --- a/src/components/Modal/Send/index.jsx +++ b/src/components/Modal/Send/index.jsx @@ -177,14 +177,7 @@ const Send = ({ onClose }) => { style={{ height: '100%' }} onError={handleError} onScan={handleScan} - facingMode='front' - /> - ) : ( From 299d396659dd4cc4429c9b6d04b3ca01eff8b9fa Mon Sep 17 00:00:00 2001 From: Jona Date: Tue, 29 Nov 2022 00:59:48 -0300 Subject: [PATCH 6/6] style: show dashboard center o flex-start if has save mnemonic --- src/pages/dashboard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 4aa3cfd..8f2b6c9 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -93,7 +93,7 @@ const Dashboard = ({ price }) => { Wallet - Sallet - + {/* Balance */}