TransactionPayment component

Author: joaquim-verges

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

@@ -21,6 +21,7 @@ import { ErrorBanner } from "./ErrorBanner.js";
 import { FundWallet } from "./FundWallet.js";
 import { QuoteLoader } from "./QuoteLoader.js";
 import { StepRunner } from "./StepRunner.js";
+import { TransactionPayment } from "./TransactionPayment.js";
 import { PaymentDetails } from "./payment-details/PaymentDetails.js";
 import { PaymentSelection } from "./payment-selection/PaymentSelection.js";
 import { SuccessScreen } from "./payment-success/SuccessScreen.js";
@@ -217,6 +218,15 @@ export function BridgeOrchestrator({
         />
       )}
 
+      {state.value === "init" && uiOptions.mode === "transaction" && (
+        <TransactionPayment
+          transaction={uiOptions.transaction}
+          client={client}
+          onContinue={handleRequirementsResolved}
+          connectOptions={connectOptions}
+        />
+      )}
+
       {state.value === "methodSelection" &&
         state.context.destinationToken &&
         state.context.destinationAmount && (

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

@@ -266,7 +266,7 @@ export function DirectPayment({
           <Spacer y="md" />
 
           <PoweredByThirdweb />
-          <Spacer y="md" />
+          <Spacer y="lg" />
         </Container>
       </Container>
     </Container>

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

@@ -115,9 +115,10 @@ export function FundWallet({
   };
 
   return (
-    <Container flex="column" p="lg">
+    <Container flex="column" px="lg">
+      <Spacer y="lg" />
       {/* Header */}
-      <ModalHeader title="Top up your wallet" />
+      <ModalHeader title="Top up your wallet" leftAligned />
 
       <Spacer y="xl" />
 
@@ -337,9 +338,10 @@ export function FundWallet({
         />
       )}
 
-      <Spacer y="lg" />
+      <Spacer y="md" />
 
       <PoweredByThirdweb />
+      <Spacer y="lg" />
     </Container>
   );
 }