add site release workflow (#48)

* add site release workflow

* add GATSBY_PATH_PREFIX to gatsbt config

* update env.production

* update SNAP_ORIGIN to GATSBY_SNAP_ORIGIN

.github/workflows/publish-release.yml

@@ -23,12 +23,16 @@ jobs:
         run: |
           yarn install
           yarn build
+        env:
+          GATSBY_PATH_PREFIX: ${{ github.event.repository.name }}
+          GATSBY_SNAP_ORIGIN: npm:@transeptor-labs/${{ github.event.repository.name }}
       - name: Cache build artifacts
         uses: actions/cache@v3
         id: cache-build
         with:
           path: |
             ./packages/snap/dist
+            ./packages/site/public
             ./node_modules/.yarn-state.yml
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
       - name: Dry Run Publish
@@ -45,3 +49,8 @@ jobs:
           npm publish ./packages/snap --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Deploy to `gh-pages` branch
+        uses: peaceiris/actions-gh-pages@de7ea6f8efb354206b205ef54722213d99067935
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./packages/site/public

.sample.env

@@ -1,3 +1,2 @@
-SNAP_ORIGIN=local:http://localhost:8080
 MNEMONIC=test test test test test test test test test test test junk
 BENEFICIARY=0xd21934eD8eAf27a67f0A70042Af50A1D6d195E81

README.md

@@ -38,8 +38,9 @@ To interact with the Snaps, you must install [MetaMask Flask](https://metamask.i
 The snap requires a connection to ERC4337 Bundler. We will use Transeptor Bundler running alongside a geth client to set up the local ERC-4337 environment. Follow the steps below to set up the local environment:
 
 1. Create a `.env` file and copy values in `.env.sample` to a the `.env` file.
-2. `git submodule update --init`
-3. Run `make bundler` to start the bundler.
+2. Add `GATSBY_SNAP_ORIGIN=local:http://localhost:8080` to the `./packages/site/.env.development` file.
+3. `git submodule update --init`
+4. Run `make bundler` to start the bundler.
 
 The Bundler will start running on [http://localhost:3000/rpc](http://localhost:3000/rpc). You will
 need to have [Metamask Flask](https://metamask.io/flask/) installed and listening to

packages/site/.env.development

@@ -0,0 +1 @@
+GATSBY_SNAP_ORIGIN=local:http://localhost:8080

packages/site/.env.production

@@ -0,0 +1 @@
+GATSBY_SNAP_ORIGIN=npm:@transeptor-labs/smarthub-snap

packages/site/gatsby-config.ts

@@ -4,6 +4,8 @@ const config: GatsbyConfig = {
   // This is required to make use of the React 17+ JSX transform.
   jsxRuntime: 'automatic',
 
+  pathPrefix: process.env.GATSBY_PATH_PREFIX ?? '/',
+
   plugins: [
     'gatsby-plugin-svgr',
     'gatsby-plugin-styled-components',

packages/site/package.json

@@ -8,13 +8,13 @@
     "url": "https://transeptorlabs.io"
   },
   "scripts": {
-    "build": "cross-env GATSBY_TELEMETRY_DISABLED=1 gatsby build",
+    "build": "rimraf .cache && cross-env GATSBY_TELEMETRY_DISABLED=1 gatsby build --prefix-paths",
     "clean": "rimraf public",
     "lint": "yarn lint:eslint && yarn lint:misc --check",
     "lint:eslint": "eslint . --cache --ext js,ts",
     "lint:fix": "yarn lint:eslint --fix && yarn lint:misc --write",
     "lint:misc": "prettier '**/*.json' '**/*.md' '!CHANGELOG.md' --ignore-path .gitignore",
-    "start": "cross-env GATSBY_TELEMETRY_DISABLED=1 gatsby develop",
+    "start": "rimraf .cache && cross-env GATSBY_TELEMETRY_DISABLED=1 gatsby develop",
     "test": "echo \"TODO\""
   },
   "browserslist": {
@@ -69,6 +69,7 @@
     "null-loader": "^4.0.1",
     "prettier": "^2.2.1",
     "prettier-plugin-packagejson": "^2.2.18",
+    "react-scripts": "^5.0.1",
     "rimraf": "^3.0.2",
     "typescript": "^4.7.4"
   }

packages/site/src/components/Network.tsx

@@ -54,7 +54,8 @@ export const NetworkModalDropdown = ({
       // refresh selected smart account
       if(state.scAccount.connected && state.selectedSnapKeyringAccount.id !== '') {
         await getSmartAccount(state.selectedSnapKeyringAccount.id)
-        await getAccountActivity(state.selectedSnapKeyringAccount.id)
+        // TODO: Add account activity
+        // await getAccountActivity(state.selectedSnapKeyringAccount.id)
       }
     }
   };

packages/site/src/config/snap.ts

@@ -3,4 +3,4 @@
  * Will default to the local hosted snap if no value is provided in environment.
  */
 export const defaultSnapOrigin =
-  process.env.SNAP_ORIGIN ?? `local:http://localhost:8080`;
+  process.env.GATSBY_SNAP_ORIGIN ?? `local:http://localhost:8080`;

packages/site/src/pages/index.tsx

@@ -164,48 +164,49 @@ const Index = () => {
         if (account.length > 0) {
           await selectKeyringSnapAccount(account[0]);
           await getSmartAccount(account[0].id);
-          await getAccountActivity(account[0].id);
+          // await getAccountActivity(account[0].id);
         }
       }
     }
 
     initAccounts().catch((error) => dispatch({ type: MetamaskActions.SetError, payload: error }));
   }, [state.installedSnap]);
 
+  // TODO: Add account activity
   // realtime refresh - refreshes account activity every 10 seconds
-  useEffect(() => {
-    let interval: any
-    try {  
-      interval = setInterval(async () => {
-        if (state.accountActivity.length > 0) {
-          const accountActivity = state.accountActivity
-          for (const activity of accountActivity) {
-            if (activity.userOpHash !== '' && activity.userOperationReceipt === null) {
-              const userOpReceipt = await getUserOperationReceipt(activity.userOpHash)
-
-              if (userOpReceipt !== null) {
-                notify('Transaction confirmed (userOpHash)', 'View activity for details.', activity.userOpHash)
-              }
-              activity.userOperationReceipt = userOpReceipt
-            }
-          }
+  // useEffect(() => {
+  //   let interval: any
+  //   try {  
+  //     interval = setInterval(async () => {
+  //       if (state.accountActivity.length > 0) {
+  //         const accountActivity = state.accountActivity
+  //         for (const activity of accountActivity) {
+  //           if (activity.userOpHash !== '' && activity.userOperationReceipt === null) {
+  //             const userOpReceipt = await getUserOperationReceipt(activity.userOpHash)
+
+  //             if (userOpReceipt !== null) {
+  //               notify('Transaction confirmed (userOpHash)', 'View activity for details.', activity.userOpHash)
+  //             }
+  //             activity.userOperationReceipt = userOpReceipt
+  //           }
+  //         }
 
-          dispatch({
-            type: MetamaskActions.SetAccountActivity,
-            payload: accountActivity,
-          });
-        }
-      }, 10000) // 10 seconds
+  //         dispatch({
+  //           type: MetamaskActions.SetAccountActivity,
+  //           payload: accountActivity,
+  //         });
+  //       }
+  //     }, 10000) // 10 seconds
 
-      return () => {
-        clearInterval(interval);
-      };
+  //     return () => {
+  //       clearInterval(interval);
+  //     };
 
-    } catch (e) {
-      console.error('[ERROR] refresher:', e.message);
-      dispatch({ type: MetamaskActions.SetError, payload: e });
-    } 
-  }, [state.accountActivity]);
+  //   } catch (e) {
+  //     console.error('[ERROR] refresher:', e.message);
+  //     dispatch({ type: MetamaskActions.SetError, payload: e });
+  //   } 
+  // }, [state.accountActivity]);
 
   // realtime refresh - refreshes account balances every 5 seconds
   useEffect(() => {
@@ -299,7 +300,8 @@ const Index = () => {
           if (accounts.length > 0) {
             await selectKeyringSnapAccount(accounts[0]);
             await getSmartAccount(accounts[0].id);
-            await getAccountActivity(accounts[0].id);
+            // TODO: Add account activity
+            // await getAccountActivity(accounts[0].id);
           } else {
             dispatch({ type: MetamaskActions.SetClearAccount, payload: true })
           }
@@ -395,7 +397,7 @@ const Index = () => {
           <Card
             content={{
               title: 'Connect SmartHub snap',
-              description: 'Features include:',
+              description: 'Features:',
               listItems: [
                 'Access and control smart accounts with MetaMask. Enjoy smart contract functionality with ease and convenience.',
                 'Manage ERC-4337 accounts(create, sign, send, transfer funds)',
@@ -459,7 +461,8 @@ const Index = () => {
             <EthereumTransactionModalComponent  transactionType={transactionType}/>
           </Modal>
 
-          {state.scAccount.connected && state.installedSnap && (
+          {/* TODO: Add account activity */}
+          {/* {state.scAccount.connected && state.installedSnap && (
             <Card
               content={{
                 title: 'Activity',
@@ -468,7 +471,7 @@ const Index = () => {
               disabled={!state.isFlask}
               fullWidth
             />
-          )}
+          )} */}
 
           {state.installedSnap && state.snapKeyring.accounts.length === 0 && (
             <Card

packages/site/src/utils/snap.ts

@@ -10,6 +10,7 @@ import {
   UserOperationReceipt,
   SignedTxs,
 } from '../types';
+import snapPackageInfo from '../../../snap/package.json';
 import { getMMProvider } from './metamask';
 
 // Snap management *****************************************************************
@@ -32,7 +33,9 @@ export const getSnaps = async (): Promise<GetSnapsResponse> => {
  */
 export const connectSnap = async (
   snapId: string = defaultSnapOrigin,
-  params: Record<'version' | string, unknown> = {},
+  params: Record<'version' | string, unknown> = {
+    version: snapPackageInfo.version,
+  },
 ) => {
   await getMMProvider().request({
     method: 'wallet_requestSnaps',
@@ -312,13 +315,15 @@ export const estimatCreationGas = async (
 
 // ERC-4337 wrappers ******************************************************
 export const sendSupportedEntryPoints = async (): Promise<string[]> => {
-  return (await getMMProvider().request({
-    method: 'wallet_invokeSnap',
-    params: {
-      snapId: defaultSnapOrigin,
-      request: { method: 'eth_supportedEntryPoints', params: [] },
-    },
-  })) as string[];
+  // TODO: Add account activity
+  // return (await getMMProvider().request({
+  //   method: 'wallet_invokeSnap',
+  //   params: {
+  //     snapId: defaultSnapOrigin,
+  //     request: { method: 'eth_supportedEntryPoints', params: [] },
+  //   },
+  // })) as string[];
+  return ['0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789'];
 };
 
 export const estimateUserOperationGas = async (

packages/snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/transeptorlabs/smarthub-snap.git"
   },
   "source": {
-    "shasum": "9Q4HBk5SUj6k+fzMCIAGRCO1Ag09i5ZU71TqtrAhTgI=",
+    "shasum": "FiaxHBC9ZBxB1ZyRR6Wkk078DvWLLpdBXjdtkcos4eA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snap/src/state/state.contants.ts

@@ -1,7 +1,7 @@
 export const DEFAULT_BUNDLER_URLS = {
   '0x539': 'http://localhost:4337/rpc', // 1337 - private
-  '0x5': '', // goerli
-  '0xaa36a7': '', // 11155111 - sepolia
+  '0x5': 'https://goerli.transeptorlabs.io/rpc', // goerli
+  '0xaa36a7': 'https://sepolia.transeptorlabs.io/rpc', // 11155111 - sepolia
   // '0x1': '', // ethereum mainnet
   // '0x89': '', // polygon mainnet
   // '0x13881': '', // polygon mumbai