Skip to content

Commit

Permalink
Upgrade RainbowKit to v2.1.4
Browse files Browse the repository at this point in the history
  • Loading branch information
dmytrotkk committed Aug 13, 2024
1 parent f846b1a commit bd1fe73
Show file tree
Hide file tree
Showing 17 changed files with 196 additions and 157 deletions.
Binary file modified bun.lockb
Binary file not shown.
15 changes: 8 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@skalenetwork/metaport",
"version": "2.3.0",
"version": "3.0.0",
"description": "SKALE Metaport Widget",
"keywords": [
"skale",
Expand Down Expand Up @@ -75,17 +75,18 @@
"vitest": "0.34.1"
},
"dependencies": {
"@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.3.6",
"@mui/icons-material": "^5.15.6",
"@mui/lab": "^5.0.0-alpha.162",
"@mui/material": "^5.15.6",
"@rainbow-me/rainbowkit": "^2.1.4",
"@skalenetwork/ima-js": "2.0.2-develop.0",
"@tanstack/react-query": "^5.51.23",
"coingecko-api-v3": "^0.0.29",
"react-jazzicon": "^1.0.4",
"viem": "^1.21.4",
"wagmi": "^1.4.13",
"viem": "2.x",
"wagmi": "^2.12.5",
"zustand": "^4.5.0"
},
"peerDependencies": {
Expand Down
6 changes: 3 additions & 3 deletions src/components/AddToken.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
*/

import { useState } from 'react'
import { useWalletClient, useSwitchNetwork } from 'wagmi'
import { useWalletClient, useSwitchChain } from 'wagmi'
import { MainnetChain, SChain } from '@skalenetwork/ima-js'

import Button from '@mui/material/Button'
Expand All @@ -43,7 +43,7 @@ export default function AddToken(props: {
const [loading, setLoading] = useState<boolean>(false)

const { data: walletClient } = useWalletClient()
const { switchNetworkAsync } = useSwitchNetwork()
const { switchChainAsync } = useSwitchChain()

function getIconUrl(token: TokenData) {
return `${ICONS_BASE_URL}${token.meta.symbol}.png`
Expand Down Expand Up @@ -73,7 +73,7 @@ export default function AddToken(props: {
await enforceNetwork(
chainId,
walletClient,
switchNetworkAsync,
switchChainAsync,
props.mpc.config.skaleNetwork,
props.destChainName
)
Expand Down
92 changes: 49 additions & 43 deletions src/components/ChainApps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,54 +67,60 @@ export default function ChainApps(props: {
<div className={cls(styles.sk__chainApps, cmn.mri10, cmn.flex, cmn.flexcv)}>
<div className={cls(cmn.mtop10, cmn.mbott10)}>
{show ? appButtons : appButtons.length === 4 ? appButtons : appButtons.slice(0, 3)}
{appButtons.length > 4 && <Button
onClick={() => {
setShow(!show)
}}
size="small"
className={cls([cmn.mleft10, size === 'sm'], [cmn.mleft20, size === 'md'], cmn.mbott5)}
>
<div
className={cls(
cmn.flex,
cmn.flexcv,
cmn.mri10,
[cmn.mleft5, size === 'sm'],
[cmn.mleft10, size === 'md'],
[cmn.mbott5, size === 'sm'],
[cmn.mtop5, size === 'sm'],
[cmn.mbott10, size === 'md'],
[cmn.mtop10, size === 'md']
)}
{appButtons.length > 4 && (
<Button
onClick={() => {
setShow(!show)
}}
size="small"
className={cls([cmn.mleft10, size === 'sm'], [cmn.mleft20, size === 'md'], cmn.mbott5)}
>
{show ? (
<RemoveCircleRoundedIcon className={cls(cmn.pPrim,
[styles.chainIconxs, size === 'sm'],
[styles.chainIconsm, size === 'md']
)} />
) : (
<AddCircleRoundedIcon className={cls(cmn.pPrim,
[styles.chainIconxs, size === 'sm'],
[styles.chainIconsm, size === 'md']
)} />
)}

<p
<div
className={cls(
cmn.p,
[cmn.p3, size === 'md'],
[cmn.p4, size === 'sm'],
cmn.pPrim,
cmn.p600,
cmn.mleft10
cmn.flex,
cmn.flexcv,
cmn.mri10,
[cmn.mleft5, size === 'sm'],
[cmn.mleft10, size === 'md'],
[cmn.mbott5, size === 'sm'],
[cmn.mtop5, size === 'sm'],
[cmn.mbott10, size === 'md'],
[cmn.mtop10, size === 'md']
)}
>
Show {show ? 'less' : 'more'} apps
</p>
</div>
</Button>}

{show ? (
<RemoveCircleRoundedIcon
className={cls(
cmn.pPrim,
[styles.chainIconxs, size === 'sm'],
[styles.chainIconsm, size === 'md']
)}
/>
) : (
<AddCircleRoundedIcon
className={cls(
cmn.pPrim,
[styles.chainIconxs, size === 'sm'],
[styles.chainIconsm, size === 'md']
)}
/>
)}

<p
className={cls(
cmn.p,
[cmn.p3, size === 'md'],
[cmn.p4, size === 'sm'],
cmn.pPrim,
cmn.p600,
cmn.mleft10
)}
>
Show {show ? 'less' : 'more'} apps
</p>
</div>
</Button>
)}
</div>
</div>
)
Expand Down
8 changes: 4 additions & 4 deletions src/components/CommunityPool.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -144,7 +144,7 @@ export default function CommunityPool() {
chainName,
cpData.balance,
address,
switchNetworkAsync,
switchChainAsync,
setLoading,
setErrorMessage,
async () => {
Expand All @@ -161,7 +161,7 @@ export default function CommunityPool() {
chainName,
amount,
address,
switchNetworkAsync,
switchChainAsync,
setLoading,
setErrorMessage,
async () => {
Expand Down
109 changes: 61 additions & 48 deletions src/components/MetaportProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -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'

Expand All @@ -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)
Expand All @@ -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(() => {
Expand Down Expand Up @@ -148,24 +158,27 @@ export default function MetaportProvider(props: {

if (!metaportTheme) return <div></div>

const queryClient = new QueryClient()

return (
<WagmiConfig config={wagmiConfig}>
<RainbowKitProvider
coolMode
appInfo={{
appName: 'SKALE Metaport',
learnMoreUrl: 'https://portal.skale.space/other/faq'
}}
showRecentTransactions={true}
chains={chains}
theme={widgetTheme.mode === 'dark' ? darkTheme() : lightTheme()}
>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<div className={cls(themeCls, commonThemeCls, styles.metaport)}>{props.children}</div>
</ThemeProvider>
</StyledEngineProvider>
</RainbowKitProvider>
</WagmiConfig>
<WagmiProvider config={wagmiConfig}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider
coolMode
appInfo={{
appName: 'SKALE Metaport',
learnMoreUrl: 'https://portal.skale.space/other/faq'
}}
showRecentTransactions={true}
theme={widgetTheme.mode === 'dark' ? darkTheme() : lightTheme()}
>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<div className={cls(themeCls, commonThemeCls, styles.metaport)}>{props.children}</div>
</ThemeProvider>
</StyledEngineProvider>
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
)
}
6 changes: 3 additions & 3 deletions src/components/Stepper/SkStepper.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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}
Expand Down
Loading

0 comments on commit bd1fe73

Please sign in to comment.