From 9712a2ee36a2d78e94bd7d70032f235b34f6effd Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Fri, 3 Dec 2021 22:32:04 +0100 Subject: [PATCH 01/24] initial skeleton of the TokenBalance component --- .../components/TokenBalance/TokenBalance.stories.tsx | 7 +++++++ .../src/components/TokenBalance/TokenBalance.tsx | 12 ++++++++++++ .../components/src/components/TokenBalance/index.ts | 1 + packages/components/src/components/index.ts | 1 + 4 files changed, 21 insertions(+) create mode 100644 packages/components/src/components/TokenBalance/TokenBalance.stories.tsx create mode 100644 packages/components/src/components/TokenBalance/TokenBalance.tsx create mode 100644 packages/components/src/components/TokenBalance/index.ts diff --git a/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx b/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx new file mode 100644 index 00000000..d9ab19e6 --- /dev/null +++ b/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx @@ -0,0 +1,7 @@ +import { storiesOf } from '@storybook/react'; +import React from 'react'; +import { TokenBalance } from './TokenBalance'; + +storiesOf('TokenBalance', module).add('Renders the balance of a certain token', () => ( + +)); diff --git a/packages/components/src/components/TokenBalance/TokenBalance.tsx b/packages/components/src/components/TokenBalance/TokenBalance.tsx new file mode 100644 index 00000000..403fae73 --- /dev/null +++ b/packages/components/src/components/TokenBalance/TokenBalance.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Box } from '@chakra-ui/react'; + +export interface TokenBalanceProps {} + +export const TokenBalance = ({}: TokenBalanceProps) => { + return ( + +

Hello Balance

+
+ ); +}; diff --git a/packages/components/src/components/TokenBalance/index.ts b/packages/components/src/components/TokenBalance/index.ts new file mode 100644 index 00000000..a9ba95aa --- /dev/null +++ b/packages/components/src/components/TokenBalance/index.ts @@ -0,0 +1 @@ +export * from './TokenBalance'; diff --git a/packages/components/src/components/index.ts b/packages/components/src/components/index.ts index df6398fc..ee5cabf3 100644 --- a/packages/components/src/components/index.ts +++ b/packages/components/src/components/index.ts @@ -3,3 +3,4 @@ export * from './Provider'; export * from './Address'; export * from './NFTGallery'; +export * from './TokenBalance'; From 7c843ab6226dd694c525f1f1df48e874911c68df Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Sat, 4 Dec 2021 22:21:49 +0100 Subject: [PATCH 02/24] first prototype of TokenBalance component --- .../TokenBalance/TokenBalance.stories.tsx | 16 +- .../components/TokenBalance/TokenBalance.tsx | 74 +++++- .../TokenBalance/WalletContextTestWrapper.tsx | 13 + .../TokenBalance/components/Logo.tsx | 11 + .../src/components/TokenBalance/erc.json | 222 ++++++++++++++++++ 5 files changed, 327 insertions(+), 9 deletions(-) create mode 100644 packages/components/src/components/TokenBalance/WalletContextTestWrapper.tsx create mode 100644 packages/components/src/components/TokenBalance/components/Logo.tsx create mode 100644 packages/components/src/components/TokenBalance/erc.json diff --git a/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx b/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx index d9ab19e6..914bb772 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx @@ -1,7 +1,19 @@ import { storiesOf } from '@storybook/react'; +import { Provider } from '@web3-ui/hooks'; import React from 'react'; -import { TokenBalance } from './TokenBalance'; +import { TokenBalance, TokenBalanceProps } from './TokenBalance'; +import { WalletContextTestWrapper } from './WalletContextTestWrapper'; + +const exampleProps: TokenBalanceProps = { + value: 0.9955, + name: 'Dai Stablecoin', + symbol: 'Dai', + owner: '0x503828976D22510aad0201ac7EC88293211D23Da', + address: '0x6B175474E89094C44Da98b954EedeAC495271d0F', +}; storiesOf('TokenBalance', module).add('Renders the balance of a certain token', () => ( - + + } /> + )); diff --git a/packages/components/src/components/TokenBalance/TokenBalance.tsx b/packages/components/src/components/TokenBalance/TokenBalance.tsx index 403fae73..b5b12b03 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.tsx @@ -1,12 +1,72 @@ -import React from 'react'; -import { Box } from '@chakra-ui/react'; +import React, { useContext, useEffect, useState } from 'react'; +import { Box, Flex, Heading } from '@chakra-ui/react'; +import { Logo, TokenLogo } from './components/Logo'; +import { useWallet, Web3Context } from '@web3-ui/hooks/src'; +import { ethers } from 'ethers'; +import ERC20 from './erc.json'; -export interface TokenBalanceProps {} +export interface TokenBalanceProps { + name: string; + symbol: string; + address: string; + owner: string; + value: number; + imgUrl?: string | undefined; +} + +export const TokenBalance = (props: TokenBalanceProps) => { + const { name, symbol, address, owner, value, imgUrl } = props; + const Headline = (name: string) => ( + + {name} + + ); + + const { connectWallet } = useWallet(); + + const { provider } = useContext(Web3Context); + + const [balance, setBalance] = useState(0); + + const getBalance = async () => { + if (provider === undefined) { + return; + } + const contract = new ethers.Contract(address, ERC20, provider); + const balanceFuture = contract.balanceOf(owner); + const decimalsFuture = contract.decimals(); + + const [resolvedBalance, resolvedDecimals] = await Promise.all([balanceFuture, decimalsFuture]); + + const balanceAsNumber = Number.parseInt(resolvedBalance); + const displayBalance = (balanceAsNumber / 10 ** resolvedDecimals).toFixed(3); + + setBalance(displayBalance); + }; + + useEffect(() => { + (async () => { + await getBalance(); + })(); + }, []); -export const TokenBalance = ({}: TokenBalanceProps) => { return ( - -

Hello Balance

-
+ + + + + + {Headline(symbol)} +

{name}

+
+ + {Headline('Balance')} +

{balance}

+
+ + {Headline('Value')} +

{(balance * value).toFixed(3)}

+
+
); }; diff --git a/packages/components/src/components/TokenBalance/WalletContextTestWrapper.tsx b/packages/components/src/components/TokenBalance/WalletContextTestWrapper.tsx new file mode 100644 index 00000000..16935d0a --- /dev/null +++ b/packages/components/src/components/TokenBalance/WalletContextTestWrapper.tsx @@ -0,0 +1,13 @@ +import React, { ReactComponentElement, useContext } from 'react'; +import { Button } from '@chakra-ui/react'; +import { Web3Context } from '@web3-ui/hooks/src'; +import { Provider } from '../Provider'; + +interface WalletContextTestWrapperProps { + child: JSX.Element; +} + +export const WalletContextTestWrapper = ({ child }: WalletContextTestWrapperProps): JSX.Element => { + const { connected, connectWallet } = useContext(Web3Context); + return !connected ? : child; +}; diff --git a/packages/components/src/components/TokenBalance/components/Logo.tsx b/packages/components/src/components/TokenBalance/components/Logo.tsx new file mode 100644 index 00000000..89e130c5 --- /dev/null +++ b/packages/components/src/components/TokenBalance/components/Logo.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Image } from '@chakra-ui/react'; + +export const TokenLogo = ({ tokenContractAddress }) => ( + +); + +//i.E. Dai +//https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png diff --git a/packages/components/src/components/TokenBalance/erc.json b/packages/components/src/components/TokenBalance/erc.json new file mode 100644 index 00000000..405d6b36 --- /dev/null +++ b/packages/components/src/components/TokenBalance/erc.json @@ -0,0 +1,222 @@ +[ + { + "constant": true, + "inputs": [], + "name": "name", + "outputs": [ + { + "name": "", + "type": "string" + } + ], + "payable": false, + "stateMutability": "view", + "type": "function" + }, + { + "constant": false, + "inputs": [ + { + "name": "_spender", + "type": "address" + }, + { + "name": "_value", + "type": "uint256" + } + ], + "name": "approve", + "outputs": [ + { + "name": "", + "type": "bool" + } + ], + "payable": false, + "stateMutability": "nonpayable", + "type": "function" + }, + { + "constant": true, + "inputs": [], + "name": "totalSupply", + "outputs": [ + { + "name": "", + "type": "uint256" + } + ], + "payable": false, + "stateMutability": "view", + "type": "function" + }, + { + "constant": false, + "inputs": [ + { + "name": "_from", + "type": "address" + }, + { + "name": "_to", + "type": "address" + }, + { + "name": "_value", + "type": "uint256" + } + ], + "name": "transferFrom", + "outputs": [ + { + "name": "", + "type": "bool" + } + ], + "payable": false, + "stateMutability": "nonpayable", + "type": "function" + }, + { + "constant": true, + "inputs": [], + "name": "decimals", + "outputs": [ + { + "name": "", + "type": "uint8" + } + ], + "payable": false, + "stateMutability": "view", + "type": "function" + }, + { + "constant": true, + "inputs": [ + { + "name": "_owner", + "type": "address" + } + ], + "name": "balanceOf", + "outputs": [ + { + "name": "balance", + "type": "uint256" + } + ], + "payable": false, + "stateMutability": "view", + "type": "function" + }, + { + "constant": true, + "inputs": [], + "name": "symbol", + "outputs": [ + { + "name": "", + "type": "string" + } + ], + "payable": false, + "stateMutability": "view", + "type": "function" + }, + { + "constant": false, + "inputs": [ + { + "name": "_to", + "type": "address" + }, + { + "name": "_value", + "type": "uint256" + } + ], + "name": "transfer", + "outputs": [ + { + "name": "", + "type": "bool" + } + ], + "payable": false, + "stateMutability": "nonpayable", + "type": "function" + }, + { + "constant": true, + "inputs": [ + { + "name": "_owner", + "type": "address" + }, + { + "name": "_spender", + "type": "address" + } + ], + "name": "allowance", + "outputs": [ + { + "name": "", + "type": "uint256" + } + ], + "payable": false, + "stateMutability": "view", + "type": "function" + }, + { + "payable": true, + "stateMutability": "payable", + "type": "fallback" + }, + { + "anonymous": false, + "inputs": [ + { + "indexed": true, + "name": "owner", + "type": "address" + }, + { + "indexed": true, + "name": "spender", + "type": "address" + }, + { + "indexed": false, + "name": "value", + "type": "uint256" + } + ], + "name": "Approval", + "type": "event" + }, + { + "anonymous": false, + "inputs": [ + { + "indexed": true, + "name": "from", + "type": "address" + }, + { + "indexed": true, + "name": "to", + "type": "address" + }, + { + "indexed": false, + "name": "value", + "type": "uint256" + } + ], + "name": "Transfer", + "type": "event" + } +] From 065c576e30884a8775211c69f782eca3a78a6c51 Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Sun, 12 Dec 2021 15:20:55 +0100 Subject: [PATCH 03/24] use useTokenBalance hook to determine token balance --- .../components/TokenBalance/TokenBalance.tsx | 53 +++++++------------ 1 file changed, 19 insertions(+), 34 deletions(-) diff --git a/packages/components/src/components/TokenBalance/TokenBalance.tsx b/packages/components/src/components/TokenBalance/TokenBalance.tsx index b5b12b03..ea5257f7 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.tsx @@ -1,71 +1,56 @@ -import React, { useContext, useEffect, useState } from 'react'; +import React from 'react'; import { Box, Flex, Heading } from '@chakra-ui/react'; -import { Logo, TokenLogo } from './components/Logo'; -import { useWallet, Web3Context } from '@web3-ui/hooks/src'; -import { ethers } from 'ethers'; -import ERC20 from './erc.json'; +import { TokenLogo } from './components/Logo'; +import { useTokenBalance } from '@web3-ui/hooks/src'; export interface TokenBalanceProps { name: string; symbol: string; - address: string; - owner: string; + tokenAddress: string; + accountAddress: string; value: number; imgUrl?: string | undefined; } export const TokenBalance = (props: TokenBalanceProps) => { - const { name, symbol, address, owner, value, imgUrl } = props; + const { name, symbol, tokenAddress, accountAddress, value, imgUrl } = props; const Headline = (name: string) => ( {name} ); - const { connectWallet } = useWallet(); + const { balance, decimals } = useTokenBalance({ tokenAddress, accountAddress }); - const { provider } = useContext(Web3Context); - - const [balance, setBalance] = useState(0); - - const getBalance = async () => { - if (provider === undefined) { - return; + const calcBalance = () => { + if (balance === undefined || decimals === undefined) { + return 0; } - const contract = new ethers.Contract(address, ERC20, provider); - const balanceFuture = contract.balanceOf(owner); - const decimalsFuture = contract.decimals(); - - const [resolvedBalance, resolvedDecimals] = await Promise.all([balanceFuture, decimalsFuture]); + return Number.parseFloat((Number.parseInt(balance) / 10 ** decimals).toFixed(3)); + }; - const balanceAsNumber = Number.parseInt(resolvedBalance); - const displayBalance = (balanceAsNumber / 10 ** resolvedDecimals).toFixed(3); + const calcValue = () => { + const balance = calcBalance(); - setBalance(displayBalance); + return (balance * value).toFixed(3); }; - useEffect(() => { - (async () => { - await getBalance(); - })(); - }, []); - return ( - + - + {Headline(symbol)}

{name}

{Headline('Balance')} -

{balance}

+

{calcBalance()}

{Headline('Value')} -

{(balance * value).toFixed(3)}

+

{calcValue()}

); From 672bba0dc57fbe970cf43056c7d7c0dda38f533a Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Sun, 12 Dec 2021 15:25:25 +0100 Subject: [PATCH 04/24] add the ability to use own image by passing imageUrl --- .../components/src/components/TokenBalance/TokenBalance.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/TokenBalance/TokenBalance.tsx b/packages/components/src/components/TokenBalance/TokenBalance.tsx index ea5257f7..5f2704a9 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Flex, Heading } from '@chakra-ui/react'; +import { Box, Flex, Heading, Image } from '@chakra-ui/react'; import { TokenLogo } from './components/Logo'; import { useTokenBalance } from '@web3-ui/hooks/src'; @@ -38,7 +38,7 @@ export const TokenBalance = (props: TokenBalanceProps) => { return ( - + {imgUrl ? : } {Headline(symbol)} From 242062600f148a806b51f5fe4548be75e4c5dfa3 Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Sun, 12 Dec 2021 20:48:58 +0100 Subject: [PATCH 05/24] fetch name and symbol from contract --- .../TokenBalance/TokenBalance.stories.tsx | 27 +++++++----- .../components/TokenBalance/TokenBalance.tsx | 41 ++++++++++++++----- .../TokenBalance/WalletContextTestWrapper.tsx | 13 ------ 3 files changed, 47 insertions(+), 34 deletions(-) delete mode 100644 packages/components/src/components/TokenBalance/WalletContextTestWrapper.tsx diff --git a/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx b/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx index 914bb772..47d7b03e 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx @@ -1,19 +1,26 @@ -import { storiesOf } from '@storybook/react'; -import { Provider } from '@web3-ui/hooks'; -import React from 'react'; +import { Provider, Web3Context } from '@web3-ui/hooks'; +import React, { useContext } from 'react'; import { TokenBalance, TokenBalanceProps } from './TokenBalance'; -import { WalletContextTestWrapper } from './WalletContextTestWrapper'; +import { Button } from '@chakra-ui/react'; const exampleProps: TokenBalanceProps = { value: 0.9955, - name: 'Dai Stablecoin', - symbol: 'Dai', - owner: '0x503828976D22510aad0201ac7EC88293211D23Da', - address: '0x6B175474E89094C44Da98b954EedeAC495271d0F', + accountAddress: '0x503828976D22510aad0201ac7EC88293211D23Da', + tokenAddress: '0x6B175474E89094C44Da98b954EedeAC495271d0F', }; -storiesOf('TokenBalance', module).add('Renders the balance of a certain token', () => ( +export const TokeBalance = () => ( } /> -)); +); + +export default { + title: 'Components/TokenBalance', + component: TokenBalance, +}; + +const WalletContextTestWrapper = ({ child }): JSX.Element => { + const { connected, connectWallet } = useContext(Web3Context); + return !connected ? : child; +}; diff --git a/packages/components/src/components/TokenBalance/TokenBalance.tsx b/packages/components/src/components/TokenBalance/TokenBalance.tsx index 5f2704a9..fdba72e9 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.tsx @@ -1,11 +1,11 @@ -import React from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import { Box, Flex, Heading, Image } from '@chakra-ui/react'; import { TokenLogo } from './components/Logo'; -import { useTokenBalance } from '@web3-ui/hooks/src'; +import { useTokenBalance, Web3Context } from '@web3-ui/hooks/src'; +import { ethers } from 'ethers'; +import { ERC20ABI } from '@web3-ui/hooks/src/constants'; export interface TokenBalanceProps { - name: string; - symbol: string; tokenAddress: string; accountAddress: string; value: number; @@ -13,15 +13,20 @@ export interface TokenBalanceProps { } export const TokenBalance = (props: TokenBalanceProps) => { - const { name, symbol, tokenAddress, accountAddress, value, imgUrl } = props; - const Headline = (name: string) => ( - - {name} - - ); + const { tokenAddress, accountAddress, value, imgUrl } = props; + + const web3Context = useContext(Web3Context); + const provider = web3Context?.provider; + + const [name, setName] = useState(''); + const [symbol, setSymbol] = useState(''); const { balance, decimals } = useTokenBalance({ tokenAddress, accountAddress }); + useEffect(() => { + getTokenNameAndSymbol(); + }, []); + const calcBalance = () => { if (balance === undefined || decimals === undefined) { return 0; @@ -31,10 +36,24 @@ export const TokenBalance = (props: TokenBalanceProps) => { const calcValue = () => { const balance = calcBalance(); - return (balance * value).toFixed(3); }; + const getTokenNameAndSymbol = async () => { + const contract = new ethers.Contract(tokenAddress, ERC20ABI, provider!); + const name = await contract.name(); + const symbol = await contract.symbol(); + + setName(name); + setSymbol(symbol); + }; + + const Headline = (name: string) => ( + + {name} + + ); + return ( diff --git a/packages/components/src/components/TokenBalance/WalletContextTestWrapper.tsx b/packages/components/src/components/TokenBalance/WalletContextTestWrapper.tsx deleted file mode 100644 index 16935d0a..00000000 --- a/packages/components/src/components/TokenBalance/WalletContextTestWrapper.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, { ReactComponentElement, useContext } from 'react'; -import { Button } from '@chakra-ui/react'; -import { Web3Context } from '@web3-ui/hooks/src'; -import { Provider } from '../Provider'; - -interface WalletContextTestWrapperProps { - child: JSX.Element; -} - -export const WalletContextTestWrapper = ({ child }: WalletContextTestWrapperProps): JSX.Element => { - const { connected, connectWallet } = useContext(Web3Context); - return !connected ? : child; -}; From c650fb77e45ee16bc646b92e6ac88967451dac2d Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Sun, 12 Dec 2021 20:56:27 +0100 Subject: [PATCH 06/24] add documentation --- .../TokenBalance/TokenBalance.stories.tsx | 10 +++++----- .../components/TokenBalance/TokenBalance.tsx | 18 ++++++++++++++++-- 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx b/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx index 47d7b03e..65c2f268 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx @@ -3,6 +3,11 @@ import React, { useContext } from 'react'; import { TokenBalance, TokenBalanceProps } from './TokenBalance'; import { Button } from '@chakra-ui/react'; +export default { + title: 'Components/TokenBalance', + component: TokenBalance, +}; + const exampleProps: TokenBalanceProps = { value: 0.9955, accountAddress: '0x503828976D22510aad0201ac7EC88293211D23Da', @@ -15,11 +20,6 @@ export const TokeBalance = () => ( ); -export default { - title: 'Components/TokenBalance', - component: TokenBalance, -}; - const WalletContextTestWrapper = ({ child }): JSX.Element => { const { connected, connectWallet } = useContext(Web3Context); return !connected ? : child; diff --git a/packages/components/src/components/TokenBalance/TokenBalance.tsx b/packages/components/src/components/TokenBalance/TokenBalance.tsx index fdba72e9..5c6a79ca 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.tsx @@ -6,9 +6,21 @@ import { ethers } from 'ethers'; import { ERC20ABI } from '@web3-ui/hooks/src/constants'; export interface TokenBalanceProps { + /** + * The contract address of the ERC20 Token + */ tokenAddress: string; + /** + * The owners address + */ accountAddress: string; + /** + * The value of one token in USD + */ value: number; + /** + * Image of the token (optional) + */ imgUrl?: string | undefined; } @@ -27,18 +39,20 @@ export const TokenBalance = (props: TokenBalanceProps) => { getTokenNameAndSymbol(); }, []); + //Just display the first 3 decimal places of the balance const calcBalance = () => { if (balance === undefined || decimals === undefined) { return 0; } return Number.parseFloat((Number.parseInt(balance) / 10 ** decimals).toFixed(3)); }; - + //Just display the first 3 decimal places of the value const calcValue = () => { const balance = calcBalance(); return (balance * value).toFixed(3); }; - + //Fetch name and symbol from the smart contract + //Maybe it would make sense to provide them as props to avoid loading time ? const getTokenNameAndSymbol = async () => { const contract = new ethers.Contract(tokenAddress, ERC20ABI, provider!); const name = await contract.name(); From 911f8d6a4c08123e0eeac2a02c3ba1212c40eacc Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Sun, 12 Dec 2021 20:58:48 +0100 Subject: [PATCH 07/24] add story for invalid contract --- .../src/components/TokenBalance/TokenBalance.stories.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx b/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx index 65c2f268..04e1dc82 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx @@ -20,6 +20,12 @@ export const TokeBalance = () => ( ); +export const InvalidContract = () => ( + + } /> + +); + const WalletContextTestWrapper = ({ child }): JSX.Element => { const { connected, connectWallet } = useContext(Web3Context); return !connected ? : child; From 2ed6ea1faef5521beb021ad6c381ddf329dda43c Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Mon, 13 Dec 2021 22:23:04 +0100 Subject: [PATCH 08/24] added the web-ui hooks components to dependencies --- package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package.json b/package.json index 6caf01ed..c15b1880 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,9 @@ "msw": "^0.35.0", "ts-jest": "^26.4.4" }, + "dependencies": { + "@web3-ui/hooks": "0.1.0" + }, "lint-staged": { "*.{ts,tsx,json,js,jsx}": "yarn format" }, From c2d16df46df1b91ef60e6ed8c9986c6e257d84e1 Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Tue, 14 Dec 2021 09:44:49 +0100 Subject: [PATCH 09/24] add web3-ui/hooks as a peerDependency --- package.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 3142521d..a822456f 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,10 @@ "ts-jest": "^26.4.4" }, "dependencies": { - "@web3-ui/hooks": "0.1.0" + "@web3-ui/hooks": "0.4.0" + }, + "peerDependencies": { + "@web3-ui/hooks": "0.4.0" }, "lint-staged": { "*.{ts,tsx,json,js,jsx}": "yarn format" From ff091bd6968d46f18844df1126021d73a1f0f9cc Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Tue, 14 Dec 2021 09:58:53 +0100 Subject: [PATCH 10/24] move Headline to its own component --- .../src/components/TokenBalance/TokenBalance.tsx | 7 +------ .../src/components/TokenBalance/components/Headline.tsx | 8 ++++++++ 2 files changed, 9 insertions(+), 6 deletions(-) create mode 100644 packages/components/src/components/TokenBalance/components/Headline.tsx diff --git a/packages/components/src/components/TokenBalance/TokenBalance.tsx b/packages/components/src/components/TokenBalance/TokenBalance.tsx index 5c6a79ca..b3840f57 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.tsx @@ -4,6 +4,7 @@ import { TokenLogo } from './components/Logo'; import { useTokenBalance, Web3Context } from '@web3-ui/hooks/src'; import { ethers } from 'ethers'; import { ERC20ABI } from '@web3-ui/hooks/src/constants'; +import { Headline } from './components/Headline'; export interface TokenBalanceProps { /** @@ -62,12 +63,6 @@ export const TokenBalance = (props: TokenBalanceProps) => { setSymbol(symbol); }; - const Headline = (name: string) => ( - - {name} - - ); - return ( diff --git a/packages/components/src/components/TokenBalance/components/Headline.tsx b/packages/components/src/components/TokenBalance/components/Headline.tsx new file mode 100644 index 00000000..d31f8b11 --- /dev/null +++ b/packages/components/src/components/TokenBalance/components/Headline.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { Heading } from '@chakra-ui/react'; + +export const Headline = (name: string) => ( + + {name} + +); From d527562266f52c9f7d05c70939888074e2a28676 Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Tue, 14 Dec 2021 10:17:07 +0100 Subject: [PATCH 11/24] fixed cross module imports --- .changeset/config.json | 7 ++++++- .../src/components/TokenBalance/TokenBalance.tsx | 14 +++++++------- packages/hooks/src/index.ts | 10 +++++----- 3 files changed, 18 insertions(+), 13 deletions(-) diff --git a/.changeset/config.json b/.changeset/config.json index b3616f67..a4578266 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -1,6 +1,11 @@ { "$schema": "https://unpkg.com/@changesets/config@1.6.3/schema.json", - "changelog": ["@changesets/changelog-github", { "repo": "Developer-DAO/web3-ui" }], + "changelog": [ + "@changesets/changelog-github", + { + "repo": "Developer-DAO/web3-ui" + } + ], "commit": false, "linked": [], "access": "public", diff --git a/packages/components/src/components/TokenBalance/TokenBalance.tsx b/packages/components/src/components/TokenBalance/TokenBalance.tsx index b3840f57..4957b388 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.tsx @@ -1,10 +1,10 @@ -import React, { useContext, useEffect, useState } from 'react'; -import { Box, Flex, Heading, Image } from '@chakra-ui/react'; -import { TokenLogo } from './components/Logo'; -import { useTokenBalance, Web3Context } from '@web3-ui/hooks/src'; -import { ethers } from 'ethers'; -import { ERC20ABI } from '@web3-ui/hooks/src/constants'; -import { Headline } from './components/Headline'; +import React, {useContext, useEffect, useState} from 'react'; +import {Box, Flex, Image} from '@chakra-ui/react'; +import {TokenLogo} from './components/Logo'; +import {useTokenBalance, Web3Context} from '@web3-ui/hooks'; +import {ethers} from 'ethers'; +import {ERC20ABI} from '@web3-ui/hooks'; +import {Headline} from './components/Headline'; export interface TokenBalanceProps { /** diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index 91c386a3..3710dd3d 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -1,5 +1,5 @@ -export { useWallet, useContract } from './hooks'; -export { useTokenBalance } from './hooks/useTokenBalance'; -export { Provider, Web3Context } from './Provider'; -export type { ProviderProps, Web3ContextType } from './Provider'; -export { NETWORKS, CHAIN_ID_TO_NETWORK } from './constants'; +export {useWallet, useContract} from './hooks'; +export {useTokenBalance} from './hooks/useTokenBalance'; +export {Provider, Web3Context} from './Provider'; +export type {ProviderProps, Web3ContextType} from './Provider'; +export {NETWORKS, CHAIN_ID_TO_NETWORK, ERC20ABI} from './constants'; From 8161bd0e750b4e3017ef3ac2f25fbabf7c63dc56 Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Tue, 14 Dec 2021 10:19:24 +0100 Subject: [PATCH 12/24] get rid of @web3-ui/hooks in /components/package.json --- package.json | 6 ------ 1 file changed, 6 deletions(-) diff --git a/package.json b/package.json index a822456f..9a890eaf 100644 --- a/package.json +++ b/package.json @@ -46,12 +46,6 @@ "msw": "^0.35.0", "ts-jest": "^26.4.4" }, - "dependencies": { - "@web3-ui/hooks": "0.4.0" - }, - "peerDependencies": { - "@web3-ui/hooks": "0.4.0" - }, "lint-staged": { "*.{ts,tsx,json,js,jsx}": "yarn format" }, From 89e25f50a09cc760abc5a1d25992d049f45742b6 Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Tue, 14 Dec 2021 11:20:25 +0100 Subject: [PATCH 13/24] added "@web3-ui/hooks" as a regular dependency --- packages/components/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/package.json b/packages/components/package.json index ce94a217..77e31b84 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -28,6 +28,7 @@ "module": "dist/web3-ui-components.esm.js", "types": "dist/web3-ui-components.cjs.d.ts", "dependencies": { + "@web3-ui/hooks": "0.4.0", "@babel/runtime": "^7.16.3", "@chakra-ui/react": "^1.7.2", "@emotion/core": "^11.0.0", From 6df87705161340a353274d266757d48afe92ecff Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Tue, 14 Dec 2021 11:41:59 +0100 Subject: [PATCH 14/24] added changeset file --- .changeset/selfish-flies-care.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/selfish-flies-care.md diff --git a/.changeset/selfish-flies-care.md b/.changeset/selfish-flies-care.md new file mode 100644 index 00000000..789b24a0 --- /dev/null +++ b/.changeset/selfish-flies-care.md @@ -0,0 +1,6 @@ +--- +'@web3-ui/components': minor +'@web3-ui/hooks': minor +--- + +Added token-balance component to display the users amount of a certain ERC20 token From 965f3f7437f29d52c364aa4d941b3ecd1a5abb8e Mon Sep 17 00:00:00 2001 From: Alex Date: Tue, 14 Dec 2021 20:56:17 +0100 Subject: [PATCH 15/24] Update packages/components/src/components/TokenBalance/TokenBalance.tsx Yes, you're right I really like this pattern :) Co-authored-by: Jovi De Croock --- .../components/src/components/TokenBalance/TokenBalance.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/src/components/TokenBalance/TokenBalance.tsx b/packages/components/src/components/TokenBalance/TokenBalance.tsx index 4957b388..92f1f3e5 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.tsx @@ -56,8 +56,7 @@ export const TokenBalance = (props: TokenBalanceProps) => { //Maybe it would make sense to provide them as props to avoid loading time ? const getTokenNameAndSymbol = async () => { const contract = new ethers.Contract(tokenAddress, ERC20ABI, provider!); - const name = await contract.name(); - const symbol = await contract.symbol(); + const [name, symbol] = await Promise.all([contract.name(), contract.symbol()]); setName(name); setSymbol(symbol); From e912a930bc0764f3df6e7984bb43734b120af110 Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Wed, 15 Dec 2021 20:57:21 +0100 Subject: [PATCH 16/24] move logo and headline back to TokenBalance Component --- .../components/TokenBalance/TokenBalance.tsx | 26 ++++++++++++++----- .../TokenBalance/components/Headline.tsx | 8 ------ .../TokenBalance/components/Logo.tsx | 11 -------- 3 files changed, 19 insertions(+), 26 deletions(-) delete mode 100644 packages/components/src/components/TokenBalance/components/Headline.tsx delete mode 100644 packages/components/src/components/TokenBalance/components/Logo.tsx diff --git a/packages/components/src/components/TokenBalance/TokenBalance.tsx b/packages/components/src/components/TokenBalance/TokenBalance.tsx index 92f1f3e5..db2dc5eb 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.tsx @@ -1,10 +1,10 @@ -import React, {useContext, useEffect, useState} from 'react'; -import {Box, Flex, Image} from '@chakra-ui/react'; -import {TokenLogo} from './components/Logo'; -import {useTokenBalance, Web3Context} from '@web3-ui/hooks'; -import {ethers} from 'ethers'; -import {ERC20ABI} from '@web3-ui/hooks'; -import {Headline} from './components/Headline'; +import React, { useContext, useEffect, useState } from 'react'; +import { Box, Flex, Heading, Image } from '@chakra-ui/react'; +import { TokenLogo } from './components/Logo'; +import { useTokenBalance, Web3Context } from '@web3-ui/hooks'; +import { ethers } from 'ethers'; +import { ERC20ABI } from '@web3-ui/hooks'; +import { Headline } from './components/Headline'; export interface TokenBalanceProps { /** @@ -62,6 +62,18 @@ export const TokenBalance = (props: TokenBalanceProps) => { setSymbol(symbol); }; + const Headline = (name: string) => ( + + {name} + + ); + + const TokenLogo = ({ tokenContractAddress }) => ( + + ); + return ( diff --git a/packages/components/src/components/TokenBalance/components/Headline.tsx b/packages/components/src/components/TokenBalance/components/Headline.tsx deleted file mode 100644 index d31f8b11..00000000 --- a/packages/components/src/components/TokenBalance/components/Headline.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { Heading } from '@chakra-ui/react'; - -export const Headline = (name: string) => ( - - {name} - -); diff --git a/packages/components/src/components/TokenBalance/components/Logo.tsx b/packages/components/src/components/TokenBalance/components/Logo.tsx deleted file mode 100644 index 89e130c5..00000000 --- a/packages/components/src/components/TokenBalance/components/Logo.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { Image } from '@chakra-ui/react'; - -export const TokenLogo = ({ tokenContractAddress }) => ( - -); - -//i.E. Dai -//https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png From 9c521d5ed526cc7e1eb130f9b0bc875cc462430d Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Wed, 15 Dec 2021 21:20:23 +0100 Subject: [PATCH 17/24] reverted accidentally committed files --- .changeset/config.json | 7 +------ packages/hooks/src/Provider.tsx | 4 ++-- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/.changeset/config.json b/.changeset/config.json index a4578266..b3616f67 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -1,11 +1,6 @@ { "$schema": "https://unpkg.com/@changesets/config@1.6.3/schema.json", - "changelog": [ - "@changesets/changelog-github", - { - "repo": "Developer-DAO/web3-ui" - } - ], + "changelog": ["@changesets/changelog-github", { "repo": "Developer-DAO/web3-ui" }], "commit": false, "linked": [], "access": "public", diff --git a/packages/hooks/src/Provider.tsx b/packages/hooks/src/Provider.tsx index bcacacb1..c471f293 100644 --- a/packages/hooks/src/Provider.tsx +++ b/packages/hooks/src/Provider.tsx @@ -89,7 +89,7 @@ export const Provider: React.FC = ({ setConnection(connection); const provider = new ethers.providers.Web3Provider(connection); setProvider(provider); - const chainId = await provider.getNetwork().then((network) => network.chainId); + const chainId = await provider.getNetwork().then(network => network.chainId); setChainId(chainId); setCorrectNetwork(chainId === network); const signer = provider.getSigner(); @@ -126,7 +126,7 @@ export const Provider: React.FC = ({ const onAccountsChanged = async () => { const provider = new ethers.providers.Web3Provider(connection); setProvider(provider); - const chainId = await provider.getNetwork().then((network) => network.chainId); + const chainId = await provider.getNetwork().then(network => network.chainId); setChainId(chainId); setCorrectNetwork(chainId === network); const signer = provider.getSigner(); From 12b1ea2e66f705cc646cd5d1753e66f761faf484 Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Wed, 15 Dec 2021 21:27:06 +0100 Subject: [PATCH 18/24] pass props to flex component --- .../src/components/TokenBalance/TokenBalance.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/components/src/components/TokenBalance/TokenBalance.tsx b/packages/components/src/components/TokenBalance/TokenBalance.tsx index db2dc5eb..4c7c2da6 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.tsx @@ -1,10 +1,7 @@ import React, { useContext, useEffect, useState } from 'react'; -import { Box, Flex, Heading, Image } from '@chakra-ui/react'; -import { TokenLogo } from './components/Logo'; -import { useTokenBalance, Web3Context } from '@web3-ui/hooks'; +import { Box, Flex, Heading, Image, InputProps } from '@chakra-ui/react'; +import { ERC20ABI, useTokenBalance, Web3Context } from '@web3-ui/hooks'; import { ethers } from 'ethers'; -import { ERC20ABI } from '@web3-ui/hooks'; -import { Headline } from './components/Headline'; export interface TokenBalanceProps { /** @@ -25,7 +22,7 @@ export interface TokenBalanceProps { imgUrl?: string | undefined; } -export const TokenBalance = (props: TokenBalanceProps) => { +export const TokenBalance: React.FC = props => { const { tokenAddress, accountAddress, value, imgUrl } = props; const web3Context = useContext(Web3Context); @@ -75,7 +72,7 @@ export const TokenBalance = (props: TokenBalanceProps) => { ); return ( - + {imgUrl ? : } From a3d90735ce71d0429c5030cbb1a9753a53afbc2c Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Wed, 15 Dec 2021 21:28:07 +0100 Subject: [PATCH 19/24] use flexprops instead of input props import --- .../components/src/components/TokenBalance/TokenBalance.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/TokenBalance/TokenBalance.tsx b/packages/components/src/components/TokenBalance/TokenBalance.tsx index 4c7c2da6..5bec2238 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.tsx @@ -1,5 +1,5 @@ import React, { useContext, useEffect, useState } from 'react'; -import { Box, Flex, Heading, Image, InputProps } from '@chakra-ui/react'; +import { Box, Flex, FlexProps, Heading, Image } from '@chakra-ui/react'; import { ERC20ABI, useTokenBalance, Web3Context } from '@web3-ui/hooks'; import { ethers } from 'ethers'; @@ -22,7 +22,7 @@ export interface TokenBalanceProps { imgUrl?: string | undefined; } -export const TokenBalance: React.FC = props => { +export const TokenBalance: React.FC = props => { const { tokenAddress, accountAddress, value, imgUrl } = props; const web3Context = useContext(Web3Context); From 5b2dc8fe2b8c5be96e255753071907cae6aba655 Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Thu, 16 Dec 2021 12:10:34 +0100 Subject: [PATCH 20/24] use flexprops instead of input props import --- .changeset/config.json | 7 ++++++- .idea/.gitignore | 8 ++++++++ .idea/misc.xml | 6 ++++++ .idea/modules.xml | 8 ++++++++ .idea/runConfigurations.xml | 10 ++++++++++ .idea/vcs.xml | 6 ++++++ .idea/web3-ui.iml | 9 +++++++++ 7 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/runConfigurations.xml create mode 100644 .idea/vcs.xml create mode 100644 .idea/web3-ui.iml diff --git a/.changeset/config.json b/.changeset/config.json index b3616f67..a4578266 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -1,6 +1,11 @@ { "$schema": "https://unpkg.com/@changesets/config@1.6.3/schema.json", - "changelog": ["@changesets/changelog-github", { "repo": "Developer-DAO/web3-ui" }], + "changelog": [ + "@changesets/changelog-github", + { + "repo": "Developer-DAO/web3-ui" + } + ], "commit": false, "linked": [], "access": "public", diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 00000000..13566b81 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 00000000..639900d1 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 00000000..642dbe40 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/runConfigurations.xml b/.idea/runConfigurations.xml new file mode 100644 index 00000000..797acea5 --- /dev/null +++ b/.idea/runConfigurations.xml @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 00000000..35eb1ddf --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/web3-ui.iml b/.idea/web3-ui.iml new file mode 100644 index 00000000..d6ebd480 --- /dev/null +++ b/.idea/web3-ui.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file From 4f8d41af00d182236cbfc03763ee00d55f9ddfe7 Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Thu, 16 Dec 2021 12:14:15 +0100 Subject: [PATCH 21/24] revert config.json without commit hook --- .changeset/config.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.changeset/config.json b/.changeset/config.json index a4578266..e680455d 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -2,9 +2,7 @@ "$schema": "https://unpkg.com/@changesets/config@1.6.3/schema.json", "changelog": [ "@changesets/changelog-github", - { - "repo": "Developer-DAO/web3-ui" - } + { "repo": "Developer-DAO/web3-ui" } ], "commit": false, "linked": [], From c36708cbeb3df30b07082904221a216b5f9c036c Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Thu, 16 Dec 2021 12:26:16 +0100 Subject: [PATCH 22/24] delete erc20.json fixing index.js fix headline component --- .../components/TokenBalance/TokenBalance.tsx | 12 +- .../src/components/TokenBalance/erc.json | 222 ------------------ 2 files changed, 7 insertions(+), 227 deletions(-) delete mode 100644 packages/components/src/components/TokenBalance/erc.json diff --git a/packages/components/src/components/TokenBalance/TokenBalance.tsx b/packages/components/src/components/TokenBalance/TokenBalance.tsx index 5bec2238..56043763 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.tsx @@ -59,11 +59,13 @@ export const TokenBalance: React.FC = props => { setSymbol(symbol); }; - const Headline = (name: string) => ( - - {name} - - ); + const Headline = (name: string) => { + return ( + + {name} + + ); + }; const TokenLogo = ({ tokenContractAddress }) => ( Date: Mon, 20 Dec 2021 10:05:57 +0100 Subject: [PATCH 23/24] get rid of accidentally --- .idea/.gitignore | 8 -------- .idea/misc.xml | 6 ------ .idea/modules.xml | 8 -------- .idea/runConfigurations.xml | 10 ---------- .idea/vcs.xml | 6 ------ .idea/web3-ui.iml | 9 --------- 6 files changed, 47 deletions(-) delete mode 100644 .idea/.gitignore delete mode 100644 .idea/misc.xml delete mode 100644 .idea/modules.xml delete mode 100644 .idea/runConfigurations.xml delete mode 100644 .idea/vcs.xml delete mode 100644 .idea/web3-ui.iml diff --git a/.idea/.gitignore b/.idea/.gitignore deleted file mode 100644 index 13566b81..00000000 --- a/.idea/.gitignore +++ /dev/null @@ -1,8 +0,0 @@ -# Default ignored files -/shelf/ -/workspace.xml -# Editor-based HTTP Client requests -/httpRequests/ -# Datasource local storage ignored files -/dataSources/ -/dataSources.local.xml diff --git a/.idea/misc.xml b/.idea/misc.xml deleted file mode 100644 index 639900d1..00000000 --- a/.idea/misc.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index 642dbe40..00000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/runConfigurations.xml b/.idea/runConfigurations.xml deleted file mode 100644 index 797acea5..00000000 --- a/.idea/runConfigurations.xml +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 35eb1ddf..00000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/web3-ui.iml b/.idea/web3-ui.iml deleted file mode 100644 index d6ebd480..00000000 --- a/.idea/web3-ui.iml +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file From 8ef24782b47c8b26b4fc6dbfe12b958911ad455a Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Tue, 11 Jan 2022 11:31:58 +0100 Subject: [PATCH 24/24] move stateful logic of the TokenBalance Component to core directory. --- .../TokenBalance/TokenBalance.stories.tsx | 30 ++---- .../components/TokenBalance/TokenBalance.tsx | 91 +++++++------------ .../TokenBalance/TokenBalance.stories.tsx | 38 ++++++++ .../components/TokenBalance/TokenBalance.tsx | 85 +++++++++++++++++ .../core/src/components/TokenBalance/index.ts | 1 + packages/core/src/components/index.ts | 1 + 6 files changed, 164 insertions(+), 82 deletions(-) create mode 100644 packages/core/src/components/TokenBalance/TokenBalance.stories.tsx create mode 100644 packages/core/src/components/TokenBalance/TokenBalance.tsx create mode 100644 packages/core/src/components/TokenBalance/index.ts diff --git a/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx b/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx index 04e1dc82..fdda619c 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.stories.tsx @@ -1,7 +1,5 @@ -import { Provider, Web3Context } from '@web3-ui/hooks'; -import React, { useContext } from 'react'; +import React from 'react'; import { TokenBalance, TokenBalanceProps } from './TokenBalance'; -import { Button } from '@chakra-ui/react'; export default { title: 'Components/TokenBalance', @@ -9,24 +7,12 @@ export default { }; const exampleProps: TokenBalanceProps = { - value: 0.9955, - accountAddress: '0x503828976D22510aad0201ac7EC88293211D23Da', - tokenAddress: '0x6B175474E89094C44Da98b954EedeAC495271d0F', + name: 'Dai Stablecoin', + symbol: 'Dai', + balance: 1234, + value: 1234 * 0.984, + imgUrl: + 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png', }; -export const TokeBalance = () => ( - - } /> - -); - -export const InvalidContract = () => ( - - } /> - -); - -const WalletContextTestWrapper = ({ child }): JSX.Element => { - const { connected, connectWallet } = useContext(Web3Context); - return !connected ? : child; -}; +export const TokeBalance = () => ; diff --git a/packages/components/src/components/TokenBalance/TokenBalance.tsx b/packages/components/src/components/TokenBalance/TokenBalance.tsx index 56043763..9891e4b6 100644 --- a/packages/components/src/components/TokenBalance/TokenBalance.tsx +++ b/packages/components/src/components/TokenBalance/TokenBalance.tsx @@ -1,94 +1,65 @@ -import React, { useContext, useEffect, useState } from 'react'; import { Box, Flex, FlexProps, Heading, Image } from '@chakra-ui/react'; -import { ERC20ABI, useTokenBalance, Web3Context } from '@web3-ui/hooks'; -import { ethers } from 'ethers'; +import React from 'react'; export interface TokenBalanceProps { /** - * The contract address of the ERC20 Token + * The name of the ERC20 Token */ - tokenAddress: string; + name: string; /** - * The owners address + * The symbol of the ERC20 Token */ - accountAddress: string; + symbol: string; /** - * The value of one token in USD + * The users balance */ - value: number; + balance: number; + /** + * The balance USD value + */ + value: string; /** * Image of the token (optional) */ imgUrl?: string | undefined; } -export const TokenBalance: React.FC = props => { - const { tokenAddress, accountAddress, value, imgUrl } = props; - - const web3Context = useContext(Web3Context); - const provider = web3Context?.provider; - - const [name, setName] = useState(''); - const [symbol, setSymbol] = useState(''); - - const { balance, decimals } = useTokenBalance({ tokenAddress, accountAddress }); - - useEffect(() => { - getTokenNameAndSymbol(); - }, []); - - //Just display the first 3 decimal places of the balance - const calcBalance = () => { - if (balance === undefined || decimals === undefined) { - return 0; - } - return Number.parseFloat((Number.parseInt(balance) / 10 ** decimals).toFixed(3)); - }; - //Just display the first 3 decimal places of the value - const calcValue = () => { - const balance = calcBalance(); - return (balance * value).toFixed(3); - }; - //Fetch name and symbol from the smart contract - //Maybe it would make sense to provide them as props to avoid loading time ? - const getTokenNameAndSymbol = async () => { - const contract = new ethers.Contract(tokenAddress, ERC20ABI, provider!); - const [name, symbol] = await Promise.all([contract.name(), contract.symbol()]); - - setName(name); - setSymbol(symbol); - }; +export const TokenBalance: React.FC = ( + props +) => { + const { name, symbol, balance, value, imgUrl } = props; const Headline = (name: string) => { return ( - + {name} ); }; - const TokenLogo = ({ tokenContractAddress }) => ( - - ); - return ( - - - {imgUrl ? : } + + + - + {Headline(symbol)}

{name}

- + {Headline('Balance')} -

{calcBalance()}

+

{balance}

- + {Headline('Value')} -

{calcValue()}

+

{value}

); diff --git a/packages/core/src/components/TokenBalance/TokenBalance.stories.tsx b/packages/core/src/components/TokenBalance/TokenBalance.stories.tsx new file mode 100644 index 00000000..80f72f3f --- /dev/null +++ b/packages/core/src/components/TokenBalance/TokenBalance.stories.tsx @@ -0,0 +1,38 @@ +import { Provider, Web3Context } from '@web3-ui/hooks'; +import React, { useContext } from 'react'; +import { TokenBalance, TokenBalanceProps } from './TokenBalance'; +import { Button } from '@chakra-ui/react'; + +export default { + title: 'Core/TokenBalance', + component: TokenBalance, +}; + +const exampleProps: TokenBalanceProps = { + value: 0.9955, + accountAddress: '0x503828976D22510aad0201ac7EC88293211D23Da', + tokenAddress: '0x6B175474E89094C44Da98b954EedeAC495271d0F', +}; + +export const TokeBalance = () => ( + + } /> + +); + +export const InvalidContract = () => ( + + } + /> + +); + +const WalletContextTestWrapper = ({ child }): JSX.Element => { + const { connected, connectWallet } = useContext(Web3Context); + return !connected ? ( + + ) : ( + child + ); +}; diff --git a/packages/core/src/components/TokenBalance/TokenBalance.tsx b/packages/core/src/components/TokenBalance/TokenBalance.tsx new file mode 100644 index 00000000..eeac183b --- /dev/null +++ b/packages/core/src/components/TokenBalance/TokenBalance.tsx @@ -0,0 +1,85 @@ +import React, { useContext, useEffect, useState } from 'react'; +import { FlexProps } from '@chakra-ui/react'; +import { ERC20ABI, useTokenBalance, Web3Context } from '@web3-ui/hooks'; +import { ethers } from 'ethers'; +import { TokenBalance as TokenBalanceStateless } from '@web3-ui/components'; + +export interface TokenBalanceProps { + /** + * The contract address of the ERC20 Token + */ + tokenAddress: string; + /** + * The owners address + */ + accountAddress: string; + /** + * The value of one token in USD + */ + value: number; + /** + * Image of the token (optional) + */ + imgUrl?: string | undefined; +} + +export const TokenBalance: React.FC = ( + props +) => { + const { tokenAddress, accountAddress, value, imgUrl } = props; + + const web3Context = useContext(Web3Context); + const provider = web3Context?.provider; + + const [name, setName] = useState(''); + const [symbol, setSymbol] = useState(''); + + const { balance, decimals } = useTokenBalance({ + tokenAddress, + accountAddress, + }); + + useEffect(() => { + getTokenNameAndSymbol(); + }, []); + + //Just display the first 3 decimal places of the balance + const calcBalance = () => { + if (balance === undefined || decimals === undefined) { + return 0; + } + return Number.parseFloat( + (Number.parseInt(balance) / 10 ** decimals).toFixed(3) + ); + }; + //Just display the first 3 decimal places of the value + const calcValue = () => { + const balance = calcBalance(); + return (balance * value).toFixed(3); + }; + //Fetch name and symbol from the smart contract + //Maybe it would make sense to provide them as props to avoid loading time ? + const getTokenNameAndSymbol = async () => { + const contract = new ethers.Contract(tokenAddress, ERC20ABI, provider!); + const [name, symbol] = await Promise.all([ + contract.name(), + contract.symbol(), + ]); + + setName(name); + setSymbol(symbol); + }; + + const getTrustWalletImageUrl = () => + `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${tokenAddress}/logo.png`; + + return ( + + ); +}; diff --git a/packages/core/src/components/TokenBalance/index.ts b/packages/core/src/components/TokenBalance/index.ts new file mode 100644 index 00000000..a9ba95aa --- /dev/null +++ b/packages/core/src/components/TokenBalance/index.ts @@ -0,0 +1 @@ +export * from './TokenBalance'; diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts index 46532d61..d78fdbdf 100644 --- a/packages/core/src/components/index.ts +++ b/packages/core/src/components/index.ts @@ -1,3 +1,4 @@ export * from './ConnectWallet'; export * from './Provider'; export * from './TokenGate'; +export * from './TokenBalance';