diff --git a/site/components/svg/ExclamationMark.js b/site/components/svg/ExclamationMark.js new file mode 100644 index 0000000..b398d24 --- /dev/null +++ b/site/components/svg/ExclamationMark.js @@ -0,0 +1,19 @@ +const ExclamationMark = props => ( + + + +) + +export default ExclamationMark diff --git a/site/components/svg/index.js b/site/components/svg/index.js index 31db3bf..e598930 100644 --- a/site/components/svg/index.js +++ b/site/components/svg/index.js @@ -11,6 +11,7 @@ import curlybrackets from './CurlyBrackets' import discord from './Discord' import error from './Error' import etherscan from './Etherscan' +import exclamation from './ExclamationMark' import github from './Github' import linkedin from './Linkedin' import loading from './Loading' @@ -35,6 +36,7 @@ const icons = { discord, error, etherscan, + exclamation, github, linkedin, loading, diff --git a/site/messages/en.json b/site/messages/en.json index 1ca729a..0d7cda2 100644 --- a/site/messages/en.json +++ b/site/messages/en.json @@ -23,7 +23,7 @@ "claim-succeeded": "Claim Succeeded", "claim": "Claim", "collection": "Collection {collectionId}", - "connect-to-sync": "Please connect your wallet to search for approvals.", + "connect-to-sync": "Connect your wallet to search for approvals.", "connect-wallet": "Connect Wallet", "contains": "Contains", "copyright": "© 2024 Hemi Labs, Inc.", @@ -60,7 +60,7 @@ "message": "Message", "message-placeholder": "Type the message to sign here", "new-auction": "New Auction", - "no-approvals": "There are no approvals for your account.", + "no-approvals": "There's no token approval to revoke.", "no-auctions": "No auctions", "of-value": "of current value", "payment-streams": "Payment Streams", diff --git a/site/messages/zh.json b/site/messages/zh.json index b3835e2..09a9b33 100644 --- a/site/messages/zh.json +++ b/site/messages/zh.json @@ -23,7 +23,7 @@ "claim-succeeded": "领取成功", "claim": "领取", "collection": "收藏 {collectionId}", - "connect-to-sync": "请连接您的钱包以搜索批准。", + "connect-to-sync": "连接你的钱包以搜索批准", "connect-wallet": "连接钱包", "contains": "包含", "copyright": "版权©2021 Pure Finance。版权所有。", @@ -60,7 +60,7 @@ "message": "Message", "message-placeholder": "Type the message to sign here", "new-auction": "新拍卖", - "no-approvals": "您的帐户没有获得批准。", + "no-approvals": "没有可撤销的令牌批准", "no-auctions": "没有拍卖", "of-value": "当前值", "payment-streams": "支付流", diff --git a/site/pages/[locale]/token-revokes.js b/site/pages/[locale]/token-revokes.js index cd0f5fb..9b0f090 100644 --- a/site/pages/[locale]/token-revokes.js +++ b/site/pages/[locale]/token-revokes.js @@ -11,6 +11,9 @@ import { ExplorerLink } from '../../components/ExplorerLink' import TableBox from '../../components/layout/TableBox' import ToolsLayout from '../../components/layout/ToolsLayout' import { fromUnit } from '../../utils' +import SvgContainer from '../../components/svg/SvgContainer' +import Wallet from '../../components/Wallet' +import { Link } from '../../navigation' // Comes from doing web3.utils.sha3('Approval(address,address,uint256)') const APPROVAL_TOPIC = @@ -322,6 +325,30 @@ const Token = function ({ address }) { return } +const Status = function ({ icon, message, children }) { + return ( + <> + + +
+ +
+ + + + +

{message}

+ + + + +
{children}
+ + + + ) +} + const TokenRevokes = function () { const { active } = useWeb3React() const { erc20 } = useContext(PureContext) @@ -372,61 +399,20 @@ const TokenRevokes = function () { text={t('utilities-text.token-revokes')} title={t('list-and-revoke-token-approvals')} > - {/* {tokenApprovals.length > 0 && ( -
-
- - {t('token')} - - - {t('spender-address')} - - - {t('allowance')} / {t('balance')} - - - {t('actions')} - - {tokenApprovals.map( - ({ address, allowance, transactionHash, spender }) => ( - - -
- -
-
- - / - -
- -
- ) - )} -
-
- )} */} - - {tokenApprovals.length > 0 && ( -
- - - - - - - - - - - - {tokenApprovals.map( +
+
{t('token')}{t('allowance')}{t('balance')}{t('spender-address')}{t('actions')}
+ + + + + + + + + + + {tokenApprovals.length > 0 && + tokenApprovals.map( ({ address, allowance, transactionHash, spender }) => ( ) )} - -
{t('token')}{t('allowance')}{t('balance')}{t('spender-address')}{t('actions')}
@@ -453,20 +439,37 @@ const TokenRevokes = function () {
-
- )} - - {!active &&

{t('connect-to-sync')}

} - {active && syncStatus === SyncStatus.Syncing && ( -

{t('syncing-your-approvals')}

- )} - {active && isRevoking &&

{t('revoking-approval')}

} - {syncStatus === SyncStatus.Error &&

{t('generic-error')}

} - {tokenApprovals.length === 0 && syncStatus === SyncStatus.Finished && ( -

{t('no-approvals')}

- )} + + {!active && ( + + + + )} + + {active && syncStatus === SyncStatus.Syncing && ( + + )} + + {active && isRevoking && ( + + )} + + {syncStatus === SyncStatus.Error && ( + + )} + + {active && + tokenApprovals.length === 0 && + syncStatus === SyncStatus.Finished && ( + + + {t('token-approvals')} + + + )} + + + )