Merge branch 'main' of github.com:web3well/eth-global-lisbon-hackathon

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/createWallet.ts

@@ -1,19 +1,14 @@
 import { solG2 } from '@thehubbleproject/bls/dist/mcl';
-import { BLSGroupVerifier__factory } from 'account-abstraction';
 import AppContext from './AppContext';
+import { AccountAPI } from './account/AccountAPI';
 
 export default async function createWallet(
   ctx: AppContext,
   _publicKeys: solG2[],
 ) {
-  const blsGroupVerifier = await new BLSGroupVerifier__factory(
-    ctx?.hhSigner,
-  ).deploy();
-  await blsGroupVerifier.deployed();
+  const accountApi = ctx.aaProvider?.smartAccountAPI as AccountAPI;
+  await accountApi.eip4337Manager.blsVerifier.setupGroup(_publicKeys);
 
-  // TODO Pass in keys, attach group to safe contract
-  const setupGroup = await blsGroupVerifier.setupGroup([]);
-  await setupGroup.wait();
-
-  return '0x0000006789000000000000000000001234001234';
+  await accountApi.getNonce();
+  return accountApi.accountContract?.address;
 }

frontend/src/routes/Propose.tsx

@@ -92,7 +92,7 @@ export default function Propose() {
                 Signatures needed: {signaturesNeeded}
               </div>
 
-              <div className="sm:col-span-3">
+              <div className="sm:col-span-3" style={{ display: 'none' }}>
                 <label
                   htmlFor="signature"
                   className="block text-sm font-medium leading-6 text-white"

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();
@@ -37,9 +38,7 @@ export default function Page() {
     (pk) => pk.join('') === appContext?.signer.pubkey.join(''),
   );
 
-  const addSignatureAndSend = async () => {
-    await addSignature();
-
+  const sendTransaction = async () => {
     const provider = appContext?.aaProvider;
     const signer = provider?.getSigner();
 
@@ -58,7 +57,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 +68,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,37 +84,50 @@ 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 !== undefined && sigsRemaining > 0 && (
+          <div>You have already signed!</div>
+        )}
 
-        {!userSigned && sigsRemaining <= 1 && (
+        {sigsRemaining === 0 && (
           <button
             type="submit"
-            disabled={!!userSigned}
             onClick={(e) => {
               e.preventDefault();
-              addSignatureAndSend();
+              sendTransaction();
             }}
             className="rounded-md bg-green-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500"
           >
-            Add signature and send transaction
+            Send transaction
           </button>
         )}
 
-        {!userSigned && sigsRemaining > 1 && (
+        {sigsRemaining !== undefined && !userSigned && (
           <button
             type="submit"
             disabled={!!userSigned}