Skip to content

Commit f2a140f

Browse files
danielattilasimondanielattilasimon
committed
chore: upgrade ConnectKit & friends
1 parent f79fc03 commit f2a140f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+3075
-2433
lines changed

‎packages/dev-frontend/package.json

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"private": true,
55
"type": "module",
66
"dependencies": {
7+
"@emotion/react": "^11.11.4",
78
"@ethersproject/abi": "5.7.0",
89
"@ethersproject/experimental": "5.7.0",
910
"@fortawesome/fontawesome-svg-core": "1.2.34",
@@ -12,31 +13,32 @@
1213
"@fortawesome/react-fontawesome": "0.1.14",
1314
"@liquity/chicken-bonds": "file:.yalc/@liquity/chicken-bonds",
1415
"@metamask/eth-sig-util": "5.0.1",
15-
"@tippyjs/react": "4.2.5",
16-
"connectkit": "^1.3.0",
16+
"@tanstack/react-query": "^5.24.1",
17+
"@tippyjs/react": "^4.2.6",
18+
"connectkit": "^1.7.2",
1719
"ethers": "5.7.2",
1820
"lambert-w-function": "3.0.0",
19-
"react": "17.0.2",
20-
"react-circular-progressbar": "2.0.3",
21-
"react-copy-to-clipboard": "5.0.3",
22-
"react-dom": "17.0.2",
21+
"react": "^18.2.0",
22+
"react-circular-progressbar": "^2.1.0",
23+
"react-copy-to-clipboard": "^5.1.0",
24+
"react-dom": "^18.2.0",
2325
"react-modal": "^3.15.1",
24-
"react-router-dom": "5.2.0",
25-
"recharts": "2.1.10",
26-
"theme-ui": "0.6.0-canary.1544.5359f8a1e408a4dfeb74a9ae39688270286e534a.0",
27-
"wagmi": "^0.12.0"
26+
"react-router-dom": "^5.3.4",
27+
"recharts": "^2.12.1",
28+
"theme-ui": "^0.16.2",
29+
"viem": "^2.7.15",
30+
"wagmi": "^2.5.7"
2831
},
2932
"devDependencies": {
30-
"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
3133
"@testing-library/dom": "7.30.0",
3234
"@testing-library/jest-dom": "5.11.9",
3335
"@testing-library/react": "11.2.5",
3436
"@testing-library/user-event": "12.8.3",
35-
"@types/react": "17.0.3",
36-
"@types/react-copy-to-clipboard": "5.0.0",
37-
"@types/react-dom": "17.0.2",
37+
"@types/react": "^18.2.60",
38+
"@types/react-copy-to-clipboard": "^5.0.7",
39+
"@types/react-dom": "^18.2.19",
3840
"@types/react-modal": "^3.13.1",
39-
"@types/react-router-dom": "5.1.7",
41+
"@types/react-router-dom": "^5.3.3",
4042
"@types/testing-library__jest-dom": "5.9.5",
4143
"@types/testing-library__react": "10.2.0",
4244
"@types/testing-library__user-event": "4.2.0",
@@ -50,10 +52,10 @@
5052
"jsdom": "21",
5153
"node-fetch": "^3.3.1",
5254
"npm-run-all": "4.1.5",
53-
"rollup-plugin-polyfill-node": "^0.12.0",
5455
"source-map-explorer": "2.5.2",
55-
"typescript": "^5.0.4",
56+
"typescript": "^5.3.3",
5657
"vite": "^4.3.2",
58+
"vite-plugin-node-polyfills": "^0.21.0",
5759
"vitest": "^0.31.0",
5860
"yalc": "1.0.0-pre.53"
5961
},

‎packages/dev-frontend/src/App.tsx

Lines changed: 41 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from "react";
2-
import { createClient, WagmiConfig } from "wagmi";
2+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
3+
import { WagmiProvider, createConfig, fallback, http } from "wagmi";
34
import { mainnet, goerli, sepolia, localhost } from "wagmi/chains";
4-
import { ConnectKitProvider } from "connectkit";
5-
import { Flex, Heading, ThemeProvider, Paragraph, Link } from "theme-ui";
5+
import { ConnectKitProvider, getDefaultConfig } from "connectkit";
6+
import { Flex, Heading, ThemeUIProvider, Paragraph, Link } from "theme-ui";
67

7-
import getDefaultClient from "./connectkit/defaultClient";
88
import { LiquityProvider } from "./hooks/LiquityContext";
99
import { WalletConnector } from "./components/WalletConnector";
1010
import { TransactionProvider } from "./components/Transaction";
@@ -78,45 +78,61 @@ const UnsupportedNetworkFallback: React.FC = () => (
7878
</Flex>
7979
);
8080

81+
const queryClient = new QueryClient();
82+
8183
const App = () => {
8284
const config = useAsyncValue(getConfig);
8385
const loader = <AppLoader />;
8486

8587
return (
86-
<ThemeProvider theme={theme}>
88+
<ThemeUIProvider theme={theme}>
8789
{config.loaded && (
88-
<WagmiConfig
89-
client={createClient(
90-
getDefaultClient({
90+
<WagmiProvider
91+
config={createConfig(
92+
getDefaultConfig({
9193
appName: "Liquity",
94+
9295
chains:
9396
isDemoMode || import.meta.env.MODE === "test"
9497
? [localhost]
9598
: config.value.testnetOnly
9699
? [goerli, sepolia]
97100
: [mainnet, goerli, sepolia],
101+
98102
walletConnectProjectId: config.value.walletConnectProjectId,
99-
infuraId: config.value.infuraApiKey,
100-
alchemyId: config.value.alchemyApiKey
103+
104+
transports: {
105+
[mainnet.id]: fallback([
106+
...(config.value.infuraApiKey
107+
? [http(`https://mainnet.infura.io/v3/${config.value.infuraApiKey}`)]
108+
: []),
109+
...(config.value.alchemyApiKey
110+
? [http(`https://eth-mainnet.g.alchemy.com/v2/${config.value.alchemyApiKey}`)]
111+
: []),
112+
http()
113+
])
114+
}
101115
})
102116
)}
103117
>
104-
<ConnectKitProvider options={{ hideBalance: true }}>
105-
<WalletConnector loader={loader}>
106-
<LiquityProvider
107-
loader={loader}
108-
unsupportedNetworkFallback={<UnsupportedNetworkFallback />}
109-
unsupportedMainnetFallback={<UnsupportedMainnetFallback />}
110-
>
111-
<TransactionProvider>
112-
<LiquityFrontend loader={loader} />
113-
</TransactionProvider>
114-
</LiquityProvider>
115-
</WalletConnector>
116-
</ConnectKitProvider>
117-
</WagmiConfig>
118+
<QueryClientProvider client={queryClient}>
119+
<ConnectKitProvider options={{ hideBalance: true }}>
120+
<WalletConnector loader={loader}>
121+
<LiquityProvider
122+
loader={loader}
123+
unsupportedNetworkFallback={<UnsupportedNetworkFallback />}
124+
unsupportedMainnetFallback={<UnsupportedMainnetFallback />}
125+
>
126+
<TransactionProvider>
127+
<LiquityFrontend loader={loader} />
128+
</TransactionProvider>
129+
</LiquityProvider>
130+
</WalletConnector>
131+
</ConnectKitProvider>
132+
</QueryClientProvider>
133+
</WagmiProvider>
118134
)}
119-
</ThemeProvider>
135+
</ThemeUIProvider>
120136
);
121137
};
122138

‎packages/dev-frontend/src/components/ActionDescription.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Box, Flex, Text } from "theme-ui";
22

33
import { Icon } from "./Icon";
44

5-
export const ActionDescription: React.FC = ({ children }) => (
5+
export const ActionDescription: React.FC<React.PropsWithChildren> = ({ children }) => (
66
<Box
77
sx={{
88
display: "flex",
@@ -26,6 +26,6 @@ export const ActionDescription: React.FC = ({ children }) => (
2626
</Box>
2727
);
2828

29-
export const Amount: React.FC = ({ children }) => (
29+
export const Amount: React.FC<React.PropsWithChildren> = ({ children }) => (
3030
<Text sx={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{children}</Text>
3131
);

‎packages/dev-frontend/src/components/AppLoader.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Flex, Spinner, Heading } from "theme-ui";
22

33
export const AppLoader = () => (
44
<Flex sx={{ alignItems: "center", justifyContent: "center", height: "100vh" }}>
5-
<Spinner sx={{ m: 2, color: "text" }} size="32px" />
5+
<Spinner sx={{ m: 2, color: "text" }} size={32} />
66
<Heading>Loading...</Heading>
77
</Flex>
88
);

‎packages/dev-frontend/src/components/Badge.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import { Flex } from "theme-ui";
33

4-
export const Badge: React.FC = ({ children }) => {
4+
export const Badge: React.FC<React.PropsWithChildren> = ({ children }) => {
55
return <Flex variant="layout.badge">{children}</Flex>;
66
};

‎packages/dev-frontend/src/components/Bonds/context/BondAddressesContext.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const useBondAddresses = (): Addresses => {
3333
return context;
3434
};
3535

36-
export const BondAddressesProvider: React.FC = ({ children }) => {
36+
export const BondAddressesProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
3737
const chainId = useChainId();
3838

3939
const addresses: Addresses =

‎packages/dev-frontend/src/components/Bonds/context/BondViewProvider.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const transition = (view: BondView, event: BondEvent): BondView => {
4040

4141
export const EXAMPLE_NFT = "./bonds/egg-nft.png";
4242

43-
export const BondViewProvider: React.FC = props => {
43+
export const BondViewProvider: React.FC<React.PropsWithChildren> = props => {
4444
const { children } = props;
4545
const [view, setView] = useState<BondView>("IDLE");
4646
const viewRef = useRef<BondView>(view);

‎packages/dev-frontend/src/components/Bonds/context/BondsProvider.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { BondAddressesProvider } from "./BondAddressesContext";
22
import { BondViewProvider } from "./BondViewProvider";
33

4-
export const BondsProvider: React.FC = ({ children }) => {
4+
export const BondsProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
55
return (
66
<BondAddressesProvider>
77
<BondViewProvider>{children}</BondViewProvider>

‎packages/dev-frontend/src/components/Bonds/views/InfiniteEstimation.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { Decimal, Decimalish } from "@liquity/lib-base";
22
import { InfoIcon } from "../../InfoIcon";
33
import * as l from "../lexicon";
44

5-
type InfiniteEstimateProps = {
5+
type InfiniteEstimateProps = React.PropsWithChildren<{
66
estimate: Decimalish;
7-
};
7+
}>;
88

99
export const InfiniteEstimate: React.FC<InfiniteEstimateProps> = ({ estimate, children }) => {
1010
if (estimate.toString() !== Decimal.INFINITY.toString()) return <>{children ?? estimate}</>;

‎packages/dev-frontend/src/components/Bonds/views/actioning/actions/cancel/Cancel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const Cancel: React.FC = () => {
3232
</Button>
3333
<Button variant="primary" onClick={handleConfirmPressed} disabled={isProcessingTransaction}>
3434
{!isProcessingTransaction && <>Confirm</>}
35-
{isProcessingTransaction && <Spinner size="28px" sx={{ color: "white" }} />}
35+
{isProcessingTransaction && <Spinner size={28} sx={{ color: "white" }} />}
3636
</Button>
3737
</Flex>
3838
</>

‎packages/dev-frontend/src/components/Bonds/views/actioning/actions/claim/Claim.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const Claim: React.FC = () => {
3232
</Button>
3333
<Button variant="primary" onClick={handleConfirmPressed} disabled={isProcessingTransaction}>
3434
{!isProcessingTransaction && <>Confirm</>}
35-
{isProcessingTransaction && <Spinner size="28px" sx={{ color: "white" }} />}
35+
{isProcessingTransaction && <Spinner size={28} sx={{ color: "white" }} />}
3636
</Button>
3737
</Flex>
3838
</>

‎packages/dev-frontend/src/components/Bonds/views/creating/Details.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -313,14 +313,14 @@ export const Details: React.FC<DetailsProps> = ({ onBack }) => {
313313
<Button onClick={handleApprovePressed} disabled={isApprovingOrConfirming}>
314314
{!isApprovingOrConfirming && <>Approve</>}
315315
{isApprovingOrConfirming && (
316-
<Spinner size="28px" sx={{ color: "white", position: "absolute" }} />
316+
<Spinner size={28} sx={{ color: "white", position: "absolute" }} />
317317
)}
318318
</Button>
319319
)}
320320
{isInfiniteBondApproved && (
321321
<Button onClick={handleConfirmPressed} disabled={isApprovingOrConfirming}>
322322
{!isApprovingOrConfirming && <>Confirm</>}
323-
{isApprovingOrConfirming && <Spinner size="28px" sx={{ color: "white" }} />}
323+
{isApprovingOrConfirming && <Spinner size={28} sx={{ color: "white" }} />}
324324
</Button>
325325
)}
326326
</Flex>

‎packages/dev-frontend/src/components/Bonds/views/creating/Information.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { useWizard } from "../../../Wizard/Context";
1616
import { useBondView } from "../../context/BondViewContext";
1717
import { Details } from "./Details";
1818

19-
const InformationContainer: React.FC = ({ children }) => {
19+
const InformationContainer: React.FC<React.PropsWithChildren> = ({ children }) => {
2020
const { dispatchEvent } = useBondView();
2121
const handleDismiss = () => dispatchEvent("ABORT_PRESSED");
2222

‎packages/dev-frontend/src/components/Bonds/views/managing/DepositPane.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -232,15 +232,11 @@ export const DepositPane: React.FC = () => {
232232
isManageLiquidityPending
233233
}
234234
>
235-
{isManageLiquidityPending ? (
236-
<Spinner size="28px" sx={{ color: "white" }} />
237-
) : (
238-
<>Confirm</>
239-
)}
235+
{isManageLiquidityPending ? <Spinner size={28} sx={{ color: "white" }} /> : <>Confirm</>}
240236
</Button>
241237
) : (
242238
<Button variant="primary" onClick={handleApprovePressed} disabled={isApprovePending}>
243-
{isApprovePending ? <Spinner size="28px" sx={{ color: "white" }} /> : <>Approve</>}
239+
{isApprovePending ? <Spinner size={28} sx={{ color: "white" }} /> : <>Approve</>}
244240
</Button>
245241
)}
246242
</Flex>

‎packages/dev-frontend/src/components/Bonds/views/managing/PoolBalance.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { Text } from "theme-ui";
22

3-
export const PoolBalance: React.FC<{ symbol: string }> = ({ symbol, children }) => (
3+
type PoolBalanceProps = React.PropsWithChildren<{
4+
symbol: string;
5+
}>;
6+
7+
export const PoolBalance: React.FC<PoolBalanceProps> = ({ symbol, children }) => (
48
<>
59
<Text sx={{ fontWeight: "medium" }}>{children}</Text>
610
&nbsp;

‎packages/dev-frontend/src/components/Bonds/views/managing/RewardsPane.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const RewardsPane: React.FC = () => {
4141

4242
<Button variant="primary" onClick={handleConfirmPressed} disabled={!hasRewards}>
4343
{isManageLiquidityPending ? (
44-
<Spinner size="28px" sx={{ color: "white" }} />
44+
<Spinner size={28} sx={{ color: "white" }} />
4545
) : (
4646
<>Claim all rewards</>
4747
)}

‎packages/dev-frontend/src/components/Bonds/views/managing/StakePane.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export const StakePane: React.FC = () => {
9696
onClick={handleApprovePressed}
9797
disabled={stakeAmount.isZero || isApprovePending}
9898
>
99-
{isApprovePending ? <Spinner size="28px" sx={{ color: "white" }} /> : <>Approve</>}
99+
{isApprovePending ? <Spinner size={28} sx={{ color: "white" }} /> : <>Approve</>}
100100
</Button>
101101
)}
102102

@@ -106,11 +106,7 @@ export const StakePane: React.FC = () => {
106106
onClick={handleConfirmPressed}
107107
disabled={stakeAmount.isZero || isBalanceInsufficient || isManageLiquidityPending}
108108
>
109-
{isManageLiquidityPending ? (
110-
<Spinner size="28px" sx={{ color: "white" }} />
111-
) : (
112-
<>Confirm</>
113-
)}
109+
{isManageLiquidityPending ? <Spinner size={28} sx={{ color: "white" }} /> : <>Confirm</>}
114110
</Button>
115111
)}
116112
</Flex>

‎packages/dev-frontend/src/components/Bonds/views/managing/UnstakePane.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export const UnstakePane: React.FC = () => {
7474
onClick={handleConfirmPressed}
7575
disabled={unstakeAmount.isZero || isBalanceInsufficient || isManageLiquidityPending}
7676
>
77-
{isManageLiquidityPending ? <Spinner size="28px" sx={{ color: "white" }} /> : <>Confirm</>}
77+
{isManageLiquidityPending ? <Spinner size={28} sx={{ color: "white" }} /> : <>Confirm</>}
7878
</Button>
7979
</Flex>
8080
</>

‎packages/dev-frontend/src/components/Bonds/views/managing/WithdrawPane.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,11 @@ const tokenSymbol = new Map([
1515
[BLusdAmmTokenIndex.LUSD, "LUSD"]
1616
]);
1717

18-
const WithdrawnAmount: React.FC<{ symbol: string }> = ({ symbol, children }) => (
18+
type WithdrawnAmountProps = React.PropsWithChildren<{
19+
symbol: string;
20+
}>;
21+
22+
const WithdrawnAmount: React.FC<WithdrawnAmountProps> = ({ symbol, children }) => (
1923
<>
2024
<Text sx={{ fontWeight: "medium" }}>{children}</Text>
2125
&nbsp;
@@ -216,7 +220,7 @@ export const WithdrawPane: React.FC = () => {
216220
onClick={handleApprovePressed}
217221
disabled={burnLpTokens.isZero || isApprovePending}
218222
>
219-
{isApprovePending ? <Spinner size="28px" sx={{ color: "white" }} /> : <>Approve</>}
223+
{isApprovePending ? <Spinner size={28} sx={{ color: "white" }} /> : <>Approve</>}
220224
</Button>
221225
)}
222226

@@ -226,14 +230,10 @@ export const WithdrawPane: React.FC = () => {
226230
onClick={handleConfirmPressed}
227231
disabled={burnLpTokens.isZero || isBalanceInsufficient || isManageLiquidityPending}
228232
>
229-
{isManageLiquidityPending ? (
230-
<Spinner size="28px" sx={{ color: "white" }} />
231-
) : (
232-
<>Confirm</>
233-
)}
233+
{isManageLiquidityPending ? <Spinner size={28} sx={{ color: "white" }} /> : <>Confirm</>}
234234
</Button>
235235
)}
236236
</Flex>
237237
</>
238238
);
239-
};;
239+
};

0 commit comments

Comments
 (0)