use Sell/prepare when selling

Author: MananTank

packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts

@@ -124,7 +124,10 @@ export function usePaymentMethods(options: {
             ),
           )
         : sufficientBalanceQuotes;
-      return finalQuotes;
+      return finalQuotes.map((x) => ({
+        ...x,
+        action: "buy",
+      }));
     },
     queryKey: [
       "payment-methods",

packages/thirdweb/src/react/core/machines/paymentMachine.ts

@@ -22,6 +22,7 @@ type PaymentMode = "fund_wallet" | "direct_payment" | "transaction";
 export type PaymentMethod =
   | {
       type: "wallet";
+      action: "buy" | "sell";
       payerWallet: Wallet;
       originToken: TokenWithPrices;
       balance: bigint;

packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx

@@ -228,7 +228,10 @@ function getBridgeParams(args: {
       }
 
       return {
-        amount: toUnits(amount, destinationToken.decimals),
+        amount:
+          paymentMethod.action === "buy"
+            ? toUnits(amount, destinationToken.decimals)
+            : toUnits(amount, paymentMethod.originToken.decimals),
         client,
         destinationChainId: destinationToken.chainId,
         destinationTokenAddress: destinationToken.address,
@@ -240,7 +243,7 @@ function getBridgeParams(args: {
         receiver,
         sender:
           sender || paymentMethod.payerWallet.getAccount()?.address || receiver,
-        type: "buy",
+        type: paymentMethod.action,
       };
   }
 }

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

@@ -184,6 +184,43 @@ export function PaymentDetails({
               : undefined,
         };
       }
+
+      case "sell": {
+        const method =
+          paymentMethod.type === "wallet" ? paymentMethod : undefined;
+        if (!method) {
+          // can never happen
+          onError(new Error("Invalid payment method"));
+          return {
+            destinationAmount: "0",
+            destinationToken: undefined,
+            estimatedTime: 0,
+            originAmount: "0",
+            originToken: undefined,
+          };
+        }
+
+        return {
+          destinationAmount: formatTokenAmount(
+            preparedQuote.destinationAmount,
+            preparedQuote.steps[preparedQuote.steps.length - 1]
+              ?.destinationToken?.decimals ?? 18,
+          ),
+          destinationToken:
+            preparedQuote.steps[preparedQuote.steps.length - 1]
+              ?.destinationToken,
+          estimatedTime: preparedQuote.estimatedExecutionTimeMs,
+          originAmount: formatTokenAmount(
+            preparedQuote.originAmount,
+            method.originToken.decimals,
+          ),
+          originToken:
+            paymentMethod.type === "wallet"
+              ? paymentMethod.originToken
+              : undefined,
+        };
+      }
+
       case "onramp": {
         const method =
           paymentMethod.type === "fiat" ? paymentMethod : undefined;
@@ -214,7 +251,7 @@ export function PaymentDetails({
       }
       default: {
         throw new Error(
-          `Unsupported bridge prepare type: ${preparedQuote.type}`,
+          `Unsupported bridge prepare type: ${(preparedQuote as unknown as { type: string }).type}`,
         );
       }
     }

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

@@ -195,6 +195,7 @@ type SwapWidgetScreen =
       buyToken: TokenWithPrices;
       sellToken: TokenWithPrices;
       sellTokenBalance: bigint;
+      mode: "buy" | "sell";
     }
   | {
       id: "3:preview";
@@ -204,6 +205,7 @@ type SwapWidgetScreen =
       buyToken: TokenWithPrices;
       sellToken: TokenWithPrices;
       sellTokenBalance: bigint;
+      mode: "buy" | "sell";
     }
   | {
       id: "4:execute";
@@ -213,6 +215,7 @@ type SwapWidgetScreen =
       buyToken: TokenWithPrices;
       sellToken: TokenWithPrices;
       sellTokenBalance: bigint;
+      mode: "buy" | "sell";
     }
   | {
       id: "5:success";
@@ -272,12 +275,16 @@ function SwapWidgetContent(props: SwapWidgetProps) {
   }
 
   if (screen.id === "2:loading-quote") {
+    console.log("screen", screen);
     return (
       <QuoteLoader
-        amount={toTokens(
-          screen.quote.destinationAmount,
-          screen.buyToken.decimals,
-        )}
+        amount={
+          // if buy mode, set destination amount
+          // if sell mode, set origin amount
+          screen.mode === "buy"
+            ? toTokens(screen.quote.destinationAmount, screen.buyToken.decimals)
+            : toTokens(screen.quote.originAmount, screen.sellToken.decimals)
+        }
         onError={handleError}
         onQuoteReceived={(preparedQuote, request) => {
           setScreen({
@@ -302,6 +309,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {
           payerWallet: activeWalletInfo.activeWallet,
           balance: screen.sellTokenBalance,
           originToken: screen.sellToken,
+          action: screen.mode,
         }}
       />
     );
@@ -327,6 +335,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {
           payerWallet: activeWalletInfo.activeWallet,
           balance: screen.sellTokenBalance,
           originToken: screen.sellToken,
+          action: screen.mode,
         }}
         preparedQuote={screen.preparedQuote}
         uiOptions={{
@@ -352,6 +361,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {
         }}
         onCancel={props.onCancel}
         onComplete={(completedStatuses) => {
+          props.onSuccess?.();
           setScreen({
             ...screen,
             id: "5:success",
@@ -386,17 +396,19 @@ function SwapWidgetContent(props: SwapWidgetProps) {
   }
 
   if (screen.id === "error") {
-    <ErrorBanner
-      client={props.client}
-      error={screen.error}
-      onCancel={() => {
-        setScreen({ id: "1:swap-ui" });
-        props.onCancel?.();
-      }}
-      onRetry={() => {
-        setScreen({ id: "1:swap-ui" });
-      }}
-    />;
+    return (
+      <ErrorBanner
+        client={props.client}
+        error={screen.error}
+        onCancel={() => {
+          setScreen({ id: "1:swap-ui" });
+          props.onCancel?.();
+        }}
+        onRetry={() => {
+          setScreen({ id: "1:swap-ui" });
+        }}
+      />
+    );
   }
 
   return null;

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

@@ -64,6 +64,7 @@ type SwapUIProps = {
       buyToken: TokenWithPrices;
       sellTokenBalance: bigint;
       sellToken: TokenWithPrices;
+      mode: "buy" | "sell";
     },
   ) => void;
   prefill:
@@ -364,10 +365,9 @@ function SwapUIBase(
     sellTokenBalanceQuery.data?.value &&
     sellTokenWithPrices?.decimals &&
     props.amountSelection.amount &&
+    !!sellTokenAmount &&
     sellTokenBalanceQuery.data.value <
-      Number(
-        toUnits(props.amountSelection.amount, sellTokenWithPrices.decimals),
-      )
+      Number(toUnits(sellTokenAmount, sellTokenWithPrices.decimals))
   );
 
   return (
@@ -475,6 +475,7 @@ function SwapUIBase(
                 buyToken: buyTokenWithPrices,
                 sellToken: sellTokenWithPrices,
                 sellTokenBalance: sellTokenBalanceQuery.data.value,
+                mode: props.amountSelection.type,
               });
             }
           }}