Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: integrated qr-scanner and react-qr-scanner #49

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
Open

chore: integrated qr-scanner and react-qr-scanner #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3672a96
chore: integrates qr-scanner and react-qr-scanner
unllamas Nov 29, 2022
4c0534b
fix(component): changed facing mode in scan qr for Send modal
unllamas Nov 29, 2022
57c5f35
fix(component): changed mode for front in Send modal
unllamas Nov 29, 2022
bc135ac
test: added different scan qr
unllamas Nov 29, 2022
54b79da
fix(component): changed facing mode for environment in scan qr
unllamas Nov 29, 2022
299d396
style: show dashboard center o flex-start if has save mnemonic
unllamas Nov 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
230 changes: 130 additions & 100 deletions src/components/Modal/Send/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -127,6 +132,16 @@ const Send = ({ onClose }) => {
setMount('');
};

const handleScan = (data) => {
if (data) {
setToAddress(data?.text);
}
};

const handleError = (err) => {
console.error(err);
};

return (
<ModalContent bg='#111' overflow='hidden'>
<Flex
Expand Down Expand Up @@ -155,115 +170,130 @@ const Send = ({ onClose }) => {
<ModalCloseButton position='relative' top='0' left='0' />
</Flex>
<ModalBody pt='20px' p='0' display='flex' w='100%' flexDirection='column'>
<Flex flexDirection='column' justifyContent='space-between' flex='1'>
<Flex
flexDirection='column'
gap='10px'
p='20px'
justifyContent={tokenSelected ? 'space-between' : 'flex-start'}
flex='1'
>
{/* Address and tokens */}
{!tokenSelected ? (
<>
<Flex gap='10px'>
<InputWithButton
placeholder='Address'
value={toAddress}
onChange={setToAddress}
onClick={setToAddress}
/>
<Box display={{ base: 'block', md: 'none' }}>
<Button color='default'>
<IconQR />
</Button>
</Box>
</Flex>
<Text opacity='.65'>
Al enviar <strong>siempre verifica</strong> que las direcciones pertenecen al ecosistema de Ethereum.
</Text>

{/* Tokens */}
<Text fontWeight='bold' mt='20px'>
Elige un token:
</Text>
<Button color='blank' onClick={() => setTokenSelected('eth')} disabled={!toAddress}>
<Flex w='100%' alignItems='center' gap='20px' backgroundColor='#1F1F1F' borderRadius='8px' p='20px'>
<Token name='ETH' token={tokens?.eth} price={totalTokensUSD?.eth} p='0' />
<ArrowRight color='#B3E0B8' />
</Flex>
</Button>
<Button color='blank' onClick={() => setTokenSelected('dai')} disabled={!toAddress}>
<Flex alignItems='center' w='100%' gap='20px' backgroundColor='#1F1F1F' borderRadius='8px' p='20px'>
<Token name='DAI' token={tokens?.dai} price={totalTokensUSD?.dai} p='0' />
<ArrowRight color='#B3E0B8' />
</Flex>
</Button>
</>
) : (
<>
<Box>
<Flex w='100%' justifyContent='space-between' alignItems='center'>
<AddressBox title='Destino' address={toAddress} />
<Button size='sm' onClick={handleChangeAddress}>
Cambiar
</Button>
{openScanQR && !toAddress ? (
<Box h='100%' flex='1' objectFit='fill'>
<QrReader
delay={100}
style={{ height: '100%' }}
onError={handleError}
onScan={handleScan}
facingMode='environment'
/>
</Box>
) : (
<Flex flexDirection='column' justifyContent='space-between' flex='1'>
<Flex
flexDirection='column'
gap='10px'
p='20px'
justifyContent={tokenSelected ? 'space-between' : 'flex-start'}
flex='1'
>
{/* Address and tokens */}
{!tokenSelected ? (
<>
<Flex gap='10px'>
<InputWithButton
placeholder='Address'
value={toAddress}
onChange={setToAddress}
onClick={setToAddress}
/>
{QrScanner?.hasCamera() && (
<Box>
<Button color='default' onClick={() => setOpenScanQR(true)} disabled={toAddress}>
<IconQR />
</Button>
</Box>
)}
</Flex>
<Text opacity='.65'>
Al enviar <strong>siempre verifica</strong> que las direcciones pertenecen al ecosistema de
Ethereum.
</Text>

<Box mt='20px'>
<Text size='sm'>Monto</Text>
<Flex gap='10px' mt='4px'>
<Button color='default' fontSize='12px' disabled={true}>
Max
{/* Tokens */}
<Text fontWeight='bold' mt='20px'>
Elige un token:
</Text>
<Button color='blank' onClick={() => setTokenSelected('eth')} disabled={!toAddress}>
<Flex w='100%' alignItems='center' gap='20px' backgroundColor='#1F1F1F' borderRadius='8px' p='20px'>
<Token name='ETH' token={tokens?.eth} price={totalTokensUSD?.eth} p='0' />
<ArrowRight color='#B3E0B8' />
</Flex>
</Button>
<Button color='blank' onClick={() => setTokenSelected('dai')} disabled={!toAddress}>
<Flex alignItems='center' w='100%' gap='20px' backgroundColor='#1F1F1F' borderRadius='8px' p='20px'>
<Token name='DAI' token={tokens?.dai} price={totalTokensUSD?.dai} p='0' />
<ArrowRight color='#B3E0B8' />
</Flex>
</Button>
</>
) : (
<>
<Box>
<Flex w='100%' justifyContent='space-between' alignItems='center'>
<AddressBox title='Destino' address={toAddress} />
<Button size='sm' onClick={handleChangeAddress}>
Cambiar
</Button>
<InputWithToken value={mount} onChange={(e) => setMount(e.target.value)} />
</Flex>
</Box>
</Box>

{/* Gas fee */}
<Flex justifyContent='space-between' mt='20px'>
<VStack>
<Flex gap='8px' w='100%'>
<IconGas />
<Text fontWeight='bold'>Gas</Text>
</Flex>
<Text size='sm' mt='0 !important'>
Comisión de red
</Text>
</VStack>
<Box textAlign='right'>
<Text fontWeight='bold'>${Number(gasPrice) * price?.eth || '0.00'}</Text>
<Text size='sm'>{Number(gasPrice).toFixed(7) || '0.00'} ETH</Text>
<Box mt='20px'>
<Text size='sm'>Monto</Text>
<Flex gap='10px' mt='4px'>
<Button color='default' fontSize='12px' disabled={true}>
Max
</Button>
<InputWithToken value={mount} onChange={(e) => setMount(e.target.value)} />
</Flex>
</Box>
</Box>

{/* Gas fee */}
<Flex justifyContent='space-between' mt='20px'>
<VStack>
<Flex gap='8px' w='100%'>
<IconGas />
<Text fontWeight='bold'>Gas</Text>
</Flex>
<Text size='sm' mt='0 !important'>
Comisión de red
</Text>
</VStack>
<Box textAlign='right'>
<Text fontWeight='bold'>${Number(gasPrice) * price?.eth || '0.00'}</Text>
<Text size='sm'>{Number(gasPrice).toFixed(7) || '0.00'} ETH</Text>
</Box>
</Flex>
</>
)}
</Flex>

{/* Total */}
{tokenSelected && (
<VStack p='20px 20px' gap='20px' bgImage='url(./background-send.png)' bgSize='cover'>
<Flex w='100%' justifyContent='space-between'>
<Text fontWeight='bold'>Total</Text>
<Text fontWeight='bold'>
${(Number(mount) * price.dai.usd + Number(gasPrice) * price[tokenSelected].usd).toFixed(2)}
</Text>
</Flex>
</>

<Box w='100%'>
<Button
isBlock
type='secondary'
onClick={() => handleSendTransaction()}
disabled={loading || !mount || !toAddress}
>
{loading ? <Spinner /> : 'Enviar'}
</Button>
</Box>
</VStack>
)}
</Flex>

{/* Total */}
{tokenSelected && (
<VStack p='20px 20px' gap='20px' bgImage='url(./background-send.png)' bgSize='cover'>
<Flex w='100%' justifyContent='space-between'>
<Text fontWeight='bold'>Total</Text>
<Text fontWeight='bold'>
${(Number(mount) * price.dai.usd + Number(gasPrice) * price[tokenSelected].usd).toFixed(2)}
</Text>
</Flex>

<Box w='100%'>
<Button
isBlock
type='secondary'
onClick={() => handleSendTransaction()}
disabled={loading || !mount || !toAddress}
>
{loading ? <Spinner /> : 'Enviar'}
</Button>
</Box>
</VStack>
)}
</Flex>
)}
</ModalBody>
</ModalContent>
);
Expand Down
6 changes: 4 additions & 2 deletions src/hooks/useTruncatedAddress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
2 changes: 1 addition & 1 deletion src/pages/dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ const Dashboard = ({ price }) => {
<Head>
<title>Wallet - Sallet</title>
</Head>
<VStack h='100%' justifyContent={'center'} alignItems={'center'} pt='20px'>
<VStack h='100%' justifyContent={hasSaveMnemonic ? 'center' : 'flex-start'} alignItems={'center'} pt='20px'>
<Container w='100%' justifyContent='center' maxW={'md'} px='20px'>
{/* Balance */}
<Flex flexDirection={{ base: 'column', md: 'row' }} alignItems='center' justifyContent='center'>
Expand Down