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

frontend/src/AppContext.ts

@@ -89,6 +89,8 @@ export default class AppContext {
     return appContext;
   };
 
+  walletAddress: string | undefined;
+
   constructor(
     public hardHatPrivateKey: string,
     public aaPrivateKey: string,
@@ -102,7 +104,9 @@ export default class AppContext {
     public aaProvider: ERC4337EthersProvider,
     public address: string,
     public signer: signer.BlsSignerInterface,
-  ) {}
+  ) {
+    this.walletAddress = localStorage.getItem('wallet-address') ?? undefined;
+  }
 
   async fundWallet() {
     const accountAddress = await this.aaProvider.getSigner().getAddress();
@@ -137,4 +141,8 @@ export default class AppContext {
 
     await paymentChannel.addSignature(this.signer.pubkey, signature);
   }
+
+  static setWalletAddress(address: string) {
+    localStorage.setItem('wallet-address', address);
+  }
 }

frontend/src/components/CreateWalletForm.tsx

@@ -2,6 +2,7 @@ import { BigNumber, ethers } from 'ethers';
 import { FormEvent } from 'react';
 import createWallet from '../createWallet';
 import { solG2 } from '@thehubbleproject/bls/dist/mcl';
+import AppContext from '../AppContext';
 
 interface CreateWalletFieldProps {
   label: string;
@@ -101,7 +102,9 @@ export default function Page() {
 
     const walletAddress = await createWallet(pubKeys);
 
-    location.href = `/wallet?address=${walletAddress}`;
+    AppContext.setWalletAddress(walletAddress);
+
+    location.href = '/wallet';
   };
 
   return (

frontend/src/components/Sidebar.tsx

@@ -11,6 +11,7 @@ import {
 import PublicKey from './PublicKey';
 import { usePathname } from 'next/navigation';
 import { Link, Outlet } from 'react-router-dom';
+import WalletDisplay from './WalletDisplay';
 
 const navigation = [
   { name: 'Create', href: '/', icon: WalletIcon },
@@ -139,6 +140,7 @@ export default function SideBar() {
         {/* Sidebar component, swap this element with another sidebar if you like */}
         <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6">
           <PublicKey />
+          <WalletDisplay />
           <nav className="flex flex-1 flex-col">
             <ul role="list" className="flex flex-1 flex-col gap-y-7">
               <li>

frontend/src/components/WalletDisplay.tsx

@@ -0,0 +1,44 @@
+import { DocumentDuplicateIcon, WalletIcon } from '@heroicons/react/24/outline';
+import AppContext from '../AppContext';
+
+function formatCompactAddress(address: string): string {
+  return `0x${address.slice(2, 6)}...${address.slice(-4)}`;
+}
+
+const WalletDisplay = () => {
+  const appContext = AppContext.use();
+  const walletAddress = appContext?.walletAddress;
+
+  if (walletAddress === undefined) {
+    return <></>;
+  }
+
+  const copyPublicKey = () => {
+    navigator.clipboard.writeText(walletAddress);
+  };
+
+  return (
+    <div className="flex flex-col h-16 shrink-0 mt-4">
+      <div className="flex">
+        <WalletIcon className="h-6 w-6 shrink-0 pr-2" aria-hidden="true" />
+        Wallet
+      </div>
+
+      <div className="flex items-center my-2">
+        <span className="bg-gray-800 rounded-lg px-4 py-1 mr-2 text-ellipsis">
+          {walletAddress ? formatCompactAddress(walletAddress) : 'Loading...'}
+        </span>
+
+        <button onClick={copyPublicKey}>
+          <DocumentDuplicateIcon
+            className="h-6 w-6 shrink-0 pr-2"
+            aria-hidden="true"
+            cursor="pointer"
+          />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default WalletDisplay;

frontend/src/routes/Wallet.tsx

@@ -1,3 +1,63 @@
-export default function Page() {
-  return <>Wallet page</>;
+import { BigNumber, ethers } from 'ethers';
+import { FormEvent } from 'react';
+import createWallet from '../createWallet';
+import { solG2 } from '@thehubbleproject/bls/dist/mcl';
+import AppContext from '../AppContext';
+
+interface CreateWalletFieldProps {
+  label: string;
+  name: string;
+}
+
+export default function Page() {
+  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 pubKeyStrings = [
+      pubKey1.value,
+      pubKey2.value,
+      pubKey3.value,
+      pubKey4.value,
+      pubKey5.value,
+    ];
+
+    const pubKeys = pubKeyStrings
+      .filter((str) => str !== '')
+      .map(
+        (str) =>
+          ethers.utils.defaultAbiCoder
+            .decode(['uint256', 'uint256', 'uint256', 'uint256'], str)
+            .map((x: BigNumber) => x.toHexString()) as solG2,
+      );
+
+    const walletAddress = await createWallet(pubKeys);
+    AppContext.setWalletAddress(walletAddress);
+
+    location.href = `/wallet?address=${walletAddress}`;
+  };
+
+  return (
+    <div className="space-y-12">
+      <div className="border-b border-white/10 pb-12">
+        <h2 className="text-base font-semibold leading-7 text-white">Wallet</h2>
+        Balance:
+      </div>
+    </div>
+  );
 }