Coinbase + Nightly + Trust + Rabby wallets

package.json

@@ -38,7 +38,7 @@
     "@emotion/styled": "^11.10.4",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@galacticcouncil/apps": "^9.1.0",
+    "@galacticcouncil/apps": "9.2.0-pr161-b2a6da5",
     "@galacticcouncil/math-lbp": "^1.0.0",
     "@galacticcouncil/math-liquidity-mining": "^1.0.0",
     "@galacticcouncil/math-omnipool": "^1.0.0",

src/sections/transaction/ReviewTransaction.utils.tsx

@@ -1,4 +1,5 @@
 import {
+  JsonRpcProvider,
   TransactionReceipt,
   TransactionResponse,
   Web3Provider,
@@ -27,23 +28,25 @@ import {
   useEvmAccount,
   useWallet,
 } from "sections/web3-connect/Web3Connect.utils"
-import {
-  EthereumSigner,
-  PermitResult,
-} from "sections/web3-connect/signer/EthereumSigner"
+import { PermitResult } from "sections/web3-connect/signer/EthereumSigner"
 import { useSettingsStore } from "state/store"
 import { useToast } from "state/toasts"
 import {
+  CALL_PERMIT_ABI,
+  CALL_PERMIT_ADDRESS,
   H160,
   getEvmChainById,
   getEvmTxLink,
   isEvmAccount,
+  isEvmAddress,
   isEvmWalletExtension,
 } from "utils/evm"
 import { isAnyParachain, Maybe } from "utils/helpers"
-import { createSubscanLink } from "utils/formatting"
+import { createSubscanLink, wsToHttp } from "utils/formatting"
 import { QUERY_KEYS } from "utils/queryKeys"
-import { useIsTestnet } from "api/provider"
+import { useActiveProvider, useIsTestnet } from "api/provider"
+import BigNumber from "bignumber.js"
+import { Contract } from "ethers"
 import { tags } from "@galacticcouncil/xcm-cfg"
 
 const EVM_PERMIT_BLOCKTIME = 20_000
@@ -211,7 +214,7 @@ export const useSendEvmTransactionMutation = (
         setTxState("Broadcast")
         setTxHash(evmTx?.hash ?? "")
         setTxData(evmTx?.data)
-        const receipt = await evmTx.wait()
+        const receipt = await evmTx.wait(1)
         setTxState("InBlock")
 
         return resolve(evmTxReceiptToSubmittableResult(receipt))
@@ -260,24 +263,37 @@ export const useSendEvmTransactionMutation = (
 }
 
 export function useNextEvmPermitNonce(account: Maybe<AccountId32 | string>) {
-  const { wallet } = useWallet()
+  const activeProvider = useActiveProvider()
+
+  const address = account?.toString() ?? ""
 
   return useQuery(
     QUERY_KEYS.nextEvmPermitNonce(account),
     async () => {
       if (!account) throw new Error("Missing address")
-      if (!wallet?.signer) throw new Error("Missing wallet signer")
-      if (!(wallet?.signer instanceof EthereumSigner))
-        throw new Error("Invalid signer")
 
-      return wallet.signer.getPermitNonce()
+      const provider = new JsonRpcProvider(wsToHttp(activeProvider.url))
+
+      const callPermit = new Contract(
+        CALL_PERMIT_ADDRESS,
+        CALL_PERMIT_ABI,
+        provider,
+      )
+
+      const nonce = await callPermit.nonces(
+        isEvmAddress(account.toString())
+          ? account
+          : H160.fromAccount(account.toString()),
+      )
+
+      return BigNumber(nonce.toString())
     },
     {
       refetchInterval: EVM_PERMIT_BLOCKTIME,
       refetchOnWindowFocus: false,
       cacheTime: 0,
       staleTime: 0,
-      enabled: isEvmAccount(account?.toString()),
+      enabled: isEvmAddress(address) || isEvmAccount(address),
     },
   )
 }

src/sections/transaction/ReviewTransactionEvmTxForm.tsx

@@ -13,6 +13,7 @@ import { useAssets } from "providers/assets"
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
 import Skeleton from "react-loading-skeleton"
+import { useNextEvmPermitNonce } from "sections/transaction/ReviewTransaction.utils"
 import { ReviewTransactionData } from "sections/transaction/ReviewTransactionData"
 import { useEvmTxFee } from "sections/transaction/ReviewTransactionEvmTxForm.utils"
 import {
@@ -50,6 +51,7 @@ export const ReviewTransactionEvmTxForm: FC<Props> = ({
   const { getAsset } = useAssets()
   const { feePaymentAssetId } = useAccountFeePaymentAssets()
 
+  const { data: nonce } = useNextEvmPermitNonce(account?.address)
   const { data: spotPrice } = useSpotPrice(
     NATIVE_EVM_ASSET_ID,
     feePaymentAssetId,
@@ -66,7 +68,7 @@ export const ReviewTransactionEvmTxForm: FC<Props> = ({
 
     if (wallet?.signer instanceof EthereumSigner) {
       if (shouldUsePermit) {
-        const nonce = await wallet.signer.getPermitNonce()
+        if (!nonce) throw new Error("Missing nonce")
         const permit = await wallet.signer.getPermit(tx.data, nonce)
         return onPermitDispatched({ permit })
       }

src/sections/web3-connect/accounts/Web3ConnectAccount.styled.ts

@@ -68,13 +68,19 @@ export const SAccountItem = styled.div<{
   }}
 `
 
-export const SChangeAccountButton = styled(Button)`
-  border: 1px solid rgba(${theme.rgbColors.brightBlue300}, 0.12);
-  border-top-color: transparent;
+export const SChangeAccountButton = styled(Button)<{ isActive?: boolean }>`
+  border: 1px solid transparent;
+  border-color: ${({ isActive }) =>
+    isActive ? `rgba(${theme.rgbColors.brightBlue300}, 0.12)` : ""};
+  border-top-color: ${({ isActive }) =>
+    isActive ? `transparent` : `rgba(${theme.rgbColors.alpha0}, 0.12)`};
 
   border-radius: ${theme.borderRadius.medium}px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 
-  background: rgba(${theme.rgbColors.primaryA15}, 0.12);
+  background: ${({ isActive }) =>
+    isActive
+      ? `rgba(${theme.rgbColors.primaryA15}, 0.12)`
+      : `rgba(${theme.rgbColors.alpha0}, 0.06)`};
 `

src/sections/web3-connect/accounts/Web3ConnectEvmAccount.tsx

@@ -26,9 +26,7 @@ export const Web3ConnectEvmAccount: FC<
   // Allow account changing for MetaMask wallets,
   // but disable for MetaMask-like as it doesn't provide a way to open the account selection programmatically
   const shouldAllowAccountChange =
-    isActive &&
-    isMetaMask(wallet?.extension) &&
-    !isMetaMaskLike(wallet?.extension)
+    isMetaMask(wallet?.extension) && !isMetaMaskLike(wallet?.extension)
 
   return (
     <div>
@@ -51,6 +49,7 @@ export const Web3ConnectEvmAccount: FC<
       </SAccountItem>
       {shouldAllowAccountChange && (
         <SChangeAccountButton
+          isActive={isActive}
           variant="outline"
           fullWidth
           size="small"

src/sections/web3-connect/constants/providers.ts

@@ -8,6 +8,10 @@ export enum WalletProviderType {
   NovaWallet = "nova-wallet",
   TrustWallet = "trustwallet",
   BraveWallet = "bravewallet",
+  CoinbaseWallet = "coinbasewallet",
+  RabbyWallet = "rabbywallet",
+  Nightly = "nightly",
+  NightlyEvm = "nightly-evm",
   Phantom = "phantom",
   Enkrypt = "enkrypt",
   MantaWallet = "manta-wallet-js",
@@ -31,7 +35,10 @@ export const EVM_PROVIDERS: WalletProviderType[] = [
   WalletProviderType.MetaMask,
   WalletProviderType.TalismanEvm,
   WalletProviderType.SubwalletEvm,
-  //WalletProviderType.TrustWallet,
+  WalletProviderType.NightlyEvm,
+  WalletProviderType.RabbyWallet,
+  WalletProviderType.TrustWallet,
+  WalletProviderType.CoinbaseWallet,
   WalletProviderType.BraveWallet,
   WalletProviderType.Phantom,
   WalletProviderType.WalletConnectEvm,
@@ -43,6 +50,7 @@ export const SUBSTRATE_PROVIDERS: WalletProviderType[] = [
   WalletProviderType.Enkrypt,
   WalletProviderType.PolkadotJS,
   WalletProviderType.NovaWallet,
+  WalletProviderType.Nightly,
   WalletProviderType.MantaWallet,
   WalletProviderType.FearlessWallet,
   WalletProviderType.Polkagate,

src/sections/web3-connect/signer/EthereumSigner.ts

@@ -7,18 +7,16 @@ import UniversalProvider from "@walletconnect/universal-provider/dist/types/Univ
 
 import { chainsMap } from "@galacticcouncil/xcm-cfg"
 import BigNumber from "bignumber.js"
-import { Contract, Signature } from "ethers"
+import { Signature } from "ethers"
 import { splitSignature } from "ethers/lib/utils"
-import {
-  CALL_PERMIT_ABI,
-  CALL_PERMIT_ADDRESS,
-  DISPATCH_ADDRESS,
-} from "utils/evm"
+import { CALL_PERMIT_ADDRESS, DISPATCH_ADDRESS } from "utils/evm"
 import {
   MetaMaskLikeProvider,
   isEthereumProvider,
   requestNetworkSwitch,
 } from "utils/metamask"
+import { sleep } from "utils/helpers"
+import { EvmChain } from "@galacticcouncil/xcm-core"
 
 type PermitMessage = {
   from: string
@@ -59,8 +57,8 @@ export class EthereumSigner {
       this.signer.provider.getGasPrice(),
     ])
 
-    const onePrc = gasPrice.div(100)
-    const gasPricePlus = gasPrice.add(onePrc)
+    const fivePrc = gasPrice.div(100).mul(5)
+    const gasPricePlus = gasPrice.add(fivePrc)
 
     return {
       gas,
@@ -74,11 +72,12 @@ export class EthereumSigner {
     if (isEthereumProvider(this.provider)) {
       await requestNetworkSwitch(this.provider, {
         chain,
-        onSwitch: () => {
-          // update signer after network switch
-          this.signer = this.getSigner(this.provider)
-        },
       })
+      // update signer after network switch
+      // give some leeway for the network switch to take effect,
+      // some wallets like Coinbase dont reflect the change inside provider immediately
+      await sleep(200)
+      this.signer = this.getSigner(this.provider)
     }
   }
 
@@ -91,19 +90,6 @@ export class EthereumSigner {
     })
   }
 
-  getPermitNonce = async (): Promise<BigNumber> => {
-    await this.requestNetworkSwitch("hydration")
-    const callPermit = new Contract(
-      CALL_PERMIT_ADDRESS,
-      CALL_PERMIT_ABI,
-      this.signer.provider,
-    )
-
-    const nonce = await callPermit.nonces(this.address)
-
-    return BigNumber(nonce.toString())
-  }
-
   getPermit = async (
     data: string | TransactionRequest,
     nonce: BigNumber,
@@ -249,18 +235,25 @@ export class EthereumSigner {
     transaction: TransactionRequest & { chain?: string },
   ) => {
     const { chain, ...tx } = transaction
-    const from = chain && chainsMap.get(chain) ? chain : "hydration"
+    const from = chain && chainsMap.get(chain)?.isEvmChain ? chain : "hydration"
+    const chainCfg = chainsMap.get(from) as EvmChain
 
     await this.requestNetworkSwitch(from)
 
     if (from === "hydration") {
       const { gas, maxFeePerGas, maxPriorityFeePerGas } =
         await this.getGasValues(tx)
 
+      const chainId = chainCfg.evmChain.id
+      const nonce = await this.signer.getTransactionCount()
+
       return await this.signer.sendTransaction({
+        chainId,
+        nonce,
+        value: 0,
         maxPriorityFeePerGas,
         maxFeePerGas,
-        gasLimit: gas.mul(12).div(10), // add 20%
+        gasLimit: gas.mul(13).div(10), // add 30%
         ...tx,
       })
     } else {

src/sections/web3-connect/wallets/CoinbaseWallet.ts

@@ -0,0 +1,23 @@
+import { WalletProviderType } from "sections/web3-connect/constants/providers"
+import { isCoinbaseWallet } from "utils/metamask"
+import { MetaMask } from "./MetaMask"
+import CoinbaseWalletLogo from "assets/icons/CoinbaseWalletLogo.svg"
+
+export class CoinbaseWallet extends MetaMask {
+  extensionName = WalletProviderType.CoinbaseWallet
+  title = "Coinbase Wallet"
+  installUrl = "https://www.coinbase.com/wallet"
+  logo = {
+    src: CoinbaseWalletLogo,
+    alt: "Coinbase Wallet Logo",
+  }
+
+  get installed() {
+    const provider = this._provider || window.ethereum
+    return isCoinbaseWallet(provider)
+  }
+
+  get rawExtension() {
+    return this._provider || window.ethereum
+  }
+}

src/sections/web3-connect/wallets/MetaMask.ts

@@ -74,8 +74,12 @@ export class MetaMask implements Wallet {
     }
 
     try {
-      if (!isMetaMask(this.rawExtension) && !isMetaMaskLike(this.rawExtension))
+      if (
+        !isMetaMask(this.rawExtension) &&
+        !isMetaMaskLike(this.rawExtension)
+      ) {
         return
+      }
 
       const metamask = this.rawExtension