Merge pull request #212 from skalenetwork/transfer-bugs-hotfix

Improve network switching, fix transfer bugs

.github/CODEOWNERS

@@ -1,3 +1,3 @@
-* @dmitry-tk
+* @dmytrotkk
 *.md @skalenetwork/docowners
 /docs/ @skalenetwork/docowners

src/components/AddToken.tsx

@@ -69,7 +69,13 @@ export default function AddToken(props: {
     )
     const iconUrl = getIconUrl(props.token)
     try {
-      await enforceNetwork(props.ima.provider, walletClient, switchNetworkAsync)
+      await enforceNetwork(
+        props.ima.provider,
+        walletClient,
+        switchNetworkAsync,
+        props.mpc.config.skaleNetwork,
+        props.destChainName
+      )
       const wasAdded = await window.ethereum.request({
         method: 'wallet_watchAsset',
         params: {

src/components/MetaportProvider.tsx

@@ -162,7 +162,8 @@ export default function MetaportProvider(props: {
       <RainbowKitProvider
         coolMode
         appInfo={{
-          appName: 'SKALE Metaport'
+          appName: 'SKALE Metaport',
+          learnMoreUrl: 'https://portal.skale.space/other/faq'
         }}
         showRecentTransactions={true}
         chains={chains}

src/components/TokenListSection.tsx

@@ -39,7 +39,7 @@ export default function TokenListSection(props: {
           className={cmn.fullWidth}
           onClick={() => handle(props.tokens[key])}
         >
-          <div className={cls(cmn.flex, cmn.flexcv, cmn.fullWidth, cmn.mtop5, cmn.mbott5)}>
+          <div className={cls(cmn.flex, cmn.flexcv, cmn.fullWidth, cmn.mtop10, cmn.mbott10)}>
             <div className={cls(cmn.flex, cmn.flexc, cmn.mleft10)}>
               <TokenIcon
                 tokenSymbol={props.tokens[key]?.meta.symbol}

src/core/actions/action.ts

@@ -37,7 +37,7 @@ import { LOADING_BUTTON_TEXT } from './actionState'
 import { isMainnet } from '../helper'
 
 import { IMA_ABIS } from '../contracts'
-import { isMainnetChainId, getMainnetAbi } from '../network'
+import { isMainnetChainId, getMainnetAbi, enforceNetwork } from '../network'
 
 import { walletClientToSigner } from '../ethers'
 
@@ -81,7 +81,7 @@ export class Action {
   setAmountErrorMessage: React.Dispatch<React.SetStateAction<string>>
   setBtnText: (btnText: string) => void
 
-  _switchNetwork: (chainId: number | bigint) => Chain | undefined
+  _switchNetwork: (chainId: number | bigint) => Promise<Chain | undefined>
 
   constructor(
     mpc: MetaportCore,
@@ -93,7 +93,7 @@ export class Action {
     token: TokenData,
     setAmountErrorMessage: (amountErrorMessage: string) => void,
     setBtnText: (btnText: string) => void,
-    switchNetwork: (chainId: number | bigint) => Chain | undefined,
+    switchNetwork: (chainId: number | bigint) => Promise<Chain | undefined>,
     walletClient: WalletClient
   ) {
     this.mpc = mpc
@@ -183,21 +183,18 @@ export class Action {
   async getConnectedChain(
     provider: Provider,
     customAbiTokenType?: CustomAbiTokenType,
-    destChainName?: string
+    destChainName?: string,
+    chainName?: string
   ): Promise<MainnetChain | SChain> {
     let chain: MainnetChain | SChain
     this.updateState('switch')
-    const currentChainId = this.walletClient.chain.id
-    const { chainId } = await provider.getNetwork()
-    log(`Current chainId: ${currentChainId}, required chainId: ${chainId} `)
-    if (currentChainId !== Number(chainId)) {
-      log(`Switching network to ${chainId}...`)
-      const chain = await this._switchNetwork(Number(chainId))
-      if (!chain) {
-        throw new Error(`Failed to switch from ${currentChainId} to ${chainId} `)
-      }
-      log(`Network switched to ${chainId}...`)
-    }
+    const chainId = await enforceNetwork(
+      provider,
+      this.walletClient,
+      this._switchNetwork,
+      this.mpc.config.skaleNetwork,
+      chainName ?? this.chainName1
+    )
     const signer = walletClientToSigner(this.walletClient)
     if (isMainnetChainId(chainId, this.mpc.config.skaleNetwork)) {
       chain = new MainnetChain(signer.provider, getMainnetAbi(this.mpc.config.skaleNetwork))

src/core/actions/erc20.ts

@@ -221,7 +221,8 @@ export class UnWrapERC20S extends Action {
     const sChain = (await this.getConnectedChain(
       this.sChain2.provider,
       CustomAbiTokenType.erc20wrap,
-      this.chainName1
+      this.chainName1,
+      this.chainName2
     )) as SChain
     this.updateState('unwrap')
     let tx

src/core/actions/eth.ts

@@ -100,7 +100,12 @@ export class UnlockEthM extends Action {
 
   async execute() {
     this.updateState('init')
-    const mainnet = (await this.getConnectedChain(this.mainnet.provider)) as MainnetChain
+    const mainnet = (await this.getConnectedChain(
+      this.mainnet.provider,
+      undefined,
+      undefined,
+      this.chainName2
+    )) as MainnetChain
     this.updateState('unlock')
     const tx = await mainnet.eth.getMyEth({ address: this.address })
     const block = await this.mainnet.provider.getBlock(tx.blockNumber)

src/core/network.ts

@@ -32,6 +32,7 @@ import proxyEndpoints from '../metadata/proxy.json'
 import { MAINNET_CHAIN_NAME } from './constants'
 import { IMA_ADDRESSES, IMA_ABIS } from './contracts'
 import { SkaleNetwork } from './interfaces'
+import { constructWagmiChain } from './wagmi_network'
 
 export { proxyEndpoints as PROXY_ENDPOINTS }
 
@@ -117,17 +118,24 @@ export function initSChain(network: SkaleNetwork, chainName: string): SChain {
 export async function enforceNetwork(
   provider: Provider,
   walletClient: WalletClient,
-  switchNetwork: (chainId: number | bigint) => Promise<Chain | undefined>
-): Promise<void> {
+  switchNetwork: (chainId: number | bigint) => Promise<Chain | undefined>,
+  skaleNetwork: SkaleNetwork,
+  chainName: string
+): Promise<bigint> {
   const currentChainId = walletClient.chain.id
   const { chainId } = await provider.getNetwork()
   log(`Current chainId: ${currentChainId}, required chainId: ${chainId} `)
   if (currentChainId !== Number(chainId)) {
     log(`Switching network to ${chainId}...`)
-    const chain = await switchNetwork(Number(chainId))
-    if (!chain) {
-      throw new Error(`Failed to switch from ${currentChainId} to ${chainId} `)
+    if (chainId !== 1n && chainId !== 5n) {
+      await walletClient.addChain({ chain: constructWagmiChain(skaleNetwork, chainName) })
+    } else {
+      const chain = await switchNetwork(Number(chainId))
+      if (!chain) {
+        throw new Error(`Failed to switch from ${currentChainId} to ${chainId} `)
+      }
     }
     log(`Network switched to ${chainId}...`)
   }
+  return chainId
 }

src/styles/_variables.scss

@@ -5,7 +5,7 @@ $sk-paper-color: RGB(136 135 135 / 15%);
 $sk-gray-background-color: rgba(161, 161, 161, 0.2);
 
 
-$sk-btn-height: 47px;
+$sk-btn-height: 52px;
 
 $sk-disabled-dark: rgba(255, 255, 255, 0.5);
 $sk-disabled-light: rgba(0, 0, 0, 0.38);

src/styles/styles.module.scss

@@ -303,8 +303,8 @@ button {
     line-height: 1.6 !important;
     letter-spacing: 0.02857em !important;
     font-weight: 600 !important;
-    padding-top: 0.8em !important;
-    padding-bottom: 0.8em !important;
+    padding-top: 0.9em !important;
+    padding-bottom: 0.9em !important;
     min-height: $sk-btn-height !important;
     border-radius: $sk-border-radius !important;
     box-shadow: none !important;