Skip to content

Commit c917607

Browse files
MananTankMananTank
committed
screen cleanup
1 parent 50c1a19 commit c917607

File tree

3 files changed

+90
-96
lines changed

3 files changed

+90
-96
lines changed

‎packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx‎

Lines changed: 35 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { useMemo, useState } from "react";
3+
import { useState } from "react";
44
import type { Buy, Sell } from "../../../../../bridge/index.js";
55
import type { TokenWithPrices } from "../../../../../bridge/types/Token.js";
66
import type { ThirdwebClient } from "../../../../../client/client.js";
@@ -12,18 +12,14 @@ import type {
1212
BridgePrepareRequest,
1313
BridgePrepareResult,
1414
} from "../../../../core/hooks/useBridgePrepare.js";
15-
import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
16-
import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
17-
import { useActiveWalletChain } from "../../../../core/hooks/wallets/useActiveWalletChain.js";
1815
import { webWindowAdapter } from "../../../adapters/WindowAdapter.js";
19-
import { useConnectLocale } from "../../ConnectWallet/locale/getConnectLocale.js";
2016
import { EmbedContainer } from "../../ConnectWallet/Modal/ConnectEmbed.js";
2117
import { DynamicHeight } from "../../components/DynamicHeight.js";
22-
import { Spinner } from "../../components/Spinner.js";
2318
import type { LocaleId } from "../../types.js";
2419
import { PaymentDetails } from "../payment-details/PaymentDetails.js";
2520
import { QuoteLoader } from "../QuoteLoader.js";
2621
import { StepRunner } from "../StepRunner.js";
22+
import { useActiveWalletInfo } from "./hooks.js";
2723
import { SwapUI } from "./swap-ui.js";
2824
import type { SwapWidgetConnectOptions } from "./types.js";
2925
import { useBridgeChains } from "./use-bridge-chains.js";
@@ -85,117 +81,96 @@ export function SwapWidgetContainer(props: {
8581

8682
type SwapWidgetScreen =
8783
| { id: "1:swap-ui" }
88-
| { id: "2:loading-quote"; quote: Buy.quote.Result | Sell.quote.Result }
84+
| {
85+
id: "2:loading-quote";
86+
quote: Buy.quote.Result | Sell.quote.Result;
87+
buyToken: TokenWithPrices;
88+
sellToken: TokenWithPrices;
89+
}
8990
| {
9091
id: "3:preview";
9192
preparedQuote: BridgePrepareResult;
9293
request: BridgePrepareRequest;
9394
quote: Buy.quote.Result | Sell.quote.Result;
95+
buyToken: TokenWithPrices;
96+
sellToken: TokenWithPrices;
9497
}
9598
| {
9699
id: "4:execute";
97100
request: BridgePrepareRequest;
98101
quote: Buy.quote.Result | Sell.quote.Result;
99102
preparedQuote: BridgePrepareResult;
103+
buyToken: TokenWithPrices;
104+
sellToken: TokenWithPrices;
100105
};
101106

102107
function SwapWidgetContent(props: SwapWidgetProps) {
103108
const [screen, setScreen] = useState<SwapWidgetScreen>({ id: "1:swap-ui" });
104-
const connectLocaleQuery = useConnectLocale(props.locale || "en_US");
105109
const activeWalletInfo = useActiveWalletInfo();
106-
const [buyToken, setBuyToken] = useState<TokenWithPrices | undefined>(
107-
undefined,
108-
);
109-
const [sellToken, setSellToken] = useState<TokenWithPrices | undefined>(
110-
undefined,
111-
);
112110

113111
// preload requests
114112
useBridgeChains(props.client);
115113

116-
if (!connectLocaleQuery.data) {
117-
return (
118-
<div
119-
style={{
120-
alignItems: "center",
121-
display: "flex",
122-
justifyContent: "center",
123-
minHeight: "350px",
124-
}}
125-
>
126-
<Spinner color="secondaryText" size="xl" />
127-
</div>
128-
);
129-
}
130-
131-
if (screen.id === "1:swap-ui") {
114+
// if wallet suddenly disconnects, show screen 1
115+
if (screen.id === "1:swap-ui" || !activeWalletInfo) {
132116
return (
133117
<SwapUI
134118
client={props.client}
135119
theme={props.theme || "dark"}
136-
buyToken={buyToken}
137-
sellToken={sellToken}
138-
setBuyToken={setBuyToken}
139-
setSellToken={setSellToken}
140120
connectOptions={props.connectOptions}
141121
currency={props.currency || "USD"}
142122
activeWalletInfo={activeWalletInfo}
143-
onSwap={(quote) => {
144-
setScreen({ quote, id: "2:loading-quote" });
123+
onSwap={(quote, selection) => {
124+
setScreen({
125+
quote,
126+
id: "2:loading-quote",
127+
...selection,
128+
});
145129
}}
146130
/>
147131
);
148132
}
149133

150-
if (
151-
screen.id === "2:loading-quote" &&
152-
// TODO - cleanup
153-
activeWalletInfo &&
154-
sellToken &&
155-
buyToken
156-
) {
134+
if (screen.id === "2:loading-quote") {
157135
return (
158136
<QuoteLoader
159-
amount={toTokens(screen.quote.destinationAmount, buyToken.decimals)}
137+
amount={toTokens(
138+
screen.quote.destinationAmount,
139+
screen.buyToken.decimals,
140+
)}
160141
onError={() => {
161142
// TODO
162143
}}
163144
onQuoteReceived={(preparedQuote, request) => {
164145
setScreen({
146+
...screen,
165147
id: "3:preview",
166148
preparedQuote,
167149
request,
168-
quote: screen.quote,
169150
});
170151
// TODO
171152
}}
172153
receiver={activeWalletInfo.activeAccount.address}
173154
onBack={() => setScreen({ id: "1:swap-ui" })}
174155
uiOptions={{
175-
destinationToken: buyToken,
156+
destinationToken: screen.buyToken,
176157
mode: "fund_wallet",
177158
currency: props.currency,
178159
}}
179160
client={props.client}
180-
destinationToken={buyToken}
161+
destinationToken={screen.buyToken}
181162
paymentMethod={{
182163
quote: screen.quote,
183164
type: "wallet",
184165
payerWallet: activeWalletInfo.activeWallet,
185166
balance: 0n, // TODO - what is this?
186-
originToken: sellToken,
167+
originToken: screen.sellToken,
187168
}}
188169
/>
189170
);
190171
}
191172

192-
if (
193-
screen.id === "3:preview" &&
194-
// TODO - cleanup
195-
activeWalletInfo &&
196-
sellToken &&
197-
buyToken
198-
) {
173+
if (screen.id === "3:preview") {
199174
return (
200175
<PaymentDetails
201176
client={props.client}
@@ -204,10 +179,8 @@ function SwapWidgetContent(props: SwapWidgetProps) {
204179
}}
205180
onConfirm={() => {
206181
setScreen({
182+
...screen,
207183
id: "4:execute",
208-
preparedQuote: screen.preparedQuote,
209-
request: screen.request,
210-
quote: screen.quote,
211184
});
212185
}}
213186
onError={(_error) => {
@@ -218,33 +191,27 @@ function SwapWidgetContent(props: SwapWidgetProps) {
218191
type: "wallet",
219192
payerWallet: activeWalletInfo.activeWallet,
220193
balance: 0n, // TODO - what is this?
221-
originToken: sellToken,
194+
originToken: screen.sellToken,
222195
}}
223196
preparedQuote={screen.preparedQuote}
224197
uiOptions={{
225-
destinationToken: buyToken,
198+
destinationToken: screen.buyToken,
226199
mode: "fund_wallet",
227200
currency: props.currency,
228201
}}
229202
/>
230203
);
231204
}
232205

233-
if (
234-
screen.id === "4:execute" &&
235-
// TODO - cleanup
236-
activeWalletInfo
237-
) {
206+
if (screen.id === "4:execute") {
238207
return (
239208
<StepRunner
240209
autoStart={true}
241210
client={props.client}
242211
onBack={() => {
243212
setScreen({
213+
...screen,
244214
id: "3:preview",
245-
preparedQuote: screen.preparedQuote,
246-
request: screen.request,
247-
quote: screen.quote,
248215
});
249216
}}
250217
onCancel={() => {
@@ -262,19 +229,3 @@ function SwapWidgetContent(props: SwapWidgetProps) {
262229

263230
return null;
264231
}
265-
266-
function useActiveWalletInfo() {
267-
const activeAccount = useActiveAccount();
268-
const activeWallet = useActiveWallet();
269-
const activeChain = useActiveWalletChain();
270-
271-
return useMemo(() => {
272-
return activeAccount && activeWallet && activeChain
273-
? {
274-
activeChain,
275-
activeWallet,
276-
activeAccount,
277-
}
278-
: undefined;
279-
}, [activeAccount, activeWallet, activeChain]);
280-
}

‎packages/thirdweb/src/react/web/ui/Bridge/swap-widget/hooks.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { useMemo } from "react";
2+
import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
3+
import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
4+
import { useActiveWalletChain } from "../../../../core/hooks/wallets/useActiveWalletChain.js";
5+
import type { ActiveWalletInfo } from "./types.js";
6+
7+
export function useActiveWalletInfo(): ActiveWalletInfo | undefined {
8+
const activeAccount = useActiveAccount();
9+
const activeWallet = useActiveWallet();
10+
const activeChain = useActiveWalletChain();
11+
12+
return useMemo(() => {
13+
return activeAccount && activeWallet && activeChain
14+
? {
15+
activeChain,
16+
activeWallet,
17+
activeAccount,
18+
}
19+
: undefined;
20+
}, [activeAccount, activeWallet, activeChain]);
21+
}

‎packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx‎

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -40,25 +40,38 @@ type SwapUIProps = {
4040
theme: Theme | "light" | "dark";
4141
connectOptions: SwapWidgetConnectOptions | undefined;
4242
currency: SupportedFiatCurrency;
43-
buyToken: TokenWithPrices | undefined;
44-
sellToken: TokenWithPrices | undefined;
45-
setBuyToken: (token: TokenWithPrices | undefined) => void;
46-
setSellToken: (token: TokenWithPrices | undefined) => void;
47-
onSwap: (quote: Buy.quote.Result | Sell.quote.Result) => void;
43+
onSwap: (
44+
quote: Buy.quote.Result | Sell.quote.Result,
45+
selection: {
46+
buyToken: TokenWithPrices;
47+
sellToken: TokenWithPrices;
48+
},
49+
) => void;
4850
};
4951

5052
export function SwapUI(props: SwapUIProps) {
5153
const [screen, setScreen] = useState<
5254
"base" | "select-buy-token" | "select-sell-ui"
5355
>("base");
5456

57+
const [buyToken, setBuyToken] = useState<TokenWithPrices | undefined>(
58+
undefined,
59+
);
60+
const [sellToken, setSellToken] = useState<TokenWithPrices | undefined>(
61+
undefined,
62+
);
63+
5564
if (screen === "base") {
5665
return (
5766
<SwapUIBase
5867
{...props}
5968
onSelectToken={(type) => {
6069
setScreen(type === "buy" ? "select-buy-token" : "select-sell-ui");
6170
}}
71+
buyToken={buyToken}
72+
sellToken={sellToken}
73+
setBuyToken={setBuyToken}
74+
setSellToken={setSellToken}
6275
/>
6376
);
6477
}
@@ -68,9 +81,9 @@ export function SwapUI(props: SwapUIProps) {
6881
<SelectBuyToken
6982
onBack={() => setScreen("base")}
7083
client={props.client}
71-
selectedToken={props.buyToken}
84+
selectedToken={buyToken}
7285
setSelectedToken={(token) => {
73-
props.setBuyToken(token);
86+
setBuyToken(token);
7487
setScreen("base");
7588
}}
7689
/>
@@ -82,9 +95,9 @@ export function SwapUI(props: SwapUIProps) {
8295
<SelectSellToken
8396
onBack={() => setScreen("base")}
8497
client={props.client}
85-
selectedToken={props.sellToken}
98+
selectedToken={sellToken}
8699
setSelectedToken={(token) => {
87-
props.setSellToken(token);
100+
setSellToken(token);
88101
setScreen("base");
89102
}}
90103
activeWalletInfo={props.activeWalletInfo}
@@ -96,7 +109,13 @@ export function SwapUI(props: SwapUIProps) {
96109
}
97110

98111
export function SwapUIBase(
99-
props: SwapUIProps & { onSelectToken: (type: "buy" | "sell") => void },
112+
props: SwapUIProps & {
113+
onSelectToken: (type: "buy" | "sell") => void;
114+
buyToken: TokenWithPrices | undefined;
115+
sellToken: TokenWithPrices | undefined;
116+
setBuyToken: (token: TokenWithPrices | undefined) => void;
117+
setSellToken: (token: TokenWithPrices | undefined) => void;
118+
},
100119
) {
101120
const [mode, setMode] = useState<"buy" | "sell">("buy");
102121
const [_buyTokenAmount, setBuyTokenAmount] = useState<string>("");
@@ -242,8 +261,11 @@ export function SwapUIBase(
242261
disabled={!preparedResultQuery.data || preparedResultQuery.isFetching}
243262
fullWidth
244263
onClick={() => {
245-
if (preparedResultQuery.data) {
246-
props.onSwap(preparedResultQuery.data);
264+
if (preparedResultQuery.data && props.buyToken && props.sellToken) {
265+
props.onSwap(preparedResultQuery.data, {
266+
buyToken: props.buyToken,
267+
sellToken: props.sellToken,
268+
});
247269
}
248270
}}
249271
style={{

0 commit comments

Comments
 (0)