mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-30 22:01:44 +02:00
* created component for wallet network switching * component styling * display network names * created networks config * fix get network config function * wip * moved switcher component inside consume * use isAssetNetwork to show Switcher component, added to publish * get network properties using networkList and oceanConfig * error fix * hide wallet network switcher if no provider * use chainId from useAsset ddo * added switcher component to Compute * added component to edit metadata and compute settings * added component to advance settings form * fixed lint errors * included component inside Web3Feedback * updated text and icon design * button design update, and Web3Feedback position on edit asset * fixed lint error * message update * tag error fixes * disabled pool and trade buttons if not asset network * mainnet aquarius fallback url * filename typo fix * replace NetworkName component with getNetworkDisplayName function * added method to switch to EthereumChain networks, removed logs * fixed lint error * style tweaks * markup and styles simplification * restrict add datatoken Co-authored-by: Norbi <katunanorbert@gmai.com> Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import React, { ReactElement } from 'react'
|
|
import { useWeb3 } from '../../providers/Web3'
|
|
import {
|
|
addCustomNetwork,
|
|
getNetworkConfigObject,
|
|
getNetworkDisplayName,
|
|
getNetworkDataById
|
|
} from '../../utils/web3'
|
|
import Button from '../atoms/Button'
|
|
import styles from './WalletNetworkSwitcher.module.css'
|
|
import useNetworkMetadata from '../../hooks/useNetworkMetadata'
|
|
import { getOceanConfig } from '../../utils/ocean'
|
|
import { useAsset } from '../../providers/Asset'
|
|
|
|
export default function WalletNetworkSwitcher(): ReactElement {
|
|
const { networkId, web3Provider } = useWeb3()
|
|
const { ddo } = useAsset()
|
|
const oceanConfig = getOceanConfig(ddo.chainId)
|
|
const { networksList } = useNetworkMetadata()
|
|
const ddoNetworkData = getNetworkDataById(networksList, ddo.chainId)
|
|
const walletNetworkData = getNetworkDataById(networksList, networkId)
|
|
|
|
const ddoNetworkName = (
|
|
<strong>{getNetworkDisplayName(ddoNetworkData, ddo.chainId)}</strong>
|
|
)
|
|
const walletNetworkName = (
|
|
<strong>{getNetworkDisplayName(walletNetworkData, networkId)}</strong>
|
|
)
|
|
|
|
async function switchWalletNetwork() {
|
|
const networkNode = networksList.find(
|
|
(data) => data.node.chainId === ddo.chainId
|
|
).node
|
|
const network = { ...networkNode, providerUri: oceanConfig.providerUri }
|
|
const networkConfig = getNetworkConfigObject(network)
|
|
addCustomNetwork(web3Provider, networkConfig)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<p className={styles.text}>
|
|
This asset is published on {ddoNetworkName} but your wallet is connected
|
|
to {walletNetworkName}. Connect to {ddoNetworkName} to interact with
|
|
this asset.
|
|
</p>
|
|
<Button size="small" onClick={() => switchWalletNetwork()}>
|
|
Switch to {ddoNetworkName}
|
|
</Button>
|
|
</>
|
|
)
|
|
}
|