From f6caa18a780f4a49a64cef4502e6acf6e438d908 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Wed, 12 Jun 2024 13:02:16 +0100 Subject: [PATCH 01/16] Update apps metadata format, update skale-network --- .gitmodules | 2 +- skale-network | 2 +- src/core/interfaces/ChainsMetadata.ts | 26 +++++++++++++++++--------- src/core/metadata.ts | 9 +++++++++ 4 files changed, 28 insertions(+), 11 deletions(-) diff --git a/.gitmodules b/.gitmodules index 883b2b7..88f78d1 100644 --- a/.gitmodules +++ b/.gitmodules @@ -5,4 +5,4 @@ [submodule "skale-network"] path = skale-network url = https://github.com/skalenetwork/skale-network.git - branch = master + branch = update-mainnet-chains-metadata diff --git a/skale-network b/skale-network index 1cb85c7..036cf02 160000 --- a/skale-network +++ b/skale-network @@ -1 +1 @@ -Subproject commit 1cb85c75f3275af23670602a791b669f167b33e7 +Subproject commit 036cf02bd52b9f97de05b617c745550242396f78 diff --git a/src/core/interfaces/ChainsMetadata.ts b/src/core/interfaces/ChainsMetadata.ts index 5de4555..35d20eb 100644 --- a/src/core/interfaces/ChainsMetadata.ts +++ b/src/core/interfaces/ChainsMetadata.ts @@ -33,15 +33,23 @@ export interface ChainMetadata { gradientBackground?: string description?: string url?: string - apps?: { - [appName: string]: { - alias: string - background: string - gradientBackground?: string - description?: string - url?: string - } - } + apps?: AppMetadataMap +} + +export interface AppMetadata { + alias: string + background: string + gradientBackground?: string + description?: string + url?: string + tags?: string[] + contracts?: string[] + dappradar?: string | boolean + legacy?: boolean +} + +export interface AppMetadataMap { + [appName: string]: AppMetadata } export interface ChainsMetadataMap { diff --git a/src/core/metadata.ts b/src/core/metadata.ts index 72bddc0..044eced 100644 --- a/src/core/metadata.ts +++ b/src/core/metadata.ts @@ -55,6 +55,7 @@ export const CHAINS_META: NetworksMetadataMap = { testnet: testnetMeta } +// deprecated, remove after merge function transformChainName(chainName: string): string { return chainName .split('-') @@ -62,6 +63,7 @@ function transformChainName(chainName: string): string { .join(' ') } +// deprecated, remove after merge export function getChainAlias( skaleNetwork: SkaleNetwork, chainName: string, @@ -108,14 +110,21 @@ export function chainIconPath(skaleNetwork: SkaleNetwork, name: string, app?: st } } +// deprecated, remove after merge export function chainBg(skaleNetwork: SkaleNetwork, chainName: string, app?: string): string { if (CHAINS_META[skaleNetwork][chainName]) { if (app && CHAINS_META[skaleNetwork][chainName]['apps'][app]) { + if (CHAINS_META[skaleNetwork][chainName]['apps'][app]['gradientBackgroundLight']) { + return CHAINS_META[skaleNetwork][chainName]['apps'][app]['gradientBackgroundLight'] + } if (CHAINS_META[skaleNetwork][chainName]['apps'][app]['gradientBackground']) { return CHAINS_META[skaleNetwork][chainName]['apps'][app]['gradientBackground'] } return CHAINS_META[skaleNetwork][chainName]['apps'][app]['background'] } + if (CHAINS_META[skaleNetwork][chainName]['gradientBackgroundLight']) { + return CHAINS_META[skaleNetwork][chainName]['gradientBackgroundLight'] + } if (CHAINS_META[skaleNetwork][chainName]['gradientBackground']) { return CHAINS_META[skaleNetwork][chainName]['gradientBackground'] } From cd72128e1ec6ac9e2346ce926f36655be8a65d63 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Wed, 12 Jun 2024 13:07:09 +0100 Subject: [PATCH 02/16] Bump node version in test pipeline --- .github/workflows/test.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 377cd5e..88da18b 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -6,7 +6,7 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node: [18] + node: [20] env: TEST: true steps: From c8daa8d2d8f20604db3edff2186dccf83362fa83 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Wed, 12 Jun 2024 13:25:30 +0100 Subject: [PATCH 03/16] Bump node version in publish pipeline --- .github/workflows/publish.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 1c73d18..a4e87c9 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -19,7 +19,7 @@ jobs: submodules: true - uses: actions/setup-node@v3 with: - node-version: '18.x' + node-version: '20.x' registry-url: 'https://registry.npmjs.org' - name: Prepare metadata run: | From 6864e77a93942e0b1d05abab620daf32b10dcad8 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Wed, 12 Jun 2024 13:25:53 +0100 Subject: [PATCH 04/16] Bump node version in package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 49cb35c..4f16c0f 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "./dist/style.css": "./dist/style.css" }, "engines": { - "node": "18" + "node": "20" }, "scripts": { "dev": "storybook dev -p 6006", From cab70dae868a25c65f6992bd549cecb693b0c262 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Wed, 12 Jun 2024 15:27:25 +0100 Subject: [PATCH 05/16] Update skale-network submodule --- .gitmodules | 2 +- skale-network | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.gitmodules b/.gitmodules index 88f78d1..883b2b7 100644 --- a/.gitmodules +++ b/.gitmodules @@ -5,4 +5,4 @@ [submodule "skale-network"] path = skale-network url = https://github.com/skalenetwork/skale-network.git - branch = update-mainnet-chains-metadata + branch = master diff --git a/skale-network b/skale-network index 036cf02..f06c279 160000 --- a/skale-network +++ b/skale-network @@ -1 +1 @@ -Subproject commit 036cf02bd52b9f97de05b617c745550242396f78 +Subproject commit f06c279b61c8057070c5b384690467d0cded3934 From f5a7076f43309acbf1e764defc7cb94b765aebb6 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Tue, 18 Jun 2024 18:24:57 +0100 Subject: [PATCH 06/16] Update metadata --- skale-network | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skale-network b/skale-network index f06c279..7faac7e 160000 --- a/skale-network +++ b/skale-network @@ -1 +1 @@ -Subproject commit f06c279b61c8057070c5b384690467d0cded3934 +Subproject commit 7faac7e66faace1ac87a7f29d73854fe5168c7c0 From 183a7f2fb3f25164276c86cb0095ca29272c2c2c Mon Sep 17 00:00:00 2001 From: Dmytro Date: Thu, 27 Jun 2024 16:14:31 +0100 Subject: [PATCH 07/16] Update AppMetadata interface --- src/core/interfaces/ChainsMetadata.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/core/interfaces/ChainsMetadata.ts b/src/core/interfaces/ChainsMetadata.ts index 35d20eb..3745576 100644 --- a/src/core/interfaces/ChainsMetadata.ts +++ b/src/core/interfaces/ChainsMetadata.ts @@ -46,6 +46,7 @@ export interface AppMetadata { contracts?: string[] dappradar?: string | boolean legacy?: boolean + featured?: boolean } export interface AppMetadataMap { From 2d3e14bad8243f1fc61fdcc3b4363471b3eadf1f Mon Sep 17 00:00:00 2001 From: Dmytro Date: Wed, 10 Jul 2024 19:54:34 +0100 Subject: [PATCH 08/16] Update apps metadata, fix S2M await --- skale-network | 2 +- src/components/ChainAppBtn.tsx | 98 ++++++++++++++++++++++ src/components/ChainApps.tsx | 143 ++++++++++++++++++++------------- src/core/actions/erc20.ts | 6 +- src/core/helper.ts | 11 +++ src/styles/styles.module.scss | 6 +- 6 files changed, 207 insertions(+), 59 deletions(-) create mode 100644 src/components/ChainAppBtn.tsx diff --git a/skale-network b/skale-network index 7faac7e..a090110 160000 --- a/skale-network +++ b/skale-network @@ -1 +1 @@ -Subproject commit 7faac7e66faace1ac87a7f29d73854fe5168c7c0 +Subproject commit a090110d2b480c4d38647ba38601f9907cddb63b diff --git a/src/components/ChainAppBtn.tsx b/src/components/ChainAppBtn.tsx new file mode 100644 index 0000000..fdb50b4 --- /dev/null +++ b/src/components/ChainAppBtn.tsx @@ -0,0 +1,98 @@ +/** + * @license + * SKALE Metaport + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Lesser General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program. If not, see . + */ + +/** + * @file ChainAppBtn.ts + * @copyright SKALE Labs 2024-Present + */ + +import { Button } from '@mui/material' +import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded' + +import { cls, cmn, styles } from '../core/css' +import { SkaleNetwork } from '../core/interfaces' +import { getChainAlias } from '../core/metadata' + +import ChainIcon from './ChainIcon' + +export default function ChainAppBtn(props: { + skaleNetwork: SkaleNetwork + appName: string + chainName: string + handle?: (schainName: string, app?: string) => void + size?: 'sm' | 'md' + prim?: boolean +}) { + const size = props.size ?? 'sm' + const iconSize = props.size === 'sm' ? 'xs' : 'sm' + const prim = props.prim ?? size === 'md' + + return ( + + ) +} diff --git a/src/components/ChainApps.tsx b/src/components/ChainApps.tsx index 56e0b16..49d9c63 100644 --- a/src/components/ChainApps.tsx +++ b/src/components/ChainApps.tsx @@ -1,11 +1,38 @@ +/** + * @license + * SKALE Metaport + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Lesser General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program. If not, see . + */ + +/** + * @file ChainApps.ts + * @copyright SKALE Labs 2024-Present + */ + +import { ReactElement, useState } from 'react' import { Button } from '@mui/material' -import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded' +import AddCircleRoundedIcon from '@mui/icons-material/AddCircleRounded' +import RemoveCircleRoundedIcon from '@mui/icons-material/RemoveCircleRounded' import { cls, cmn, styles } from '../core/css' import { SkaleNetwork } from '../core/interfaces' -import { getChainAppsMeta, getChainAlias } from '../core/metadata' +import { getChainAppsMeta } from '../core/metadata' + +import ChainAppBtn from './ChainAppBtn' -import ChainIcon from './ChainIcon' +import { sortObjectByKeys } from '../core/helper' export default function ChainApps(props: { skaleNetwork: SkaleNetwork @@ -14,70 +41,78 @@ export default function ChainApps(props: { size?: 'sm' | 'md' prim?: boolean }) { + const [show, setShow] = useState(false) + const apps = getChainAppsMeta(props.chainName, props.skaleNetwork) if (!apps || !Object.keys(apps) || Object.keys(apps).length === 0) return
const size = props.size ?? 'sm' - const iconSize = props.size === 'sm' ? 'xs' : 'sm' - const prim = props.prim ?? size === 'md' + const appButtons: ReactElement[] = [] + + for (const appName in sortObjectByKeys(apps)) { + appButtons.push( + + ) + } return (
- {Object.keys(apps).map((key, _) => ( - - ))} + Show {show ? 'less' : 'more'} apps +

+
+
) diff --git a/src/core/actions/erc20.ts b/src/core/actions/erc20.ts index 9cb3dc5..174de0c 100644 --- a/src/core/actions/erc20.ts +++ b/src/core/actions/erc20.ts @@ -287,7 +287,7 @@ export class TransferERC20M2S extends Action { log('TransferERC20M2S:execute - tx completed %O', tx) await this.sChain2.waitERC20BalanceChange(this.destToken, this.address, balanceOnDestination) this.updateState('received') - log('TransferERC20M2S:execute - tokens received to destination chain') + log('TransferERC20M2S:execute - tokens received on destination chain') } async preAction() { @@ -339,9 +339,9 @@ export class TransferERC20S2M extends Action { const block = await sChain.provider.getBlock(tx.blockNumber) this.updateState('transferDone', tx.hash, block.timestamp) log('TransferERC20S2M:execute - tx completed %O', tx) - this.mainnet.waitERC20BalanceChange(this.destToken, this.address, balanceOnDestination) + await this.mainnet.waitERC20BalanceChange(this.destToken, this.address, balanceOnDestination) this.updateState('received') - log('TransferERC20S2M:execute - tokens received to destination chain') + log('TransferERC20S2M:execute - tokens received on destination chain') } async preAction() { diff --git a/src/core/helper.ts b/src/core/helper.ts index 6ace6f4..b249410 100644 --- a/src/core/helper.ts +++ b/src/core/helper.ts @@ -56,3 +56,14 @@ export function getRandom(list: Array) { export async function sleep(ms: number): Promise { return await new Promise((resolve) => setTimeout(resolve, ms)) } + +export function sortObjectByKeys(obj: { [key: string]: any }): { [key: string]: any } { + const sortedKeys = Object.keys(obj).sort() + const sortedObject: { [key: string]: any } = {} + + for (const key of sortedKeys) { + sortedObject[key] = obj[key] + } + + return sortedObject +} diff --git a/src/styles/styles.module.scss b/src/styles/styles.module.scss index ed2d24e..14a14ca 100644 --- a/src/styles/styles.module.scss +++ b/src/styles/styles.module.scss @@ -366,6 +366,10 @@ button { .inputAmount { + img { + border-radius: 50%; + } + :global .MuiInput-root::after { border-bottom: none !important; } @@ -396,7 +400,7 @@ button { } } -.smallTable{ +.smallTable { code { font-size: 0.7rem; display: block; From 7ff15d2d9cce73b10bd3aacdf3426a101428cbdd Mon Sep 17 00:00:00 2001 From: Dmytro Date: Wed, 10 Jul 2024 20:00:14 +0100 Subject: [PATCH 09/16] Fix testnet apps button --- src/components/ChainApps.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/ChainApps.tsx b/src/components/ChainApps.tsx index 49d9c63..6f8f379 100644 --- a/src/components/ChainApps.tsx +++ b/src/components/ChainApps.tsx @@ -67,7 +67,7 @@ export default function ChainApps(props: {
{show ? appButtons : appButtons.length === 4 ? appButtons : appButtons.slice(0, 3)} -
- + } + +
) From 20b58534f0c9406c2f89558bfa34991f96e29b55 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Thu, 11 Jul 2024 13:40:32 +0100 Subject: [PATCH 10/16] Fix show more btn condition --- src/components/ChainApps.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ChainApps.tsx b/src/components/ChainApps.tsx index 6f8f379..b6cff51 100644 --- a/src/components/ChainApps.tsx +++ b/src/components/ChainApps.tsx @@ -67,7 +67,7 @@ export default function ChainApps(props: {
{show ? appButtons : appButtons.length === 4 ? appButtons : appButtons.slice(0, 3)} - {appButtons.length > 3 &&
- } - + {show ? ( + + ) : ( + + )} +

+ Show {show ? 'less' : 'more'} apps +

+
+ + )} ) diff --git a/src/components/CommunityPool.tsx b/src/components/CommunityPool.tsx index 4539361..8cecfb4 100644 --- a/src/components/CommunityPool.tsx +++ b/src/components/CommunityPool.tsx @@ -23,7 +23,7 @@ import React, { useEffect } from 'react' -import { useAccount, useWalletClient, useSwitchNetwork } from 'wagmi' +import { useAccount, useWalletClient, useSwitchChain } from 'wagmi' import Accordion from '@mui/material/Accordion' import AccordionSummary from '@mui/material/AccordionSummary' @@ -57,7 +57,7 @@ import { Collapse } from '@mui/material' export default function CommunityPool() { const { data: walletClient } = useWalletClient() - const { switchNetworkAsync } = useSwitchNetwork() + const { switchChainAsync } = useSwitchChain() const cpData = useCPStore((state) => state.cpData) const loading = useCPStore((state) => state.loading) @@ -144,7 +144,7 @@ export default function CommunityPool() { chainName, cpData.balance, address, - switchNetworkAsync, + switchChainAsync, setLoading, setErrorMessage, async () => { @@ -161,7 +161,7 @@ export default function CommunityPool() { chainName, amount, address, - switchNetworkAsync, + switchChainAsync, setLoading, setErrorMessage, async () => { diff --git a/src/components/MetaportProvider.tsx b/src/components/MetaportProvider.tsx index 17e7d40..dd64015 100644 --- a/src/components/MetaportProvider.tsx +++ b/src/components/MetaportProvider.tsx @@ -22,14 +22,24 @@ import { ReactElement, useEffect } from 'react' -import { RainbowKitProvider, darkTheme, lightTheme } from '@rainbow-me/rainbowkit' -import { configureChains, createConfig, WagmiConfig } from 'wagmi' +import { + RainbowKitProvider, + darkTheme, + lightTheme, + connectorsForWallets +} from '@rainbow-me/rainbowkit' +import { WagmiProvider, createConfig, http } from 'wagmi' import { mainnet, goerli, holesky } from 'wagmi/chains' -import { jsonRpcProvider } from 'wagmi/providers/jsonRpc' -import { connectorsForWallets } from '@rainbow-me/rainbowkit' +import { GetChainsReturnType } from '@wagmi/core' +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { PaletteMode } from '@mui/material' -import { injectedWallet, metaMaskWallet, enkryptWallet } from '@rainbow-me/rainbowkit/wallets' +import { + injectedWallet, + metaMaskWallet, + enkryptWallet, + coinbaseWallet +} from '@rainbow-me/rainbowkit/wallets' import { MetaportConfig, ActionStateUpdate } from '../core/interfaces' @@ -38,7 +48,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles' import '@rainbow-me/rainbowkit/styles.css' -import { constructWagmiChain, getWebSocketUrl } from '../core/wagmi_network' +import { constructWagmiChain } from '../core/wagmi_network' import { getWidgetTheme, getMuiZIndex } from '../core/themes' @@ -56,35 +66,32 @@ export default function MetaportProvider(props: { const skaleChains = props.config.chains.map((chain) => constructWagmiChain(props.config.skaleNetwork, chain) ) - const { chains, webSocketPublicClient } = configureChains( - [mainnet, goerli, holesky, ...skaleChains], - [ - jsonRpcProvider({ - rpc: (chain) => ({ - http: chain.rpcUrls.default.http[0], - webSocket: getWebSocketUrl(chain, props.config.skaleNetwork) - }) - }) - ] - ) - - const wallets = [enkryptWallet({ chains }), injectedWallet({ chains })] - - if (props.config.projectId) { - wallets.push(metaMaskWallet({ chains, projectId: props.config.projectId })) - } - const connectors = connectorsForWallets([ + const connectors = connectorsForWallets( + [ + { + groupName: 'Recommended wallets', + wallets: [enkryptWallet, injectedWallet, metaMaskWallet, coinbaseWallet] + } + ], { - groupName: 'Supported Wallets', - wallets: wallets + appName: 'SKALE Metaport', + projectId: props.config.projectId } - ]) + ) + const chains: GetChainsReturnType = [mainnet, goerli, holesky, ...skaleChains] const wagmiConfig = createConfig({ - autoConnect: true, + chains, connectors, - publicClient: webSocketPublicClient + transports: { + [mainnet.id]: http(), + [goerli.id]: http(), + [holesky.id]: http(), + ...Object.fromEntries( + skaleChains.map((chain) => [chain.id, http(chain.rpcUrls.default.http[0])]) + ) + } }) const widgetTheme = getWidgetTheme(props.config.theme) @@ -100,7 +107,10 @@ export default function MetaportProvider(props: { useEffect(() => { setOpen(props.config.openOnLoad) - window.addEventListener('metaport_actionStateUpdated', actionStateUpdated, false) + window.addEventListener('metaport_actionStateUpdated', actionStateUpdated as EventListener) + return () => { + window.removeEventListener('metaport_actionStateUpdated', actionStateUpdated as EventListener) + } }, []) useEffect(() => { @@ -148,24 +158,27 @@ export default function MetaportProvider(props: { if (!metaportTheme) return
+ const queryClient = new QueryClient() + return ( - - - - -
{props.children}
- - - - + + + + + +
{props.children}
+ + + + + ) } diff --git a/src/components/Stepper/SkStepper.tsx b/src/components/Stepper/SkStepper.tsx index 0e47e81..d5efc8c 100644 --- a/src/components/Stepper/SkStepper.tsx +++ b/src/components/Stepper/SkStepper.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react' -import { useWalletClient, useSwitchNetwork, useAccount } from 'wagmi' +import { useWalletClient, useSwitchChain, useAccount } from 'wagmi' import { useAddRecentTransaction } from '@rainbow-me/rainbowkit' import Box from '@mui/material/Box' @@ -29,7 +29,7 @@ import { SUCCESS_EMOJIS } from '../../core/constants' export default function SkStepper(props: { skaleNetwork: SkaleNetwork }) { const { address } = useAccount() - const { switchNetworkAsync } = useSwitchNetwork() + const { switchChainAsync } = useSwitchChain() const addRecentTransaction = useAddRecentTransaction() const { data: walletClient } = useWalletClient() @@ -124,7 +124,7 @@ export default function SkStepper(props: { skaleNetwork: SkaleNetwork }) { color="primary" size="medium" className={cls(styles.btnAction, cmn.mtop5)} - onClick={() => execute(address, switchNetworkAsync, walletClient)} + onClick={() => execute(address, switchChainAsync, walletClient)} disabled={!!actionDisabled} > {step.btnText} diff --git a/src/components/WrappedTokens.tsx b/src/components/WrappedTokens.tsx index fbf0943..a51f52a 100644 --- a/src/components/WrappedTokens.tsx +++ b/src/components/WrappedTokens.tsx @@ -23,7 +23,7 @@ import React, { useEffect, useState } from 'react' -import { useAccount, useWalletClient, useSwitchNetwork } from 'wagmi' +import { useAccount, useWalletClient, useSwitchChain } from 'wagmi' import Accordion from '@mui/material/Accordion' import AccordionSummary from '@mui/material/AccordionSummary' @@ -49,7 +49,7 @@ import { TokenDataMap } from '../core/interfaces' export default function WrappedTokens() { const { data: walletClient } = useWalletClient() - const { switchNetworkAsync } = useSwitchNetwork() + const { switchChainAsync } = useSwitchChain() const wrappedTokens = useMetaportStore((state) => state.wrappedTokens) const updateWrappedTokenBalances = useMetaportStore((state) => state.updateWrappedTokenBalances) @@ -195,7 +195,7 @@ export default function WrappedTokens() { size="medium" className={cls(styles.btnAction, cmn.mtop5)} onClick={() => - unwrapAll(address, switchNetworkAsync, walletClient, filteredTokens) + unwrapAll(address, switchChainAsync, walletClient, filteredTokens) } > Unwrap all diff --git a/src/core/actions/action.ts b/src/core/actions/action.ts index ebe633e..b4206c7 100644 --- a/src/core/actions/action.ts +++ b/src/core/actions/action.ts @@ -23,7 +23,7 @@ import debug from 'debug' -import { Chain } from '@wagmi/core' +import { UseSwitchChainReturnType } from 'wagmi' import { WalletClient } from 'viem' import { Contract, Provider } from 'ethers' @@ -81,7 +81,7 @@ export class Action { setAmountErrorMessage: React.Dispatch> setBtnText: (btnText: string) => void - _switchNetwork: (chainId: number | bigint) => Promise + _switchChain: UseSwitchChainReturnType['switchChainAsync'] constructor( mpc: MetaportCore, @@ -93,7 +93,7 @@ export class Action { token: TokenData, setAmountErrorMessage: (amountErrorMessage: string) => void, setBtnText: (btnText: string) => void, - switchNetwork: (chainId: number | bigint) => Promise, + switchChain: UseSwitchChainReturnType['switchChainAsync'], walletClient: WalletClient ) { this.mpc = mpc @@ -155,7 +155,7 @@ export class Action { this.setAmountErrorMessage = setAmountErrorMessage this.setBtnText = setBtnText - this._switchNetwork = switchNetwork + this._switchChain = switchChain this.walletClient = walletClient } @@ -192,7 +192,7 @@ export class Action { const updChainId = await enforceNetwork( chainId, this.walletClient, - this._switchNetwork, + this._switchChain, this.mpc.config.skaleNetwork, chainName ?? this.chainName1 ) diff --git a/src/core/community_pool.ts b/src/core/community_pool.ts index 6df70b0..388927b 100644 --- a/src/core/community_pool.ts +++ b/src/core/community_pool.ts @@ -26,7 +26,7 @@ import { ethers } from 'ethers' import { MainnetChain, SChain } from '@skalenetwork/ima-js' import { WalletClient } from 'viem' -import { Chain } from '@wagmi/core' +import { type UseSwitchChainReturnType } from 'wagmi' import { CommunityPoolData } from './interfaces' import { fromWei, toWei } from './convertation' @@ -100,7 +100,6 @@ export async function getCommunityPoolData( recommendedRechargeAmount: recommendedAmount, originalRecommendedRechargeAmount: rraWei } - // log('communityPoolData:', communityPoolData) return communityPoolData } @@ -110,7 +109,7 @@ export async function withdraw( chainName: string, amount: bigint, address: `0x${string}`, - switchNetwork: (chainId: number | bigint) => Promise, + switchChain: UseSwitchChainReturnType['switchChainAsync'], setLoading: (loading: string | false) => void, setErrorMessage: (errorMessage: dataclasses.ErrorMessage) => void, errorMessageClosedFallback: () => void @@ -122,7 +121,7 @@ export async function withdraw( await enforceNetwork( chainId, walletClient, - switchNetwork, + switchChain, mpc.config.skaleNetwork, MAINNET_CHAIN_NAME ) @@ -149,7 +148,7 @@ export async function recharge( chainName: string, amount: string, address: `0x${string}`, - switchNetwork: (chainId: number | bigint) => Promise, + switchChain: UseSwitchChainReturnType['switchChainAsync'], setLoading: (loading: string | false) => void, setErrorMessage: (errorMessage: dataclasses.ErrorMessage) => void, errorMessageClosedFallback: () => void @@ -163,7 +162,7 @@ export async function recharge( await enforceNetwork( chainId, walletClient, - switchNetwork, + switchChain, mpc.config.skaleNetwork, MAINNET_CHAIN_NAME ) diff --git a/src/core/ethers.ts b/src/core/ethers.ts index b748877..4ee725e 100644 --- a/src/core/ethers.ts +++ b/src/core/ethers.ts @@ -1,12 +1,39 @@ +/** + * @license + * SKALE Metaport + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Lesser General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program. If not, see . + */ +/** + * @file ethers.ts + * @copyright SKALE Labs 2024-Present + */ + import * as React from 'react' -import { type WalletClient, useWalletClient } from 'wagmi' + +import { + type UseWalletClientReturnType, + useWalletClient, + usePublicClient, + type UsePublicClientReturnType +} from 'wagmi' import { BrowserProvider, JsonRpcSigner, Eip1193Provider } from 'ethers' -import { type PublicClient, usePublicClient } from 'wagmi' import { FallbackProvider, JsonRpcProvider } from 'ethers' import { type HttpTransport } from 'viem' -export function walletClientToSigner(walletClient: WalletClient) { +export function walletClientToSigner(walletClient: UseWalletClientReturnType['data']) { const { account, transport } = walletClient const provider = new BrowserProvider(transport as Eip1193Provider, 'any') const signer = new JsonRpcSigner(provider, account.address) @@ -22,7 +49,7 @@ export function useEthersSigner({ chainId }: { chainId?: number } = {}) { ) } -export function publicClientToProvider(publicClient: PublicClient) { +export function publicClientToProvider(publicClient: UsePublicClientReturnType) { const { chain, transport } = publicClient const network = { chainId: chain.id, diff --git a/src/core/network.ts b/src/core/network.ts index 8beccf8..99f5324 100644 --- a/src/core/network.ts +++ b/src/core/network.ts @@ -26,8 +26,8 @@ import { MainnetChain, SChain, TimeoutException } from '@skalenetwork/ima-js' import { JsonRpcProvider } from 'ethers' import { WalletClient } from 'viem' -import { Chain } from '@wagmi/core' import { holesky } from '@wagmi/core/chains' +import { type UseSwitchChainReturnType } from 'wagmi' import proxyEndpoints from '../metadata/proxy.json' import { MAINNET_CHAIN_NAME, DEFAULT_ITERATIONS, DEFAULT_SLEEP } from './constants' @@ -143,9 +143,9 @@ async function waitForNetworkChange( async function _networkSwitch( chainId: number | bigint, currentChainId: number | bigint, - switchNetwork: (chainId: number | undefined) => Promise + switchChain: UseSwitchChainReturnType['switchChainAsync'] ): Promise { - const chain = await switchNetwork(Number(chainId)) + const chain = await switchChain({ chainId: Number(chainId) }) if (!chain) { throw new Error(`Failed to switch from ${currentChainId} to ${chainId} `) } @@ -154,7 +154,7 @@ async function _networkSwitch( export async function enforceNetwork( chainId: bigint, walletClient: any, - switchNetwork: (chainId: number | undefined) => Promise, + switchChain: UseSwitchChainReturnType['switchChainAsync'], skaleNetwork: SkaleNetwork, chainName: string ): Promise { @@ -173,10 +173,10 @@ export async function enforceNetwork( } try { // tmp fix for coinbase wallet - _networkSwitch(chainId, currentChainId, switchNetwork) + _networkSwitch(chainId, currentChainId, switchChain) } catch (e) { await sleep(DEFAULT_SLEEP) - _networkSwitch(chainId, currentChainId, switchNetwork) + _networkSwitch(chainId, currentChainId, switchChain) } await waitForNetworkChange(_walletClient, currentChainId, chainId) log(`Network switched to ${chainId}...`) diff --git a/src/core/wagmi_network.ts b/src/core/wagmi_network.ts index 2a2f7d4..70eede4 100644 --- a/src/core/wagmi_network.ts +++ b/src/core/wagmi_network.ts @@ -21,13 +21,12 @@ * @copyright SKALE Labs 2023-Present */ -import { Chain } from 'wagmi' +import { Chain } from 'wagmi/chains' import { getSChainEndpoint } from './network' import { getExplorerUrl } from './explorer' import { getChainAlias } from './metadata' import { getChainId } from './chain_id' -import { MAINNET_WS_ENDPOINTS } from './constants' import { SkaleNetwork } from './interfaces' export function constructWagmiChain(network: SkaleNetwork, chainName: string): Chain { @@ -39,7 +38,6 @@ export function constructWagmiChain(network: SkaleNetwork, chainName: string): C return { id: chainId, name: name, - network: `skale-${chainName}`, nativeCurrency: { decimals: 18, name: 'sFUEL', @@ -56,9 +54,3 @@ export function constructWagmiChain(network: SkaleNetwork, chainName: string): C contracts: {} } as const satisfies Chain } - -export function getWebSocketUrl(chain: Chain, skaleNetwork: SkaleNetwork): string { - return chain.rpcUrls.default.webSocket - ? chain.rpcUrls.default.webSocket[0] - : MAINNET_WS_ENDPOINTS[skaleNetwork] -} diff --git a/src/index.ts b/src/index.ts index ae5b568..b2e76ff 100644 --- a/src/index.ts +++ b/src/index.ts @@ -49,7 +49,7 @@ import { getWidgetTheme as getMetaportTheme } from './core/themes' import { useAccount as useWagmiAccount, useWalletClient as useWagmiWalletClient, - useSwitchNetwork as useWagmiSwitchNetwork + useSwitchChain as useWagmiSwitchNetwork } from 'wagmi' import { ConnectButton as RainbowConnectButton } from '@rainbow-me/rainbowkit' diff --git a/src/metadata/metaportConfigTestnet.ts b/src/metadata/metaportConfigTestnet.ts index b1b33ed..a0bfb37 100644 --- a/src/metadata/metaportConfigTestnet.ts +++ b/src/metadata/metaportConfigTestnet.ts @@ -129,7 +129,7 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = { hub: 'juicy-low-small-testnet' } } - }, + } // wbtc: { // address: '0x', // chains: { @@ -147,10 +147,8 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = { // } // } }, - erc721meta: { - }, - erc1155: { - } + erc721meta: {}, + erc1155: {} }, 'giant-half-dual-testnet': { // Calypso connections @@ -202,7 +200,8 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = { } } }, - 'lanky-ill-funny-testnet': { // nebula connections + 'lanky-ill-funny-testnet': { + // nebula connections eth: { eth: { address: '0x319f0eeb1a1e59943ebe44f766dbb592db664cf0', @@ -251,7 +250,8 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = { } } }, - 'aware-fake-trim-testnet': { // titan connections + 'aware-fake-trim-testnet': { + // titan connections erc20: { usdc: { address: '0x10a30e73ab2da5328fc09b06443dde3e656e82f4', @@ -348,7 +348,7 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = { wrapper: '0xa6be26f2914a17fc4e8d21a1ce2ec4079eeb990c' } } - }, + } // wbtc: { // address: '0x', // chains: { @@ -372,4 +372,4 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = { mode: 'dark', vibrant: true } -} \ No newline at end of file +} diff --git a/src/store/MetaportState.ts b/src/store/MetaportState.ts index bc5e7f1..a4b3e6b 100644 --- a/src/store/MetaportState.ts +++ b/src/store/MetaportState.ts @@ -23,6 +23,7 @@ import { Contract } from 'ethers' import { WalletClient } from 'viem' +import { UseSwitchChainReturnType } from 'wagmi' import { MainnetChain, SChain } from '@skalenetwork/ima-js' import MetaportCore from '../core/metaport' @@ -47,13 +48,13 @@ export interface MetaportState { execute: ( address: string, - switchNetwork: (chainId: number) => void, + switchChain: UseSwitchChainReturnType['switchChainAsync'], walletClient: WalletClient ) => void unwrapAll: ( address: string, - switchNetwork: (chainId: number) => void, + switchChain: UseSwitchChainReturnType['switchChainAsync'], walletClient: WalletClient, tokens: interfaces.TokenDataMap ) => void diff --git a/src/store/MetaportStore.ts b/src/store/MetaportStore.ts index 571acb9..d2ef645 100644 --- a/src/store/MetaportStore.ts +++ b/src/store/MetaportStore.ts @@ -64,7 +64,7 @@ export const useMetaportStore = create()((set, get) => ({ unwrapAll: async ( address: `0x${string}`, - switchNetwork: any, + switchChain: any, walletClient: WalletClient, tokens: interfaces.TokenDataMap ) => { @@ -82,7 +82,7 @@ export const useMetaportStore = create()((set, get) => ({ tokens[key], get().setAmountErrorMessage, get().setBtnText, - switchNetwork, + switchChain, walletClient ).execute() } @@ -98,7 +98,7 @@ export const useMetaportStore = create()((set, get) => ({ } }, - execute: async (address: `0x${string}`, switchNetwork: any, walletClient: WalletClient) => { + execute: async (address: `0x${string}`, switchChain: any, walletClient: WalletClient) => { log('Running execute') if (get().stepsMetadata[get().currentStep]) { set({ @@ -118,7 +118,7 @@ export const useMetaportStore = create()((set, get) => ({ get().token, get().setAmountErrorMessage, get().setBtnText, - switchNetwork, + switchChain, walletClient ).execute() } catch (err) { From 9d8653a375b875b452f7fae89ac682283214e906 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Tue, 13 Aug 2024 12:39:41 +0100 Subject: [PATCH 14/16] Add rainbowWallet and rabbyWallet --- src/components/MetaportProvider.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/MetaportProvider.tsx b/src/components/MetaportProvider.tsx index dd64015..fce9ab2 100644 --- a/src/components/MetaportProvider.tsx +++ b/src/components/MetaportProvider.tsx @@ -38,7 +38,9 @@ import { injectedWallet, metaMaskWallet, enkryptWallet, - coinbaseWallet + coinbaseWallet, + rainbowWallet, + rabbyWallet } from '@rainbow-me/rainbowkit/wallets' import { MetaportConfig, ActionStateUpdate } from '../core/interfaces' @@ -71,7 +73,14 @@ export default function MetaportProvider(props: { [ { groupName: 'Recommended wallets', - wallets: [enkryptWallet, injectedWallet, metaMaskWallet, coinbaseWallet] + wallets: [ + enkryptWallet, + injectedWallet, + metaMaskWallet, + coinbaseWallet, + rainbowWallet, + rabbyWallet + ] } ], { From f71ebb739854386c75de8912317c933732bed5a4 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Tue, 13 Aug 2024 13:47:21 +0100 Subject: [PATCH 15/16] Update skale-network, disable coolMode --- skale-network | 2 +- src/components/MetaportProvider.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/skale-network b/skale-network index ed4834e..eb8c44e 160000 --- a/skale-network +++ b/skale-network @@ -1 +1 @@ -Subproject commit ed4834e2d6d61bdb9c5df345d0cd0997b9c93ff7 +Subproject commit eb8c44e8644528fbb6a11df813a7359e469615ee diff --git a/src/components/MetaportProvider.tsx b/src/components/MetaportProvider.tsx index fce9ab2..83d3502 100644 --- a/src/components/MetaportProvider.tsx +++ b/src/components/MetaportProvider.tsx @@ -173,7 +173,6 @@ export default function MetaportProvider(props: { Date: Wed, 14 Aug 2024 18:14:58 +0100 Subject: [PATCH 16/16] Add export for useSignMessage --- src/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index b2e76ff..7ad0a2a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -49,7 +49,8 @@ import { getWidgetTheme as getMetaportTheme } from './core/themes' import { useAccount as useWagmiAccount, useWalletClient as useWagmiWalletClient, - useSwitchChain as useWagmiSwitchNetwork + useSwitchChain as useWagmiSwitchNetwork, + useSignMessage as useWagmiSignMessage, } from 'wagmi' import { ConnectButton as RainbowConnectButton } from '@rainbow-me/rainbowkit' @@ -93,6 +94,7 @@ export { useWagmiAccount, useWagmiWalletClient, useWagmiSwitchNetwork, + useWagmiSignMessage, walletClientToSigner, sendTransaction, PROXY_ENDPOINTS,