save in LS and load in dropdown

Author: Aniket-Engg

libs/remix-ui/run-tab/src/lib/actions/account.ts

@@ -3,6 +3,7 @@ import { RunTab } from "../types/run-tab"
 import { clearInstances, setAccount, setExecEnv } from "./actions"
 import { displayNotification, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, setMatchPassphrase, setPassphrase } from "./payload"
 import { toChecksumAddress } from '@ethereumjs/util'
+import { SmartAccount } from "../types"
 import "viem/window"
 import { custom, createWalletClient } from "viem"
 import { sepolia } from "viem/chains"
@@ -26,6 +27,14 @@ export const fillAccountsList = async (plugin: RunTab, dispatch: React.Dispatch<
     dispatch(fetchAccountsListRequest())
     try {
       let accounts = await plugin.blockchain.getAccounts()
+      const provider = plugin.blockchain.getProvider()
+      if (provider && provider.startsWith('injected') && accounts?.length) {
+        await loadSmartAccounts(plugin)
+        if (plugin.REACT_API.smartAccounts) {
+          const safeAddresses = Object.keys(plugin.REACT_API.smartAccounts)
+          accounts.push(...safeAddresses)
+        }
+      }
       if (!accounts) accounts = []
 
       const loadedAccounts = {}
@@ -34,7 +43,6 @@ export const fillAccountsList = async (plugin: RunTab, dispatch: React.Dispatch<
         const balance = await plugin.blockchain.getBalanceInEther(account)
         loadedAccounts[account] = shortenAddress(account, balance)
       }
-      const provider = plugin.blockchain.getProvider()
 
       if (provider && provider.startsWith('injected')) {
         const selectedAddress = plugin.blockchain.getInjectedWeb3Address()
@@ -93,7 +101,7 @@ export const createNewBlockchainAccount = async (plugin: RunTab, dispatch: React
 }
 
 export const createSmartAccount = async (plugin: RunTab, dispatch: React.Dispatch<any>) => {
-  console.log('createSmartAccount action')
+  const localStorageKey = 'smartAccounts'
 
   // @ts-ignore
   const [account] = await window.ethereum!.request({ method: 'eth_requestAccounts' })
@@ -105,21 +113,55 @@ export const createSmartAccount = async (plugin: RunTab, dispatch: React.Dispatc
     transport: custom(window.ethereum!),
   })
 
+  const salt = 0
   const safeAccount = await toSafeSmartAccount({
     client: walletClient,
     entryPoint: {
       address: entryPoint07Address,
       version: "0.7",
     },
     owners: [toAccount(account)],
-    // saltNonce: 0n, // optional
+    saltNonce: salt,
     version: "1.4.1"
   })
+  const safeAddress = safeAccount.address
+
+  const sAccount: SmartAccount = {
+    address : safeAccount.address,
+    salt,
+    ownerEOA: account,
+    timestamp: Date.now()
+  }
+  plugin.REACT_API.smartAccounts[safeAddress] = sAccount
+  // Save smart accounts in local storage
+  const smartAccountsStr = localStorage.getItem(localStorageKey)
+  const smartAccountsObj = JSON.parse(smartAccountsStr)
+  smartAccountsObj[plugin.REACT_API.chainId] = plugin.REACT_API.smartAccounts
+  localStorage.setItem(localStorageKey, JSON.stringify(smartAccountsObj))
 
-  console.log('safeAccount----->', safeAccount.address)
   return plugin.call('notification', 'toast', `Safe account ${safeAccount.address} created for owner ${account}`)
 }
 
+export const loadSmartAccounts = async (plugin) => {
+  const { chainId } = plugin.REACT_API
+  const localStorageKey = 'smartAccounts'
+
+  const smartAccountsStr = localStorage.getItem(localStorageKey)
+  if (smartAccountsStr) {
+    const smartAccountsObj = JSON.parse(smartAccountsStr)
+    if (smartAccountsObj[chainId]) {
+      plugin.REACT_API.smartAccounts = smartAccountsObj[chainId]
+    } else {
+      smartAccountsObj[chainId] = {}
+      localStorage.setItem(localStorageKey, JSON.stringify(smartAccountsObj))
+    }
+  } else {
+    const objToStore = {}
+    objToStore[chainId] = {}
+    localStorage.setItem(localStorageKey, JSON.stringify(objToStore))
+  }
+}
+
 export const signMessageWithAddress = (plugin: RunTab, dispatch: React.Dispatch<any>, account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => {
   plugin.blockchain.signMessage(message, account, passphrase, (err, msgHash, signedData) => {
     if (err) {

libs/remix-ui/run-tab/src/lib/reducers/runTab.ts

@@ -16,6 +16,7 @@ export const runTabInitialState: RunTabState = {
     error: null,
     selectedAccount: ''
   },
+  smartAccounts: {},
   sendValue: '0',
   sendUnit: 'wei',
   gasLimit: 0,

libs/remix-ui/run-tab/src/lib/types/index.ts

@@ -38,6 +38,13 @@ export type Provider = {
   position: number
 }
 
+export type SmartAccount = {
+  address: string
+  salt: number
+  ownerEOA: string
+  timestamp: number
+}
+
 export interface RunTabState {
   accounts: {
     loadedAccounts: Record<string, string>,
@@ -46,6 +53,7 @@ export interface RunTabState {
     error: string,
     selectedAccount: string
   },
+  smartAccounts: Record<string, SmartAccount>
   sendValue: string,
   sendUnit: 'ether' | 'finney' | 'gwei' | 'wei',
   gasLimit: number,