Added a warning icon if transfer cost is higher than token market value #236
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { TokenBalance } from '@gnosis.pm/safe-apps-sdk'; | ||
| import { Icon, Tooltip } from '@gnosis.pm/safe-react-components'; | ||
| import BigNumber from 'bignumber.js'; | ||
| import { useEffect, useState } from 'react'; | ||
| import styled from 'styled-components'; | ||
| import web3Utils from 'web3-utils'; | ||
| import Web3 from 'web3'; | ||
|
|
||
| import { formatCurrencyValue } from '../utils/formatters'; | ||
| import { tokenToTx } from '../utils/sdk-helpers'; | ||
| import Flex from './Flex'; | ||
| import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk'; | ||
|
|
||
| function CurrencyCell({ | ||
| item, | ||
| currency, | ||
| gasPrice, | ||
| ethFiatPrice, | ||
| web3, | ||
| }: { | ||
| item: TokenBalance; | ||
| currency: string; | ||
| gasPrice: BigNumber; | ||
| ethFiatPrice: number; | ||
| web3: Web3 | undefined; | ||
| }) { | ||
| const label = formatCurrencyValue(item.fiatBalance, currency); | ||
| const [transferCostInFiat, setTransferCostInFiat] = useState(new BigNumber(0)); | ||
|
|
||
| const { safe } = useSafeAppsSDK(); | ||
|
|
||
| // Transfer cost estimation | ||
| useEffect(() => { | ||
| const estimateTransferCost = async () => { | ||
| try { | ||
| const sendTokenTx = tokenToTx(safe.safeAddress, item); | ||
|
|
||
| const estimatedTransferGas = await web3?.eth.estimateGas({ ...sendTokenTx, from: safe.safeAddress }); | ||
|
|
||
| const gasCostInWei = gasPrice.multipliedBy(estimatedTransferGas || 21000); | ||
| const gasCostInEther = new BigNumber(web3Utils.fromWei(gasCostInWei.toString(), 'ether')); | ||
|
|
||
| const transferCostInFiat = gasCostInEther.multipliedBy(ethFiatPrice); | ||
|
|
||
| setTransferCostInFiat(transferCostInFiat); | ||
| } catch (e) { | ||
| console.log('Error: ', e); | ||
| } | ||
| }; | ||
| estimateTransferCost(); | ||
| }, [gasPrice, ethFiatPrice, item, web3, safe]); | ||
|
|
||
| // if transfer cost is higher than token market value, we show a warning icon & tooltip in the cell | ||
| const showWarningIcon = | ||
| ethFiatPrice > 0 && gasPrice.toNumber() > 0 && transferCostInFiat.toNumber() >= Number(item.fiatBalance); | ||
|
|
||
| const warningTooltip = `Beware that the cost of this token transfer could be higher than its current market value (Estimated transfer cost: ${formatCurrencyValue( | ||
| transferCostInFiat.toString(), | ||
| currency, | ||
| )})`; | ||
|
|
||
| return showWarningIcon ? ( | ||
| <Tooltip title={warningTooltip} placement="top"> | ||
| <Flex> | ||
| {label} | ||
| <StyledIcon size="md" type="alert" color="warning" /> | ||
| </Flex> | ||
| </Tooltip> | ||
| ) : ( | ||
| <Flex>{label}</Flex> | ||
| ); | ||
| } | ||
|
|
||
| export default CurrencyCell; | ||
|
|
||
| const StyledIcon = styled(Icon)` | ||
| margin-left: 4px; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What do you think about creating a useWeb3 hook? for avoid passing down props to de final CurrencyCell. You can gather the chains.ts info there as well as we are going to remove it later
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think that it's a good idea to create a
useWeb3hook, but I think that we should keep it in theApp.tsxbecause we only want instantiate web3 and callgetGasPriceonly once and not in eachCurrencyCell.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+1 for a separate hook, I find that it vastly improves readability
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could perhaps be a separate ticket @dasanra ? as TX Builder and Drain Safe can share the same hook and as @DaniSomoza mentioned me offline, we will need a context provider as well for avoid instance recreation.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why would we want to avoid it? In the drain-safe app, it's only used in one component and then passed down via props. To me, it looks like just moving it to a separate file
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For avoid the prop to only exist to be sent down. In this case in the Balances I think
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
but the context is fine isn't it ? I mean, a context for the web3 instance and a hook to instantiate it using our getChainInfo populated with RPC url (task in progress) could be helpful for retrieving it in any level of the component tree
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done! Added useWeb3.js hook