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

frontend/src/components/CreateWalletForm.tsx

@@ -1,9 +1,14 @@
+import { Contract } from 'ethers';
+import { FormEvent } from 'react';
+import { BLSGroupVerifier } from 'account-abstraction';
+import AppContext from '../AppContext';
+
 interface CreateWalletFieldProps {
   label: string;
   name: string;
 }
 
-const CreateWalletField = ({ label, name }: CreateWalletFieldProps) => (
+const SetupWalletField = ({ label, name }: CreateWalletFieldProps) => (
   <div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
     <div className="sm:col-span-4">
       <label
@@ -26,22 +31,61 @@ const CreateWalletField = ({ label, name }: CreateWalletFieldProps) => (
 );
 
 export default function Page() {
+  const appContext = AppContext.use();
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const pubKey1 = event.currentTarget.elements.namedItem(
+      'public-key-1',
+    ) as HTMLInputElement;
+    const pubKey2 = event.currentTarget.elements.namedItem(
+      'public-key-2',
+    ) as HTMLInputElement;
+    const pubKey3 = event.currentTarget.elements.namedItem(
+      'public-key-3',
+    ) as HTMLInputElement;
+    const pubKey4 = event.currentTarget.elements.namedItem(
+      'public-key-4',
+    ) as HTMLInputElement;
+    const pubKey5 = event.currentTarget.elements.namedItem(
+      'public-key-5',
+    ) as HTMLInputElement;
+
+    const blsGroupVerifier = new Contract(
+      BLSGroupVerifier.address,
+      BLSGroupVerifier.abi,
+      appContext?.aaProvider,
+    );
+
+    const pubKeys = [
+      pubKey1.value,
+      pubKey2.value,
+      pubKey3.value,
+      pubKey4.value,
+      pubKey5.value,
+    ];
+
+    const setupGroup = await blsGroupVerifier.setupGroup(pubKeys);
+    await setupGroup.wait();
+  };
+
   return (
-    <form>
+    <form onSubmit={handleSubmit}>
       <div className="space-y-12">
         <div className="border-b border-white/10 pb-12">
           <h2 className="text-base font-semibold leading-7 text-white">
-            Create Multi-sig
+            Setup Multi-sig
           </h2>
           <p className="mt-1 text-sm leading-6 text-gray-400">
-            Create a Multi-sig wallet with a list of addresses and a threshold
+            Setup a Multi-sig wallet with a list of addresses and a threshold
           </p>
 
-          <CreateWalletField name="address" label="Signer public key 1" />
-          <CreateWalletField name="address" label="Signer public key 2" />
-          <CreateWalletField name="address" label="Signer public key 3" />
-          <CreateWalletField name="address" label="Signer public key 4" />
-          <CreateWalletField name="address" label="Signer public key 5" />
+          <SetupWalletField name="public-key-1" label="Signer public key 1" />
+          <SetupWalletField name="public-key-2" label="Signer public key 2" />
+          <SetupWalletField name="public-key-3" label="Signer public key 3" />
+          <SetupWalletField name="public-key-4" label="Signer public key 4" />
+          <SetupWalletField name="public-key-5" label="Signer public key 5" />
         </div>
       </div>
 
@@ -50,7 +94,7 @@ export default function Page() {
           type="submit"
           className="rounded-xl bg-green-500 px-4 py-2 text-lg 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-indigo-500"
         >
-          Create Wallet
+          Setup Wallet
         </button>
       </div>
     </form>

frontend/src/components/Sidebar.tsx

@@ -163,7 +163,7 @@ export default function SideBar() {
         </div>
       </div>
 
-      <div className="sticky w-14 top-0 z-40 flex items-start gap-x-6 bg-gray-900 px-4 py-4 shadow-sm sm:px-6 lg:hidden h-full">
+      <div className="sticky w-13 top-0 z-40 flex items-start gap-x-6 bg-gray-900 px-4 py-4 shadow-sm sm:px-6 lg:hidden h-full">
         <button
           type="button"
           className="-m-2.5 p-2.5 text-gray-400 lg:hidden"

frontend/src/components/Transaction.tsx

@@ -1,3 +1,5 @@
+import { BigNumber, ethers } from 'ethers';
+
 const statuses = {
   green: 'text-green-700 bg-green-50 ring-green-600/20',
   gray: 'text-gray-600 bg-gray-50 ring-gray-500/10',
@@ -50,10 +52,12 @@ export default function Transaction({
         <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">{amount}</div>
+            <div className="font-medium text-gray-900">
+              {ethers.utils.formatEther(BigNumber.from(amount))}
+            </div>
             <div
               className={classNames(
-                (statuses as any)['red'],
+                (statuses as any)[numSigned < sigsNeeded ? 'red' : 'green'],
                 'rounded-md py-1 px-2 text-xs font-medium ring-1 ring-inset',
               )}
             >