Metaport 2.1 Beta release

.github/workflows/publish.yml

@@ -7,6 +7,7 @@ on:
       - develop
       - beta
       - stable
+      - wallets
 
 jobs:
   build:

CODEOWNERS

@@ -1,2 +1,2 @@
-* @dmytrotkk @payvint @cstrangedk
+* @dmytrotkk @payvint @kladkogex
 *.md @skalenetwork/docowners

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalenetwork/metaport",
-  "version": "2.0.3",
+  "version": "2.1.1",
   "description": "SKALE Metaport Widget",
   "keywords": [
     "skale",
@@ -34,13 +34,13 @@
     "version": "node -e \"console.log(require('./package.json').version);\""
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.4.0",
-    "@storybook/addon-interactions": "7.4.0",
-    "@storybook/addon-links": "7.4.0",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
     "@storybook/addon-styling": "1.3.7",
-    "@storybook/blocks": "7.4.0",
-    "@storybook/react": "7.4.0",
-    "@storybook/react-vite": "7.4.0",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-vite": "^7.6.10",
     "@storybook/testing-library": "0.2.0",
     "@testing-library/react": "14.0.0",
     "@types/node": "20.4.9",
@@ -67,26 +67,26 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.65.1",
-    "storybook": "7.4.0",
+    "storybook": "^7.6.10",
     "typescript": "5.1.6",
     "vite": "4.4.9",
     "vite-plugin-dts": "3.5.1",
     "vite-plugin-sass-dts": "^1.3.9",
     "vitest": "0.34.1"
   },
   "dependencies": {
-    "@mui/material": "^5.14.8",
-    "@mui/lab": "^5.0.0-alpha.143",
-    "@mui/icons-material": "^5.14.8",
+    "@mui/material": "^5.15.6",
+    "@mui/lab": "^5.0.0-alpha.162",
+    "@mui/icons-material": "^5.15.6",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@rainbow-me/rainbowkit": "^1.1.1",
-    "@skalenetwork/ima-js": "2.0.0-beta.0",
+    "@rainbow-me/rainbowkit": "^1.3.6",
+    "@skalenetwork/ima-js": "2.0.2-develop.0",
     "coingecko-api-v3": "^0.0.29",
     "react-jazzicon": "^1.0.4",
-    "viem": "^1.10.8",
-    "wagmi": "^1.4.1",
-    "zustand": "^4.4.1"
+    "viem": "^1.21.4",
+    "wagmi": "^1.4.13",
+    "zustand": "^4.5.0"
   },
   "peerDependencies": {
     "react": "18.2.0",
@@ -100,4 +100,4 @@
       "prettier -w"
     ]
   }
-}
+}

src/components/Metaport/Metaport.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import Metaport from './Metaport'
 
-import { METAPORT_CONFIG } from '../../metadata/metaportConfigStaging'
+import { METAPORT_CONFIG } from '../../metadata/metaportConfigTestnet'
 METAPORT_CONFIG.mainnetEndpoint = import.meta.env.VITE_MAINNET_ENDPOINT
 METAPORT_CONFIG.projectId = import.meta.env.VITE_WC_PROJECT_ID
 

src/components/MetaportProvider.tsx

@@ -29,12 +29,7 @@ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'
 import { connectorsForWallets } from '@rainbow-me/rainbowkit'
 import { PaletteMode } from '@mui/material'
 
-import {
-  injectedWallet,
-  // coinbaseWallet,
-  metaMaskWallet
-  // enkryptWallet
-} from '@rainbow-me/rainbowkit/wallets'
+import { injectedWallet, metaMaskWallet, enkryptWallet } from '@rainbow-me/rainbowkit/wallets'
 
 import { MetaportConfig, ActionStateUpdate } from '../core/interfaces'
 
@@ -73,11 +68,7 @@ export default function MetaportProvider(props: {
     ]
   )
 
-  const wallets = [
-    // enkryptWallet({ chains }),
-    injectedWallet({ chains })
-    // coinbaseWallet({ chains, appName: 'SKALE Metaport' })
-  ]
+  const wallets = [enkryptWallet({ chains }), injectedWallet({ chains })]
 
   if (props.config.projectId) {
     wallets.push(metaMaskWallet({ chains, projectId: props.config.projectId }))

src/components/SFuelWarning.tsx

@@ -21,7 +21,7 @@
  * @copyright SKALE Labs 2023-Present
  */
 
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import debug from 'debug'
 
 import { useAccount } from 'wagmi'
@@ -64,11 +64,16 @@ export default function SFuelWarning(props: {}) {
   const hubChainStation = useSFuelStore((state) => state.hubChainStation)
   const setHubChainStation = useSFuelStore((state) => state.setHubChainStation)
 
-  const sFuelStatus = useSFuelStore((state) => state.sFuelStatus)
-  const setSFuelStatus = useSFuelStore((state) => state.setSFuelStatus)
+  const fromChainData = useSFuelStore((state) => state.fromChainData)
+  const setFromChainData = useSFuelStore((state) => state.setFromChainData)
 
-  const sFuelOk = useSFuelStore((state) => state.sFuelOk)
-  const setSFuelOk = useSFuelStore((state) => state.setSFuelOk)
+  const toChainData = useSFuelStore((state) => state.toChainData)
+  const setToChainData = useSFuelStore((state) => state.setToChainData)
+
+  const hubChainData = useSFuelStore((state) => state.hubChainData)
+  const setHubChainData = useSFuelStore((state) => state.setHubChainData)
+
+  const [refilledFlag, setRefilledFlag] = useState<boolean>(false)
 
   const { address } = useAccount()
 
@@ -84,7 +89,6 @@ export default function SFuelWarning(props: {}) {
     setFromChainStation(null)
     setToChainStation(null)
     setHubChainStation(null)
-    setSFuelOk(false)
     log('Initializing SFuelWarning', chainName1, chainName2, hubChain, address)
     createStations()
   }, [chainName1, chainName2, hubChain, address])
@@ -106,34 +110,19 @@ export default function SFuelWarning(props: {}) {
   }
 
   async function updateStationsData() {
-    let fromData
-    let toData
-    let hubData
     if (fromChainStation) {
-      fromData = await fromChainStation.getData(address)
+      setFromChainData(await fromChainStation.getData(address))
     }
     if (toChainStation) {
-      toData = await toChainStation.getData(address)
+      setToChainData(await toChainStation.getData(address))
+      setLoading(false)
     }
     if (hubChainStation) {
-      hubData = await hubChainStation.getData(address)
+      setHubChainData(await hubChainStation.getData(address))
     }
-    if ((fromData && !fromData.ok) || (hubData && !hubData.ok)) {
-      setSFuelStatus('error')
-      setSFuelOk(false)
-    } else {
-      if (toData && !toData.ok) {
-        setSFuelStatus('warning')
-        setSFuelOk(false)
-      } else {
-        if (fromData && fromData.ok && toData && toData.ok) {
-          setSFuelStatus('action')
-          setSFuelOk(true)
-        }
-      }
-    }
-    if (fromData && toData) {
-      setLoading(false)
+    if (refilledFlag) {
+      setMining(false)
+      setRefilledFlag(false)
     }
   }
 
@@ -173,24 +162,12 @@ export default function SFuelWarning(props: {}) {
       if (fromPowRes) log(chainName1, fromPowRes.message)
       if (toPowRes) log(chainName2, toPowRes.message)
       if (hubPowRes) log(hubChain, hubPowRes.message)
-    } else {
-      await updateStationsData()
-      setSFuelStatus('action')
-      setSFuelOk(true)
     }
-    setMining(false)
+    setRefilledFlag(true)
   }
 
-  const mainnetTransfer = chainName1 === MAINNET_CHAIN_NAME || chainName2 === MAINNET_CHAIN_NAME
-  const noSFuelDest = sFuelStatus === 'warning' && chainName1 === MAINNET_CHAIN_NAME
-  const noSFuelSource = sFuelStatus === 'error' && chainName2 === MAINNET_CHAIN_NAME
-  const sFuelBtn = noSFuelDest || noSFuelSource || !mainnetTransfer
-
   function getSFuelText() {
-    if (sFuelBtn) {
-      return SFUEL_TEXT['sfuel'][sFuelStatus]
-    }
-    return SFUEL_TEXT['gas'][sFuelStatus]
+    return SFUEL_TEXT[noEth ? 'gas' : 'sfuel']['error']
   }
 
   if (loading && chainName2)
@@ -200,20 +177,28 @@ export default function SFuelWarning(props: {}) {
       </div>
     )
 
-  const sourceFaucetAvailable =
-    chainName1 === MAINNET_CHAIN_NAME || isFaucetAvailable(chainName1, mpc.config.skaleNetwork)
-  const destFaucetAvailable =
-    chainName2 === MAINNET_CHAIN_NAME || isFaucetAvailable(chainName2, mpc.config.skaleNetwork)
-  const hubFaucetAvailable = !hubChain || isFaucetAvailable(hubChain, mpc.config.skaleNetwork)
-  const faucetsAvailable = sourceFaucetAvailable && destFaucetAvailable && hubFaucetAvailable
+  const fromMainnet = chainName1 === MAINNET_CHAIN_NAME
+  const toMainnet = chainName2 === MAINNET_CHAIN_NAME
+
+  const fromFaucet = isFaucetAvailable(chainName1, mpc.config.skaleNetwork)
+  const destFaucet = isFaucetAvailable(chainName2, mpc.config.skaleNetwork)
+  const hubFaucet = isFaucetAvailable(hubChain, mpc.config.skaleNetwork) || !hubChain
+
+  const fromOk = fromChainData && fromChainData.ok
+  const toOk = toChainData && toChainData.ok
+  const hubOk = (hubChainData && hubChainData.ok) || !hubChainData
+
+  const isOk = fromOk && toOk && hubOk
+  const sFuelBtn = (fromFaucet || fromMainnet) && (destFaucet || toMainnet) && hubFaucet
+  const noEth = (fromMainnet && !fromOk) || (toMainnet && !toOk)
 
   return (
-    <Collapse in={!loading && sFuelStatus !== 'action' && !sFuelOk}>
+    <Collapse in={!loading && !isOk}>
       <div className={cls(cmn.mtop20, cmn.mbott5)}>
         <p className={cls(cmn.flex, cmn.p3, cmn.p, cmn.pPrim, cmn.flexGrow, cmn.mleft10)}>
           ⛽ {getSFuelText()}
         </p>
-        {!faucetsAvailable ? (
+        {!sFuelBtn || noEth ? (
           <p
             className={cls(
               cmn.flex,
@@ -225,11 +210,9 @@ export default function SFuelWarning(props: {}) {
               cmn.mtop10
             )}
           >
-            ❗️ Faucet is not available for one of the selected chains, contact with chain owner to
-            get sFUEL
+            ❗️ Faucet is not available for one of the selected chains
           </p>
-        ) : null}
-        {sFuelBtn && faucetsAvailable ? (
+        ) : (
           <div>
             {mining ? (
               <LoadingButton
@@ -254,7 +237,7 @@ export default function SFuelWarning(props: {}) {
               </Button>
             )}
           </div>
-        ) : null}
+        )}
       </div>
     </Collapse>
   )

src/core/constants.ts

@@ -45,6 +45,7 @@ export const DEFAULT_MIN_SFUEL_WEI = 21000000000000n
 export const DEFAULT_ERC20_DECIMALS = '18'
 export const DEFAULT_ERROR_MSG = 'Ooops... Something went wrong...'
 export const TRANSFER_ERROR_MSG = 'Error during the transfer'
+export const TRANSACTION_ERROR_MSG = 'Transaction sending failed'
 
 export const DEFAULT_MP_MARGIN = '20pt'
 export const DEFAULT_MP_Z_INDEX = 99000
@@ -54,23 +55,23 @@ export const HTTPS_PREFIX = 'https://'
 export const MAINNET_EXPLORER_URLS: { [skaleNetwork: string]: string } = {
   mainnet: 'https://etherscan.io',
   staging: 'https://goerli.etherscan.io/',
-  legacy: 'https://goerli.etherscan.io/',
+  legacy: 'https://holesky.etherscan.io/',
   regression: 'https://goerli.etherscan.io/',
   testnet: 'https://holesky.etherscan.io/'
 }
 
 export const BASE_EXPLORER_URLS: { [skaleNetwork: string]: string } = {
   mainnet: 'explorer.mainnet.skalenodes.com',
   staging: 'explorer.staging-v3.skalenodes.com',
-  legacy: 'legacy-explorer.skalenodes.com',
+  legacy: 'legacy-explorer.skaleserver.com',
   regression: 'regression-explorer.skalenodes.com',
   testnet: 'explorer.testnet.skalenodes.com'
 }
 
 export const MAINNET_WS_ENDPOINTS: { [skaleNetwork: string]: string } = {
   mainnet: 'wss://ethereum.publicnode.com',
   staging: 'wss://ethereum-goerli.publicnode.com',
-  legacy: 'wss://ethereum-goerli.publicnode.com',
+  legacy: 'wss://ethereum-holesky.publicnode.com',
   regression: 'wss://ethereum-goerli.publicnode.com',
   testnet: 'wss://ethereum-holesky.publicnode.com'
 }

src/core/interfaces/Transactions.ts

@@ -21,7 +21,7 @@
  * @copyright SKALE Labs 2023-Present
  */
 
-import { type TransactionResponse } from 'ethers';
+import { type TransactionResponse } from 'ethers'
 
 export interface TxResponse {
   status: boolean
@@ -32,4 +32,4 @@ export interface TxResponse {
 export interface TxResponseError {
   name: string
   msg: string
-}
+}

src/core/network.ts

@@ -48,7 +48,7 @@ const PROTOCOL: { [protocol in 'http' | 'ws']: string } = {
 
 export const CHAIN_IDS: { [network in SkaleNetwork]: number } = {
   staging: 5,
-  legacy: 5,
+  legacy: 17000,
   regression: 5,
   mainnet: 1,
   testnet: 17000

src/core/transactions.ts

@@ -21,11 +21,10 @@
  * @copyright SKALE Labs 2023-Present
  */
 
-import { type TransactionResponse } from 'ethers';
-import { TRANSFER_ERROR_MSG } from './constants'
+import { type TransactionResponse } from 'ethers'
+import { TRANSACTION_ERROR_MSG } from './constants'
 import { TxResponse } from './interfaces'
 
-
 export async function sendTransaction(func: any, args: any[]): Promise<TxResponse> {
   try {
     const response: TransactionResponse = await func(...args)
@@ -38,8 +37,10 @@ export async function sendTransaction(func: any, args: any[]): Promise<TxRespons
     if (err.code && err.code === 'ACTION_REJECTED') {
       name = 'Transaction signing was rejected'
     } else {
-      name = TRANSFER_ERROR_MSG
+      name = TRANSACTION_ERROR_MSG
     }
+    const revertMsg = parseErrorMessage(err.message)
+    if (revertMsg) name = revertMsg
     if (err.info && err.info.error && err.info.error.data && err.info.error.data.message) {
       name = err.info.error.data.message
     }
@@ -48,4 +49,15 @@ export async function sendTransaction(func: any, args: any[]): Promise<TxRespons
     }
     return { status: false, err: { name, msg }, response: undefined }
   }
-}
+}
+
+function parseErrorMessage(input: string | undefined): string | null {
+  if (!input) return null
+  const startDelimiter = 'execution reverted: "'
+  const endDelimiter = '"'
+  const startIndex = input.indexOf(startDelimiter)
+  if (startIndex === -1) return null
+  const endIndex = input.indexOf(endDelimiter, startIndex + startDelimiter.length)
+  if (endIndex === -1) return null
+  return input.substring(startIndex + startDelimiter.length, endIndex)
+}