upgrade: v.1.13 to v.1.1.18

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobanetwork/snap-account-abstraction-keyring-monorepo",
-  "version": "1.1.13",
+  "version": "1.1.18",
   "private": true,
   "description": "An account abstraction keyring snap that integrates with MetaMask accounts on Boba Network",
   "keywords": [

packages/site/.env.development

@@ -1,2 +1,2 @@
-GATSBY_SNAP_ORIGIN=npm:@bobanetwork/snap-account-abstraction-keyring-hc
+GATSBY_SNAP_ORIGIN=local:http://localhost:8080
 USE_LOCAL_NETWORK=false

packages/site/.env.development.hc

@@ -1,2 +1,2 @@
-GATSBY_SNAP_ORIGIN=npm:@bobanetwork/snap-account-abstraction-keyring-hc
+GATSBY_SNAP_ORIGIN=local:http://localhost:8080
 USE_LOCAL_NETWORK=false

packages/site/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobanetwork/snap-account-abstraction-keyring-site",
-  "version": "1.1.13",
+  "version": "1.1.18",
   "private": true,
   "license": "(MIT-0 OR Apache-2.0)",
   "scripts": {

packages/site/src/components/Buttons.tsx

@@ -40,6 +40,7 @@ const Button = styled.button`
   align-items: center;
   justify-content: center;
   margin-top: auto;
+
   ${({ theme }) => theme.mediaQueries.small} {
     width: 100%;
   }
@@ -50,7 +51,7 @@ const ButtonText = styled.span`
 `;
 
 const ConnectedContainer = styled.div`
-  display: flex;
+  display: inline-flex;
   align-self: flex-start;
   align-items: center;
   justify-content: center;
@@ -61,6 +62,8 @@ const ConnectedContainer = styled.div`
   color: ${(props) => props.theme.colors.text?.inverse};
   font-weight: bold;
   padding: 1.2rem;
+  margin-right: 1rem;
+  margin-left: 1rem;
 `;
 
 const ConnectedIndicator = styled.div`
@@ -115,7 +118,7 @@ export const ConnectButton = (props: ComponentProps<typeof Button>) => {
   return (
     <Button id="connectButton" {...props}>
       <MetaMaskFox />
-      <ButtonText>Connect To Boba Sepolia</ButtonText>
+      <ButtonText>Connect Snap</ButtonText>
     </Button>
   );
 };
@@ -151,6 +154,12 @@ export const HeaderButtons = ({
   updateAvailable: boolean;
   onConnectClick(): unknown;
 }) => {
+  const getNetworkName = () => {
+    return window.ethereum.networkVersion === '28882'
+      ? 'Boba Sepolia'
+      : 'Boba Mainnet';
+  };
+
   if (!state.hasMetaMask && !state.installedSnap) {
     return <InstallMetaMaskButton />;
   }
@@ -172,10 +181,16 @@ export const HeaderButtons = ({
   }
 
   return (
-    <ConnectedContainer>
-      <ConnectedIndicator />
-      <ButtonText id="snapConnected">Connected</ButtonText>
-    </ConnectedContainer>
+    <div>
+      <div>
+        <ConnectedContainer>
+          <ConnectedIndicator />
+          <ButtonText id="snapConnected">
+            Connected to: {getNetworkName()}
+          </ButtonText>
+        </ConnectedContainer>
+      </div>
+    </div>
   );
 };
 

packages/site/src/components/Header.tsx

@@ -8,7 +8,7 @@ import packageInfo from '../../package.json';
 import Logo from '../assets/boba-logo.png';
 import { defaultSnapOrigin } from '../config';
 import { MetamaskActions, MetaMaskContext } from '../hooks';
-import { connectSnap, getSnap } from '../utils';
+import { connectSnap, connectSnapWithNetwork, getSnap } from '../utils';
 
 const HeaderWrapper = styled.header`
   display: flex;
@@ -47,10 +47,10 @@ const RightContainer = styled.div`
 `;
 
 const VersionStyle = styled.p`
+  width: fit-content;
   margin-top: 1.2rem;
   font-size: 1.6rem;
-  margin: auto;
-  padding-right: 2rem;
+  padding-right: 4rem;
   color: ${({ theme }) => theme.colors.text?.muted};
 `;
 
@@ -86,35 +86,59 @@ export const Header = () => {
     return (
       <VersionStyle>
         <div>
-          <b>Dapp V: </b>
-          {packageInfo.version}
-        </div>
-        <div>
-          <b>Snap V: </b>
+          {defaultSnapOrigin.startsWith('local') &&
+            `(from ${defaultSnapOrigin})` && (
+              <span
+                style={{
+                  padding: '5px',
+                  borderRadius: '5px',
+                  marginRight: '10px',
+                }}
+              >
+                Local Snap
+              </span>
+            )}
           <span
             style={{
-              backgroundColor: '#4CAF50',
-              color: 'white',
               padding: '5px',
               borderRadius: '5px',
+              marginRight: '10px',
             }}
           >
-            Expected: {snapPackageInfo.version}
-          </span>{' '}
-          |
+            DApp: {packageInfo.version}
+          </span>
           <span
             style={{
-              backgroundColor: '#4CAF50',
-              color: 'white',
               padding: '5px',
               borderRadius: '5px',
             }}
           >
-            Installed: {state.installedSnap?.version}
-          </span>
+            Expected: {snapPackageInfo.version}
+          </span>{' '}
+          {state.installedSnap?.version ? (
+            <span
+              style={{
+                backgroundColor: '#4CAF50',
+                color: 'white',
+                padding: '5px',
+                borderRadius: '5px',
+              }}
+            >
+              Installed: {state.installedSnap?.version}
+            </span>
+          ) : (
+            <span
+              style={{
+                backgroundColor: '#f37086',
+                color: 'white',
+                padding: '5px',
+                borderRadius: '5px',
+              }}
+            >
+              Installed: No Snap found
+            </span>
+          )}
         </div>
-
-        {defaultSnapOrigin.startsWith('local') && `(from ${defaultSnapOrigin})`}
       </VersionStyle>
     );
   };
@@ -127,6 +151,24 @@ export const Header = () => {
       </LogoWrapper>
       <RightContainer>
         <Version />
+        {state.installedSnap?.version && (
+          <button
+            style={{ marginRight: '1rem' }}
+            onClick={async () =>
+              connectSnapWithNetwork(
+                window.ethereum.networkVersion === '28882'
+                  ? 'mainnet'
+                  : 'sepolia',
+              )
+            }
+          >
+            {window.ethereum.networkVersion === '28882' ? (
+              <span>Switch To Boba Mainnet</span>
+            ) : (
+              <span>Switch to Boba Sepolia</span>
+            )}
+          </button>
+        )}
         <HeaderButtons
           state={state}
           onConnectClick={handleConnectClick}

packages/site/src/pages/index.tsx

@@ -97,7 +97,6 @@ const Index = () => {
 
   const client = new KeyringSnapRpcClient(snapId, window.ethereum as any);
   const abiCoder = new ethers.AbiCoder();
-
   useEffect(() => {
     /**
      * Return the current state of the snap.
@@ -401,7 +400,7 @@ const Index = () => {
 
   const sendBobaTx = async () => {
     if (!snapState?.accounts || !selectedAccount) {
-      throw new Error('Source account not connected');
+      throw new Error('Please connect your wallet first!');
     }
 
     // Paymaster Setup steps (only first time or when required)
@@ -471,17 +470,6 @@ const Index = () => {
     if (bobaPaymasterSelected) {
       method = 'eth_sendUserOpBobaPM';
     }
-    console.log({
-      method: 'wallet_invokeSnap',
-      params: {
-        snapId: defaultSnapOrigin,
-        request: {
-          method,
-          params: [transactionDetails],
-          id: snapState.accounts[0]?.id ?? '',
-        },
-      },
-    });
 
     const submitRes = await window.ethereum.request({
       method: 'wallet_invokeSnap',
@@ -521,7 +509,8 @@ const Index = () => {
   const accountManagementMethods = [
     {
       name: 'Create account',
-      description: 'Create a 4337 account using an admin private key',
+      description:
+        'Create a 4337 account using an admin private key and a salt, which you need to write down or store to re-create the wallet.',
       inputs: [
         {
           id: 'create-account-private-key',
@@ -534,7 +523,7 @@ const Index = () => {
         },
         {
           id: 'create-account-salt',
-          title: 'Salt (optional)',
+          title: 'Salt (optional, write it down)',
           value: salt,
           type: InputType.TextField,
           placeholder: 'E.g. 0x123',
@@ -551,7 +540,7 @@ const Index = () => {
     {
       name: 'Create account (Deterministic)',
       description:
-        'Create a 4337 account using a deterministic key generated through the snap',
+        'Create a 4337 account using a deterministic key generated through the snap. If the account cannot be found or already exists, try to remove and re-install the snap via the Metamask UI.',
       inputs: [
         {
           id: 'create-account-deterministic',
@@ -610,15 +599,15 @@ const Index = () => {
           onChange: (event: any) =>
             setTransferAmount(event.currentTarget.value),
         },
-        {
-          id: 'transfer-fund-boba-paymaster',
-          title: 'Select boba as paymaster.',
-          value: bobaPaymasterSelected,
-          type: InputType.CheckBox,
-          placeholder: 'E.g. 0.00',
-          onChange: (event: any) =>
-            setBobaPaymasterSelected(event.target.checked),
-        },
+        // {
+        //   id: 'transfer-fund-boba-paymaster',
+        //   title: 'Select boba as paymaster.',
+        //   value: bobaPaymasterSelected,
+        //   type: InputType.CheckBox,
+        //   placeholder: 'E.g. 0.00',
+        //   onChange: (event: any) =>
+        //     setBobaPaymasterSelected(event.target.checked),
+        // },
       ],
       action: {
         callback: async () => await sendBobaTx(),