Skip to content

Commit

Permalink
Merge pull request #60 from hemilabs/fix-revokes-empty-states
Browse files Browse the repository at this point in the history 
Fixed token revokes empty states messages
  • Loading branch information
@gndelia
gndelia authored Dec 20, 2024
2 parents 277c4a5 + 7ed91d2 commit d980e2e
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 93 deletions.
19 changes: 19 additions & 0 deletions site/components/svg/ExclamationMark.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
const ExclamationMark = props => (
<svg
width="21"
height="20"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18.5 10C18.5 12.1217 17.6571 14.1566 16.1569 15.6569C14.6566 17.1571 12.6217 18 10.5 18C8.37827 18 6.34344 17.1571 4.84315 15.6569C3.34285 14.1566 2.5 12.1217 2.5 10C2.5 7.87827 3.34285 5.84344 4.84315 4.34315C6.34344 2.84285 8.37827 2 10.5 2C12.6217 2 14.6566 2.84285 16.1569 4.34315C17.6571 5.84344 18.5 7.87827 18.5 10ZM10.5 5C10.6989 5 10.8897 5.07902 11.0303 5.21967C11.171 5.36032 11.25 5.55109 11.25 5.75V10.25C11.25 10.4489 11.171 10.6397 11.0303 10.7803C10.8897 10.921 10.6989 11 10.5 11C10.3011 11 10.1103 10.921 9.96967 10.7803C9.82902 10.6397 9.75 10.4489 9.75 10.25V5.75C9.75 5.55109 9.82902 5.36032 9.96967 5.21967C10.1103 5.07902 10.3011 5 10.5 5ZM10.5 15C10.7652 15 11.0196 14.8946 11.2071 14.7071C11.3946 14.5196 11.5 14.2652 11.5 14C11.5 13.7348 11.3946 13.4804 11.2071 13.2929C11.0196 13.1054 10.7652 13 10.5 13C10.2348 13 9.98043 13.1054 9.79289 13.2929C9.60536 13.4804 9.5 13.7348 9.5 14C9.5 14.2652 9.60536 14.5196 9.79289 14.7071C9.98043 14.8946 10.2348 15 10.5 15Z"
fill="#737373"
/>
</svg>
)

export default ExclamationMark
2 changes: 1 addition & 1 deletion site/components/svg/Loading.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const LoadingIcon = props => (
cy="50"
fill="none"
r="33"
stroke="#4138ac"
stroke="#FF6C15"
strokeDasharray="155.50883635269477 53.83627878423159"
strokeWidth="5"
>
Expand Down
2 changes: 2 additions & 0 deletions site/components/svg/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -35,6 +36,7 @@ const icons = {
discord,
error,
etherscan,
exclamation,
github,
linkedin,
loading,
Expand Down
4 changes: 2 additions & 2 deletions site/messages/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions site/messages/zh.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"claim-succeeded": "领取成功",
"claim": "领取",
"collection": "收藏 {collectionId}",
"connect-to-sync": "请连接您的钱包以搜索批准。",
"connect-to-sync": "连接你的钱包以搜索批准",
"connect-wallet": "连接钱包",
"contains": "包含",
"copyright": "版权©2021 Pure Finance。版权所有。",
Expand Down Expand Up @@ -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": "支付流",
Expand Down
178 changes: 90 additions & 88 deletions site/pages/[locale]/token-revokes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
Expand Down Expand Up @@ -322,6 +325,30 @@ const Token = function ({ address }) {
return <ExplorerLink address={address} chainId={chainId} text={symbol} />
}

const Status = function ({ icon, message, children }) {
return (
<>
<tr>
<td colSpan={5} className="pb-6 pt-12 text-center">
<div className="bg-grayscale-50 border-grayscale-300 m-auto flex h-8 w-8 items-center justify-center rounded-full border">
<SvgContainer className="w-5 cursor-pointer" name={icon} />
</div>
</td>
</tr>
<tr>
<td colSpan={5} className="text-center">
<h3 className="text-grayscale-500">{message}</h3>
</td>
</tr>
<tr>
<td colSpan={5} className="pb-12 pt-4">
<div className="flex items-center justify-center">{children}</div>
</td>
</tr>
</>
)
}

const TokenRevokes = function () {
const { active } = useWeb3React()
const { erc20 } = useContext(PureContext)
Expand Down Expand Up @@ -371,102 +398,77 @@ const TokenRevokes = function () {
<TableBox
text={t('utilities-text.token-revokes')}
title={t('list-and-revoke-token-approvals')}
className="shadow-lg"
>
{/* {tokenApprovals.length > 0 && (
<section className="flex flex-col">
<div className="grid grid-cols-4">
<span className="m-auto text-gray-600 font-bold">
{t('token')}
</span>
<span className="hidden m-auto text-gray-600 font-bold md:block">
{t('spender-address')}
</span>
<span className="m-auto text-gray-600 font-bold">
{t('allowance')} / {t('balance')}
</span>
<span className="m-auto text-gray-600 font-bold">
{t('actions')}
</span>
<div className="w-100 md:w-150 overflow-auto lg:w-full">
<table className="w-150">
<thead>
<tr className="bg-slate-50 text-slate-600 border-slate-200 rounded-xl border text-left text-sm">
<th className="w-10 px-2 py-4 font-medium">{t('token')}</th>
<th className="w-14 font-medium">{t('allowance')}</th>
<th className="w-14 font-medium">{t('balance')}</th>
<th className="w-24 font-medium">{t('spender-address')}</th>
<th className="w-10 font-medium">{t('actions')}</th>
</tr>
</thead>
<tbody>
{tokenApprovals.map(
({ address, allowance, transactionHash, spender }) => (
<React.Fragment key={transactionHash}>
<Token address={address} />
<div className="hidden my-auto md:block">
<Token address={spender} />
</div>
<div className="my-auto">
<tr className="border-b" key={transactionHash}>
<td className="px-2 py-4">
<Token address={address} />
</td>
<td>
<Allowance address={address} data={allowance} />
<span> / </span>
</td>
<td>
<Balance address={address} />
</div>
<Button
disabled={!active}
onClick={() => handleRevoke(address, spender)}
width="w-28"
>
{t('revoke')}
</Button>
</React.Fragment>
</td>
<td>
<Token address={spender} />
</td>
<td className="px-2 py-4">
<Button
disabled={!active}
onClick={() => handleRevoke(address, spender)}
>
{t('revoke')}
</Button>
</td>
</tr>
)
)}
</div>
</section>
)} */}

{tokenApprovals.length > 0 && (
<div className="w-100 md:w-150 overflow-scroll lg:w-full">
<table className="w-150">
<thead className="">
<tr className="bg-slate-50 text-slate-600 border-slate-200 rounded-xl border text-left text-sm font-light">
<th className="w-10 px-2 py-4 font-medium">{t('token')}</th>
<th className="w-14 font-medium">{t('allowance')}</th>
<th className="w-14 font-medium">{t('balance')}</th>
<th className="w-24 font-medium">{t('spender-address')}</th>
<th className="w-10 font-medium">{t('actions')}</th>
</tr>
</thead>
<tbody>
{tokenApprovals.map(
({ address, allowance, transactionHash, spender }) => (
<tr className="border-b" key={transactionHash}>
<td className="px-2 py-4">
<Token address={address} />
</td>
<td>
<Allowance address={address} data={allowance} />
</td>
<td>
<Balance address={address} />
</td>
<td>
<Token address={spender} />
</td>
<td className="px-2 py-4">
<Button
className=""
disabled={!active}
onClick={() => handleRevoke(address, spender)}
>
{t('revoke')}
</Button>
</td>
</tr>
)

{!active && (
<Status icon="exclamation" message={t('connect-to-sync')}>
<Wallet />
</Status>
)}

{active && syncStatus === SyncStatus.Syncing && (
<Status icon="loading" message={t('syncing-your-approvals')} />
)}

{active && isRevoking && (
<Status icon="exclamation" message={t('revoking-approval')} />
)}

{syncStatus === SyncStatus.Error && (
<Status icon="error" message={t('generic-error')} />
)}

{active &&
tokenApprovals.length === 0 &&
syncStatus === SyncStatus.Finished && (
<Status icon="exclamation" message={t('no-approvals')}>
<Link className="text-orange-hemi" href="/token-approvals">
{t('token-approvals')}
</Link>
</Status>
)}
</tbody>
</table>
</div>
)}

{!active && <h3>{t('connect-to-sync')}</h3>}
{active && syncStatus === SyncStatus.Syncing && (
<h3>{t('syncing-your-approvals')}</h3>
)}
{active && isRevoking && <h3>{t('revoking-approval')}</h3>}
{syncStatus === SyncStatus.Error && <h3>{t('generic-error')}</h3>}
{tokenApprovals.length === 0 && syncStatus === SyncStatus.Finished && (
<p>{t('no-approvals')}</p>
)}
</tbody>
</table>
</div>
</TableBox>
</ToolsLayout>
)
Expand Down

0 comments on commit d980e2e

Please sign in to comment.