Merge pull request #47 from mars-protocol/v1.7.2

v1.7.2

.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
+NEXT_PUBLIC_NEUTRON_GQL=APP_NEXT_NEUTRON_GQL
+
+NEXT_PUBLIC_WALLET_CONNECT_ID=APP_NEXT_WALLET_CONNECT_ID

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

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

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",

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<any, Props>(
@@ -36,6 +37,7 @@ export const Button = React.forwardRef<any, Props>(
       text,
       variant = 'solid',
       onClick,
+      children,
     },
     ref,
   ) => {
@@ -56,6 +58,7 @@ export const Button = React.forwardRef<any, Props>(
           ref={ref}
           style={styleOverride}
         >
+          {children && !showProgressIndicator && children}
           {prefix && !showProgressIndicator && <span className={styles.prefix}>{prefix}</span>}
           {text && (
             <span className={styles.text}>

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<CosmWasmClient | undefined>()
-
   // ------------------
   // 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])
+    if (!rpc || !chainId) return
+    setLcdClient(rpc, chainId)
+  }, [rpc, chainId, setLcdClient])
 
   useEffect(() => {
-    if (!connectedWallet || connectedWallet.network.chainId !== chainId) return
+    const currentChainId = getCurrentChainId()
     useStore.setState({
-      userWalletAddress: connectedWallet.account.address,
-      isLedger: connectedWallet.account.isLedger,
+      networkConfig: getNetworkConfig(currentChainId),
+      vaultConfigs: getNetworkVaultConfig(currentChainId),
+      currentNetwork: currentChainId as ChainInfoID,
     })
-  }, [connectedWallet, chainId])
-
-  useEffect(() => {
-    if (!rpc || !chainId) return
-    setLcdClient(rpc, chainId)
-  }, [rpc, chainId, setLcdClient])
+  }, [])
 
   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()

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,
     })
 

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'