diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 437b84052..7aa5aab93 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -19,7 +19,7 @@ jobs:
- uses: actions/setup-node@v3
with:
- node-version: 16
+ node-version: 20
cache: yarn
env:
# Workaround for https://github.com/actions/setup-node/issues/317
diff --git a/packages/dev-frontend/package.json b/packages/dev-frontend/package.json
index e49042720..c33808335 100644
--- a/packages/dev-frontend/package.json
+++ b/packages/dev-frontend/package.json
@@ -4,6 +4,7 @@
"private": true,
"type": "module",
"dependencies": {
+ "@emotion/react": "^11.11.4",
"@ethersproject/abi": "5.7.0",
"@ethersproject/experimental": "5.7.0",
"@fortawesome/fontawesome-svg-core": "1.2.34",
@@ -12,49 +13,46 @@
"@fortawesome/react-fontawesome": "0.1.14",
"@liquity/chicken-bonds": "file:.yalc/@liquity/chicken-bonds",
"@metamask/eth-sig-util": "5.0.1",
- "@tippyjs/react": "4.2.5",
- "connectkit": "^1.3.0",
+ "@tanstack/react-query": "^5.24.1",
+ "@tippyjs/react": "^4.2.6",
+ "connectkit": "^1.7.3",
"ethers": "5.7.2",
"lambert-w-function": "3.0.0",
- "react": "17.0.2",
- "react-circular-progressbar": "2.0.3",
- "react-copy-to-clipboard": "5.0.3",
- "react-dom": "17.0.2",
+ "react": "^18.2.0",
+ "react-circular-progressbar": "^2.1.0",
+ "react-copy-to-clipboard": "^5.1.0",
+ "react-dom": "^18.2.0",
"react-modal": "^3.15.1",
- "react-router-dom": "5.2.0",
- "recharts": "2.1.10",
- "theme-ui": "0.6.0-canary.1544.5359f8a1e408a4dfeb74a9ae39688270286e534a.0",
- "wagmi": "^0.12.0"
+ "react-router-dom": "^5.3.4",
+ "recharts": "^2.12.1",
+ "theme-ui": "^0.16.2",
+ "viem": "^2.7.15",
+ "wagmi": "^2.5.7"
},
"devDependencies": {
- "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
- "@testing-library/dom": "7.30.0",
- "@testing-library/jest-dom": "5.11.9",
- "@testing-library/react": "11.2.5",
- "@testing-library/user-event": "12.8.3",
- "@types/react": "17.0.3",
- "@types/react-copy-to-clipboard": "5.0.0",
- "@types/react-dom": "17.0.2",
+ "@testing-library/dom": "^9.3.4",
+ "@testing-library/jest-dom": "^6.4.2",
+ "@testing-library/react": "^14.2.1",
+ "@testing-library/user-event": "^14.5.2",
+ "@types/react": "^18.2.60",
+ "@types/react-copy-to-clipboard": "^5.0.7",
+ "@types/react-dom": "^18.2.19",
"@types/react-modal": "^3.13.1",
- "@types/react-router-dom": "5.1.7",
- "@types/testing-library__jest-dom": "5.9.5",
- "@types/testing-library__react": "10.2.0",
- "@types/testing-library__user-event": "4.2.0",
+ "@types/react-router-dom": "^5.3.3",
"@typescript-eslint/eslint-plugin": "^5.57.1",
"@typescript-eslint/parser": "^5.57.1",
- "@vitejs/plugin-react-swc": "^3.0.0",
+ "@vitejs/plugin-react-swc": "^3.6.0",
"cross-env": "7.0.3",
"eslint": "^8.38.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
- "jsdom": "21",
- "node-fetch": "^3.3.1",
+ "happy-dom": "^13.6.2",
"npm-run-all": "4.1.5",
- "rollup-plugin-polyfill-node": "^0.12.0",
"source-map-explorer": "2.5.2",
- "typescript": "^5.0.4",
- "vite": "^4.3.2",
- "vitest": "^0.31.0",
+ "typescript": "^5.3.3",
+ "vite": "^5.1.4",
+ "vite-plugin-node-polyfills": "^0.21.0",
+ "vitest": "^1.3.1",
"yalc": "1.0.0-pre.53"
},
"scripts": {
diff --git a/packages/dev-frontend/src/App.test.tsx b/packages/dev-frontend/src/App.test.tsx
index 5bfc479fc..0eb89fceb 100644
--- a/packages/dev-frontend/src/App.test.tsx
+++ b/packages/dev-frontend/src/App.test.tsx
@@ -1,4 +1,6 @@
-import { render, fireEvent } from "@testing-library/react";
+import { expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { userEvent, PointerEventsCheckLevel } from "@testing-library/user-event";
import { Decimal, LUSD_MINIMUM_NET_DEBT, Trove } from "@liquity/lib-base";
@@ -11,19 +13,25 @@ const trove = Trove.create(params);
* Just a quick and dirty testcase to prove that the approach can work in our CI pipeline.
*/
test("there's no smoke", async () => {
- const { getByText, getByLabelText, findByText } = render();
+ render();
- fireEvent.click(await findByText(/connect wallet/i));
- fireEvent.click(getByText(/browser wallet/i));
+ await userEvent.click(await screen.findByText(/connect wallet/i));
- expect(await findByText(/you can borrow lusd by opening a trove/i)).toBeInTheDocument();
+ // pointer-events check fails under happy-dom, for whatever reason
+ await userEvent.click(await screen.findByText(/browser wallet/i), {
+ pointerEventsCheck: PointerEventsCheckLevel.Never
+ });
- fireEvent.click(getByText(/open trove/i));
- fireEvent.click(getByLabelText(/collateral/i));
- fireEvent.change(getByLabelText(/^collateral$/i), { target: { value: `${trove.collateral}` } });
- fireEvent.click(getByLabelText(/^borrow$/i));
- fireEvent.change(getByLabelText(/^borrow$/i), { target: { value: `${trove.debt}` } });
- fireEvent.click(await findByText(/confirm/i));
+ expect(await screen.findByText(/you can borrow lusd by opening a trove/i)).toBeInTheDocument();
- expect(await findByText(/adjust/i)).toBeInTheDocument();
+ await userEvent.click(screen.getByText(/open trove/i));
+ await userEvent.click(screen.getByLabelText(/collateral/i));
+ await userEvent.clear(screen.getByLabelText(/collateral/i));
+ await userEvent.type(screen.getByLabelText(/collateral/i), `${trove.collateral}`);
+ await userEvent.click(screen.getByLabelText(/borrow/i));
+ await userEvent.clear(screen.getByLabelText(/borrow/i));
+ await userEvent.type(screen.getByLabelText(/borrow/i), `${trove.debt}`);
+ await userEvent.click(await screen.findByText(/confirm/i));
+
+ expect(await screen.findByText(/adjust/i)).toBeInTheDocument();
});
diff --git a/packages/dev-frontend/src/App.tsx b/packages/dev-frontend/src/App.tsx
index 4650461f9..1b6223bd5 100644
--- a/packages/dev-frontend/src/App.tsx
+++ b/packages/dev-frontend/src/App.tsx
@@ -1,10 +1,11 @@
import React from "react";
-import { createClient, WagmiConfig } from "wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WagmiProvider, createConfig, fallback, http } from "wagmi";
+import { injected } from "wagmi/connectors";
import { mainnet, goerli, sepolia, localhost } from "wagmi/chains";
-import { ConnectKitProvider } from "connectkit";
-import { Flex, Heading, ThemeProvider, Paragraph, Link } from "theme-ui";
+import { ConnectKitProvider, getDefaultConfig, getDefaultConnectors } from "connectkit";
+import { Flex, Heading, ThemeUIProvider, Paragraph, Link } from "theme-ui";
-import getDefaultClient from "./connectkit/defaultClient";
import { LiquityProvider } from "./hooks/LiquityContext";
import { WalletConnector } from "./components/WalletConnector";
import { TransactionProvider } from "./components/Transaction";
@@ -78,45 +79,97 @@ const UnsupportedNetworkFallback: React.FC = () => (
);
+const queryClient = new QueryClient();
+
+const appName = "Liquity";
+const appDescription = "Decentralized borrowing protocol";
+
const App = () => {
const config = useAsyncValue(getConfig);
const loader = ;
return (
-
+
{config.loaded && (
-
-
-
- }
- unsupportedMainnetFallback={}
- >
-
-
-
-
-
-
-
+
+
+
+ }
+ unsupportedMainnetFallback={}
+ >
+
+
+
+
+
+
+
+
)}
-
+
);
};
diff --git a/packages/dev-frontend/src/LiquityFrontend.tsx b/packages/dev-frontend/src/LiquityFrontend.tsx
index 8aa4f73d4..77582188c 100644
--- a/packages/dev-frontend/src/LiquityFrontend.tsx
+++ b/packages/dev-frontend/src/LiquityFrontend.tsx
@@ -25,6 +25,7 @@ import { BondsProvider } from "./components/Bonds/context/BondsProvider";
type LiquityFrontendProps = {
loader?: React.ReactNode;
};
+
export const LiquityFrontend: React.FC = ({ loader }) => {
const { account, provider, liquity } = useLiquity();
diff --git a/packages/dev-frontend/src/components/ActionDescription.tsx b/packages/dev-frontend/src/components/ActionDescription.tsx
index 21974dbc4..7486445c9 100644
--- a/packages/dev-frontend/src/components/ActionDescription.tsx
+++ b/packages/dev-frontend/src/components/ActionDescription.tsx
@@ -1,6 +1,6 @@
import { Box, Flex, Text } from "theme-ui";
-export const ActionDescription: React.FC = ({ children }) => (
+export const ActionDescription: React.FC = ({ children }) => (
(
);
-export const Amount: React.FC = ({ children }) => (
+export const Amount: React.FC = ({ children }) => (
{children}
);
diff --git a/packages/dev-frontend/src/components/AppLoader.tsx b/packages/dev-frontend/src/components/AppLoader.tsx
index c6a3ab199..618d71f9c 100644
--- a/packages/dev-frontend/src/components/AppLoader.tsx
+++ b/packages/dev-frontend/src/components/AppLoader.tsx
@@ -2,7 +2,7 @@ import { Flex, Spinner, Heading } from "theme-ui";
export const AppLoader = () => (
-
+
Loading...
);
diff --git a/packages/dev-frontend/src/components/Badge.tsx b/packages/dev-frontend/src/components/Badge.tsx
index 2bcbce40e..df2928027 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 { Flex } from "theme-ui";
-export const Badge: React.FC = ({ children }) => {
+export const Badge: React.FC = ({ children }) => {
return {children};
};
diff --git a/packages/dev-frontend/src/components/Bonds/context/BondAddressesContext.tsx b/packages/dev-frontend/src/components/Bonds/context/BondAddressesContext.tsx
index 79417e0a4..de18dee9f 100644
--- a/packages/dev-frontend/src/components/Bonds/context/BondAddressesContext.tsx
+++ b/packages/dev-frontend/src/components/Bonds/context/BondAddressesContext.tsx
@@ -33,7 +33,7 @@ export const useBondAddresses = (): Addresses => {
return context;
};
-export const BondAddressesProvider: React.FC = ({ children }) => {
+export const BondAddressesProvider: React.FC = ({ children }) => {
const chainId = useChainId();
const addresses: Addresses =
diff --git a/packages/dev-frontend/src/components/Bonds/context/BondViewProvider.tsx b/packages/dev-frontend/src/components/Bonds/context/BondViewProvider.tsx
index 7a64ad9e2..3c98be77e 100644
--- a/packages/dev-frontend/src/components/Bonds/context/BondViewProvider.tsx
+++ b/packages/dev-frontend/src/components/Bonds/context/BondViewProvider.tsx
@@ -40,7 +40,7 @@ const transition = (view: BondView, event: BondEvent): BondView => {
export const EXAMPLE_NFT = "./bonds/egg-nft.png";
-export const BondViewProvider: React.FC = props => {
+export const BondViewProvider: React.FC = props => {
const { children } = props;
const [view, setView] = useState("IDLE");
const viewRef = useRef(view);
diff --git a/packages/dev-frontend/src/components/Bonds/context/BondsProvider.tsx b/packages/dev-frontend/src/components/Bonds/context/BondsProvider.tsx
index 3da4afc9a..740fa431e 100644
--- a/packages/dev-frontend/src/components/Bonds/context/BondsProvider.tsx
+++ b/packages/dev-frontend/src/components/Bonds/context/BondsProvider.tsx
@@ -1,7 +1,7 @@
import { BondAddressesProvider } from "./BondAddressesContext";
import { BondViewProvider } from "./BondViewProvider";
-export const BondsProvider: React.FC = ({ children }) => {
+export const BondsProvider: React.FC = ({ children }) => {
return (
{children}
diff --git a/packages/dev-frontend/src/components/Bonds/views/InfiniteEstimation.tsx b/packages/dev-frontend/src/components/Bonds/views/InfiniteEstimation.tsx
index e721f93a8..c6e9510cb 100644
--- a/packages/dev-frontend/src/components/Bonds/views/InfiniteEstimation.tsx
+++ b/packages/dev-frontend/src/components/Bonds/views/InfiniteEstimation.tsx
@@ -2,9 +2,9 @@ import { Decimal, Decimalish } from "@liquity/lib-base";
import { InfoIcon } from "../../InfoIcon";
import * as l from "../lexicon";
-type InfiniteEstimateProps = {
+type InfiniteEstimateProps = React.PropsWithChildren<{
estimate: Decimalish;
-};
+}>;
export const InfiniteEstimate: React.FC = ({ estimate, children }) => {
if (estimate.toString() !== Decimal.INFINITY.toString()) return <>{children ?? estimate}>;
diff --git a/packages/dev-frontend/src/components/Bonds/views/actioning/actions/cancel/Cancel.tsx b/packages/dev-frontend/src/components/Bonds/views/actioning/actions/cancel/Cancel.tsx
index 0b179ebae..fe9381d4f 100644
--- a/packages/dev-frontend/src/components/Bonds/views/actioning/actions/cancel/Cancel.tsx
+++ b/packages/dev-frontend/src/components/Bonds/views/actioning/actions/cancel/Cancel.tsx
@@ -31,7 +31,7 @@ export const Cancel: React.FC = () => {
>
diff --git a/packages/dev-frontend/src/components/Bonds/views/actioning/actions/claim/Claim.tsx b/packages/dev-frontend/src/components/Bonds/views/actioning/actions/claim/Claim.tsx
index 91bdb7202..6c0a26c03 100644
--- a/packages/dev-frontend/src/components/Bonds/views/actioning/actions/claim/Claim.tsx
+++ b/packages/dev-frontend/src/components/Bonds/views/actioning/actions/claim/Claim.tsx
@@ -31,7 +31,7 @@ export const Claim: React.FC = () => {
>
diff --git a/packages/dev-frontend/src/components/Bonds/views/creating/Details.tsx b/packages/dev-frontend/src/components/Bonds/views/creating/Details.tsx
index 34319c715..a980933bb 100644
--- a/packages/dev-frontend/src/components/Bonds/views/creating/Details.tsx
+++ b/packages/dev-frontend/src/components/Bonds/views/creating/Details.tsx
@@ -314,14 +314,14 @@ export const Details: React.FC = ({ onBack }) => {
)}
{isInfiniteBondApproved && (
)}
diff --git a/packages/dev-frontend/src/components/Bonds/views/creating/Information.tsx b/packages/dev-frontend/src/components/Bonds/views/creating/Information.tsx
index a68a40022..b1d79baf9 100644
--- a/packages/dev-frontend/src/components/Bonds/views/creating/Information.tsx
+++ b/packages/dev-frontend/src/components/Bonds/views/creating/Information.tsx
@@ -16,7 +16,7 @@ import { useWizard } from "../../../Wizard/Context";
import { useBondView } from "../../context/BondViewContext";
import { Details } from "./Details";
-const InformationContainer: React.FC = ({ children }) => {
+const InformationContainer: React.FC = ({ children }) => {
const { dispatchEvent } = useBondView();
const handleDismiss = () => dispatchEvent("ABORT_PRESSED");
diff --git a/packages/dev-frontend/src/components/Bonds/views/managing/DepositPane.tsx b/packages/dev-frontend/src/components/Bonds/views/managing/DepositPane.tsx
index acdbe012b..0d4340531 100644
--- a/packages/dev-frontend/src/components/Bonds/views/managing/DepositPane.tsx
+++ b/packages/dev-frontend/src/components/Bonds/views/managing/DepositPane.tsx
@@ -232,15 +232,11 @@ export const DepositPane: React.FC = () => {
isManageLiquidityPending
}
>
- {isManageLiquidityPending ? (
-
- ) : (
- <>Confirm>
- )}
+ {isManageLiquidityPending ? : <>Confirm>}
) : (
)}
diff --git a/packages/dev-frontend/src/components/Bonds/views/managing/PoolBalance.tsx b/packages/dev-frontend/src/components/Bonds/views/managing/PoolBalance.tsx
index 3f4aabeda..dc785f0dc 100644
--- a/packages/dev-frontend/src/components/Bonds/views/managing/PoolBalance.tsx
+++ b/packages/dev-frontend/src/components/Bonds/views/managing/PoolBalance.tsx
@@ -1,6 +1,10 @@
import { Text } from "theme-ui";
-export const PoolBalance: React.FC<{ symbol: string }> = ({ symbol, children }) => (
+type PoolBalanceProps = React.PropsWithChildren<{
+ symbol: string;
+}>;
+
+export const PoolBalance: React.FC = ({ symbol, children }) => (
<>
{children}
diff --git a/packages/dev-frontend/src/components/Bonds/views/managing/RewardsPane.tsx b/packages/dev-frontend/src/components/Bonds/views/managing/RewardsPane.tsx
index 70070e61a..6c187c94d 100644
--- a/packages/dev-frontend/src/components/Bonds/views/managing/RewardsPane.tsx
+++ b/packages/dev-frontend/src/components/Bonds/views/managing/RewardsPane.tsx
@@ -41,7 +41,7 @@ export const RewardsPane: React.FC = () => {
)}
@@ -106,11 +106,7 @@ export const StakePane: React.FC = () => {
onClick={handleConfirmPressed}
disabled={stakeAmount.isZero || isBalanceInsufficient || isManageLiquidityPending}
>
- {isManageLiquidityPending ? (
-
- ) : (
- <>Confirm>
- )}
+ {isManageLiquidityPending ? : <>Confirm>}
)}
diff --git a/packages/dev-frontend/src/components/Bonds/views/managing/UnstakePane.tsx b/packages/dev-frontend/src/components/Bonds/views/managing/UnstakePane.tsx
index 6e46238b0..50d7550b4 100644
--- a/packages/dev-frontend/src/components/Bonds/views/managing/UnstakePane.tsx
+++ b/packages/dev-frontend/src/components/Bonds/views/managing/UnstakePane.tsx
@@ -74,7 +74,7 @@ export const UnstakePane: React.FC = () => {
onClick={handleConfirmPressed}
disabled={unstakeAmount.isZero || isBalanceInsufficient || isManageLiquidityPending}
>
- {isManageLiquidityPending ? : <>Confirm>}
+ {isManageLiquidityPending ? : <>Confirm>}
>
diff --git a/packages/dev-frontend/src/components/Bonds/views/managing/WithdrawPane.tsx b/packages/dev-frontend/src/components/Bonds/views/managing/WithdrawPane.tsx
index 80169116d..dc86c869e 100644
--- a/packages/dev-frontend/src/components/Bonds/views/managing/WithdrawPane.tsx
+++ b/packages/dev-frontend/src/components/Bonds/views/managing/WithdrawPane.tsx
@@ -15,7 +15,11 @@ const tokenSymbol = new Map([
[BLusdAmmTokenIndex.LUSD, "LUSD"]
]);
-const WithdrawnAmount: React.FC<{ symbol: string }> = ({ symbol, children }) => (
+type WithdrawnAmountProps = React.PropsWithChildren<{
+ symbol: string;
+}>;
+
+const WithdrawnAmount: React.FC = ({ symbol, children }) => (
<>
{children}
@@ -216,7 +220,7 @@ export const WithdrawPane: React.FC = () => {
onClick={handleApprovePressed}
disabled={burnLpTokens.isZero || isApprovePending}
>
- {isApprovePending ? : <>Approve>}
+ {isApprovePending ? : <>Approve>}
)}
@@ -226,11 +230,7 @@ export const WithdrawPane: React.FC = () => {
onClick={handleConfirmPressed}
disabled={burnLpTokens.isZero || isBalanceInsufficient || isManageLiquidityPending}
>
- {isManageLiquidityPending ? (
-
- ) : (
- <>Confirm>
- )}
+ {isManageLiquidityPending ? : <>Confirm>}
)}
diff --git a/packages/dev-frontend/src/components/Bonds/views/swapping/SwapPane.tsx b/packages/dev-frontend/src/components/Bonds/views/swapping/SwapPane.tsx
index 5e02f43fd..1d3ec2702 100644
--- a/packages/dev-frontend/src/components/Bonds/views/swapping/SwapPane.tsx
+++ b/packages/dev-frontend/src/components/Bonds/views/swapping/SwapPane.tsx
@@ -352,11 +352,11 @@ export const SwapPane: React.FC = () => {
isSwapPending
}
>
- {isSwapPending ? : <>Confirm>}
+ {isSwapPending ? : <>Confirm>}
) : (
)}
diff --git a/packages/dev-frontend/src/components/CollateralSurplusAction.tsx b/packages/dev-frontend/src/components/CollateralSurplusAction.tsx
index 0f76c437f..4af75c7a0 100644
--- a/packages/dev-frontend/src/components/CollateralSurplusAction.tsx
+++ b/packages/dev-frontend/src/components/CollateralSurplusAction.tsx
@@ -33,7 +33,7 @@ export const CollateralSurplusAction: React.FC = () => {
return myTransactionState.type === "waitingForApproval" ? (
diff --git a/packages/dev-frontend/src/components/ConnectionConfirmationDialog.tsx b/packages/dev-frontend/src/components/ConnectionConfirmationDialog.tsx
deleted file mode 100644
index 3b87f4ce1..000000000
--- a/packages/dev-frontend/src/components/ConnectionConfirmationDialog.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import { Text, Box } from "theme-ui";
-
-import { WaitingDialog } from "./WaitingDialog";
-
-type ConnectionConfirmationDialogProps = {
- title: string;
- icon?: React.ReactNode;
- onCancel: () => void;
-};
-
-export const ConnectionConfirmationDialog: React.FC = ({
- title,
- icon,
- onCancel,
- children
-}) => (
-
- Waiting for connection confirmation...
- This won’t cost you any Ether
- >
- }
- cancelLabel="Cancel connection"
- onCancel={onCancel}
- >
- {children}
-
-);
diff --git a/packages/dev-frontend/src/components/Dialog.tsx b/packages/dev-frontend/src/components/Dialog.tsx
deleted file mode 100644
index f1e04352a..000000000
--- a/packages/dev-frontend/src/components/Dialog.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from "react";
-import { Heading, Flex, Card, Button, Box } from "theme-ui";
-
-import { Icon } from "./Icon";
-
-type DialogIntent = "success" | "warning" | "danger" | "info";
-
-type DialogProps = {
- intent?: DialogIntent;
- title: string;
- icon?: React.ReactNode;
- cancelLabel?: string;
- onCancel: () => void;
-};
-
-const iconFromIntent = (intent: DialogIntent | undefined) => {
- switch (intent) {
- case "success":
- return ;
- case "warning":
- return ;
- case "danger":
- return ;
- case "info":
- return ;
- }
- return null;
-};
-
-export const Dialog: React.FC = ({
- intent,
- title,
- icon,
- cancelLabel,
- onCancel,
- children
-}) => (
-
- {intent ? : null}
-
- {icon || iconFromIntent(intent)}
-
- {title}
-
-
-
- {children}
-
-);
diff --git a/packages/dev-frontend/src/components/ErrorDescription.tsx b/packages/dev-frontend/src/components/ErrorDescription.tsx
index 6ac3d1959..81deb4e69 100644
--- a/packages/dev-frontend/src/components/ErrorDescription.tsx
+++ b/packages/dev-frontend/src/components/ErrorDescription.tsx
@@ -2,7 +2,7 @@ import { Box, Flex, Text } from "theme-ui";
import { Icon } from "./Icon";
-export const ErrorDescription: React.FC = ({ children }) => (
+export const ErrorDescription: React.FC = ({ children }) => (
({
frontend
});
-export const Header: React.FC = ({ children }) => {
+export const Header: React.FC = ({ children }) => {
const {
config: { frontendTag }
} = useLiquity();
diff --git a/packages/dev-frontend/src/components/HorizontalTimeline.tsx b/packages/dev-frontend/src/components/HorizontalTimeline.tsx
index 17b328dda..ccb79fc82 100644
--- a/packages/dev-frontend/src/components/HorizontalTimeline.tsx
+++ b/packages/dev-frontend/src/components/HorizontalTimeline.tsx
@@ -76,13 +76,16 @@ type EventProps = EventType & {
isPast: boolean;
};
-type LabelProps = {
+type LabelProps = React.PropsWithChildren<{
subLabel?: React.ReactNode;
description?: React.ReactNode;
style?: ThemeUIStyleObject;
-};
+}>;
+
+type SubLabelProps = React.PropsWithChildren<{
+ style?: ThemeUIStyleObject;
+}>;
-type SubLabelProps = { style?: ThemeUIStyleObject };
export const SubLabel: React.FC = ({ style, children }) => (
(
+export const InfoBubble: React.FC = ({ children }) => (
;
export const InfoMessage: React.FC = ({ title, children, icon }) => (
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/Modal.tsx b/packages/dev-frontend/src/components/Modal.tsx
deleted file mode 100644
index 0df7526fb..000000000
--- a/packages/dev-frontend/src/components/Modal.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import { Container } from "theme-ui";
-
-export const Modal: React.FC = ({ children }) => (
-
- {children}
-
-);
diff --git a/packages/dev-frontend/src/components/ReactModal.tsx b/packages/dev-frontend/src/components/ReactModal.tsx
index 7c3ea8a0d..8dd2b2935 100644
--- a/packages/dev-frontend/src/components/ReactModal.tsx
+++ b/packages/dev-frontend/src/components/ReactModal.tsx
@@ -17,10 +17,10 @@ const modalStyle = {
overlay: { zIndex: 2 }
};
-type ModalProps = {
+type ModalProps = React.PropsWithChildren<{
onDismiss: () => void;
style?: React.CSSProperties;
-};
+}>;
export const ReactModal: React.FC = ({ children, onDismiss, style }) => {
const handleDismiss = () => onDismiss();
diff --git a/packages/dev-frontend/src/components/RetryDialog.tsx b/packages/dev-frontend/src/components/RetryDialog.tsx
deleted file mode 100644
index 6a39d6698..000000000
--- a/packages/dev-frontend/src/components/RetryDialog.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from "react";
-import { Box, Button, Flex } from "theme-ui";
-
-import { Dialog } from "./Dialog";
-
-type RetryDialogProps = {
- title: string;
- cancelLabel?: string;
- retryLabel?: string;
- onCancel: () => void;
- onRetry: () => void;
-};
-
-export const RetryDialog: React.FC = ({
- title,
- cancelLabel,
- onCancel,
- retryLabel,
- onRetry,
- children
-}) => (
-
-);
diff --git a/packages/dev-frontend/src/components/Stability/StabilityDepositAction.tsx b/packages/dev-frontend/src/components/Stability/StabilityDepositAction.tsx
index 0ac52b364..d51f77e31 100644
--- a/packages/dev-frontend/src/components/Stability/StabilityDepositAction.tsx
+++ b/packages/dev-frontend/src/components/Stability/StabilityDepositAction.tsx
@@ -5,10 +5,10 @@ import { useLiquitySelector } from "@liquity/lib-react";
import { useLiquity } from "../../hooks/LiquityContext";
import { useTransactionFunction } from "../Transaction";
-type StabilityDepositActionProps = {
+type StabilityDepositActionProps = React.PropsWithChildren<{
transactionId: string;
change: StabilityDepositChange;
-};
+}>;
const selectFrontendRegistered = ({ frontend }: LiquityStoreState) =>
frontend.status === "registered";
diff --git a/packages/dev-frontend/src/components/Stability/StabilityDepositEditor.tsx b/packages/dev-frontend/src/components/Stability/StabilityDepositEditor.tsx
index 79fe659c2..2bdae4073 100644
--- a/packages/dev-frontend/src/components/Stability/StabilityDepositEditor.tsx
+++ b/packages/dev-frontend/src/components/Stability/StabilityDepositEditor.tsx
@@ -23,12 +23,12 @@ const select = ({ lusdBalance, lusdInStabilityPool }: LiquityStoreState) => ({
lusdInStabilityPool
});
-type StabilityDepositEditorProps = {
+type StabilityDepositEditorProps = React.PropsWithChildren<{
originalDeposit: StabilityDeposit;
editedLUSD: Decimal;
changePending: boolean;
dispatch: (action: { type: "setDeposit"; newValue: Decimalish } | { type: "revert" }) => void;
-};
+}>;
export const StabilityDepositEditor: React.FC = ({
originalDeposit,
diff --git a/packages/dev-frontend/src/components/Stability/actions/ClaimAndMove.tsx b/packages/dev-frontend/src/components/Stability/actions/ClaimAndMove.tsx
index 43bfb5bad..035cb6f07 100644
--- a/packages/dev-frontend/src/components/Stability/actions/ClaimAndMove.tsx
+++ b/packages/dev-frontend/src/components/Stability/actions/ClaimAndMove.tsx
@@ -3,9 +3,9 @@ import { Button } from "theme-ui";
import { useLiquity } from "../../../hooks/LiquityContext";
import { useTransactionFunction } from "../../Transaction";
-type ClaimAndMoveProps = {
+type ClaimAndMoveProps = React.PropsWithChildren<{
disabled?: boolean;
-};
+}>;
export const ClaimAndMove: React.FC = ({ disabled, children }) => {
const { liquity } = useLiquity();
diff --git a/packages/dev-frontend/src/components/Stability/actions/ClaimRewards.tsx b/packages/dev-frontend/src/components/Stability/actions/ClaimRewards.tsx
index cd0370fd7..b6c53a822 100644
--- a/packages/dev-frontend/src/components/Stability/actions/ClaimRewards.tsx
+++ b/packages/dev-frontend/src/components/Stability/actions/ClaimRewards.tsx
@@ -4,9 +4,9 @@ import { Button } from "theme-ui";
import { useLiquity } from "../../../hooks/LiquityContext";
import { useTransactionFunction } from "../../Transaction";
-type ClaimRewardsProps = {
+type ClaimRewardsProps = React.PropsWithChildren<{
disabled?: boolean;
-};
+}>;
export const ClaimRewards: React.FC = ({ disabled, children }) => {
const { liquity } = useLiquity();
diff --git a/packages/dev-frontend/src/components/Stability/context/StabilityViewProvider.tsx b/packages/dev-frontend/src/components/Stability/context/StabilityViewProvider.tsx
index 1a9410c9e..5a40c6400 100644
--- a/packages/dev-frontend/src/components/Stability/context/StabilityViewProvider.tsx
+++ b/packages/dev-frontend/src/components/Stability/context/StabilityViewProvider.tsx
@@ -40,7 +40,7 @@ const getInitialView = (stabilityDeposit: StabilityDeposit): StabilityView => {
const select = ({ stabilityDeposit }: LiquityStoreState): StabilityDeposit => stabilityDeposit;
-export const StabilityViewProvider: React.FC = props => {
+export const StabilityViewProvider: React.FC = props => {
const { children } = props;
const stabilityDeposit = useLiquitySelector(select);
diff --git a/packages/dev-frontend/src/components/Staking/StakingEditor.tsx b/packages/dev-frontend/src/components/Staking/StakingEditor.tsx
index 1393a4b8b..70367025e 100644
--- a/packages/dev-frontend/src/components/Staking/StakingEditor.tsx
+++ b/packages/dev-frontend/src/components/Staking/StakingEditor.tsx
@@ -17,12 +17,12 @@ const select = ({ lqtyBalance, totalStakedLQTY }: LiquityStoreState) => ({
totalStakedLQTY
});
-type StakingEditorProps = {
+type StakingEditorProps = React.PropsWithChildren<{
title: string;
originalStake: LQTYStake;
editedLQTY: Decimal;
dispatch: (action: { type: "setStake"; newValue: Decimalish } | { type: "revert" }) => void;
-};
+}>;
export const StakingEditor: React.FC = ({
children,
diff --git a/packages/dev-frontend/src/components/Staking/StakingManagerAction.tsx b/packages/dev-frontend/src/components/Staking/StakingManagerAction.tsx
index d0fabf09e..9b78ce9bd 100644
--- a/packages/dev-frontend/src/components/Staking/StakingManagerAction.tsx
+++ b/packages/dev-frontend/src/components/Staking/StakingManagerAction.tsx
@@ -5,9 +5,9 @@ import { Decimal, LQTYStakeChange } from "@liquity/lib-base";
import { useLiquity } from "../../hooks/LiquityContext";
import { useTransactionFunction } from "../Transaction";
-type StakingActionProps = {
+type StakingActionProps = React.PropsWithChildren<{
change: LQTYStakeChange;
-};
+}>;
export const StakingManagerAction: React.FC = ({ change, children }) => {
const { liquity } = useLiquity();
diff --git a/packages/dev-frontend/src/components/Staking/context/StakingViewProvider.tsx b/packages/dev-frontend/src/components/Staking/context/StakingViewProvider.tsx
index f7b76f37c..0a0c90b4c 100644
--- a/packages/dev-frontend/src/components/Staking/context/StakingViewProvider.tsx
+++ b/packages/dev-frontend/src/components/Staking/context/StakingViewProvider.tsx
@@ -69,7 +69,7 @@ const reduce = (
return state;
};
-export const StakingViewProvider: React.FC = ({ children }) => {
+export const StakingViewProvider: React.FC = ({ children }) => {
const stakingTransactionState = useMyTransactionState("stake");
const [{ adjusting, changePending, lqtyStake }, dispatch] = useLiquityReducer(reduce, init);
diff --git a/packages/dev-frontend/src/components/Statistic.tsx b/packages/dev-frontend/src/components/Statistic.tsx
index d362da505..8a6dd02df 100644
--- a/packages/dev-frontend/src/components/Statistic.tsx
+++ b/packages/dev-frontend/src/components/Statistic.tsx
@@ -3,9 +3,9 @@ import { Flex } from "theme-ui";
import { InfoIcon } from "./InfoIcon";
import type { Lexicon } from "../lexicon";
-type StatisticProps = {
+type StatisticProps = React.PropsWithChildren<{
lexicon: Lexicon;
-};
+}>;
export const Statistic: React.FC = ({ lexicon, children }) => {
return (
diff --git a/packages/dev-frontend/src/components/Tooltip.tsx b/packages/dev-frontend/src/components/Tooltip.tsx
index 03818e0f7..4b04c1690 100644
--- a/packages/dev-frontend/src/components/Tooltip.tsx
+++ b/packages/dev-frontend/src/components/Tooltip.tsx
@@ -3,12 +3,13 @@ import type { TippyProps } from "@tippyjs/react";
import React from "react";
import { Box, Card, Link } from "theme-ui";
-export type TooltipProps = Pick & {
- message: React.ReactNode;
- link?: string;
-};
+export type TooltipProps = Pick &
+ React.PropsWithChildren<{
+ message: React.ReactNode;
+ link?: string;
+ }>;
-export type LearnMoreLinkProps = Pick;
+export type LearnMoreLinkProps = React.PropsWithChildren>;
export const LearnMoreLink: React.FC = ({ link, children }) => {
return (
diff --git a/packages/dev-frontend/src/components/Transaction.tsx b/packages/dev-frontend/src/components/Transaction.tsx
index 57a7fd616..4b0b1855b 100644
--- a/packages/dev-frontend/src/components/Transaction.tsx
+++ b/packages/dev-frontend/src/components/Transaction.tsx
@@ -64,7 +64,7 @@ const TransactionContext = React.createContext<
[TransactionState, (state: TransactionState) => void] | undefined
>(undefined);
-export const TransactionProvider: React.FC = ({ children }) => {
+export const TransactionProvider: React.FC = ({ children }) => {
const transactionState = useState({ type: "idle" });
return (
{children}
diff --git a/packages/dev-frontend/src/components/Trove/Editor.tsx b/packages/dev-frontend/src/components/Trove/Editor.tsx
index 292b1f7cf..521590858 100644
--- a/packages/dev-frontend/src/components/Trove/Editor.tsx
+++ b/packages/dev-frontend/src/components/Trove/Editor.tsx
@@ -3,12 +3,13 @@ import { Text, Flex, Label, Input, SxProp, Button, ThemeUICSSProperties } from "
import { Icon } from "../Icon";
-type RowProps = SxProp & {
- label: string | React.ReactNode;
- labelId?: string;
- labelFor?: string;
- infoIcon?: React.ReactNode;
-};
+type RowProps = SxProp &
+ React.PropsWithChildren<{
+ label: string | React.ReactNode;
+ labelId?: string;
+ labelFor?: string;
+ infoIcon?: React.ReactNode;
+ }>;
export const Row: React.FC = ({ sx, label, labelId, labelFor, children, infoIcon }) => {
return (
@@ -36,12 +37,12 @@ export const Row: React.FC = ({ sx, label, labelId, labelFor, children
);
};
-type PendingAmountProps = {
+type PendingAmountProps = SxProp & {
value: string;
};
-const PendingAmount: React.FC = ({ sx, value }) => (
-
+const PendingAmount: React.FC = ({ sx, value }) => (
+
(
{value === "++" ? (
@@ -62,7 +63,7 @@ const PendingAmount: React.FC = ({ sx, value }) =>
);
-type StaticAmountsProps = {
+type StaticAmountsProps = React.PropsWithChildren<{
inputId?: string;
labelledBy?: string;
amount?: string;
@@ -71,7 +72,7 @@ type StaticAmountsProps = {
pendingAmount?: string;
pendingColor?: string;
onClick?: () => void;
-};
+}>;
export const StaticAmounts: React.FC = ({
sx,
@@ -258,7 +259,6 @@ export const EditableRow: React.FC = ({
type="number"
step="any"
defaultValue={editedAmount}
- {...{ invalid }}
onChange={e => {
try {
setEditedAmount(e.target.value);
@@ -288,7 +288,12 @@ export const EditableRow: React.FC = ({
}}
labelledBy={`${inputId}-label`}
onClick={() => setEditing(inputId)}
- {...{ inputId, amount, unit, color, pendingAmount, pendingColor, invalid }}
+ inputId={inputId}
+ amount={amount}
+ unit={unit}
+ color={color}
+ pendingAmount={pendingAmount}
+ pendingColor={pendingColor}
>
{maxAmount && (