Improve loading state

frontend/src/components/LoadingTransaction.tsx

@@ -0,0 +1,51 @@
+const statuses = {
+  green: 'text-green-700 bg-green-50 ring-green-600/20',
+  gray: 'text-gray-600 bg-gray-50 ring-gray-500/10',
+  red: 'text-red-700 bg-red-50 ring-red-600/10',
+};
+
+function classNames(...classes: string[]) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function LoadingTransaction() {
+  return (
+    <div className="overflow-hidden rounded-xl border border-gray-200 bg-white">
+      <div className="flex items-center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6">
+        <img
+          src="./transaction.svg"
+          alt={'token'}
+          className="h-12 w-12 flex-none rounded-lg bg-white object-cover ring-1 ring-gray-900/10"
+        />
+        <div className="flex-auto">
+          <div className="text-sm font-medium leading-6 text-gray-900">
+            Token: ...
+          </div>
+          <div className="text-xs font-medium leading-6 text-gray-900">...</div>
+        </div>
+      </div>
+      <dl className="-my-3 divide-y divide-gray-100 px-6 py-4 text-sm leading-6">
+        <div className="flex justify-between gap-x-4 py-3">
+          <dt className="text-gray-500">To:</dt>
+          <dd className="text-gray-700">
+            <p>...</p>
+          </dd>
+        </div>
+        <div className="flex justify-between gap-x-4 py-3">
+          <dt className="text-gray-500">Amount</dt>
+          <dd className="flex items-start gap-x-2">
+            <div className="font-medium text-gray-900">...</div>
+            <div
+              className={classNames(
+                statuses['red'],
+                'rounded-md py-1 px-2 text-xs font-medium ring-1 ring-inset',
+              )}
+            >
+              ... signed
+            </div>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+}

frontend/src/routes/Sign.tsx

@@ -7,6 +7,7 @@ import calculateSignaturesNeeded from '../utils/calculateSignaturesNeeded';
 import { IERC20__factory } from '../ERC20/IERC20__factory';
 import { AccountAPI } from '../account/AccountAPI';
 import assert from '../utils/assert';
+import LoadingTransaction from '../components/LoadingTransaction';
 
 export default function Page() {
   const appContext = AppContext.use();
@@ -58,7 +59,7 @@ export default function Page() {
     console.log('reciept', reciept);
   };
 
-  if (!payment)
+  if (id === null)
     return (
       <div className="space-y-12">
         <div className="border-b border-white/10 pb-12">
@@ -69,8 +70,13 @@ export default function Page() {
       </div>
     );
 
-  const sigsNeeded = calculateSignaturesNeeded(payment);
-  const sigsRemaining = sigsNeeded - publicKeys.length;
+  const sigsNeeded = payment && calculateSignaturesNeeded(payment);
+
+  let sigsRemaining: number | undefined = undefined;
+
+  if (sigsNeeded !== undefined) {
+    sigsRemaining = sigsNeeded - publicKeys.length;
+  }
 
   return (
     <form>
@@ -80,23 +86,35 @@ export default function Page() {
             Sign Group Transaction
           </h2>
           <p className="mt-1 text-sm leading-6 text-gray-400 pb-6">
-            This transaction needs {sigsNeeded} signatures.
+            This transaction needs {sigsNeeded ?? '?'} signatures.
           </p>
-          <Transaction
-            to={payment.to}
-            token={payment.token}
-            description={payment.description}
-            amount={payment.amount}
-            numSigned={publicKeys.length}
-            sigsNeeded={sigsNeeded}
-          />
+          {(() => {
+            if (
+              payment === undefined ||
+              sigsNeeded === undefined ||
+              sigsRemaining === undefined
+            ) {
+              return <LoadingTransaction />;
+            }
+
+            return (
+              <Transaction
+                to={payment.to}
+                token={payment.token}
+                description={payment.description}
+                amount={payment.amount}
+                numSigned={publicKeys.length}
+                sigsNeeded={sigsNeeded}
+              />
+            );
+          })()}
         </div>
       </div>
 
       <div className="mt-6 flex items-center justify-end gap-x-6">
         {userSigned && <div>You have already signed!</div>}
 
-        {!userSigned && sigsRemaining <= 1 && (
+        {sigsRemaining !== undefined && !userSigned && sigsRemaining <= 1 && (
           <button
             type="submit"
             disabled={!!userSigned}
@@ -110,7 +128,7 @@ export default function Page() {
           </button>
         )}
 
-        {!userSigned && sigsRemaining > 1 && (
+        {sigsRemaining !== undefined && !userSigned && sigsRemaining > 1 && (
           <button
             type="submit"
             disabled={!!userSigned}