diff --git a/.env.production b/.env.production index b553e93..a838bc3 100644 --- a/.env.production +++ b/.env.production @@ -14,4 +14,6 @@ NEXT_PUBLIC_NEUTRON_TEST_GQL=APP_NEXT_NEUTRON_TEST_GQL # NEUTRON-1 # NEXT_PUBLIC_NEUTRON_RPC=APP_NEXT_NEUTRON_RPC NEXT_PUBLIC_NEUTRON_REST=APP_NEXT_NEUTRON_REST -NEXT_PUBLIC_NEUTRON_GQL=APP_NEXT_NEUTRON_GQL \ No newline at end of file +NEXT_PUBLIC_NEUTRON_GQL=APP_NEXT_NEUTRON_GQL + +NEXT_PUBLIC_WALLET_CONNECT_ID=APP_NEXT_WALLET_CONNECT_ID \ No newline at end of file diff --git a/README.md b/README.md index 2d1625f..02bc74a 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,7 @@ We allow the use of environment variables to be passed to the Docker container t | URL_NEUTRON_TEST_GQL | The Neutron Testnet Hive GraphQL endpoint to use | https://testnet-neutron-gql.marsprotocol.io/graphql | | URL_NEUTRON_TEST_REST | The Neutron Testnet node REST endpoint to use | https://rest-palvus.pion-1.ntrn.tech | | URL_NEUTRON_TEST_RPC | The Neutron Testnet node RPC endpoint to use | https://rpc-palvus.pion-1.ntrn.tech | +| WALLET_CONNECT_ID | Your projecta WalletConnect v2 ID | 0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x | **Sample Docker run command** @@ -54,7 +55,8 @@ docker run -it -p 3000:3000 \ -e URL_NEUTRON_RPC=https://rpc-kralum.neutron-1.neutron.org \ -e URL_NEUTRON_TEST_GQL=https://testnet-neutron-gql.marsprotocol.io/graphql \ -e URL_NEUTRON_TEST_REST=https://rest-palvus.pion-1.ntrn.tech \ - -e URL_NEUTRON_TEST_RPC=https://rpc-palvus.pion-1.ntrn.tech marsprotocol/interface:latest + -e URL_NEUTRON_TEST_RPC=https://rpc-palvus.pion-1.ntrn.tech \ + -e WALLET_CONNECT_ID=0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x marsprotocol/interface:latest ``` ## 3. Text and translations diff --git a/entrypoint.sh b/entrypoint.sh index 25ac31b..a9a879c 100755 --- a/entrypoint.sh +++ b/entrypoint.sh @@ -13,6 +13,7 @@ echo "APP_NEXT_NEUTRON_GQL=$URL_NEUTRON_GQL" >> $envFilename echo "APP_NEXT_NEUTRON_TEST_RPC=$URL_NEUTRON_TEST_RPC" >> $envFilename echo "APP_NEXT_NEUTRON_TEST_REST=$URL_NEUTRON_TEST_REST" >> $envFilename echo "APP_NEXT_NEUTRON_TEST_GQL=$URL_NEUTRON_TEST_GQL" >> $envFilename +echo "APP_NEXT_WALLET_CONNECT_ID=$WALLET_CONNECT_ID" >> $envFilename function apply_path { # read all config file while read line; do diff --git a/next-config.patch b/next-config.patch deleted file mode 100644 index 00e571c..0000000 --- a/next-config.patch +++ /dev/null @@ -1,16 +0,0 @@ -diff --git a/next.config.js b/next.config.js -index 2801090..4b5fabe 100644 ---- a/next.config.js -+++ b/next.config.js -@@ -48,6 +48,11 @@ const moduleExports = { - }, - ] - }, -+ sentry: { -+ disableServerWebpackPlugin: true, -+ disableClientWebpackPlugin: true, -+ }, -+ output: 'standalone' - } - - const sentryWebpackPluginOptions = { diff --git a/package.json b/package.json index c2673b1..4d38765 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "mars", "homepage": "./", - "version": "1.7.1", + "version": "1.7.2", "private": false, "license": "SEE LICENSE IN LICENSE FILE", "scripts": { @@ -22,7 +22,8 @@ "@cosmjs/launchpad": "^0.27.1", "@cosmjs/proto-signing": "^0.31.1", "@cosmjs/stargate": "^0.31.1", - "@marsprotocol/wallet-connector": "^2.1.3", + "@delphi-labs/shuttle-react": "^3.10.0", + "@keplr-wallet/cosmos": "^0.12.40", "@material-ui/core": "^4.12.4", "@material-ui/icons": "^4.11.3", "@ramonak/react-progress-bar": "^5.0.3", @@ -56,6 +57,7 @@ "react-device-detect": "^2.2.2", "react-dom": "^18.2.0", "react-i18next": "^12.1.5", + "react-qr-code": "^2.0.12", "react-spring": "^9.6.1", "react-table": "^7.8.0", "react-use-clipboard": "^1.0.9", diff --git a/public/images/wallets/cosmostation-wc.png b/public/images/wallets/cosmostation-wc.png new file mode 100644 index 0000000..6aeb352 Binary files /dev/null and b/public/images/wallets/cosmostation-wc.png differ diff --git a/public/images/wallets/cosmostation.png b/public/images/wallets/cosmostation.png new file mode 100644 index 0000000..e31c280 Binary files /dev/null and b/public/images/wallets/cosmostation.png differ diff --git a/public/images/wallets/keplr-wc.png b/public/images/wallets/keplr-wc.png new file mode 100644 index 0000000..991e2f6 Binary files /dev/null and b/public/images/wallets/keplr-wc.png differ diff --git a/public/images/wallets/keplr.png b/public/images/wallets/keplr.png new file mode 100644 index 0000000..44ccea7 Binary files /dev/null and b/public/images/wallets/keplr.png differ diff --git a/public/images/wallets/leap-cosmos.png b/public/images/wallets/leap-cosmos.png new file mode 100644 index 0000000..a0efe9d Binary files /dev/null and b/public/images/wallets/leap-cosmos.png differ diff --git a/public/images/wallets/leap-metamask-snap.png b/public/images/wallets/leap-metamask-snap.png new file mode 100644 index 0000000..3b4f6fa Binary files /dev/null and b/public/images/wallets/leap-metamask-snap.png differ diff --git a/public/images/wallets/leap-wc.png b/public/images/wallets/leap-wc.png new file mode 100644 index 0000000..f1db809 Binary files /dev/null and b/public/images/wallets/leap-wc.png differ diff --git a/public/images/wallets/station.png b/public/images/wallets/station.png new file mode 100644 index 0000000..e01c16e Binary files /dev/null and b/public/images/wallets/station.png differ diff --git a/public/images/wallets/vectis.png b/public/images/wallets/vectis.png new file mode 100644 index 0000000..f2434fd Binary files /dev/null and b/public/images/wallets/vectis.png differ diff --git a/public/images/wallets/xdefi.png b/public/images/wallets/xdefi.png new file mode 100644 index 0000000..cf1e740 Binary files /dev/null and b/public/images/wallets/xdefi.png differ diff --git a/src/components/common/Button/Button.tsx b/src/components/common/Button/Button.tsx index bec03ae..e8fa045 100644 --- a/src/components/common/Button/Button.tsx +++ b/src/components/common/Button/Button.tsx @@ -18,6 +18,7 @@ interface Props { text?: string | ReactNode variant?: 'solid' | 'transparent' | 'round' onClick?: (e: any) => void + children?: ReactNode } export const Button = React.forwardRef( @@ -36,6 +37,7 @@ export const Button = React.forwardRef( text, variant = 'solid', onClick, + children, }, ref, ) => { @@ -56,6 +58,7 @@ export const Button = React.forwardRef( ref={ref} style={styleOverride} > + {children && !showProgressIndicator && children} {prefix && !showProgressIndicator && {prefix}} {text && ( diff --git a/src/components/common/Containers/CommonContainer.tsx b/src/components/common/Containers/CommonContainer.tsx index 4ce555b..79631d6 100644 --- a/src/components/common/Containers/CommonContainer.tsx +++ b/src/components/common/Containers/CommonContainer.tsx @@ -1,12 +1,4 @@ -import { CosmWasmClient } from '@cosmjs/cosmwasm-stargate' -import { - getChainInfo, - getClient, - useWallet, - useWalletManager, - WalletConnectionStatus, -} from '@marsprotocol/wallet-connector' -import { useQueryClient } from '@tanstack/react-query' +import { MigrationInProgress } from 'components/common' import { useBlockHeight, useDepositAndDebt, @@ -21,29 +13,18 @@ import { useAssetParams } from 'hooks/queries/useAssetParams' import { useMarsPrice } from 'hooks/queries/useMarsPrice' import { usePythVaa } from 'hooks/queries/usePythVaa' import { useUserCollaterals } from 'hooks/queries/useUserCollaterals' -import { ReactNode, useEffect, useState } from 'react' +import { getCurrentChainId } from 'libs/chainId' +import { getNetworkConfig, getNetworkVaultConfig } from 'libs/networkConfig' +import { ReactNode, useEffect } from 'react' import useStore from 'store' import { State } from 'types/enums' -import { MarsParamsQueryClient } from 'types/generated/mars-params/MarsParams.client' - -import { MigrationInProgress } from '../MigrationInProgress/MigrationInProgress' +import { ChainInfoID } from 'types/enums/wallet' interface CommonContainerProps { children: ReactNode } export const CommonContainer = ({ children }: CommonContainerProps) => { - useAssetParams() - - // ------------------ - // EXTERNAL HOOKS - // --------------- - const { simulate, sign, broadcast } = useWallet() - const { status, connectedWallet } = useWalletManager() - const queryClient = useQueryClient() - - const [cosmWasmClient, setCosmWasmClient] = useState() - // ------------------ // STORE STATE // ------------------ @@ -52,97 +33,46 @@ export const CommonContainer = ({ children }: CommonContainerProps) => { const chainId = useStore((s) => s.currentNetwork) const exchangeRates = useStore((s) => s.exchangeRates) const exchangeRatesState = useStore((s) => s.exchangeRatesState) - const networkConfig = useStore((s) => s.networkConfig) const marketDeposits = useStore((s) => s.marketDeposits) const marketInfo = useStore((s) => s.marketInfo) const migrationInProgress = useStore((s) => s.migrationInProgress) - const paramsAddress = useStore((s) => s.networkConfig.contracts.params) const redBankState = useStore((s) => s.redBankState) const rpc = useStore((s) => s.networkConfig.rpcUrl) const userBalances = useStore((s) => s.userBalances) const userBalancesState = useStore((s) => s.userBalancesState) const userDebts = useStore((s) => s.userDebts) + const currentNetwork = useStore((s) => s.currentNetwork) const userDeposits = useStore((s) => s.userDeposits) const userWalletAddress = useStore((s) => s.userWalletAddress) - const whitelistedAssets = useStore((s) => s.whitelistedAssets) + const whitelistedAssets = useStore((s) => s.networkConfig.assets.whitelist) const setRedBankAssets = useStore((s) => s.setRedBankAssets) const setLcdClient = useStore((s) => s.setLcdClient) - const setChainInfo = useStore((s) => s.setChainInfo) const setUserBalancesState = useStore((s) => s.setUserBalancesState) // ------------------ // SETTERS // ------------------ - - useEffect(() => { - if (status !== WalletConnectionStatus.Connected && cosmWasmClient) { - setCosmWasmClient(undefined) - useStore.setState({ - client: undefined, - creditManagerClient: undefined, - accountNftClient: undefined, - paramsClient: undefined, - userWalletAddress: '', - }) - } - }, [status, cosmWasmClient]) - - useEffect(() => { - const chainInfo = getChainInfo(chainId, { - rpc: networkConfig.rpcUrl, - rest: networkConfig.restUrl, - }) - setChainInfo(chainInfo) - }, [chainId, networkConfig, setChainInfo]) - - useEffect(() => { - if (!connectedWallet || connectedWallet.network.chainId !== chainId) return - useStore.setState({ - userWalletAddress: connectedWallet.account.address, - isLedger: connectedWallet.account.isLedger, - }) - }, [connectedWallet, chainId]) - useEffect(() => { if (!rpc || !chainId) return setLcdClient(rpc, chainId) }, [rpc, chainId, setLcdClient]) + useEffect(() => { + const currentChainId = getCurrentChainId() + useStore.setState({ + networkConfig: getNetworkConfig(currentChainId), + vaultConfigs: getNetworkVaultConfig(currentChainId), + currentNetwork: currentChainId as ChainInfoID, + }) + }, []) + useEffect(() => { if (userBalances) { setUserBalancesState(State.READY) } else { setUserBalancesState(State.ERROR) } - }, [userDebts, userDeposits, userBalances, setUserBalancesState]) - - useEffect(() => { - if (!connectedWallet || connectedWallet.network.chainId !== chainId) return - if (!cosmWasmClient) { - const getCosmWasmClient = async () => { - const cosmClient = await getClient(networkConfig.rpcUrl) - setCosmWasmClient(cosmClient) - } - - getCosmWasmClient() - return - } - - useStore.setState({ - client: { - broadcast, - cosmWasmClient, - connectedWallet, - sign, - simulate, - }, - }) - }, [simulate, sign, connectedWallet, cosmWasmClient, broadcast, networkConfig, chainId]) - - useEffect(() => { - if (!paramsAddress || !cosmWasmClient) return - useStore.setState({ paramsClient: new MarsParamsQueryClient(cosmWasmClient, paramsAddress) }) - }, [cosmWasmClient, paramsAddress]) + }, [userWalletAddress, userDebts, userDeposits, userBalances, setUserBalancesState]) useEffect(() => { setRedBankAssets() @@ -153,22 +83,20 @@ export const CommonContainer = ({ children }: CommonContainerProps) => { redBankState, userBalancesState, exchangeRates, + currentNetwork, marketInfo, userDebts, userDeposits, whitelistedAssets, marketDeposits, + userWalletAddress, setRedBankAssets, ]) - useEffect(() => { - queryClient.removeQueries() - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [userWalletAddress]) - // ------------------ // QUERY RELATED // ------------------ + useAssetParams() useUsdPrice() useBlockHeight() useUserBalance() diff --git a/src/components/common/Containers/FieldsContainer.tsx b/src/components/common/Containers/FieldsContainer.tsx index 35d38ee..a63c09e 100644 --- a/src/components/common/Containers/FieldsContainer.tsx +++ b/src/components/common/Containers/FieldsContainer.tsx @@ -2,6 +2,7 @@ import { useVaultParams } from 'hooks/queries/useVaultParams' import { ReactNode, useEffect } from 'react' import useStore from 'store' import { AccountNftClient, CreditManagerClient } from 'types/classes' +import { MarsParamsQueryClient } from 'types/generated/mars-params/MarsParams.client' interface FieldsContainerProps { children: ReactNode @@ -27,6 +28,9 @@ export const FieldsContainer = ({ children }: FieldsContainerProps) => { useStore.setState({ creditManagerClient: new CreditManagerClient(creditManagerAddress, client), accountNftClient: new AccountNftClient(accountNftContractAddress, client), + paramsClient: networkConfig.contracts.params + ? new MarsParamsQueryClient(client.cosmWasmClient, networkConfig.contracts.params) + : undefined, apys: null, }) diff --git a/src/components/common/CosmosWalletConnectProvider/CosmosWalletConnectProvider.module.scss b/src/components/common/CosmosWalletConnectProvider/CosmosWalletConnectProvider.module.scss deleted file mode 100644 index c09a690..0000000 --- a/src/components/common/CosmosWalletConnectProvider/CosmosWalletConnectProvider.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import 'src/styles/master'; - -.loader { - display: flex; - flex: 0 0 100%; - justify-content: center; - @include margin(4, 0); -} diff --git a/src/components/common/CosmosWalletConnectProvider/CosmosWalletConnectProvider.tsx b/src/components/common/CosmosWalletConnectProvider/CosmosWalletConnectProvider.tsx deleted file mode 100644 index e134ffc..0000000 --- a/src/components/common/CosmosWalletConnectProvider/CosmosWalletConnectProvider.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { WalletID, WalletManagerProvider } from '@marsprotocol/wallet-connector' -import { CircularProgress, SVG } from 'components/common' -import { SUPPORTED_CHAINS } from 'constants/appConstants' -import { getCurrentChainId } from 'libs/chainId' -import { useEffect } from 'react' -import useStore from 'store' - -import styles from './CosmosWalletConnectProvider.module.scss' - -type Props = { - children?: React.ReactNode -} - -export const CosmosWalletConnectProvider = ({ children }: Props) => { - const currentNetwork = useStore((s) => s.currentNetwork) - const setCurrentNetwork = useStore((s) => s.setCurrentNetwork) - const loadNetworkConfig = useStore((s) => s.loadNetworkConfig) - const networkConfig = useStore((s) => s.networkConfig) - - useEffect(() => { - setCurrentNetwork(getCurrentChainId()) - loadNetworkConfig() - }, [loadNetworkConfig, setCurrentNetwork]) - - const supportedChains = SUPPORTED_CHAINS.map((chain) => chain.chainId) - - return ( - } - defaultChainId={currentNetwork} - enabledWallets={[ - WalletID.Keplr, - WalletID.Xdefi, - WalletID.Leap, - WalletID.LeapMetaMaskSnap, - WalletID.Station, - WalletID.Cosmostation, - WalletID.Vectis, - WalletID.KeplrMobile, - WalletID.LeapMobile, - WalletID.CosmostationMobile, - ]} - persistent - renderLoader={() => ( -
- -
- )} - > - {children} - - ) -} diff --git a/src/components/common/Footer/Footer.tsx b/src/components/common/Footer/Footer.tsx index 2af7537..2e1828e 100644 --- a/src/components/common/Footer/Footer.tsx +++ b/src/components/common/Footer/Footer.tsx @@ -1,9 +1,9 @@ -import { WalletID } from '@marsprotocol/wallet-connector' import { SVG } from 'components/common' import { getCouncilLink } from 'libs/council' import { useTranslation } from 'react-i18next' import useStore from 'store' import { DocURL } from 'types/enums/docURL' +import { WalletID } from 'types/enums/wallet' import packageInfo from '../../../../package.json' import styles from './Footer.module.scss' diff --git a/src/components/common/Header/ChainSelect.tsx b/src/components/common/Header/ChainSelect.tsx index 61a4e06..955944a 100644 --- a/src/components/common/Header/ChainSelect.tsx +++ b/src/components/common/Header/ChainSelect.tsx @@ -1,14 +1,15 @@ -import { ChainInfoID } from '@marsprotocol/wallet-connector' import { useQueryClient } from '@tanstack/react-query' import classNames from 'classnames' import { Button } from 'components/common' import { CHAIN_ID_KEY, SUPPORTED_CHAINS } from 'constants/appConstants' +import useCurrentWallet from 'hooks/wallet/useCurrentWallet' import { getNetworkConfig } from 'libs/networkConfig' import Image from 'next/image' import { useState } from 'react' import { useTranslation } from 'react-i18next' import useStore from 'store' import { State } from 'types/enums' +import { ChainInfoID, WalletID } from 'types/enums/wallet' import styles from './ChainSelect.module.scss' @@ -54,6 +55,7 @@ export const ChainSelect = () => { const networkConfig = useStore((s) => s.networkConfig) const currentNetwork = useStore((s) => s.currentNetwork) const loadNetworkConfig = useStore((s) => s.loadNetworkConfig) + const currentWallet = useCurrentWallet() const queryClient = useQueryClient() const { t } = useTranslation() @@ -61,6 +63,7 @@ export const ChainSelect = () => { function handleChainSelect(chainId: ChainInfoID) { useStore.setState({ + userWalletAddress: undefined, currentNetwork: chainId, exchangeRates: [], assetPricesUSD: [], @@ -68,6 +71,7 @@ export const ChainSelect = () => { marketInfo: [], userIcns: undefined, redBankAssets: [], + userUnclaimedRewards: [], networkConfig: getNetworkConfig(chainId), redBankState: State.INITIALISING, userBalancesState: State.INITIALISING, @@ -76,6 +80,7 @@ export const ChainSelect = () => { priceFeeds: [], data: [], }, + walletConnecting: { show: true, providerId: currentWallet?.providerId as WalletID }, }) loadNetworkConfig() localStorage.setItem(CHAIN_ID_KEY, chainId) diff --git a/src/components/common/Header/Connect.tsx b/src/components/common/Header/Connect.tsx deleted file mode 100644 index fca38a8..0000000 --- a/src/components/common/Header/Connect.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { useWalletManager, WalletConnectionStatus } from '@marsprotocol/wallet-connector' -import { ConnectButton, ConnectedButton } from 'components/common' - -export const Connect = () => { - const { status, connectedWallet } = useWalletManager() - - if (status === WalletConnectionStatus.Connected && connectedWallet) return - - return -} diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index 2d4c769..faa121f 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -1,14 +1,13 @@ -import { WalletID } from '@marsprotocol/wallet-connector' import classNames from 'classnames' -import { IncentivesButton, Settings, SVG } from 'components/common' +import { IncentivesButton, Settings, SVG, Wallet } from 'components/common' import { getCouncilLink } from 'libs/council' import Link from 'next/link' import { useRouter } from 'next/router' import { useTranslation } from 'react-i18next' import useStore from 'store' +import { WalletID } from 'types/enums/wallet' import { ChainSelect } from './ChainSelect' -import { Connect } from './Connect' import styles from './Header.module.scss' export const Header = () => { @@ -60,7 +59,7 @@ export const Header = () => {
- +
diff --git a/src/components/common/Header/IncentivesButton.tsx b/src/components/common/Header/IncentivesButton.tsx index 045ce4e..3e1d0f2 100644 --- a/src/components/common/Header/IncentivesButton.tsx +++ b/src/components/common/Header/IncentivesButton.tsx @@ -1,4 +1,4 @@ -import { ChainInfoID, SimpleChainInfoList, TxBroadcastResult } from '@marsprotocol/wallet-connector' +import { BroadcastResult } from '@delphi-labs/shuttle-react' import { useQueryClient } from '@tanstack/react-query' import classNames from 'classnames' import { @@ -11,6 +11,7 @@ import { TxLink, } from 'components/common' import { MARS_SYMBOL } from 'constants/appConstants' +import { CHAINS } from 'constants/chains' import { findByDenom } from 'functions' import { getClaimUserRewardsMsgOptions } from 'functions/messages' import { useEstimateFee } from 'hooks/queries' @@ -20,6 +21,7 @@ import { useTranslation } from 'react-i18next' import useStore from 'store' import { State } from 'types/enums' import { QUERY_KEYS } from 'types/enums/queryKeys' +import { ChainInfoID } from 'types/enums/wallet' import styles from './IncentivesButton.module.scss' @@ -34,8 +36,8 @@ export const IncentivesButton = () => { // STORE STATE // --------------- const client = useStore((s) => s.client) - const whitelistedAssets = useStore((s) => s.whitelistedAssets) - const otherAssets = useStore((s) => s.otherAssets) + const whitelistedAssets = useStore((s) => s.networkConfig.assets.whitelist) + const otherAssets = useStore((s) => s.networkConfig.assets.other) const userWalletAddress = useStore((s) => s.userWalletAddress) const networkConfig = useStore((s) => s.networkConfig) const unclaimedRewards = useStore((s) => s.userUnclaimedRewards) @@ -52,7 +54,7 @@ export const IncentivesButton = () => { const [disabled, setDisabled] = useState(true) const [fetching, setFetching] = useState(false) const [submitted, setSubmitted] = useState(false) - const [response, setResponse] = useState() + const [response, setResponse] = useState() const [error, setError] = useState() const [hasUnclaimedRewards, setHasUnclaimedRewards] = useState(false) const [unclaimedRewardsValue, setUnclaimedRewardsValue] = useState(0) @@ -60,7 +62,7 @@ export const IncentivesButton = () => { // --------------- // LOCAL VARIABLES // --------------- - const explorerUrl = chainInfo && SimpleChainInfoList[chainInfo.chainId as ChainInfoID].explorer + const explorerUrl = chainInfo && CHAINS[chainInfo.chainId as ChainInfoID].explorer const assets = [...whitelistedAssets, ...otherAssets] // --------------- diff --git a/src/components/common/Header/Settings.tsx b/src/components/common/Header/Settings.tsx index 6e71ec6..a64574a 100644 --- a/src/components/common/Header/Settings.tsx +++ b/src/components/common/Header/Settings.tsx @@ -1,4 +1,3 @@ -import { useWalletManager, WalletConnectionStatus } from '@marsprotocol/wallet-connector' import { useQueryClient } from '@tanstack/react-query' import BigNumber from 'bignumber.js' import classNames from 'classnames' @@ -18,14 +17,14 @@ export const Settings = () => { const [showDetails, setShowDetails] = useState(false) const slippage = useStore((s) => s.slippage) const networkConfig = useStore((s) => s.networkConfig) - const currencyAssets = useStore((s) => s.currencyAssets) + const currencyAssets = networkConfig.assets.currencies const calculateExchangeRates = useStore((s) => s.calculateExchangeRates) const [customSlippage, setCustomSlippage] = useState(0) const [inputRef, setInputRef] = useState>() const [isCustom, setIsCustom] = useState(false) const enableAnimations = useStore((s) => s.enableAnimations) - const { status } = useWalletManager() const exchangeRates = useStore((s) => s.exchangeRates) + const userWalletAddress = useStore((s) => s.userWalletAddress) const [displayCurrency, setDisplayCurrency] = useState( networkConfig.displayCurrency, @@ -95,7 +94,7 @@ export const Settings = () => { setDisplayCurrency(networkConfig.displayCurrency) }, [networkConfig.displayCurrency, displayCurrency]) - if (status !== WalletConnectionStatus.Connected) return null + if (!userWalletAddress) return null return (
diff --git a/src/components/common/InputSection/InputSection.tsx b/src/components/common/InputSection/InputSection.tsx index 9d02c38..38a4213 100644 --- a/src/components/common/InputSection/InputSection.tsx +++ b/src/components/common/InputSection/InputSection.tsx @@ -48,7 +48,7 @@ export const InputSection = ({ // STORE STATE // ------------------ const baseCurrency = useStore((s) => s.baseCurrency) - const whitelistedAssets = useStore((s) => s.whitelistedAssets) + const whitelistedAssets = useStore((s) => s.networkConfig.assets.whitelist) // ------------------ // LOCAL STATE diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index d45b7ed..0637a0d 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -1,6 +1,13 @@ -import { useWallet, useWalletManager, WalletConnectionStatus } from '@marsprotocol/wallet-connector' +import { useShuttle } from '@delphi-labs/shuttle-react' import classNames from 'classnames' -import { Footer, Header, MobileNav, TermsOfService } from 'components/common' +import { + Footer, + Header, + MobileNav, + TermsOfService, + WalletConnecting, + WalletSelect, +} from 'components/common' import { FieldsNotConnected } from 'components/fields' import { RedbankNotConnected } from 'components/redbank' import { TERMS_OF_SERVICE } from 'constants/appConstants' @@ -16,11 +23,11 @@ type Props = { export const Layout = ({ children }: Props) => { const alreadyAcceptedTOS = localStorage.getItem(TERMS_OF_SERVICE) const currentlyAcceptedROS = useStore((s) => s.acceptedTermsOfService) - + const { wallets } = useShuttle() const router = useRouter() - const { status } = useWalletManager() const currentNetwork = useStore((s) => s.currentNetwork) - const { wallets } = useWallet() + const userWalletAddress = useStore((s) => s.userWalletAddress) + const client = useStore((s) => s.client) const [isConnected, setIsConnected] = useState(false) const [wasConnectedBefore, setWasConnectedBefore] = useState(false) useAnimations() @@ -30,9 +37,9 @@ export const Layout = ({ children }: Props) => { const vaultConfigs = useStore((s) => s.vaultConfigs) useEffect(() => { - setIsConnected(status === WalletConnectionStatus.Connected) + setIsConnected(!!userWalletAddress && !!client) setWasConnectedBefore(!!wallets.find((w) => w.network.chainId === currentNetwork)) - }, [status, wallets, currentNetwork]) + }, [client, userWalletAddress, wallets, currentNetwork]) useEffect(() => { if (!isConnected) { @@ -56,6 +63,8 @@ export const Layout = ({ children }: Props) => { )}
+ +