Merge pull request #1 from mars-protocol/v1.1.0

v1.1.0

Author: Dane

README.md

@@ -2,36 +2,38 @@
 
 ![mars-banner-1200w](https://marsprotocol.io/banner.png)
 
-## Web App
+## 1. Web App
 
 This project is a [NextJS](https://nextjs.org/). React application.
 
-The project utilises [React hooks](https://reactjs.org/docs/hooks-intro.html), functional components, Zustand for state management, and useQuery for general data fetching and management.
+The project utilises [React hooks](https://reactjs.org/docs/hooks-intro.html), functional components, [Zustand](https://github.com/pmndrs/zustand) for state management, and [useQuery](https://github.com/TanStack/query) for general data fetching and management.
 
 Typescript is added and utilised (but optional if you want to create .jsx or .tsx files).
 
 SCSS with [CSS modules](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet) (webpack allows importing css files into javascript, use the CSS module technique to avoid className clashes).
 
 Sentry is used for front end error logging/exception & bug reporting.
 
-## Deployment
+## 2. Deployment
 
 Start web server
 
 ```bash
 yarn && yarn dev
 ```
 
-### Contributing
+## 3. Text and translations
 
-We welcome and encourage contributions! Please create a pull request with as much information about the work you did and what your motivation/intention was.
+This repository makes use of a [translation repository](https://github.com/mars-protocol/translations). This repository containes all of the translation key values that are used within the UI. The rationale is to have no _hardcoded_ display string values in this repository.
+
+## 4. Development practices
 
-## Imports
+### 4.1 Imports
 
 Local components are imported via index files, which can be automatically generated with `yarn index`. This command targets index.ts files with a specific pattern in order to automate component exports. This results in clean imports throughout the pages:
 
 ```
-import { Button, Card, Titlte } from 'components/common'
+import { Button, Card, Title } from 'components/common'
 ```
 
 or
@@ -42,6 +44,16 @@ import { Breakdown, RepayInput } from 'components/fields'
 
 In order for this to work, components are place in a folder with UpperCamelCase with the respective Component.tsx file. The component cannot be exported at default, so rather export the `const` instead.
 
-## License
+### 4.2 Data orchestration
+
+Data is handled with a combination of container components, useQuery and Zustand. Container components are responsible for syncing the application state with the wallet-provider state. This fire of the required queries in useQuery, which are for many cases also stored in Zustand.
+
+We aim to have as much as possible available in Zustand, to have one source of truth.
+
+## 5. Contributing
+
+We welcome and encourage contributions! Please create a pull request with as much information about the work you did and what your motivation/intention was.
+
+## 6. License
 
 Contents of this repository are open source under the [Mars Protocol Web Application License Agreement](./LICENSE).

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mars",
   "homepage": "./",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": false,
   "license": "SEE LICENSE IN LICENSE FILE",
   "scripts": {
@@ -22,48 +22,48 @@
     "@cosmjs/launchpad": "^0.27.1",
     "@cosmjs/proto-signing": "^0.29.5",
     "@cosmjs/stargate": "^0.29.5",
-    "@marsprotocol/wallet-connector": "^0.9.12",
+    "@marsprotocol/wallet-connector": "^1.2.3",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
-    "@ramonak/react-progress-bar": "^5.0.2",
-    "@sentry/nextjs": "^7.12.1",
-    "@tanstack/react-query": "^4.3.4",
-    "@tanstack/react-table": "^8.5.13",
-    "@testing-library/dom": "^8.17.1",
+    "@ramonak/react-progress-bar": "^5.0.3",
+    "@sentry/nextjs": "^7.34.0",
+    "@tanstack/react-query": "^4.24.4",
+    "@tanstack/react-table": "^8.7.9",
+    "@testing-library/dom": "^8.20.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@tippyjs/react": "^4.2.6",
-    "bignumber.js": "^9.1.0",
-    "chart.js": "^3.9.1",
-    "classnames": "^2.3.1",
+    "bignumber.js": "^9.1.1",
+    "chart.js": "^4.2.0",
+    "classnames": "^2.3.2",
     "create-conical-gradient": "^1.1.0",
     "graphql": "^16.6.0",
-    "graphql-request": "^5.0.0",
-    "i18next": "^21.9.1",
-    "i18next-browser-languagedetector": "^6.1.5",
-    "i18next-http-backend": "^1.4.1",
+    "graphql-request": "^5.1.0",
+    "i18next": "^22.4.9",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-http-backend": "^2.1.1",
     "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "moment": "^2.29.4",
     "moment-duration-format": "^2.3.2",
-    "next": "^12.2.5",
+    "next": "^13.1.6",
     "numeral": "^2.0.6",
     "ramda": "^0.28.0",
     "react": "^18.2.0",
-    "react-chartjs-2": "^4.3.1",
-    "react-currency-input-field": "^3.6.4",
+    "react-chartjs-2": "^5.2.0",
+    "react-currency-input-field": "^3.6.9",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
-    "react-i18next": "^11.18.5",
-    "react-spring": "^9.5.5",
+    "react-i18next": "^12.1.4",
+    "react-spring": "^9.6.1",
     "react-table": "^7.8.0",
-    "react-use-clipboard": "^1.0.8",
-    "sass": "^1.56.1",
-    "typescript": "^4.8.2",
-    "web-vitals": "^3.0.1",
-    "zustand": "^4.1.1"
+    "react-use-clipboard": "^1.0.9",
+    "sass": "^1.57.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^3.1.1",
+    "zustand": "^4.3.2"
   },
   "browserslist": {
     "production": [
@@ -80,26 +80,26 @@
   "devDependencies": {
     "@types/chart.js": "^2.9.37",
     "@types/classnames": "^2.3.1",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.4.0",
     "@types/lodash.clonedeep": "^4.5.7",
     "@types/lodash.isequal": "^4.5.6",
     "@types/lodash.throttle": "^4.1.7",
-    "@types/node": "^18.7.15",
+    "@types/node": "^18.11.18",
     "@types/numeral": "^2.0.2",
-    "@types/prettier": "^2.7.0",
-    "@types/ramda": "^0.28.15",
-    "@types/react": "^18.0.18",
-    "@types/react-dom": "^18.0.6",
-    "@types/react-table": "^7.7.12",
-    "eslint": "^8.23.0",
-    "eslint-config-next": "^12.2.5",
-    "eslint-plugin-simple-import-sort": "^8.0.0",
+    "@types/prettier": "^2.7.2",
+    "@types/ramda": "^0.28.22",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@types/react-table": "^7.7.14",
+    "eslint": "^8.33.0",
+    "eslint-config-next": "^13.1.6",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
-    "prettier": "^2.7.1",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
+    "prettier": "^2.8.3",
     "pretty-quick": "^3.1.3",
-    "vscode-generate-index-standalone": "^1.6.0"
+    "vscode-generate-index-standalone": "^1.7.1"
   },
   "engines": {
     "npm": "please-use-yarn",

src/components/common/Backdrop/Backdrop.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames/bind'
+import classNames from 'classnames'
 
 import styles from './Backdrop.module.scss'
 

src/components/common/CellAmount/CellAmount.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames/bind'
+import classNames from 'classnames'
 import { AnimatedNumber, DisplayCurrency } from 'components/common'
 import { lookup } from 'libs/parse'
 

src/components/common/Containers/CommonContainer.tsx

@@ -1,4 +1,11 @@
-import { useWallet } from '@marsprotocol/wallet-connector'
+import { CosmWasmClient } from '@cosmjs/cosmwasm-stargate'
+import {
+  getChainInfo,
+  getClient,
+  useWallet,
+  useWalletManager,
+  WalletConnectionStatus,
+} from '@marsprotocol/wallet-connector'
 import { useQueryClient } from '@tanstack/react-query'
 import { MARS_SYMBOL, USDC_SYMBOL } from 'constants/appConstants'
 import {
@@ -9,9 +16,10 @@ import {
   useUserBalance,
   useUserDebt,
   useUserDeposit,
+  useUserIcns,
 } from 'hooks/queries'
 import { useSpotPrice } from 'hooks/queries/useSpotPrice'
-import { ReactNode, useEffect } from 'react'
+import { ReactNode, useEffect, useState } from 'react'
 import useStore from 'store'
 import { State } from 'types/enums'
 import { Network } from 'types/enums/network'
@@ -24,9 +32,15 @@ export const CommonContainer = ({ children }: CommonContainerProps) => {
   // ------------------
   // EXTERNAL HOOKS
   // ---------------
-  const { chainInfo, address, signingCosmWasmClient, name } = useWallet()
+  const { recentWallet, simulate, sign, broadcast } = useWallet()
+  const { status } = useWalletManager()
   const queryClient = useQueryClient()
 
+  const chainInfo = recentWallet?.network ? getChainInfo(recentWallet?.network.chainId) : undefined
+  const address = status !== WalletConnectionStatus.Connected ? '' : recentWallet?.account.address
+
+  const [cosmWasmClient, setCosmWasmClient] = useState<CosmWasmClient | undefined>()
+
   // ------------------
   // STORE STATE
   // ------------------
@@ -54,7 +68,6 @@ export const CommonContainer = ({ children }: CommonContainerProps) => {
   const setClient = useStore((s) => s.setClient)
   const setUserBalancesState = useStore((s) => s.setUserBalancesState)
   const setUserWalletAddress = useStore((s) => s.setUserWalletAddress)
-  const setUserWalletName = useStore((s) => s.setUserWalletName)
 
   // ------------------
   // SETTERS
@@ -75,21 +88,11 @@ export const CommonContainer = ({ children }: CommonContainerProps) => {
     setUserWalletAddress(address || '')
   }, [setUserWalletAddress, address])
 
-  useEffect(() => {
-    if (!name) return
-    setUserWalletName(name)
-  }, [setUserWalletName, name])
-
   useEffect(() => {
     if (!rpc || !chainID) return
     setLcdClient(rpc, chainID)
   }, [rpc, chainID, setLcdClient])
 
-  useEffect(() => {
-    if (!signingCosmWasmClient) return
-    setClient(signingCosmWasmClient)
-  }, [signingCosmWasmClient, setClient])
-
   useEffect(() => {
     if (userDebts && userDeposits && userBalances) {
       setUserBalancesState(State.READY)
@@ -98,6 +101,28 @@ export const CommonContainer = ({ children }: CommonContainerProps) => {
     }
   }, [userDebts, userDeposits, userBalances, setUserBalancesState])
 
+  useEffect(() => {
+    if (!recentWallet) return
+    if (!cosmWasmClient) {
+      const getCosmWasmClient = async () => {
+        const cosmClient = await getClient(recentWallet.network.rpc)
+        setCosmWasmClient(cosmClient)
+      }
+
+      getCosmWasmClient()
+      return
+    }
+
+    const client = {
+      broadcast,
+      cosmWasmClient,
+      recentWallet,
+      sign,
+      simulate,
+    }
+    setClient(client)
+  }, [simulate, sign, recentWallet, cosmWasmClient, broadcast, setClient])
+
   useEffect(() => {
     setRedBankAssets()
   }, [
@@ -126,6 +151,7 @@ export const CommonContainer = ({ children }: CommonContainerProps) => {
   useBlockHeight()
   useRedBank()
   useUserBalance()
+  useUserIcns()
   useUserDeposit()
   useUserDebt()
   useMarsOracle()

src/components/common/Containers/FieldsContainer.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode, useEffect } from 'react'
 import useStore from 'store'
+import { AccountNftClient, CreditManagerClient } from 'types/classes'
 
 interface FieldsContainerProps {
   children: ReactNode
@@ -9,15 +10,17 @@ export const FieldsContainer = ({ children }: FieldsContainerProps) => {
   const client = useStore((s) => s.client)
   const networkConfig = useStore((s) => s.networkConfig)
   const userWalletAddress = useStore((s) => s.userWalletAddress)
-  const setAccountNftClient = useStore((s) => s.setAccountNftClient)
-  const setCreditManagerClient = useStore((s) => s.setCreditManagerClient)
   const setCreditManagerMsgComposer = useStore((s) => s.setCreditManagerMsgComposer)
 
   useEffect(() => {
-    if (!client) return
-    setAccountNftClient(client)
-    setCreditManagerClient(client)
-  }, [client, setAccountNftClient, setCreditManagerClient])
+    if (!client || !networkConfig) return
+    useStore.setState({
+      creditManagerClient: new CreditManagerClient(networkConfig?.contracts.creditManager, client),
+    })
+    useStore.setState({
+      accountNftClient: new AccountNftClient(networkConfig?.contracts.accountNft, client),
+    })
+  }, [client, networkConfig])
 
   useEffect(() => {
     if (!userWalletAddress || !networkConfig?.contracts.creditManager) return