Fix/cosmetic issues

package.json

@@ -22,6 +22,7 @@
     "@web3modal/wagmi": "^4.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "date-fns": "^3.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",

src/App.tsx

@@ -9,6 +9,7 @@ import { FormattedErrors } from './features/ui/formattedErrors';
 import { NoErrorDisplay } from './features/ui/noErrorDisplay';
 import { JsonDataDisplay } from './features/ui/jsonDataDisplay';
 import { useSetChainId } from './hooks/useSetChainId';
+import { autoResizeTextarea } from './utils/autoResizeTextarea';
 
 function App() {
   const [orderText, setOrderText] = useState<string | undefined>(undefined);
@@ -63,6 +64,9 @@ function App() {
     null;
   }
 
+  const jsonTextarea = document.getElementById('jsonTextarea');
+  autoResizeTextarea(jsonTextarea as HTMLTextAreaElement);
+
   if (protocolFee?.status === 'success') {
     protocolFeeFormatted = Number(protocolFee.result);
   }
@@ -110,14 +114,15 @@ function App() {
   return (
     <React.Fragment>
       <Header />
-      <main className="container flex flex-col w-[849px] h-fit py-8 gap-4 border">
+      <main className="container flex flex-col w-[849px] h-fit py-8 gap-4 border mb-6">
         <h1 className="font-bold text-[24px]">Inspect an order</h1>
         <div className="flex flex-row">
           <textarea
+            id="jsonTextarea"
             value={orderText}
             onChange={handleTextChange}
             placeholder="Enter JSON or URL"
-            className="w-full h-12 top-[287px] bg-transparent border p-2"
+            className="w-full h-fit p-2 top-[287px] bg-transparent border"
             rows={10}
           />
         </div>

src/features/ui/explorerUrl.tsx

@@ -5,8 +5,10 @@ import { truncateAddress } from '../../utils/truncateAddress';
 
 export const ExplorerUrl = ({
   jsonData,
+  symbol,
 }: {
   jsonData: string | undefined | null;
+  symbol?: string | undefined;
 }) => {
   const chainId = useAppStore((store) => store.selectedChainId);
   const explorerUrl = blockExplorers[chainId || 1];
@@ -21,7 +23,7 @@ export const ExplorerUrl = ({
       target="_"
       className="flex flex-row items-center"
     >
-      {truncateAddress(jsonData)}
+      {truncateAddress(jsonData)} {`${symbol ? ' (' + symbol + ')' : ''}`}
       <div>
         <TfiNewWindow className="ml-3" />
       </div>

src/features/ui/jsonDataDisplay.tsx

@@ -1,6 +1,10 @@
 import { ChainSelector } from './ChainSelector';
 import { ImSpinner8 } from 'react-icons/im';
 import { ExplorerUrl } from './explorerUrl';
+import { useTokenData } from '@/hooks/useTokenData';
+import { Address } from 'viem';
+import { formatDecimals } from '@/utils/formatDecimals';
+import { useFormatExpiry } from '@/hooks/useFormatExpiry';
 
 export const JsonDataDisplay = ({
   swapContract,
@@ -33,6 +37,21 @@ export const JsonDataDisplay = ({
   displayErrors: JSX.Element | JSX.Element[] | undefined;
   isChecking: boolean;
 }) => {
+  const signerTokenData = useTokenData(signerToken as Address);
+  const senderTokenData = useTokenData(senderToken as Address);
+  const signerTokenSymbol = signerTokenData.symbol;
+  const senderTokenSymbol = senderTokenData.symbol;
+
+  const signerAmountFormatted = formatDecimals({
+    amount: signerAmount,
+    decimals: signerTokenData.decimals,
+  });
+
+  const senderAmountFormatted = formatDecimals({
+    amount: senderAmount,
+    decimals: senderTokenData.decimals,
+  });
+
   return (
     <div className="flex flex-row py-4">
       <div className="w-1/2 h-full pr-6 border-r font-bold text-[13px]">
@@ -59,27 +78,29 @@ export const JsonDataDisplay = ({
           <div className="text-textDark font-medium">Nonce</div>
           <div>{nonce}</div>
           <div className="text-textDark font-medium">Expiry</div>
-          <div>{expiry}</div>
+          <div>
+            {useFormatExpiry(expiry)} {`(${expiry})`}
+          </div>
           <div className="text-textDark font-medium">signerWallet</div>
           <div>
             <ExplorerUrl jsonData={signerWallet} />
           </div>
           <div className="text-textDark font-medium">signerToken</div>
           <div>
-            <ExplorerUrl jsonData={signerToken} />
+            <ExplorerUrl jsonData={signerToken} symbol={signerTokenSymbol} />
           </div>
           <div className="text-textDark font-medium">signerAmount</div>
-          <div>{signerAmount}</div>
+          <div>{signerAmountFormatted}</div>
           <div className="text-textDark font-medium">senderWallet</div>
           <div>
             <ExplorerUrl jsonData={senderWallet} />
           </div>
           <div className="text-textDark font-medium">senderToken</div>
-          <div>
-            <ExplorerUrl jsonData={senderToken} />
+          <div className="flex flex-row">
+            <ExplorerUrl jsonData={senderToken} symbol={senderTokenSymbol} />
           </div>
           <div className="text-textDark font-medium">senderAmount</div>
-          <div>{senderAmount}</div>
+          <div>{senderAmountFormatted}</div>
         </div>
       </div>
       <div className="w-1/2 px-6">

src/hooks/useFormatExpiry.ts

@@ -0,0 +1,14 @@
+import { formatDistanceToNow } from 'date-fns';
+
+export const useFormatExpiry = (
+  expiry: number | undefined
+): string | undefined => {
+  if (!expiry) {
+    return undefined;
+  }
+
+  const expiryDate = new Date(expiry * 1000);
+  const distance = formatDistanceToNow(expiryDate, { addSuffix: true });
+
+  return distance;
+};

src/hooks/useTokenData.ts

@@ -0,0 +1,22 @@
+import { Address, erc20Abi } from 'viem';
+import { useChainId, useReadContract } from 'wagmi';
+
+export const useTokenData = (contract: Address | undefined) => {
+  const chainId = useChainId();
+
+  const { data: decimals } = useReadContract({
+    address: contract,
+    abi: erc20Abi,
+    chainId: chainId,
+    functionName: 'decimals',
+  });
+
+  const { data: symbol } = useReadContract({
+    address: contract,
+    abi: erc20Abi,
+    chainId: chainId,
+    functionName: 'symbol',
+  });
+
+  return { decimals, symbol };
+};

src/utils/autoResizeTextarea.ts

@@ -0,0 +1,11 @@
+export const autoResizeTextarea = (textarea: HTMLTextAreaElement | null) => {
+  if (!textarea) return;
+
+  textarea.style.height = 'fit';
+
+  if (textarea.value === '' || !textarea.value) {
+    textarea.style.height = '3rem';
+  } else {
+    textarea.style.height = textarea.scrollHeight + 'px';
+  }
+};

src/utils/formatDecimals.ts

@@ -0,0 +1,13 @@
+export const formatDecimals = ({
+  amount,
+  decimals,
+}: {
+  amount: string | undefined;
+  decimals: number | undefined;
+}) => {
+  if (!amount || !decimals) {
+    return undefined;
+  } else {
+    return Number(amount) / 10 ** decimals;
+  }
+};

yarn.lock

@@ -3463,6 +3463,11 @@ date-fns@^2.29.3:
   dependencies:
     "@babel/runtime" "^7.21.0"
 
+date-fns@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
+  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
+
 [email protected]:
   version "1.11.10"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"