Fixed token revokes empty states messages

site/components/svg/ExclamationMark.js

@@ -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

site/components/svg/Loading.js

@@ -13,7 +13,7 @@ const LoadingIcon = props => (
       cy="50"
       fill="none"
       r="33"
-      stroke="#4138ac"
+      stroke="#FF6C15"
       strokeDasharray="155.50883635269477 53.83627878423159"
       strokeWidth="5"
     >

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,

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",

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": "支付流",

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 <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)
@@ -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>
   )