Merge pull request #21 from bobanetwork/wsdt/nonce-gas

feat: fixed some typings, allow users to override some userOp params, correct gas calculation, ..

.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+.idea
+.github
+Dockerfile

Dockerfile

@@ -0,0 +1,11 @@
+# Stage 1: Build dependencies
+FROM node:20-alpine AS deps
+WORKDIR /app
+COPY . .
+RUN yarn install
+
+# Expose the ports the app runs on
+EXPOSE 8000 8080
+
+# Command to run the application
+CMD ["yarn", "start"]

packages/site/.env

@@ -1 +1,2 @@
 GATSBY_SNAP_ORIGIN=local:http://localhost:8080
+USE_LOCAL_NETWORK=false

packages/site/.env.development

@@ -1 +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 +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

@@ -13,7 +13,7 @@
     "lint:misc": "prettier '**/*.json' '**/*.md' '!CHANGELOG.md' --check",
     "lint:changelog": "auto-changelog validate --prettier",
     "lint:types": "tsc --noEmit",
-    "start": "rimraf .cache && cross-env GATSBY_TELEMETRY_DISABLED=1 gatsby develop"
+    "start": "rimraf .cache && cross-env GATSBY_TELEMETRY_DISABLED=1 gatsby develop -H 0.0.0.0"
   },
   "browserslist": {
     "production": [

packages/site/src/components/Accordion.tsx

@@ -63,11 +63,13 @@ export const Accordion = ({ items }: any) => {
               )}
             </AccordionHeader>
             <AccordionContent isOpen={activeIndexes.includes(index)}>
-              <StyledBox sx={{
-                flexGrow: 1,
-                width: "-webkit-fill-available",
-                marginBottom: '10px'
-              }}>
+              <StyledBox
+                sx={{
+                  flexGrow: 1,
+                  width: '-webkit-fill-available',
+                  marginBottom: '10px',
+                }}
+              >
                 <Method
                   description={item.description}
                   inputs={item.inputs}

packages/site/src/components/Account.tsx

@@ -20,12 +20,12 @@ export const Account = ({
   account,
   handleDelete,
   count,
-  currentAccount
+  currentAccount,
 }: {
-    currentAccount?: any;
-    account: KeyringAccount;
-    handleDelete: (accountId: string) => Promise<void>;
-    count: number;
+  currentAccount?: any;
+  account: KeyringAccount;
+  handleDelete: (accountId: string) => Promise<void>;
+  count: number;
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(true);
 
@@ -34,21 +34,34 @@ export const Account = ({
       <AccountTitleContainer onClick={() => setIsCollapsed(!isCollapsed)}>
         <AccountTitle>
           Account {count + 1}
-          {currentAccount && currentAccount?.address && currentAccount?.address?.toLowerCase() === account.address.toLowerCase() ? <StyledIcon>
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-            </svg></StyledIcon> : <></>}
-
+          {currentAccount &&
+          currentAccount?.address &&
+          currentAccount?.address?.toLowerCase() ===
+            account.address.toLowerCase() ? (
+            <StyledIcon>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+                />
+              </svg>
+            </StyledIcon>
+          ) : (
+            <></>
+          )}
         </AccountTitle>
         <AccountTitleIconContainer>
           {isCollapsed ? (
-            <ExpandMoreIcon
-              fontSize="large"
-            />
+            <ExpandMoreIcon fontSize="large" />
           ) : (
-            <ExpandLessIcon
-                fontSize="large"
-            />
+            <ExpandLessIcon fontSize="large" />
           )}
         </AccountTitleIconContainer>
       </AccountTitleContainer>
@@ -77,14 +90,14 @@ export const Account = ({
             </ul>
           </AccountRow> */}
           <AccountRow alignItems="flex-end">
-              <MethodButton
-                width="30%"
-                margin="8px 0px 8px 8px"
-                onClick={async (): Promise<void> => {
-                  await handleDelete(account.id);
-                }}
-                label="Delete"
-              />
+            <MethodButton
+              width="30%"
+              margin="8px 0px 8px 8px"
+              onClick={async (): Promise<void> => {
+                await handleDelete(account.id);
+              }}
+              label="Delete"
+            />
           </AccountRow>
         </>
       )}

packages/site/src/components/AccountList.tsx

@@ -15,11 +15,11 @@ const List = styled.ul`
 export const AccountList = ({
   accounts,
   handleDelete,
-  currentAccount
+  currentAccount,
 }: {
   accounts: KeyringAccount[];
   handleDelete: (accountId: string) => Promise<void>;
-    currentAccount?: KeyringAccount;
+  currentAccount?: KeyringAccount;
 }) => (
   <List>
     {accounts.map((account, index) => (

packages/site/src/components/Footer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled, { useTheme } from 'styled-components';
+
 import Logo from '../assets/boba-logo.png';
 
 const FooterWrapper = styled.footer`
@@ -13,7 +14,7 @@ const FooterWrapper = styled.footer`
 
 const BobaLogo = styled.img`
   width: 50px;
-`
+`;
 
 const PoweredByButton = styled.a`
   display: flex;

packages/site/src/components/Header.tsx

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
 import semver from 'semver';
 import styled from 'styled-components';
-import Logo from '../assets/boba-logo.png';
+
 import { HeaderButtons } from './Buttons';
 import snapPackageInfo from '../../../snap/package.json';
 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';

packages/site/src/components/Method.tsx

@@ -149,7 +149,7 @@ export const Method = ({
       style={{
         margin: '0 auto',
         overflowX: 'hidden',
-        width: '75%'
+        width: '75%',
       }}
     >
       <StyledDescription>{description}</StyledDescription>

packages/site/src/config/snap.ts

@@ -4,3 +4,5 @@
  */
 export const defaultSnapOrigin =
   process.env.GATSBY_SNAP_ORIGIN ?? `local:http://localhost:8080`;
+
+export const isLocal = process.env.USE_LOCAL_NETWORK?.toLowerCase() === 'true';

packages/site/src/hooks/MetamaskContext.tsx

@@ -116,11 +116,9 @@ export const MetaMaskProvider = ({ children }: { children: ReactNode }) => {
       await detectMetaMask();
 
       if (state.hasMetaMask) {
-
         await detectNetworkInstalled();
 
         if (state.isBobaSepolia) {
-
           await detectSnapInstalled();
         }
       }