Feature/populate txn (#962)

* Populate transactions with missing fields
* Create helper method and finish ledger module
* Add error handling
* Version bumps + cleanup
* Updated Trezor provider to handle new transaction data setting flow
* Version bumps
* Update react version
Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com>

Author: taylorjdawson

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/common",
-  "version": "2.0.9",
+  "version": "2.1.0-alpha.1",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

packages/common/src/hdwallets.ts

@@ -1,5 +1,7 @@
 import type Common from '@ethereumjs/common'
+import type { BigNumber } from 'ethers'
 import type { CustomNetwork } from './types'
+import type { TransactionRequest } from '@ethersproject/providers'
 
 /**
  * Creates the common instance used for signing
@@ -35,3 +37,43 @@ export const getCommon = async ({
   }
   return common
 }
+
+type StringifiedTransactionRequest = Omit<
+  TransactionRequest,
+  | 'nonce'
+  | 'gasLimit'
+  | 'gasPrice'
+  | 'value'
+  | 'maxPriorityFeePerGas'
+  | 'maxFeePerGas'
+> & {
+  nonce: string
+  gasLimit: string
+  gasPrice?: string
+  value: string
+  maxPriorityFeePerGas?: string
+  maxFeePerGas?: string
+}
+
+/**
+ * Takes in TransactionRequest and converts all BigNumber values to strings
+ * @param transaction
+ * @returns a transaction where all BigNumber properties are now strings
+ */
+export const bigNumberFieldsToStrings = (
+  transaction: TransactionRequest
+): StringifiedTransactionRequest =>
+  Object.keys(transaction).reduce(
+    (transaction, txnProperty) => ({
+      ...transaction,
+      ...((transaction[txnProperty as keyof TransactionRequest] as BigNumber)
+        .toHexString
+        ? {
+            [txnProperty]: (
+              transaction[txnProperty as keyof TransactionRequest] as BigNumber
+            ).toHexString()
+          }
+        : {})
+    }),
+    transaction
+  ) as StringifiedTransactionRequest

packages/common/src/index.ts

@@ -62,7 +62,7 @@ export { createEIP1193Provider } from './eip-1193'
 export { default as accountSelect } from './account-select'
 export { entryModal } from './entry-modal'
 export { SofiaProLight, SofiaProRegular, SofiaProSemiBold } from './fonts'
-export { getCommon } from './hdwallets'
+export { getCommon, bigNumberFieldsToStrings } from './hdwallets'
 
 export type {
   RequestPatch,

packages/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "demo",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "devDependencies": {
     "assert": "^2.0.0",
     "buffer": "^6.0.3",

packages/demo/src/App.svelte

@@ -172,11 +172,16 @@
   // Subscribe to wallet updates
   const wallets$ = onboard.state.select('wallets').pipe(share())
 
-  const signTransactionMessage = provider => {
-    provider.request({
-      method: 'eth_signTransaction',
-      params: [JSON.parse(transactionObject)]
+  const signTransactionMessage = async provider => {
+    const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
+
+    const signer = ethersProvider.getSigner()
+
+    const signature = await signer.signTransaction({
+      to: '',
+      value: 1000000000000000
     })
+    console.log(signature)
   }
 
   const signMessage = async (provider, address) => {

packages/keepkey/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/keepkey",
-  "version": "2.0.3",
+  "version": "2.1.0-alpha.1",
   "description": "KeepKey module for web3-onboard",
   "module": "dist/index.js",
   "browser": "dist/index.js",
@@ -27,7 +27,7 @@
     "@ethersproject/providers": "^5.5.0",
     "@shapeshiftoss/hdwallet-core": "^1.15.2",
     "@shapeshiftoss/hdwallet-keepkey-webusb": "^1.15.2",
-    "@web3-onboard/common": "^2.0.7",
+    "@web3-onboard/common": "^2.1.0-alpha.1",
     "ethereumjs-util": "^7.1.3"
   }
 }

packages/keepkey/src/index.ts

@@ -64,9 +64,12 @@ function keepkey(): WalletInit {
           accountSelect,
           createEIP1193Provider,
           ProviderRpcError,
-          entryModal
+          entryModal,
+          bigNumberFieldsToStrings
         } = await import('@web3-onboard/common')
 
+        const { utils } = await import('ethers')
+
         const { StaticJsonRpcProvider } = await import(
           '@ethersproject/providers'
         )
@@ -196,7 +199,7 @@ function keepkey(): WalletInit {
 
           return accounts
         }
-
+        let ethersProvider: StaticJsonRpcProvider
         const scanAccounts = async ({
           derivationPath,
           chainId,
@@ -205,7 +208,7 @@ function keepkey(): WalletInit {
           if (!keepKeyWallet)
             throw new Error('Device must be connected before scanning accounts')
           currentChain = chains.find(({ id }) => id === chainId) || currentChain
-          const provider = new StaticJsonRpcProvider(currentChain.rpcUrl)
+          ethersProvider = new StaticJsonRpcProvider(currentChain.rpcUrl)
 
           // Checks to see if this is a custom derivation path
           // If it is then just return the single account
@@ -214,15 +217,23 @@ function keepkey(): WalletInit {
           ) {
             try {
               const accountIdx = getAccountIdx(derivationPath)
-              const account = await getAccount({ accountIdx, provider, asset })
+              const account = await getAccount({
+                accountIdx,
+                provider: ethersProvider,
+                asset
+              })
 
               return [account]
             } catch (error) {
               throw new Error('Invalid derivation path')
             }
           }
 
-          return getAllAccounts({ derivationPath, asset, provider })
+          return getAllAccounts({
+            derivationPath,
+            asset,
+            provider: ethersProvider
+          })
         }
 
         const getAccounts = async () => {
@@ -364,27 +375,44 @@ function keepkey(): WalletInit {
                 'No account selected. Must call eth_requestAccounts first.'
               )
 
+            // Per the code above if accounts is empty or undefined then this line of code won't execute
+            // ∴ account must be defined here which is why it is cast without the 'undefined' type
             const account =
               !transactionObject || !transactionObject.hasOwnProperty('from')
                 ? accounts[0]
-                : accounts.find(
-                    account => account.address === transactionObject.from
-                  )
+                : (accounts.find(
+                    account =>
+                      account.address.toLocaleLowerCase() ===
+                      transactionObject.from.toLocaleLowerCase()
+                  ) as Account)
 
-            const { derivationPath } = account || accounts[0]
+            const { derivationPath, address } = account
             const addressNList = bip32ToAddressNList(derivationPath)
 
+            const signer = ethersProvider.getSigner(address)
+
+            transactionObject.gasLimit =
+              transactionObject.gas || transactionObject.gasLimit
+
+            // 'gas' is an invalid property for the TransactionRequest type
+            delete transactionObject.gas
+
+            transactionObject.gasLimit = undefined
+
+            let populatedTransaction = await signer.populateTransaction(
+              transactionObject
+            )
+
             const {
-              nonce,
-              gasPrice,
-              gas,
-              gasLimit,
               to,
               value,
-              data,
+              nonce,
+              gasLimit,
+              gasPrice,
               maxFeePerGas,
-              maxPriorityFeePerGas
-            } = transactionObject
+              maxPriorityFeePerGas,
+              data
+            } = bigNumberFieldsToStrings(populatedTransaction)
 
             const gasData = gasPrice
               ? {
@@ -394,14 +422,15 @@ function keepkey(): WalletInit {
                   maxFeePerGas,
                   maxPriorityFeePerGas
                 }
+
             const txn = {
               addressNList,
-              nonce: nonce || '0x0',
-              gasLimit: gasLimit || gas || '0x5208',
-              to,
-              value: value || '0x0',
-              data: data || '',
               chainId: parseInt(currentChain.id),
+              to: to || '',
+              value: value || '',
+              nonce: utils.hexValue(nonce),
+              gasLimit: gasLimit || '0x0',
+              data: data?.toString() || '',
               ...gasData
             }
 

packages/keystone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/keystone",
-  "version": "2.0.3",
+  "version": "2.1.0-alpha.1",
   "description": "Keystone module for web3-onboard",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@ethereumjs/tx": "^3.4.0",
     "@ethersproject/providers": "^5.5.0",
-    "@keystonehq/eth-keyring": "^0.11.2-alpha.2",
-    "@web3-onboard/common": "^2.0.7"
+    "@keystonehq/eth-keyring": "^0.14.0-alpha.10.3",
+    "@web3-onboard/common": "^2.1.0-alpha.1"
   }
 }

packages/keystone/src/index.ts

@@ -6,7 +6,7 @@ import type {
   WalletInit
 } from '@web3-onboard/common'
 
-import type { providers } from 'ethers'
+import type { StaticJsonRpcProvider } from '@ethersproject/providers'
 
 const DEFAULT_BASE_PATH = "m/44'/60'/0'/0"
 
@@ -25,7 +25,7 @@ const assets = [
 
 const getAccount = async (
   keyring: any,
-  provider: providers.StaticJsonRpcProvider,
+  provider: StaticJsonRpcProvider,
   index: number
 ): Promise<Account> => {
   const address = (await keyring.addAccounts())[index]
@@ -42,7 +42,7 @@ const getAccount = async (
 
 const generateAccounts = async (
   keyring: any,
-  provider: providers.StaticJsonRpcProvider
+  provider: StaticJsonRpcProvider
 ): Promise<Account[]> => {
   const accounts = []
   let zeroBalanceAccounts = 0,
@@ -83,6 +83,10 @@ function keystone({
           '@keystonehq/eth-keyring'
         )
 
+        // @ts-ignore super weird esm issue where the default export is an object with a property default on it
+        // if that is the case then we just grab the default value
+        AirGappedKeyring = AirGappedKeyring?.default || AirGappedKeyring
+
         const { TransactionFactory: Transaction } = await import(
           '@ethereumjs/tx'
         )
@@ -92,25 +96,26 @@ function keystone({
           createEIP1193Provider,
           ProviderRpcError,
           ProviderRpcErrorCode,
-          getCommon
+          getCommon,
+          bigNumberFieldsToStrings
         } = await import('@web3-onboard/common')
 
         const keyring = AirGappedKeyring.getEmptyKeyring()
         await keyring.readKeyring()
 
         const eventEmitter = new EventEmitter()
 
+        let ethersProvider: StaticJsonRpcProvider
+
         let currentChain: Chain = chains[0]
         const scanAccounts = async ({
-          derivationPath,
-          chainId,
-          asset
+          chainId
         }: ScanAccountsOptions): Promise<Account[]> => {
           currentChain =
             chains.find(({ id }: Chain) => id === chainId) || currentChain
 
-          const provider = new StaticJsonRpcProvider(currentChain.rpcUrl)
-          return generateAccounts(keyring, provider)
+          ethersProvider = new StaticJsonRpcProvider(currentChain.rpcUrl)
+          return generateAccounts(keyring, ethersProvider)
         }
 
         const getAccounts = async () => {
@@ -216,15 +221,31 @@ function keystone({
             transactionObject.gasLimit =
               transactionObject.gas || transactionObject.gasLimit
 
-            const transaction = Transaction.fromTxData(
-              {
-                ...transactionObject
-              },
-              { common, freeze: false }
+            // 'gas' is an invalid property for the TransactionRequest type
+            delete transactionObject.gas
+
+            const signer = ethersProvider.getSigner(from)
+
+            let populatedTransaction = bigNumberFieldsToStrings(
+              await signer.populateTransaction(transactionObject)
             )
 
-            // @ts-ignore
-            const signedTx = await keyring.signTransaction(from, transaction)
+            const transaction = Transaction.fromTxData(populatedTransaction, {
+              common,
+              freeze: false
+            })
+
+            let signedTx
+            try {
+              // @ts-ignore
+              signedTx = await keyring.signTransaction(from, transaction)
+            } catch (error: any) {
+              if (error.message && error.message.message) {
+                throw new Error(error.message.message)
+              } else {
+                throw new Error(error)
+              }
+            }
 
             return `0x${signedTx.serialize().toString('hex')}`
           },

packages/ledger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/ledger",
-  "version": "2.0.4",
+  "version": "2.1.0-alpha.1",
   "description": "Ledger module for web3-onboard",
   "module": "dist/index.js",
   "browser": "dist/index.js",
@@ -27,7 +27,7 @@
     "@ledgerhq/hw-transport-u2f": "^5.36.0-deprecated",
     "@ledgerhq/hw-transport-webusb": "^6.19.0",
     "@metamask/eth-sig-util": "^4.0.0",
-    "@web3-onboard/common": "^2.0.7",
+    "@web3-onboard/common": "^2.1.0-alpha.1",
     "buffer": "^6.0.3",
     "ethereumjs-util": "^7.1.3"
   }