Feat/deploy snap to npm (#38)

* feat: add transeptor bundler submodule

* feat: add script to start local bundler

* feat: add git submodule command

* chore: update local bundler default port

* feat: can now copy addresses in modal

* feat: migrate snap @metamask/keyring-api deps from 0.1.3 to 1.0.0

* feat: add async and sync keyring request to dapp account hooks

* feat: rename snap to smarthub

* chore: fix lint

.eslintrc.js

@@ -42,5 +42,7 @@ module.exports = {
     '**/build',
     '**/public',
     '**/.cache',
+    'packages/transeptor/**',
+    '**/packages/transeptor/**/',
   ],
 };

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "packages/transeptor"]
+	path = packages/transeptor
+	url = https://github.com/transeptorlabs/transeptor-bundler.git

.nvmrc

@@ -1 +1 @@
-v16
+v19

.sample.env

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

CONTRIBUTING.md

@@ -1,8 +1,8 @@
-# Contributing to ERC-4337 Relayer Snap
+# Contributing to SmartHub Snap
 
 ## Why Contribute
 
-ERC-4337 Relayer Snap is an open source project that welcomes contributions from anyone in the community. By contributing to this project, you can:
+SmartHub Snap is an open source project that welcomes contributions from anyone in the community. By contributing to this project, you can:
 
 - Help improve the quality of the software for everyone who uses it.
 - Learn new skills and gain experience working on a real-world project.
@@ -14,7 +14,7 @@ ERC-4337 Relayer Snap is an open source project that welcomes contributions from
 
 ## How to Contribute
 
-1. Clone the repo to your local machine. `git clone https://github.com/transeptorlabs/erc-4337-snap.git`
+1. Clone the repo to your local machine. `git clone https://github.com/transeptorlabs/smarthub-snap.git`
 2. Install dependencies with `npm install`.
 3. Create a new branch for your changes with `git checkout -b my-branch-name`.
 4. Make your changes and commit them with descriptive commit messages.
@@ -44,4 +44,4 @@ When you submit a pull request, please make sure to include a description of you
 
 ## Thank You
 
-Thank you for considering contributing to ERC-4337 Relayer Snap! Your contributions help make our project better, and we appreciate your time and effort.
+Thank you for considering contributing to SmartHub Snap! Your contributions help make our project better, and we appreciate your time and effort.

Makefile

@@ -0,0 +1,17 @@
+# Simple local development makefile.
+
+bundler:
+	chmod +x ./start-bundler.sh
+	./start-bundler.sh
+
+start:
+	@echo "Start snap and site."
+	yarn start
+
+snap:
+	@echo "Start snap and site."
+	yarn start-snap
+
+site:
+	@echo "Start site and site."
+	yarn start-site

README.md

@@ -1,15 +1,21 @@
-# ERC-4337 Relayer Snap
+# SmartHub
 
 ![Node Version](https://img.shields.io/badge/node-16.x-green)
 [![codecov](https://img.shields.io/codecov/c/github/transeptorlabs/erc-4337-relayer.svg?style=flat-square)](https://app.codecov.io/gh/transeptorlabs/erc-4337-relayer)
 ![Github workflow build status(main)](https://img.shields.io/github/actions/workflow/status/transeptorlabs/erc-4337-relayer/build-test.yml?branch=main)
 
-This is the core repository for the development of the ERC-4337 Relayer
+## Overview
+
+- **Why**: ERC-4337(aka: Account abstraction) introduces new core components to make managing crypto simple. It has potential, but it can be difficult for developers and users to use all its core components. We have a solution that simplifies interacting with those core components.
+- **What**: SmartHub is a snap that makes it easy for developers and MetaMask wallet users to use ERC-4337 without dealing with its complexity.
+- **How**: The snap adds extra features to MetaMask by including RPC methods that work with ERC-4337 core components. Please take a look at the [SmartHub Snap Architecture page](https://transeptorlabs.io/snap/concepts/architecture).
+
+This is the core repository for the development of the SmartHub
 MetaMask Snap. Roadmap [here](https://hackmd.io/@V00D00-child/SJOnAnxF2#Roadmap)
 
-> :warning: **This repository is currently under active development.**
+> :warning: **This repository is currently under active development, and contracts/snap is not audited.**
 
-## Features
+### Features
 
 - In dapp transaction flow. You don't need to confirm transactions/user operations in the browser extension window. Enjoy a web2-like experience with full in-dapp confirm/reject transaction flow.
 - Access and control smart accounts with MetaMask. Enjoy smart contract functionality with ease and convenience.
@@ -18,108 +24,64 @@ MetaMask Snap. Roadmap [here](https://hackmd.io/@V00D00-child/SJOnAnxF2#Roadmap)
 - Sign/send regular Ethereum transactions with the owner EOA of the smart account.
 - Get wallet notifications when transactions/user operations and confirmed onchain.
 
-## Preview video
-
-[![How to use Transeptor Labs ERC-4337 Relayer MetaMask Snap](https://img.youtube.com/vi/yP091c8tKrE/0.jpg)](https://www.youtube.com/watch?v=yP091c8tKrE)
-
-## Why
-
-ERC-4337: Account abstraction introduces new core components to make managing crypto simple. It has potential, but it can be difficult for developers and users to use all its core components. We have a solution that simplifies interacting with those core components.
-
-## What
-
-ERC-4337 Relayer is a snap that makes it easy for developers and MetaMask wallet users to use ERC-4337 without dealing with its complexity.
-
-## How
-
-The snap adds extra features to MetaMask by including RPC methods that work with ERC-4337 core components. Please take a look at the [ERC-4337 Relayer Snap Architecture page](https://transeptorlabs.io/snap/concepts/architecture).
-
-## Snaps is pre-release software
+## Requirements
 
 To interact with the Snaps, you must install [MetaMask Flask](https://metamask.io/flask/), a canary distribution for developers that provides access to upcoming features.
 
-### Requirements
+- MetaMask Flask
+- Docker
+- yarn
+- npm
 
-- A version od MetaMask Flask to `=> 10.34.4-flask.0`
-- Uses this page to [Revert back to earlier version flask](https://support.metamask.io/hc/en-us/articles/360016336611-Revert-back-to-earlier-version-or-add-custom-build-to-Chrome):
+## Set up
 
-## Contributing
+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:
 
-We welcome contributions to enhance our ERC-4337 Relayer Snap. If you would like to contribute, please follow these guidelines [here](https://github.com/transeptorlabs/erc-4337-snap/blob/main/CONTRIBUTING.md).
+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.
 
-## Getting Started
-
-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.
+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
+`localhost:8545` network.
 
-### Running ERC 4337 Bundler node locally
+## Start up snap and React app
 
-The first things you need to do are clone this repository and install its
-dependencies:
+Make sure you follow the steps in `Set up` before starting the snap
 
-```sh
-git clone https://github.com/transeptorlabs/account-abstraction-boilerplate.git
-cd account-abstraction-boilerplate
-npm install
+```shell
+nvm use
 ```
 
-Once installed, let's run an ETH client on your local network:
-
-```sh
-npm run node
+```shell
+yarn set version 3.2.1
 ```
 
-Next, on a new terminal, go to the repository's root folder and run this to
-deploy Account Abstraction and your contract:
-
-```sh
-npm run deploy:all
+```shell
+yarn install
 ```
 
-Next, we can use use `.env.sample` to create .env file with your `MNEMONIC` and `BENEFICIARY`.
-
-- `MNEMONIC`: and is set to the default seend phrase of hardhat accounts. The first account of the hardhat accounts is used as the bundler signer.
-- `BENEFICIARY`: is set to the second account of the hardhat accounts.
-
-Then, we can fund the bundler signer account with some ETH:
+Set `SNAP_ORIGIN=prod:http://localhost:8080` in local `.env` file
 
-```sh
-npm run fund 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
+```shell
+yarn start
 ```
 
-Finally, we can run the ERC-4337 Bundler(Transeptor)
+Site will be running on [http://localhost:8000](http://localhost:8000)
 
-```sh
-npm run bundler
-```
+## Testing and Linting
 
-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
-`localhost:8545`.
+Run `yarn test` to run the tests once.
 
-#### Troubleshooting
+Run `yarn lint` to run the linter, or run `yarn lint:fix` to run the linter and fix any automatically fixable issues.
+
+## Troubleshooting
 
 - `Invalid nonce` errors: if you are seeing this error on the `npx hardhat node`
   console, try resetting your Metamask account. This will reset the account's
   transaction history and also the nonce. Open Metamask, click on your account
   followed by `Settings > Advanced > Clear activity tab data`.
 
-### Start up snap and React app
-
-Make sure you follow the steps in `Running ERC 4337 Bundler locally` before starting the snap
-
-```shell
-yarn install && yarn start
-```
-
-Set `SNAP_ORIGIN=prod:http://localhost:8080` in local `.env` file
-
-#### Testing and Linting
-
-Run `yarn test` to run the tests once.
-
-Run `yarn lint` to run the linter, or run `yarn lint:fix` to run the linter and fix any automatically fixable issues.
-
-#### Notes
+## Contributing
 
-- Babel is used for transpiling TypeScript to JavaScript, so when building with the CLI,
-  `transpilationMode` must be set to `localOnly` (default) or `localAndDeps`.
+We welcome contributions to enhance our SmartHub Snap. If you would like to contribute, please follow these guidelines [here](https://github.com/transeptorlabs/smarthub-snap/blob/main/CONTRIBUTING.md).

package.json

@@ -1,24 +1,25 @@
 {
-  "name": "erc-4337-relayer-monorepo",
+  "name": "root",
   "version": "1.0.0",
   "private": true,
-  "description": "A MetaMask snap the wraps ERC-4337 eth namespace methods.",
-  "homepage": "https://github.com/transeptorlabs/erc-4337-snap#readme",
+  "description": "",
+  "homepage": "https://github.com/transeptorlabs/smarthub-snap#readme",
   "bugs": {
-    "url": "https://github.com/transeptorlabs/erc-4337-snap/issues"
+    "url": "https://github.com/transeptorlabs/smarthub-snap/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/transeptorlabs/erc-4337-snap.git"
+    "url": "git+https://github.com/transeptorlabs/smarthub-snap.git"
   },
-  "license": "(MIT-0 OR Apache-2.0)",
+  "license": "MIT",
   "author": {
     "name": "Transeptor Labs",
     "email": "[email protected]",
     "url": "https://transeptorlabs.io"
   },
   "workspaces": [
-    "packages/*"
+    "packages/snap",
+    "packages/site"
   ],
   "scripts": {
     "build": "yarn workspaces foreach --parallel --topological --verbose run build",
@@ -27,6 +28,8 @@
     "lint:fix": "yarn lint:eslint --fix && yarn lint:misc --write",
     "lint:misc": "prettier '**/*.json' '**/*.md' '!**/CHANGELOG.md' '**/*.yml' --ignore-path .gitignore",
     "start": "yarn workspaces foreach --parallel --interlaced --verbose run start",
+    "start-site": "yarn workspace @transeptor-labs/smarthub-site run start",
+    "start-snap": "yarn workspace @transeptor-labs/smarthub-snap run start",
     "test": "yarn workspaces foreach --parallel --topological --verbose run test"
   },
   "devDependencies": {

packages/site/.env.production.dist

@@ -1 +1 @@
-SNAP_ORIGIN=
+SNAP_ORIGIN=npm:@transeptor-labs/smarthub-snap

packages/site/gatsby-config.ts

@@ -10,7 +10,7 @@ const config: GatsbyConfig = {
     {
       resolve: 'gatsby-plugin-manifest',
       options: {
-        name: 'ERC-4337 Relayer',
+        name: 'SmartHub',
         icon: 'src/assets/logo.svg',
         theme_color: '#8093ff',
         background_color: '#FFFFFF',

packages/site/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@transeptor/site",
+  "name": "@transeptor-labs/smarthub-site",
   "version": "0.1.0",
   "private": true,
   "license": "(MIT-0 OR Apache-2.0)",
@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@account-abstraction/contracts": "^0.6.0",
-    "@metamask/keyring-api": "^0.1.3",
-    "@metamask/providers": "^11.0.0",
+    "@metamask/keyring-api": "^1.0.0",
+    "@metamask/providers": "^13.0.0",
     "ethers": "^5.7.0",
     "react": "^18.2.0",
     "react-blockies": "1.4.1",

packages/site/src/components/Account.tsx

@@ -153,7 +153,7 @@ export const AccountHeaderDisplay = () => {
           </IconContainer>
           <FlexColWrapperLeft>
           <PrimaryText>MetaMask @ {SupportedChainIdMap[state.chainId] ? SupportedChainIdMap[state.chainId].name : 'Not Supported'}</PrimaryText>
-            <SecondaryText>Connect ERC-4337 Relayer</SecondaryText>
+            <SecondaryText>Connect SmartHub snap</SecondaryText>
           </FlexColWrapperLeft>
         </FlexRowWrapper>
       );
@@ -170,7 +170,7 @@ export const AccountHeaderDisplay = () => {
         <PrimaryText> 
           {state.selectedSnapKeyringAccount.address === '' ? 
             'No account selected' :
-            state.selectedSnapKeyringAccount.name
+            state.selectedSnapKeyringAccount.options.name as string
           }
         </PrimaryText>
       </FlexColWrapperLeft>
@@ -185,7 +185,7 @@ export const AccountModalDropdown = ({
 }) => {
   const [state, dispatch] = useContext(MetaMaskContext);
   const [selectedAccount, setSelectedAccount] = useState<KeyringAccount>(state.selectedSnapKeyringAccount);
-  const {selectKeyringSnapAccount, getSmartAccount, createAccount, updateAccountBalance, getAccountActivity} = useAcount();
+  const {selectKeyringSnapAccount, getSmartAccount, createAccount, getAccountActivity} = useAcount();
   const [accountName, setAccountName] = useState('');
 
   const featureList: {feature: string; description: string }[] = [
@@ -223,11 +223,10 @@ export const AccountModalDropdown = ({
   const handleAccountChange = async (event: any, account: KeyringAccount) => {
     event.preventDefault();
     setSelectedAccount(account);
+    closeModal();
     await selectKeyringSnapAccount(account);
     await getSmartAccount(account.id);
-    await updateAccountBalance(account.address);
     await getAccountActivity(account.id);
-    closeModal();
   }
 
   const handleCreateAccount = async (event: any) => {
@@ -326,7 +325,7 @@ export const AccountModalDropdown = ({
             <BlockieAccountModal/>
             <FlexColWrapperLeft>
                 <FlexRowWrapper>
-                  <TextBold>{account.name}</TextBold>
+                  <TextBold>{account.options.name as string}</TextBold>
                 </FlexRowWrapper>
 
             </FlexColWrapperLeft>
@@ -597,11 +596,11 @@ export const AccountRequestDisplay = ({
     <>
       {state.snapKeyring.pendingRequests && (
         filterPendingRequests(state.snapKeyring.pendingRequests, state.selectedSnapKeyringAccount.id).map((item: KeyringRequest) => (
-          <PendingRequestContainer key={`${item.request.id}-${item.account}`}>
+          <PendingRequestContainer key={`${item.id}-${item.account}`}>
             {renderRequestDetails(item)}
             <PendingRequestItem>
-              <SimpleButton text={'Reject'} onClick={(e: any) => {rejectRequestClick(e, item.request.id)}}></SimpleButton>
-              <SimpleButton text={'Confirm'} onClick={(e: any) => {approveRequestClick(e, item.request.id)}}></SimpleButton>
+              <SimpleButton text={'Reject'} onClick={(e: any) => {rejectRequestClick(e, item.id)}}></SimpleButton>
+              <SimpleButton text={'Confirm'} onClick={(e: any) => {approveRequestClick(e, item.id)}}></SimpleButton>
             </PendingRequestItem>  
           </PendingRequestContainer>
         ))

packages/site/src/components/Buttons.tsx

@@ -68,7 +68,7 @@ export const ConnectSnapButton = (props: ComponentProps<typeof Button>) => {
   return (
     <Button {...props}>
       <FlaskFox />
-      <ButtonText>Connect ERC-4337 Relayer</ButtonText>
+      <ButtonText>Connect SmartHub snap</ButtonText>
     </Button>
   );
 };

packages/site/src/components/Header.tsx

@@ -50,9 +50,6 @@ const LogoContainer = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  ${({ theme }) => theme.mediaQueries.small} {
-    display: none;
-  }
 `
 
 export const Header = ({
@@ -99,7 +96,7 @@ export const Header = ({
       <FlexRowWrapper>
         <LogoContainer>
           <SnapLogo color={theme.colors.icon.default} size={36} />
-          <Title>ERC-4337 Relayer</Title>
+          <Title>SmartHub</Title>
         </LogoContainer>
       </FlexRowWrapper>