diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index f4c2483ae..080895f03 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -61,7 +61,7 @@ jobs: env: FORCE_COLOR: 0 with: - node-version: 16.16.0 + node-version: 18.17.1 cache: 'yarn' - run: yarn install --frozen-lockfile @@ -115,7 +115,7 @@ jobs: env: FORCE_COLOR: 0 with: - node-version: 16.16.0 + node-version: 18.17.1 cache: 'yarn' - run: yarn install --frozen-lockfile diff --git a/.github/workflows/test-contracts.yml b/.github/workflows/test-contracts.yml index c65daf5e6..66bd9c103 100644 --- a/.github/workflows/test-contracts.yml +++ b/.github/workflows/test-contracts.yml @@ -30,7 +30,7 @@ jobs: env: FORCE_COLOR: 0 with: - node-version: 16.16.0 + node-version: 18.17.1 cache: 'yarn' - run: yarn install --frozen-lockfile @@ -52,7 +52,7 @@ jobs: env: FORCE_COLOR: 0 with: - node-version: 16.16.0 + node-version: 18.17.1 cache: 'yarn' - run: yarn install --frozen-lockfile diff --git a/.nvmrc b/.nvmrc index 0ff38047b..7ec56198d 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16.16.0 \ No newline at end of file +18.17.1 \ No newline at end of file diff --git a/.prettierignore b/.prettierignore index fc3584add..1cbff2e3e 100644 --- a/.prettierignore +++ b/.prettierignore @@ -50,4 +50,5 @@ Makefile *.archive *.sh .vscode/settings.json -.yarn/ \ No newline at end of file +.yarn/ +.nvmrc \ No newline at end of file diff --git a/package.json b/package.json index 16737ae95..9a1295546 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,13 @@ "private": true, "workspaces": { "packages": [ - "packages/*" + "packages/contracts", + "packages/dev-frontend", + "packages/lib-base", + "packages/lib-ethers", + "packages/lib-react", + "packages/lib-react", + "packages/providers" ], "nohoist": [ "**/web3-eth-abi/@ethersproject/abi", @@ -42,21 +48,17 @@ "scripts": { "build": "run-s build:*", "build:dev-frontend": "yarn workspace @kumodao/dev-frontend build", - "build:subgraph": "yarn workspace @kumodao/subgraph build", "deploy": "yarn workspace @kumodao/lib-ethers hardhat deploy", "docs": "run-s docs:*", "docs:collect-sdk-apis": "node scripts/collect-sdk-apis.js", "docs:api-documenter": "api-documenter generate -i temp/sdk-apis -o docs/sdk", - "fuzzer": "yarn workspace @kumodao/fuzzer fuzzer", "postinstall": "husky install", "prepare": "run-s prepare:*", "prepare:contracts": "yarn workspace @kumodao/contracts prepare", "prepare:lib-base": "yarn workspace @kumodao/lib-base prepare", "prepare:lib-ethers": "yarn workspace @kumodao/lib-ethers prepare", "prepare:lib-react": "yarn workspace @kumodao/lib-react prepare", - "prepare:lib-subgraph": "yarn workspace @kumodao/lib-subgraph prepare", "prepare:providers": "yarn workspace @kumodao/providers prepare", - "prepare:subgraph": "yarn workspace @kumodao/subgraph prepare", "prepare:docs": "run-s docs", "prettier:check": "prettier --check .", "prettier:write": "prettier --write .", @@ -100,23 +102,18 @@ }, "devDependencies": { "@commitlint/cli": "^17.7.1", - "@commitlint/config-conventional": "^16.2.1", - "@microsoft/api-documenter": "^7.17.14", - "fs-extra": "^9.1.0", + "@commitlint/config-conventional": "^17.7.0", + "@microsoft/api-documenter": "^7.23.0", + "fs-extra": "^11.1.1", "husky": "^8.0.3", "lint-staged": "^14.0.0", "npm-run-all": "^4.1.5", - "prettier": "^3.0.1", - "semantic-release": "^19.0.3", - "semantic-release-monorepo": "^7.0.4" + "prettier": "^3.0.3", + "semantic-release": "^21.1.2", + "semantic-release-monorepo": "^7.0.5" }, "engineStrict": true, "engines": { - "node": "16.16.0" - }, - "resolutions": { - "react-error-overlay": "6.0.9", - "@types/react": "^17.0.3", - "@types/react-dom": "^18.0.2" + "node": "^18.17.1" } } diff --git a/packages/contracts/package.json b/packages/contracts/package.json index a1b3b2ff2..e397422ec 100644 --- a/packages/contracts/package.json +++ b/packages/contracts/package.json @@ -20,28 +20,29 @@ "author": "", "license": "ISC", "dependencies": { - "decimal.js": "^10.3.1", + "@ethersproject/experimental": "^5.7.0", + "decimal.js": "^10.4.3", "eth-mutants": "^0.1.1", "ethereumjs-util": "^7.1.5", - "ethers": "~5.6.9", - "solc": "^0.8.13", - "xmlhttprequest": "^1.8.0", - "@ethersproject/experimental": "^5.7.0" + "ethers": "~5.7.2", + "solc": "^0.8.21", + "xmlhttprequest": "^1.8.0" }, "devDependencies": { - "@nomiclabs/hardhat-ethers": "^2.2.2", - "@nomiclabs/hardhat-etherscan": "^3.0.1", - "@nomiclabs/hardhat-truffle5": "^2.0.4", + "@nomiclabs/hardhat-ethers": "^2.2.3", + "@nomiclabs/hardhat-etherscan": "^3.1.7", + "@nomiclabs/hardhat-truffle5": "^2.0.7", "@nomiclabs/hardhat-web3": "^2.0.0", - "@openzeppelin/contracts": "^4.6.0", - "@openzeppelin/test-helpers": "^0.5.13", - "eth-gas-reporter": "^0.2.22", - "hardhat": "^2.9.9", - "hardhat-contract-sizer": "^2.6.1", + "@openzeppelin/contracts": "^4.9.3", + "@openzeppelin/contracts-upgradeable": "^4.9.3", + "@openzeppelin/test-helpers": "^0.5.16", + "eth-gas-reporter": "^0.2.25", + "hardhat": "^2.17.3", + "hardhat-contract-sizer": "^2.10.0", "hardhat-diamond-abi": "^3.0.1", - "hardhat-gas-reporter": "^1.0.8", + "hardhat-gas-reporter": "^1.0.9", "npm-run-all": "^4.1.5", - "solidity-coverage": "^0.7.20", + "solidity-coverage": "^0.8.4", "web3": "^1.3.4" } } diff --git a/packages/contracts/test/BorrowerOperationsTest.js b/packages/contracts/test/BorrowerOperationsTest.js index 9e9bd3fbe..b4e9b81b0 100644 --- a/packages/contracts/test/BorrowerOperationsTest.js +++ b/packages/contracts/test/BorrowerOperationsTest.js @@ -6779,7 +6779,7 @@ contract("BorrowerOperations", async accounts => { assert.equal(status_Before, 0); const KUSDRequest = MIN_NET_DEBT; - borrowerOperations.openTrove( + await borrowerOperations.openTrove( assetAddress1, dec(100, "ether"), th._100pct, diff --git a/packages/dev-frontend/.env.local b/packages/dev-frontend/.env.local index cfb59ed7e..3d211050c 100644 --- a/packages/dev-frontend/.env.local +++ b/packages/dev-frontend/.env.local @@ -1,11 +1,10 @@ -REACT_APP_CHAIN_NAME='localhost' -REACT_APP_CHAIN_ID=17 -REACT_APP_CURRENCY_NAME=ETHER -REACT_APP_CURRENCY_SYMBOL=ETH -REACT_APP_NETWORK_URL=localhost -REACT_APP_RPC_URL= http://${REACT_APP_NETWORK_URL}:8545 -REACT_APP_RPC_URL_WALLET= ${REACT_APP_RPC_URL} -REACT_APP_WSS_URL= ws://${REACT_APP_NETWORK_URL}:8546 +VITE_CHAIN_NAME=localhost +VITE_CHAIN_ID=17 +VITE_CURRENCY_NAME=ETHER +VITE_CURRENCY_SYMBOL=ETH +VITE_RPC_URL= http://localhost:8545 +VITE_RPC_URL_WALLET= http://localhost:8545 +VITE_WSS_URL= ws://localhost:8546 SECRET_WORDS= 'test test test test test test test test test test test junk' NETWORK_NAME= 'Localhost' diff --git a/packages/dev-frontend/public/index.html b/packages/dev-frontend/index.html similarity index 89% rename from packages/dev-frontend/public/index.html rename to packages/dev-frontend/index.html index db94050e7..6d3a0b373 100644 --- a/packages/dev-frontend/public/index.html +++ b/packages/dev-frontend/index.html @@ -2,21 +2,21 @@ - + - + - + + diff --git a/packages/dev-frontend/package.json b/packages/dev-frontend/package.json index ff74a1e13..428a9a0c7 100644 --- a/packages/dev-frontend/package.json +++ b/packages/dev-frontend/package.json @@ -4,60 +4,82 @@ "private": true, "homepage": "https://dev.kumo.earth/", "dependencies": { - "@ethersproject/abi": "5.7.0", - "@fortawesome/fontawesome-svg-core": "1.2.34", - "@fortawesome/free-regular-svg-icons": "5.15.2", - "@fortawesome/free-solid-svg-icons": "5.15.2", - "@fortawesome/react-fontawesome": "0.1.14", - "@metamask/providers": "^9.0.0", - "@popperjs/core": "2.9.1", - "@testing-library/dom": "8.14.0", - "@testing-library/jest-dom": "5.11.9", - "@testing-library/react": "12.1.5", - "@testing-library/user-event": "14.3.0", - "@tippyjs/react": "4.2.6", - "@types/jest": "27.5.1", - "@types/lodash": "^4.14.186", - "@types/react": "17.0.3", - "@types/react-copy-to-clipboard": "5.0.0", - "@types/react-dom": "17.0.14", - "@types/react-router-dom": "5.3.3", - "@types/recharts": "^1.8.23", - "@types/testing-library__jest-dom": "5.14.3", - "@types/testing-library__react": "10.2.0", - "@types/testing-library__user-event": "4.2.0", + "@emotion/react": "^11.11.1", + "@ethersproject/abi": "^5.7.0", + "@ethersproject/experimental": "^5.7.0", + "@fortawesome/fontawesome-svg-core": "^6.4.2", + "@fortawesome/free-regular-svg-icons": "^6.4.2", + "@fortawesome/free-solid-svg-icons": "^6.4.2", + "@fortawesome/react-fontawesome": "^0.2.0", + "@metamask/providers": "^13.0.0", + "@popperjs/core": "^2.11.8", + "@tippyjs/react": "^4.2.6", + "@walletconnect/types": "^2.10.1", "@web3-react/core": "6.1.9", "@web3-react/injected-connector": "6.0.7", "@web3-react/network-connector": "^6.2.9", "@web3-react/types": "6.0.7", "@web3-react/walletconnect-connector": "^6.2.13", - "cross-env": "7.0.3", "env-cmd": "^10.1.0", - "ethers": "6.2.2", - "npm-run-all": "4.1.5", - "react": "17.0.1", - "react-circular-progressbar": "2.0.4", - "react-copy-to-clipboard": "5.1.0", - "react-dom": "17.0.1", - "react-is": "17.0.1", - "react-popper": "2.3.0", - "react-router-dom": "5.2.0", - "react-scripts": "4.0.3", + "ethers": "^6.7.1", + "lodash": "^4.17.21", + "react": "^18.2.0", + "react-circular-progressbar": "^2.1.0", + "react-copy-to-clipboard": "^5.1.0", + "react-dom": "^18.2.0", + "react-popper": "^2.3.0", + "react-router-dom": "^6.16.0", + "react-scripts": "^5.0.1", "reakit": "^1.3.11", - "recharts": "^2.1.16", - "source-map-explorer": "2.5.2", - "theme-ui": "0.6.0-canary.1544.5359f8a1e408a4dfeb74a9ae39688270286e534a.0", - "typescript": "4.1.5", - "web3-providers-http": "^1.7.3" + "recharts": "^2.8.0", + "theme-ui": "^0.16.1", + "typescript": "^5.2.2", + "web3-providers-http": "^4.0.6" + }, + "devDependencies": { + "@esbuild-plugins/node-modules-polyfill": "^0.2.2", + "@synthetixio/synpress": "^3.7.2-beta.7", + "@testing-library/dom": "^9.3.3", + "@testing-library/jest-dom": "^6.1.3", + "@testing-library/react": "^14.0.0", + "@testing-library/user-event": "^14.5.1", + "@types/lodash": "^4.14.199", + "@types/react": "^18.2.22", + "@types/react-copy-to-clipboard": "^5.0.4", + "@types/react-dom": "^18.2.7", + "@types/react-router-dom": "^5.3.3", + "@types/testing-library__react": "^10.2.0", + "@types/testing-library__user-event": "^4.2.0", + "@typescript-eslint/eslint-plugin": "^6.7.2", + "@typescript-eslint/parser": "^6.7.2", + "@vitejs/plugin-react": "^4.0.4", + "@vitejs/plugin-react-refresh": "^1.3.6", + "@vitejs/plugin-react-swc": "^3.3.2", + "cypress": "^13.2.0", + "eslint": "^8.49.0", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.3", + "jsdom": "22", + "node-fetch": "^3.3.2", + "npm-run-all": "^4.1.5", + "rollup-plugin-polyfill-node": "^0.12.0", + "source-map-explorer": "2.5.3", + "start-server-and-test": "^2.0.1", + "typescript": "^5.2.2", + "vite": "^4.4.9", + "vite-plugin-svgr": "^4.0.0", + "vitest": "^0.34.5", + "yalc": "1.0.0-pre.53" }, "scripts": { "analyze": "source-map-explorer 'build/static/js/*.js'", - "start": "env-cmd -f .env react-scripts start", - "start:local": "env-cmd -f .env.local react-scripts start", - "start-demo": "cross-env REACT_APP_DEMO_MODE=true run-s start", + "start": "env-cmd -f .env vite --force", + "start:local": "env-cmd -f .env.local vite --force", + "start-demo": "env-cmd VITE_APP_DEMO_MODE=true vite --force", "build": "run-s build:*", "build:set-version": "node scripts/set-version.js", - "build:react": "env-cmd -f .env react-scripts build", + "build:tsc": "tsc", + "build:vite": "env-cmd -f .env vite build", "test": "env-cmd -f .env.local synpress run --configFile synpress.config.js", "ci": "start-server-and-test 'yarn start:local' http://localhost:3000 'yarn test'", "eject": "react-scripts eject" @@ -76,10 +98,5 @@ "last 1 firefox version", "last 1 safari version" ] - }, - "devDependencies": { - "@synthetixio/synpress": "^3.7.2-beta.6", - "cypress": "^12.14.0", - "start-server-and-test": "^2.0.0" } } diff --git a/packages/dev-frontend/src/App.test.tsx b/packages/dev-frontend/src/App.test.tsx index df5284dcb..01894bb5f 100644 --- a/packages/dev-frontend/src/App.test.tsx +++ b/packages/dev-frontend/src/App.test.tsx @@ -1,10 +1,5 @@ -import React from "react"; -import { render, fireEvent } from "@testing-library/react"; - import { Decimal, KUSD_MINIMUM_NET_DEBT, Trove } from "@kumodao/lib-base"; -import App from "./App"; - const params = { depositCollateral: Decimal.from(20), borrowKUSD: KUSD_MINIMUM_NET_DEBT }; const trove = Trove.create(params); diff --git a/packages/dev-frontend/src/App.tsx b/packages/dev-frontend/src/App.tsx index 8d372954b..e8c15abd9 100644 --- a/packages/dev-frontend/src/App.tsx +++ b/packages/dev-frontend/src/App.tsx @@ -1,6 +1,6 @@ -import React from "react"; +import React, { ReactNode } from "react"; import { Web3ReactProvider } from "@web3-react/core"; -import { Flex, Spinner, Heading, ThemeProvider, Paragraph, Link } from "theme-ui"; +import { Flex, Spinner, Heading, ThemeUIProvider, Paragraph, Link } from "theme-ui"; import { BatchedWebSocketAugmentedWeb3Provider } from "@kumodao/providers"; import { KumoProvider } from "./hooks/KumoContext"; @@ -21,7 +21,7 @@ if (window.ethereum) { Object.assign(window.ethereum, { autoRefreshOnNetworkChange: false }); } -if (process.env.REACT_APP_DEMO_MODE === "true") { +if (import.meta.env.VITE_DEMO_MODE === "true") { const ethereum = new DisposableWalletProvider( `http://${window.location.hostname}:8545`, "0x4d5db4107d237df6a3d58ee5f70ae63d73d7658d4026f2eefd2f204c81682cb7" @@ -37,7 +37,7 @@ getConfig().then(config => { Object.assign(window, { config }); }); -const EthersWeb3ReactProvider: React.FC = ({ children }) => { +const EthersWeb3ReactProvider: React.FC<{ children: ReactNode }> = ({ children }) => { return ( new BatchedWebSocketAugmentedWeb3Provider(provider)}> {children} @@ -74,7 +74,7 @@ const UnsupportedMainnetFallback: React.FC = () => ( const App = () => { const loader = ( - + Loading... ); @@ -100,7 +100,7 @@ const App = () => { return ( - + @@ -111,16 +111,14 @@ const App = () => { unsupportedMainnetFallback={} > - - {/* */} - + ); diff --git a/packages/dev-frontend/src/KumoFrontend.tsx b/packages/dev-frontend/src/KumoFrontend.tsx index 984019bd3..471d26683 100644 --- a/packages/dev-frontend/src/KumoFrontend.tsx +++ b/packages/dev-frontend/src/KumoFrontend.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Flex, Container, Box, Text } from "theme-ui"; -import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom"; +import { Routes, Route, Navigate } from "react-router-dom"; import { Wallet } from "@ethersproject/wallet"; import { Decimal, Difference, Trove } from "@kumodao/lib-base"; @@ -55,91 +55,63 @@ export const KumoFrontend: React.FC = ({ loader }) => { return ( - - - - - - - - This is the KUMO test version. Please connect and then request test tokens at the faucet. For feedback and questions, reach out to contact@kumo.earth. - - {/* { + + + + + + + This is the KUMO test version. Please connect and then request test tokens at the faucet. For feedback and questions, reach out to contact@kumo.earth. + + {/* { account && https://mumbaifaucet.com/ https://faucet.polygon.technology/ } */} - - - -
- - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + +
+ + + +
+ + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + } /> + + + - - - - - - + + + + + + ); diff --git a/packages/dev-frontend/src/components/Abbreviation.tsx b/packages/dev-frontend/src/components/Abbreviation.tsx index 37a77cbe3..dd48fa3c8 100644 --- a/packages/dev-frontend/src/components/Abbreviation.tsx +++ b/packages/dev-frontend/src/components/Abbreviation.tsx @@ -1,7 +1,8 @@ -import React from "react"; +import React, { ReactNode } from "react"; import { Box, BoxProps } from "theme-ui"; type AbbreviationProps = BoxProps & { + children: ReactNode, short: React.ReactNode; }; diff --git a/packages/dev-frontend/src/components/ActionDescription.tsx b/packages/dev-frontend/src/components/ActionDescription.tsx index bf019df5d..07460d7a9 100644 --- a/packages/dev-frontend/src/components/ActionDescription.tsx +++ b/packages/dev-frontend/src/components/ActionDescription.tsx @@ -1,8 +1,9 @@ +import React, { ReactNode } from "react"; import { Box, Flex, Text } from "theme-ui"; import { Icon } from "./Icon"; -export const ActionDescription: React.FC = ({ children }) => ( +export const ActionDescription: React.FC<{ children: ReactNode }> = ({ children }) => ( ( ); -export const Amount: React.FC = ({ children }) => ( +export const Amount: React.FC<{ children: ReactNode }> = ({ children }) => ( {children} ); diff --git a/packages/dev-frontend/src/components/AddAssetToken/AddAssetAction.tsx b/packages/dev-frontend/src/components/AddAssetToken/AddAssetAction.tsx index 9fbf7cf3c..8493213e1 100644 --- a/packages/dev-frontend/src/components/AddAssetToken/AddAssetAction.tsx +++ b/packages/dev-frontend/src/components/AddAssetToken/AddAssetAction.tsx @@ -1,3 +1,4 @@ +import React, { ReactNode } from "react"; import { Button } from "theme-ui"; import { useKumo } from "../../hooks/KumoContext"; @@ -5,6 +6,7 @@ import { useTransactionFunction } from "../Transaction"; type AddAssetActionProps = { + children: ReactNode transactionId: string; isTransactionConfirmed : boolean; type: string; diff --git a/packages/dev-frontend/src/components/AddAssetToken/AddAssetModal.tsx b/packages/dev-frontend/src/components/AddAssetToken/AddAssetModal.tsx index b075e7aed..c455ee74c 100644 --- a/packages/dev-frontend/src/components/AddAssetToken/AddAssetModal.tsx +++ b/packages/dev-frontend/src/components/AddAssetToken/AddAssetModal.tsx @@ -2,7 +2,6 @@ import React from "react"; import { useKumoSelector } from "@kumodao/lib-react"; import { Card, Box, Heading } from "theme-ui"; import { ASSET_TOKENS } from "@kumodao/lib-base"; -import { toUpper } from "lodash"; import { Icon } from "../Icon"; import AddAssetButton from "../AddAssetButton"; import { useAddAssetModal } from "./context/AssetViewContext"; @@ -26,7 +25,7 @@ export const AddAssetModal: React.FC = () => { Please Add the Tokens to Wallet{" "} - dispatchEvent("CLOSE_ADD_ASSET_MODAL_PRESSED")}> + dispatchEvent("CLOSE_ADD_ASSET_MODAL_PRESSED")}> @@ -40,7 +39,7 @@ export const AddAssetModal: React.FC = () => { key={token} assetName={assetName} assetTokenAddress={assetAddress} - tokenSymbol={toUpper(token)} + tokenSymbol={token.toUpperCase()} /> ); diff --git a/packages/dev-frontend/src/components/AddAssetToken/assetManager.tsx b/packages/dev-frontend/src/components/AddAssetToken/assetManager.tsx index ac28f3cc3..02382e2a9 100644 --- a/packages/dev-frontend/src/components/AddAssetToken/assetManager.tsx +++ b/packages/dev-frontend/src/components/AddAssetToken/assetManager.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { Box, Flex, Label, Input } from "theme-ui"; +import { Flex, Label, Input } from "theme-ui"; export const AssetManager: React.FC<{ toAddress: string }> = ({ toAddress diff --git a/packages/dev-frontend/src/components/AddAssetToken/context/AssetViewProvider.tsx b/packages/dev-frontend/src/components/AddAssetToken/context/AssetViewProvider.tsx index 62657943b..2f4f050aa 100644 --- a/packages/dev-frontend/src/components/AddAssetToken/context/AssetViewProvider.tsx +++ b/packages/dev-frontend/src/components/AddAssetToken/context/AssetViewProvider.tsx @@ -1,4 +1,4 @@ -import React, { useState, useCallback, useEffect, useRef } from "react"; +import React, { useState, useCallback, useEffect, useRef, ReactNode } from "react"; import { AddAssetViewContext } from "./AssetViewContext"; import type { AddAssetView, AddAssetEvent } from "./types"; @@ -18,7 +18,7 @@ const transition = (view: AddAssetView, event: AddAssetEvent): AddAssetView => { return nextView; }; -export const AddAssetViewProvider: React.FC = props => { +export const AddAssetViewProvider: React.FC<{ children: ReactNode }> = props => { const { children } = props; const [view, setView] = useState("NONE"); diff --git a/packages/dev-frontend/src/components/AssetStats.tsx b/packages/dev-frontend/src/components/AssetStats.tsx index 56941bc1a..383d41d68 100644 --- a/packages/dev-frontend/src/components/AssetStats.tsx +++ b/packages/dev-frontend/src/components/AssetStats.tsx @@ -2,7 +2,6 @@ import React from "react"; import { Card, Box, Text, Flex, Progress, Divider } from "theme-ui"; import { Decimal, Trove } from "@kumodao/lib-base"; -import { toUpper } from "lodash"; import { InfoIcon } from "./InfoIcon"; type SystemStatsProps = { @@ -32,9 +31,9 @@ export const AssetStats: React.FC = ({ tooltip={ {`The Total Collateral Ratio or TCR is the ratio of the Dollar value of the entire - system collateral at the current ${toUpper( - collateralType - )}:USD price, to the entire system debt.`} + system collateral at the current ${ + collateralType.toUpperCase + }:USD price, to the entire system debt.`} } /> diff --git a/packages/dev-frontend/src/components/Badge.tsx b/packages/dev-frontend/src/components/Badge.tsx index 2bcbce40e..b1ae6a95f 100644 --- a/packages/dev-frontend/src/components/Badge.tsx +++ b/packages/dev-frontend/src/components/Badge.tsx @@ -1,6 +1,6 @@ -import React from "react"; +import React, { ReactNode } from "react"; import { Flex } from "theme-ui"; -export const Badge: React.FC = ({ children }) => { +export const Badge: React.FC<{ children: ReactNode }> = ({ children }) => { return {children}; }; diff --git a/packages/dev-frontend/src/components/Banner.tsx b/packages/dev-frontend/src/components/Banner.tsx index df67c336c..5a8e8dc1e 100644 --- a/packages/dev-frontend/src/components/Banner.tsx +++ b/packages/dev-frontend/src/components/Banner.tsx @@ -1,9 +1,9 @@ -import React, { useState } from "react"; +import React, { useState, ReactNode } from "react"; import { Progress, Alert, Heading } from "theme-ui"; import { useViewBanner } from "../hooks/useViewBanner"; import { Icon } from "./Icon"; -export const Banner: React.FC<{ bannerHeading: string, visibility: number, viewId: string }> = ({ bannerHeading, visibility, viewId, children }) => { +export const Banner: React.FC<{ children: ReactNode, bannerHeading: string, visibility: number, viewId: string }> = ({ bannerHeading, visibility, viewId, children }) => { const { isViewBannerCheck, changeInProgress } = useViewBanner(visibility, viewId); const [isView, setIsView] = useState(true); diff --git a/packages/dev-frontend/src/components/CollateralSurplusAction.tsx b/packages/dev-frontend/src/components/CollateralSurplusAction.tsx index bc27c3992..eb17d355e 100644 --- a/packages/dev-frontend/src/components/CollateralSurplusAction.tsx +++ b/packages/dev-frontend/src/components/CollateralSurplusAction.tsx @@ -20,7 +20,7 @@ export const CollateralSurplusAction: React.FC<{ asset?: string }> = () => { return myTransactionState.type === "waitingForApproval" ? ( diff --git a/packages/dev-frontend/src/components/ColleteralCard/ColleteralCard.tsx b/packages/dev-frontend/src/components/ColleteralCard/ColleteralCard.tsx index 680b855d8..cffa1465c 100644 --- a/packages/dev-frontend/src/components/ColleteralCard/ColleteralCard.tsx +++ b/packages/dev-frontend/src/components/ColleteralCard/ColleteralCard.tsx @@ -1,6 +1,6 @@ import { Decimal, Trove } from "@kumodao/lib-base"; import React from "react"; -import { useHistory } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { Flex, Progress, Box, Card, Text, Heading } from "theme-ui"; import { useTroveView } from "../Trove/context/TroveViewContext"; import { InfoIcon } from "../InfoIcon"; @@ -25,13 +25,13 @@ export const CollateralCard: React.FC = ({ kusdMintedCap }) => { const { dispatchEvent, view } = useTroveView(); - const history = useHistory(); + const navigate = useNavigate(); const handleClick = () => { if (view === "ADJUSTING") { dispatchEvent("CANCEL_ADJUST_TROVE_PRESSED"); } - history.push(`/dashboard/${collateralType}`); + navigate(`/dashboard/${collateralType}`); }; return ( handleClick()}> diff --git a/packages/dev-frontend/src/components/ConnectionConfirmationDialog.tsx b/packages/dev-frontend/src/components/ConnectionConfirmationDialog.tsx index 3b87f4ce1..47d363e77 100644 --- a/packages/dev-frontend/src/components/ConnectionConfirmationDialog.tsx +++ b/packages/dev-frontend/src/components/ConnectionConfirmationDialog.tsx @@ -1,9 +1,10 @@ -import React from "react"; +import React, { ReactNode } from "react"; import { Text, Box } from "theme-ui"; import { WaitingDialog } from "./WaitingDialog"; type ConnectionConfirmationDialogProps = { + children: ReactNode, title: string; icon?: React.ReactNode; onCancel: () => void; diff --git a/packages/dev-frontend/src/components/DashboardContent.tsx b/packages/dev-frontend/src/components/DashboardContent.tsx index 59ecc73cd..c9f5db934 100644 --- a/packages/dev-frontend/src/components/DashboardContent.tsx +++ b/packages/dev-frontend/src/components/DashboardContent.tsx @@ -1,7 +1,7 @@ -import React from "react"; +import React, { ReactNode } from "react"; import { Grid } from "theme-ui"; -export const DashboadContent: React.FC = ({ children }) => { +export const DashboadContent: React.FC<{ children: ReactNode }> = ({ children }) => { return ( { +export const DashboadHeader: React.FC<{ children: ReactNode }> = ({ children }) => { return {children}; }; diff --git a/packages/dev-frontend/src/components/DashboardHeaderItem.tsx b/packages/dev-frontend/src/components/DashboardHeaderItem.tsx index fd40a7f02..ff83f4a17 100644 --- a/packages/dev-frontend/src/components/DashboardHeaderItem.tsx +++ b/packages/dev-frontend/src/components/DashboardHeaderItem.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { Box, Flex, Text } from "theme-ui"; type DashboadHeaderItemProps = React.ComponentProps & { diff --git a/packages/dev-frontend/src/components/Dialog.tsx b/packages/dev-frontend/src/components/Dialog.tsx index 6b9990cb4..0b37e53ec 100644 --- a/packages/dev-frontend/src/components/Dialog.tsx +++ b/packages/dev-frontend/src/components/Dialog.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { ReactNode } from "react"; import { Heading, Flex, Card, Button, Box } from "theme-ui"; import { Icon } from "./Icon"; @@ -6,9 +6,10 @@ import { Icon } from "./Icon"; type DialogIntent = "success" | "warning" | "danger" | "info"; type DialogProps = { + children: ReactNode, intent?: DialogIntent; title: string; - icon?: React.ReactNode; + icon?: ReactNode; cancelLabel?: string; onCancel: () => void; }; diff --git a/packages/dev-frontend/src/components/ErrorDescription.tsx b/packages/dev-frontend/src/components/ErrorDescription.tsx index 6ac3d1959..33c278d95 100644 --- a/packages/dev-frontend/src/components/ErrorDescription.tsx +++ b/packages/dev-frontend/src/components/ErrorDescription.tsx @@ -1,8 +1,8 @@ +import React, { ReactNode } from "react"; import { Box, Flex, Text } from "theme-ui"; - import { Icon } from "./Icon"; -export const ErrorDescription: React.FC = ({ children }) => ( +export const ErrorDescription: React.FC<{ children: ReactNode }> = ({ children }) => ( { +export const FarmViewProvider: React.FC<{ children: ReactNode }> = props => { const { children } = props; const { liquidityMiningStake, diff --git a/packages/dev-frontend/src/components/Header.tsx b/packages/dev-frontend/src/components/Header.tsx index 8f6d001e0..68f03c225 100644 --- a/packages/dev-frontend/src/components/Header.tsx +++ b/packages/dev-frontend/src/components/Header.tsx @@ -1,9 +1,9 @@ -import React from "react"; +import React, {ReactNode} from "react"; import { Container } from "theme-ui"; import { SideNav } from "./SideNav"; -export const Header: React.FC = ({ children }) => { +export const Header: React.FC<{ children: ReactNode }> = ({ children }) => { return ( diff --git a/packages/dev-frontend/src/components/InfoIcon.tsx b/packages/dev-frontend/src/components/InfoIcon.tsx index 67cba20d3..c212b70d8 100644 --- a/packages/dev-frontend/src/components/InfoIcon.tsx +++ b/packages/dev-frontend/src/components/InfoIcon.tsx @@ -9,7 +9,7 @@ export type InfoIconProps = Pick & color?: string; }; -export const InfoIcon: React.FC = ({ placement = "right", tooltip, color = "#da357a", size = "1x" }) => { +export const InfoIcon: React.FC = ({ tooltip, color = "#da357a", size = "1x" }) => { return ( diff --git a/packages/dev-frontend/src/components/InfoMessage.tsx b/packages/dev-frontend/src/components/InfoMessage.tsx index 9016d1554..e2196a02f 100644 --- a/packages/dev-frontend/src/components/InfoMessage.tsx +++ b/packages/dev-frontend/src/components/InfoMessage.tsx @@ -1,13 +1,15 @@ +import React, { ReactNode } from "react"; import { Box, Flex, Text } from "theme-ui"; - import { Icon } from "./Icon"; + type InfoMessageProps = { + children: ReactNode, title: string; icon?: React.ReactNode; }; -export const InfoMessage: React.FC = ({ title, children, icon }) => ( +export const InfoMessage: React.FC = ({ children, title, icon }) => ( {icon || } diff --git a/packages/dev-frontend/src/components/KumoLogo.tsx b/packages/dev-frontend/src/components/KumoLogo.tsx index 5ff3ebd71..15ae6d3a3 100644 --- a/packages/dev-frontend/src/components/KumoLogo.tsx +++ b/packages/dev-frontend/src/components/KumoLogo.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { useHistory } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { Box, Image } from "theme-ui"; import kumoLogos from "../asset/images/kumoLogo.svg"; @@ -8,10 +8,10 @@ type KumoLogoProps = React.ComponentProps & { }; export const KumoLogo: React.FC = ({ height, ...boxProps }) => { - const history = useHistory(); + const navigate = useNavigate(); return ( - history.push("/dashboard")} /> + navigate("/dashboard")} /> ); }; diff --git a/packages/dev-frontend/src/components/Link.tsx b/packages/dev-frontend/src/components/Link.tsx index 6cdad8eb1..94c23aeec 100644 --- a/packages/dev-frontend/src/components/Link.tsx +++ b/packages/dev-frontend/src/components/Link.tsx @@ -1,7 +1,8 @@ +import React from "react"; import { NavLink as RouterLink, NavLinkProps as RouterLinkProps } from "react-router-dom"; import { NavLink as ThemeUINavLink, NavLinkProps as ThemeUILinkProps } from "theme-ui"; -type CombinedProps = ThemeUILinkProps & RouterLinkProps<{}>; +type CombinedProps = ThemeUILinkProps & RouterLinkProps; const ExactLink: React.FC = props => { return ; diff --git a/packages/dev-frontend/src/components/LoadingOverlay.tsx b/packages/dev-frontend/src/components/LoadingOverlay.tsx index c91a97f48..17a12d119 100644 --- a/packages/dev-frontend/src/components/LoadingOverlay.tsx +++ b/packages/dev-frontend/src/components/LoadingOverlay.tsx @@ -6,6 +6,6 @@ export const LoadingOverlay: React.FC = () => ( variant="disabledOverlay" sx={{ p: "14px", display: "flex", justifyContent: "flex-end" }} > - + ); diff --git a/packages/dev-frontend/src/components/MobWalletInstructions.tsx b/packages/dev-frontend/src/components/MobWalletInstructions.tsx index 75ad38f75..98c63594a 100644 --- a/packages/dev-frontend/src/components/MobWalletInstructions.tsx +++ b/packages/dev-frontend/src/components/MobWalletInstructions.tsx @@ -8,7 +8,7 @@ type SystemStatsProps = { showBalances?: boolean; }; -export const MobWalletInstructons: React.FC = ({ variant = "info", showBalances }) => { +export const MobWalletInstructons: React.FC = () => { const { systemTotalCollDebt } = useDashboard(); return ( diff --git a/packages/dev-frontend/src/components/Modal.tsx b/packages/dev-frontend/src/components/Modal.tsx index 0df7526fb..79bc41224 100644 --- a/packages/dev-frontend/src/components/Modal.tsx +++ b/packages/dev-frontend/src/components/Modal.tsx @@ -1,7 +1,7 @@ -import React from "react"; +import React, {ReactNode} from "react"; import { Container } from "theme-ui"; -export const Modal: React.FC = ({ children }) => ( +export const Modal: React.FC<{ children: ReactNode }> = ({ children }) => ( {children} diff --git a/packages/dev-frontend/src/components/Nav.tsx b/packages/dev-frontend/src/components/Nav.tsx index 42ab0ada5..52b34c14c 100644 --- a/packages/dev-frontend/src/components/Nav.tsx +++ b/packages/dev-frontend/src/components/Nav.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { Flex, Box } from "theme-ui"; import { Link } from "./Link"; diff --git a/packages/dev-frontend/src/components/Redemption/DisabledRedemption.tsx b/packages/dev-frontend/src/components/Redemption/DisabledRedemption.tsx index 0d7543055..6b2944520 100644 --- a/packages/dev-frontend/src/components/Redemption/DisabledRedemption.tsx +++ b/packages/dev-frontend/src/components/Redemption/DisabledRedemption.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { Box, Card, Heading, Paragraph, Text } from "theme-ui"; import { InfoMessage } from "../InfoMessage"; diff --git a/packages/dev-frontend/src/components/Redemption/Redemption.tsx b/packages/dev-frontend/src/components/Redemption/Redemption.tsx index 5325e4c56..4c7e43693 100644 --- a/packages/dev-frontend/src/components/Redemption/Redemption.tsx +++ b/packages/dev-frontend/src/components/Redemption/Redemption.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { BlockPolledKumoStoreState } from "@kumodao/lib-ethers"; import { useKumoSelector } from "@kumodao/lib-react"; diff --git a/packages/dev-frontend/src/components/Redemption/RedemptionAction.tsx b/packages/dev-frontend/src/components/Redemption/RedemptionAction.tsx index 61e7e23b4..6b24a72cd 100644 --- a/packages/dev-frontend/src/components/Redemption/RedemptionAction.tsx +++ b/packages/dev-frontend/src/components/Redemption/RedemptionAction.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { Button } from "theme-ui"; import { Decimal } from "@kumodao/lib-base"; diff --git a/packages/dev-frontend/src/components/Redemption/RedemptionManager.tsx b/packages/dev-frontend/src/components/Redemption/RedemptionManager.tsx index a22229bc3..03d8cb3dc 100644 --- a/packages/dev-frontend/src/components/Redemption/RedemptionManager.tsx +++ b/packages/dev-frontend/src/components/Redemption/RedemptionManager.tsx @@ -100,8 +100,7 @@ export const RedemptionManager: React.FC = () => { return ( - Redeem({assetName}) @@ -121,7 +120,7 @@ export const RedemptionManager: React.FC = () => { - + { Portfolio Staking Redemption - Stats + Stats Faucet diff --git a/packages/dev-frontend/src/components/Sidebar/Siderbar.tsx b/packages/dev-frontend/src/components/Sidebar/Siderbar.tsx index d2d04ea2e..e3574d383 100644 --- a/packages/dev-frontend/src/components/Sidebar/Siderbar.tsx +++ b/packages/dev-frontend/src/components/Sidebar/Siderbar.tsx @@ -13,7 +13,7 @@ export const Sidebar: React.FC = () => { Portfolio Staking Redemption - Stats + Stats Faucet diff --git a/packages/dev-frontend/src/components/Stability/NoDeposit.tsx b/packages/dev-frontend/src/components/Stability/NoDeposit.tsx index 981ee100c..0980f19bd 100644 --- a/packages/dev-frontend/src/components/Stability/NoDeposit.tsx +++ b/packages/dev-frontend/src/components/Stability/NoDeposit.tsx @@ -14,7 +14,7 @@ const select = ({ vaults }); -export const NoDeposit: React.FC = props => { +export const NoDeposit: React.FC = () => { const { vaults } = useKumoSelector(select); const { dispatchEvent } = useStabilityView(); const { collateralType } = useParams<{ collateralType: string }>(); diff --git a/packages/dev-frontend/src/components/Stability/StabilityDepositAction.tsx b/packages/dev-frontend/src/components/Stability/StabilityDepositAction.tsx index 9b3db9af6..b2c837343 100644 --- a/packages/dev-frontend/src/components/Stability/StabilityDepositAction.tsx +++ b/packages/dev-frontend/src/components/Stability/StabilityDepositAction.tsx @@ -1,10 +1,13 @@ +import React from "react"; import { Button } from "theme-ui"; import { Decimal, StabilityDepositChange } from "@kumodao/lib-base"; import { useKumo } from "../../hooks/KumoContext"; import { useTransactionFunction } from "../Transaction"; +import { ReactNode } from "react"; type StabilityDepositActionProps = { + children: ReactNode transactionId: string; change: StabilityDepositChange; asset: string, diff --git a/packages/dev-frontend/src/components/Stability/StabilityDepositEditor.tsx b/packages/dev-frontend/src/components/Stability/StabilityDepositEditor.tsx index f490930b6..37e1c3a56 100644 --- a/packages/dev-frontend/src/components/Stability/StabilityDepositEditor.tsx +++ b/packages/dev-frontend/src/components/Stability/StabilityDepositEditor.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { ReactNode, useState } from "react"; import { useLocation, useParams } from "react-router-dom"; import { Heading, Box, Card, Button, Text } from "theme-ui"; @@ -28,6 +28,7 @@ const select = ({ vaults, kusdBalance }: KumoStoreState) => ({ }); type StabilityDepositEditorProps = { + children: ReactNode, originalDeposit: StabilityDeposit; editedKUSD: Decimal; changePending: boolean; diff --git a/packages/dev-frontend/src/components/Stability/StabilityDepositManager.tsx b/packages/dev-frontend/src/components/Stability/StabilityDepositManager.tsx index 906a1d11a..6129a3ec0 100644 --- a/packages/dev-frontend/src/components/Stability/StabilityDepositManager.tsx +++ b/packages/dev-frontend/src/components/Stability/StabilityDepositManager.tsx @@ -96,7 +96,7 @@ const select = ({ vaults, kusdBalance }: KumoStoreState) => ({ }); export const StabilityDepositManager: React.FC = () => { - const { collateralType } = useParams<{ collateralType: string }>(); + const { collateralType = "nbc" || "csc" } = useParams<{ collateralType: string }>(); const { vaults, kusdBalance } = useKumoSelector(select); const vault = vaults.find(vault => vault.asset === collateralType) ?? new Vault(); const { stabilityDeposit, trove, haveUndercollateralizedTroves } = vault; diff --git a/packages/dev-frontend/src/components/Stability/actions/ClaimAndMove.tsx b/packages/dev-frontend/src/components/Stability/actions/ClaimAndMove.tsx index 20e0393d9..9621bf93a 100644 --- a/packages/dev-frontend/src/components/Stability/actions/ClaimAndMove.tsx +++ b/packages/dev-frontend/src/components/Stability/actions/ClaimAndMove.tsx @@ -1,9 +1,10 @@ -import React from "react"; +import React, { ReactNode } from "react"; import { Button } from "theme-ui"; import { useKumo } from "../../../hooks/KumoContext"; import { useTransactionFunction } from "../../Transaction"; type ClaimAndMoveProps = { + children: ReactNode, disabled?: boolean; asset: string; assetName: string; diff --git a/packages/dev-frontend/src/components/Stability/actions/ClaimRewards.tsx b/packages/dev-frontend/src/components/Stability/actions/ClaimRewards.tsx index 7fc1a3c04..b79794463 100644 --- a/packages/dev-frontend/src/components/Stability/actions/ClaimRewards.tsx +++ b/packages/dev-frontend/src/components/Stability/actions/ClaimRewards.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { ReactNode } from "react"; import { useParams } from "react-router-dom"; import { Button } from "theme-ui"; @@ -6,24 +6,27 @@ import { useKumo } from "../../../hooks/KumoContext"; import { useTransactionFunction } from "../../Transaction"; type ClaimRewardsProps = { + children: ReactNode, disabled?: boolean; }; export const ClaimRewards: React.FC = ({ disabled, children }) => { const { kumo } = useKumo(); - const { collateralType } = useParams<{ collateralType: string }>(); + const { collateralType = "nbc" || "csc"} = useParams<{ collateralType: string }>(); - const [sendTransaction] = useTransactionFunction( - "stability-deposit", - kumo.send.withdrawGainsFromStabilityPool.bind(kumo.send, collateralType) - ); + + const [sendTransaction] = useTransactionFunction( + "stability-deposit", + kumo.send.withdrawGainsFromStabilityPool.bind(kumo.send, collateralType) + ); + return ( diff --git a/packages/dev-frontend/src/components/Stability/context/StabilityViewProvider.tsx b/packages/dev-frontend/src/components/Stability/context/StabilityViewProvider.tsx index 80de4f9d5..b4e11e82d 100644 --- a/packages/dev-frontend/src/components/Stability/context/StabilityViewProvider.tsx +++ b/packages/dev-frontend/src/components/Stability/context/StabilityViewProvider.tsx @@ -1,4 +1,4 @@ -import React, { useState, useCallback, useEffect, useRef } from "react"; +import React, { useState, useCallback, useEffect, useRef, ReactNode } from "react"; import { useLocation } from "react-router-dom"; import { useKumoSelector } from "@kumodao/lib-react"; import { KumoStoreState, StabilityDeposit } from "@kumodao/lib-base"; @@ -47,8 +47,7 @@ const select = ({ vaults }: KumoStoreState) => ({ vaults }); -export const StabilityViewProvider: React.FC = props => { - const { children } = props; +export const StabilityViewProvider: React.FC<{children: ReactNode}> = ({ children }) => { const { vaults } = useKumoSelector(select); const location = useLocation(); diff --git a/packages/dev-frontend/src/components/Stability/validation/validateStabilityDepositChange.tsx b/packages/dev-frontend/src/components/Stability/validation/validateStabilityDepositChange.tsx index 8830e902d..dce20f97a 100644 --- a/packages/dev-frontend/src/components/Stability/validation/validateStabilityDepositChange.tsx +++ b/packages/dev-frontend/src/components/Stability/validation/validateStabilityDepositChange.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { Decimal, StabilityDeposit, diff --git a/packages/dev-frontend/src/components/StabilityPoolStakingCard/StabilityPoolStakingCard.tsx b/packages/dev-frontend/src/components/StabilityPoolStakingCard/StabilityPoolStakingCard.tsx index 9b6e46287..ecb6a0f83 100644 --- a/packages/dev-frontend/src/components/StabilityPoolStakingCard/StabilityPoolStakingCard.tsx +++ b/packages/dev-frontend/src/components/StabilityPoolStakingCard/StabilityPoolStakingCard.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { useHistory } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { Box, Card, Heading, Text } from "theme-ui"; import stabilityPoolStaking from "../../asset/images/stability_pool_gradient.png"; import stabilityMiningGradient from "../../asset/images/liquidity_mining_gradient.png"; @@ -15,7 +15,7 @@ export const StabilityPoolStakingCard: React.FC = ({ description, stakingType }) => { - const history = useHistory(); + const navigate = useNavigate(); const getStakingImg = (sType: string) => { if (sType === "stability") { @@ -25,7 +25,7 @@ export const StabilityPoolStakingCard: React.FC = ({ } }; return ( - history.push(`/staking/${stakingType}`)}> + navigate(`/staking/${stakingType}`)}> ({ }); type StakingEditorProps = { + children: ReactNode, title: string; originalStake: KUMOStake; editedKUMO: Decimal; diff --git a/packages/dev-frontend/src/components/Staking/StakingGainsAction.tsx b/packages/dev-frontend/src/components/Staking/StakingGainsAction.tsx index 647b885c4..f20594bea 100644 --- a/packages/dev-frontend/src/components/Staking/StakingGainsAction.tsx +++ b/packages/dev-frontend/src/components/Staking/StakingGainsAction.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { Button } from "theme-ui"; import { KumoStoreState } from "@kumodao/lib-base"; diff --git a/packages/dev-frontend/src/components/Staking/StakingManager.tsx b/packages/dev-frontend/src/components/Staking/StakingManager.tsx index b96a8d6a5..d2f2e3beb 100644 --- a/packages/dev-frontend/src/components/Staking/StakingManager.tsx +++ b/packages/dev-frontend/src/components/Staking/StakingManager.tsx @@ -12,10 +12,8 @@ import { StakingEditor } from "./StakingEditor"; import { StakingManagerAction } from "./StakingManagerAction"; import { ActionDescription, Amount } from "../ActionDescription"; import { ErrorDescription } from "../ErrorDescription"; -import { useLocation } from "react-router-dom"; const init = ({ kumoStake }: KumoStoreState) => { - const location = useLocation(); return { originalStake: kumoStake, editedKUMO: kumoStake.stakedKUMO diff --git a/packages/dev-frontend/src/components/Staking/StakingManagerAction.tsx b/packages/dev-frontend/src/components/Staking/StakingManagerAction.tsx index 81a283f76..fde17cd1e 100644 --- a/packages/dev-frontend/src/components/Staking/StakingManagerAction.tsx +++ b/packages/dev-frontend/src/components/Staking/StakingManagerAction.tsx @@ -1,3 +1,4 @@ +import React, { ReactNode } from "react"; import { Button } from "theme-ui"; import { Decimal, KUMOStakeChange } from "@kumodao/lib-base"; @@ -6,6 +7,7 @@ import { useKumo } from "../../hooks/KumoContext"; import { useTransactionFunction } from "../Transaction"; type StakingActionProps = { + children: ReactNode, change: KUMOStakeChange; }; diff --git a/packages/dev-frontend/src/components/Staking/context/StakingViewProvider.tsx b/packages/dev-frontend/src/components/Staking/context/StakingViewProvider.tsx index 2ded18b9a..41c0a6d2d 100644 --- a/packages/dev-frontend/src/components/Staking/context/StakingViewProvider.tsx +++ b/packages/dev-frontend/src/components/Staking/context/StakingViewProvider.tsx @@ -1,4 +1,4 @@ -import { useEffect } from "react"; +import React, { ReactNode, useEffect } from "react"; import { KumoStoreState, KUMOStake } from "@kumodao/lib-base"; import { KumoStoreUpdate, useKumoReducer } from "@kumodao/lib-react"; @@ -69,7 +69,7 @@ const reduce = ( return state; }; -export const StakingViewProvider: React.FC = ({ children }) => { +export const StakingViewProvider: React.FC<{children: ReactNode}> = ({ children }) => { const stakingTransactionState = useMyTransactionState("stake"); const [{ adjusting, changePending, kumoStake }, dispatch] = useKumoReducer(reduce, init); diff --git a/packages/dev-frontend/src/components/StakingDialog.tsx b/packages/dev-frontend/src/components/StakingDialog.tsx index 0a0faf3b2..0c2f8015d 100644 --- a/packages/dev-frontend/src/components/StakingDialog.tsx +++ b/packages/dev-frontend/src/components/StakingDialog.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { ReactNode } from "react"; import { Heading, Flex, Card, Button, Box } from "theme-ui"; import { Stability } from "../components/Stability/Stability"; @@ -7,6 +7,7 @@ import { Icon } from "./Icon"; type DialogIntent = "success" | "warning" | "danger" | "info"; type DialogProps = { + children: ReactNode, intent?: DialogIntent; title: string; icon?: React.ReactNode; @@ -33,8 +34,7 @@ export const StakingDialog: React.FC = ({ title, icon, cancelLabel, - onClose, - children + onClose }) => ( {intent ? : null} diff --git a/packages/dev-frontend/src/components/Statistic.tsx b/packages/dev-frontend/src/components/Statistic.tsx index f58d52b80..c2214e017 100644 --- a/packages/dev-frontend/src/components/Statistic.tsx +++ b/packages/dev-frontend/src/components/Statistic.tsx @@ -1,8 +1,9 @@ -import React from "react"; +import React, { ReactNode } from "react"; import { Flex, Card } from "theme-ui"; import { InfoIcon } from "./InfoIcon"; type StatisticProps = { + children: ReactNode, name: React.ReactNode; tooltip?: React.ReactNode; }; diff --git a/packages/dev-frontend/src/components/SwitchNetwork/SwitchNetwork.tsx b/packages/dev-frontend/src/components/SwitchNetwork/SwitchNetwork.tsx index a2d02c275..de7dc0229 100644 --- a/packages/dev-frontend/src/components/SwitchNetwork/SwitchNetwork.tsx +++ b/packages/dev-frontend/src/components/SwitchNetwork/SwitchNetwork.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { useSwitchNetwork } from "../../hooks/useSwitchNetwork"; import { useSwitchNetworkView } from "./context/SwitchNetworkViewContext"; diff --git a/packages/dev-frontend/src/components/SwitchNetwork/context/SwitchNetworkViewProvider.tsx b/packages/dev-frontend/src/components/SwitchNetwork/context/SwitchNetworkViewProvider.tsx index 9a30c0b06..bfd982f22 100644 --- a/packages/dev-frontend/src/components/SwitchNetwork/context/SwitchNetworkViewProvider.tsx +++ b/packages/dev-frontend/src/components/SwitchNetwork/context/SwitchNetworkViewProvider.tsx @@ -1,4 +1,4 @@ -import React, { useState, useCallback, useEffect, useRef } from "react"; +import React, { useState, useCallback, useEffect, useRef, ReactNode } from "react"; import { SwitchNetworkViewContext } from "./SwitchNetworkViewContext"; import type { SwitchNetworkView, SwitchNetworkEvent } from "./types"; @@ -19,9 +19,7 @@ const transition = (view: SwitchNetworkView, event: SwitchNetworkEvent): SwitchN }; -export const SwitchNetworkViewProvider: React.FC = props => { - const { children } = props; - +export const SwitchNetworkViewProvider: React.FC<{ children: ReactNode }> = ({ children }) => { const [view, setView] = useState("NONE"); const [showSwitchModal, setShowSwitchModal] = useState(false) const viewRef = useRef(view); diff --git a/packages/dev-frontend/src/components/SystemStats.tsx b/packages/dev-frontend/src/components/SystemStats.tsx index 7d4ccb64c..07245ab98 100644 --- a/packages/dev-frontend/src/components/SystemStats.tsx +++ b/packages/dev-frontend/src/components/SystemStats.tsx @@ -38,7 +38,7 @@ type SystemStatsProps = { onClose: (event: React.MouseEvent) => void; }; -export const SystemStats: React.FC = ({ variant = "info", showBalances, onClose }) => { +export const SystemStats: React.FC = ({ showBalances, onClose }) => { const { systemTotalCollDebt } = useDashboard(); return ( diff --git a/packages/dev-frontend/src/components/Transaction.tsx b/packages/dev-frontend/src/components/Transaction.tsx index b8cf99b76..1c587403d 100644 --- a/packages/dev-frontend/src/components/Transaction.tsx +++ b/packages/dev-frontend/src/components/Transaction.tsx @@ -1,4 +1,4 @@ -import React, { useState, useContext, useEffect, useCallback } from "react"; +import React, { useState, useContext, useEffect, useCallback, ReactNode } from "react"; import { Flex, Text, Box } from "theme-ui"; import { Provider, TransactionResponse, TransactionReceipt } from "@ethersproject/abstract-provider"; import { hexDataSlice, hexDataLength } from "@ethersproject/bytes"; @@ -88,7 +88,7 @@ const TransactionContext = React.createContext< [TransactionState, (state: TransactionState) => void] | undefined >(undefined); -export const TransactionProvider: React.FC = ({ children }) => { +export const TransactionProvider: React.FC<{ children: ReactNode }> = ({ children }) => { const transactionState = useState({ type: "idle" }); return ( {children} diff --git a/packages/dev-frontend/src/components/Trove/Adjusting.tsx b/packages/dev-frontend/src/components/Trove/Adjusting.tsx index 88c4b786d..acc89e2bc 100644 --- a/packages/dev-frontend/src/components/Trove/Adjusting.tsx +++ b/packages/dev-frontend/src/components/Trove/Adjusting.tsx @@ -73,7 +73,7 @@ const applyUnsavedNetDebtChanges = (unsavedChanges: Difference, trove: Trove) => export const Adjusting: React.FC = () => { const { dispatchEvent } = useTroveView(); - const { collateralType } = useParams<{ collateralType: string }>(); + const { collateralType = "nbc" || "csc" } = useParams<{ collateralType: string }>(); const { vault, price, trove, accountBalance, fees, validationContext } = useKumoSelector( (state: KumoStoreState) => { const { vaults, kusdBalance } = state; diff --git a/packages/dev-frontend/src/components/Trove/Editor.tsx b/packages/dev-frontend/src/components/Trove/Editor.tsx index ddccf2015..06af7dd2b 100644 --- a/packages/dev-frontend/src/components/Trove/Editor.tsx +++ b/packages/dev-frontend/src/components/Trove/Editor.tsx @@ -1,9 +1,10 @@ -import React, { useState } from "react"; +import React, { ReactNode, useState } from "react"; import { Text, Flex, Label, Input, SxProp, Box, Button, ThemeUICSSProperties } from "theme-ui"; import { Decimal } from "@kumodao/lib-base"; import { Icon } from "../Icon"; type RowProps = SxProp & { + children?: ReactNode, label: string; labelId?: string; labelFor?: string; @@ -96,6 +97,7 @@ const PendingAmount: React.FC = ({ sx, value }) => ); type StaticAmountsProps = { + children?: ReactNode, inputId: string; labelledBy?: string; amount: string; diff --git a/packages/dev-frontend/src/components/Trove/NoTrove.tsx b/packages/dev-frontend/src/components/Trove/NoTrove.tsx index b4b5230ca..0eef9b678 100644 --- a/packages/dev-frontend/src/components/Trove/NoTrove.tsx +++ b/packages/dev-frontend/src/components/Trove/NoTrove.tsx @@ -15,7 +15,7 @@ const select = ({ vaults }); -export const NoTrove: React.FC = props => { +export const NoTrove: React.FC = () => { const { vaults } = useKumoSelector(select); const { dispatchEvent } = useTroveView(); diff --git a/packages/dev-frontend/src/components/Trove/Opening.tsx b/packages/dev-frontend/src/components/Trove/Opening.tsx index b4a5721d9..4ec486f8a 100644 --- a/packages/dev-frontend/src/components/Trove/Opening.tsx +++ b/packages/dev-frontend/src/components/Trove/Opening.tsx @@ -34,7 +34,7 @@ const GAS_ROOM_ETH = Decimal.from(0.1); export const Opening: React.FC = () => { const { dispatchEvent } = useTroveView(); - const { collateralType } = useParams<{ collateralType: string }>(); + const { collateralType = "nbc" || "csc" } = useParams<{ collateralType: string }>(); const { accountBalance, fees, price, total, kusdMintedCap, assetName, validationContext } = useKumoSelector((state: KumoStoreState) => { const { vaults, kusdBalance } = state; @@ -235,7 +235,7 @@ export const Opening: React.FC = () => { {gasEstimationState.type === "inProgress" ? ( ) : (stableTroveChange && !isMintCapReached) ? ( = ({ vault = new Vault() }) => { - const history = useHistory() + const navigate = useNavigate() const { trove } = vault; const price = vault?.price @@ -16,7 +16,7 @@ export const PortfolioTrove: React.FC<{ vault: Vault }> = ({ vault = new Vault() // console.log("READONLY TROVE", trove.collateral.prettify(4)); return ( - history.push(`/dashboard/${vault?.asset}`)}> + navigate(`/dashboard/${vault?.asset}`)}> {vault?.asset.toUpperCase()} Vault ({vault.assetName}) diff --git a/packages/dev-frontend/src/components/Trove/TroveAction.tsx b/packages/dev-frontend/src/components/Trove/TroveAction.tsx index 5967784c5..d6ecb8367 100644 --- a/packages/dev-frontend/src/components/Trove/TroveAction.tsx +++ b/packages/dev-frontend/src/components/Trove/TroveAction.tsx @@ -1,3 +1,4 @@ +import React, { ReactNode } from "react"; import { Button } from "theme-ui"; import { Decimal, TroveChange } from "@kumodao/lib-base"; @@ -6,6 +7,7 @@ import { useKumo } from "../../hooks/KumoContext"; import { useTransactionFunction } from "../Transaction"; type TroveActionProps = { + children: ReactNode, transactionId: string; change: Exclude, { type: "invalidCreation" }>; asset: string; diff --git a/packages/dev-frontend/src/components/Trove/TroveEditor.tsx b/packages/dev-frontend/src/components/Trove/TroveEditor.tsx index 4a1449436..62d5f0061 100644 --- a/packages/dev-frontend/src/components/Trove/TroveEditor.tsx +++ b/packages/dev-frontend/src/components/Trove/TroveEditor.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { ReactNode } from "react"; import { Heading, Box, Card, Text } from "theme-ui"; import { @@ -21,6 +21,7 @@ import { InfoIcon } from "../InfoIcon"; import { useParams } from "react-router-dom"; type TroveEditorProps = { + children: ReactNode, original: Trove; edited: Trove; fee: Decimal; diff --git a/packages/dev-frontend/src/components/Trove/TroveManager.tsx b/packages/dev-frontend/src/components/Trove/TroveManager.tsx index eb8d5f4f2..de8313dbc 100644 --- a/packages/dev-frontend/src/components/Trove/TroveManager.tsx +++ b/packages/dev-frontend/src/components/Trove/TroveManager.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect } from "react"; +import React, { useCallback, useEffect } from "react"; import { useParams } from "react-router-dom"; import { Flex, Button } from "theme-ui"; @@ -165,7 +165,7 @@ type TroveManagerProps = { }; export const TroveManager: React.FC = ({ collateral, debt }) => { - const { collateralType } = useParams<{ collateralType: string }>(); + const { collateralType = "nbc" || "csc"} = useParams<{ collateralType: string }>(); const assetTokenAddress = ASSET_TOKENS[collateralType].assetAddress; const [{ original, edited, changePending }, dispatch] = useKumoReducer( reduce, diff --git a/packages/dev-frontend/src/components/Trove/context/TroveViewProvider.tsx b/packages/dev-frontend/src/components/Trove/context/TroveViewProvider.tsx index d77d5fdfa..7f29cedf0 100644 --- a/packages/dev-frontend/src/components/Trove/context/TroveViewProvider.tsx +++ b/packages/dev-frontend/src/components/Trove/context/TroveViewProvider.tsx @@ -1,4 +1,4 @@ -import React, { useState, useCallback, useEffect, useRef } from "react"; +import React, { useState, useCallback, useEffect, useRef, ReactNode } from "react"; import { useLocation } from "react-router-dom"; import { KumoStoreState, UserTroveStatus, Vault } from "@kumodao/lib-base"; @@ -85,8 +85,7 @@ const select = ({ vaults }: KumoStoreState) => ({ vaults }); -export const TroveViewProvider: React.FC = props => { - const { children } = props; +export const TroveViewProvider: React.FC<{ children: ReactNode }> = ({ children }) => { const { vaults } = useKumoSelector(select); const location = useLocation(); diff --git a/packages/dev-frontend/src/components/Trove/validation/validateTroveChange.tsx b/packages/dev-frontend/src/components/Trove/validation/validateTroveChange.tsx index 130a5aace..5618a78ea 100644 --- a/packages/dev-frontend/src/components/Trove/validation/validateTroveChange.tsx +++ b/packages/dev-frontend/src/components/Trove/validation/validateTroveChange.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { Decimal, KUSD_MINIMUM_DEBT, diff --git a/packages/dev-frontend/src/components/UserAccount.tsx b/packages/dev-frontend/src/components/UserAccount.tsx index dc9c4e5eb..7d9cae24b 100644 --- a/packages/dev-frontend/src/components/UserAccount.tsx +++ b/packages/dev-frontend/src/components/UserAccount.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from "react"; -import { useHistory } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { Flex, Box, Button } from "theme-ui"; import { useWalletView } from "../components/WalletConnect/context/WalletViewContext"; import { useAddAssetModal } from "../components/AddAssetToken/context/AssetViewContext" @@ -31,7 +31,7 @@ export const UserAccount: React.FC = () => { const { showAddAssetModal } = useAddAssetModal() const { showSwitchModal } = useSwitchNetworkView(); const { account } = useWeb3React(); - const history = useHistory() + const navigate = useNavigate() useEffect(() => { if (!active) { @@ -73,7 +73,7 @@ export const UserAccount: React.FC = () => { <>