add top ups

ui/src/app/components/ArcadeDialog.tsx

@@ -31,6 +31,8 @@ export const ArcadeDialog = () => {
     );
   }, [available]);
 
+  console.log(arcadeConnectors());
+
   if (!connectors) return <div></div>;
 
   return (
@@ -69,6 +71,7 @@ export const ArcadeDialog = () => {
                 onClick={connect}
                 address={address!}
                 masterAccount={MasterAccount!}
+                arcadeConnectors={arcadeConnectors()}
               />
             );
           })}
@@ -91,13 +94,15 @@ interface ArcadeAccountCardProps {
   onClick: (conn: Connector<any>) => void;
   address: string;
   masterAccount: AccountInterface;
+  arcadeConnectors: any[];
 }
 
 export const ArcadeAccountCard = ({
   account,
   onClick,
   address,
   masterAccount,
+  arcadeConnectors,
 }: ArcadeAccountCardProps) => {
   const { data } = useBalance({
     address: account.name,
@@ -142,6 +147,12 @@ export const ArcadeAccountCard = ({
     }
   };
 
+  console.log(
+    arcadeConnectors.some(
+      (conn) => conn.options.options.id == masterAccount.address
+    )
+  );
+
   return (
     <div className="border border-terminal-green p-3 hover:bg-terminal-green hover:text-terminal-black items-center">
       <div className="text-left flex flex-col text-sm sm:text-xl mb-0 sm:mb-4 items-center">
@@ -153,13 +164,23 @@ export const ArcadeAccountCard = ({
         </span>
         <span className="text-lg">{balance}ETH</span>{" "}
       </div>
-      <div className="flex justify-center">
+      <div className="flex flex-row justify-center">
         <Button
           variant={connected ? "default" : "ghost"}
           onClick={() => onClick(account)}
         >
           {connected ? "connected" : "connect"}
         </Button>
+        {!arcadeConnectors.some(
+          (conn) => conn.options.options.id == masterAccount.address
+        ) && (
+          <Button
+            variant={connected ? "default" : "ghost"}
+            onClick={() => transfer(account.name, masterAccount)}
+          >
+            Top Up 0.01Eth
+          </Button>
+        )}
       </div>
 
       {isCopied && <span>Copied!</span>}