WT-1933 Bridge form & available balances (#1214)

Co-authored-by: Mikhala <[email protected]> Co-authored-by: Mikhala <[email protected]>
immutable · Nov 30, 2023 · 8bb064f · 8bb064f
1 parent 0b403f7
commit 8bb064f
Show file tree

Hide file tree

Showing 10 changed files with 284 additions and 193 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelector.tsx b/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelector.tsx
@@ -1,6 +1,7 @@
 import {
   Body,
-  BottomSheet, Box,
+  BottomSheet,
+  Box,
 } from '@biom3/react';
 import { CoinSelectorOption, CoinSelectorOptionProps } from './CoinSelectorOption';
 import { selectOptionsContainerStyles } from './CoinSelectorStyles';

diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.tsx
@@ -73,7 +73,7 @@ export function TextInputForm({
         onFocus={handleOnFocus}
         disabled={disabled}
         hideClearValueButton
-        sx={{ minWidth: 'base.spacing.x46' }}
+        sx={{ minWidth: '100%' }}
       >
         {maxButtonClick && (
           <TextInput.Button

diff --git a/packages/checkout/widgets-lib/src/context/crypto-fiat-context/CryptoFiatProvider.tsx b/packages/checkout/widgets-lib/src/context/crypto-fiat-context/CryptoFiatProvider.tsx
@@ -38,7 +38,7 @@ export function CryptoFiatProvider({ environment, children }: CryptoFiatProvider
   }, []);
 
   useEffect(() => {
-    if (!cryptoFiat || tokenSymbols.length === 0 || !fiatSymbol) return;
+    if (!cryptoFiat || !fiatSymbol) return;
 
     (async () => {
       const conversions = await getCryptoToFiatConversion(

diff --git a/packages/checkout/widgets-lib/src/context/view-context/XBridgeViewContextTypes.ts b/packages/checkout/widgets-lib/src/context/view-context/XBridgeViewContextTypes.ts
@@ -2,12 +2,26 @@ import { ViewType } from './ViewType';
 
 export enum XBridgeWidgetViews {
   BRIDGE_WALLET_SELECTION = 'BRIDGE_WALLET_SELECTION',
+  BRIDGE_FORM = 'BRIDGE_FORM',
+  BRIDGE_REVIEW = 'BRIDGE_REVIEW',
 }
 
 export type XBridgeWidgetView =
-  | XBridgeCrossWalletSelection;
+  | XBridgeCrossWalletSelection
+  | XBridgeForm
+  | XBridgeReview;
 
 interface XBridgeCrossWalletSelection extends ViewType {
   type: XBridgeWidgetViews.BRIDGE_WALLET_SELECTION,
   data?: {}
 }
+
+interface XBridgeForm extends ViewType {
+  type: XBridgeWidgetViews.BRIDGE_FORM,
+  data?: {}
+}
+
+interface XBridgeReview extends ViewType {
+  type: XBridgeWidgetViews.BRIDGE_REVIEW,
+  data?: {}
+}
diff --git a/packages/checkout/widgets-lib/src/resources/text/textConfig.ts b/packages/checkout/widgets-lib/src/resources/text/textConfig.ts
@@ -203,6 +203,13 @@ export const text = {
       header: {
         title: 'Move coins',
       },
+      xBridgeContent: {
+        title: 'How much would you like to move?',
+      },
+      xBridgeFees: {
+        title: 'Gas Fee',
+        fiatPricePrefix: '~ USD',
+      },
       content: {
         title: 'What would you like to move from Ethereum to Immutable zkEVM?',
         fiatPricePrefix: 'Approx USD',
@@ -213,7 +220,7 @@ export const text = {
           inputPlaceholder: '0',
           selectorTitle: 'What would you like to move?',
         },
-        buttonText: 'Move',
+        buttonText: 'Review',
       },
       fees: {
         title: 'Fees subtotal',

diff --git a/packages/checkout/widgets-lib/src/widgets/x-bridge/XBridgeWidget.tsx b/packages/checkout/widgets-lib/src/widgets/x-bridge/XBridgeWidget.tsx
@@ -15,9 +15,14 @@ import {
   initialViewState,
   viewReducer,
 } from '../../context/view-context/ViewContext';
-import { XBridgeContext, xBridgeReducer, initialXBridgeState } from './context/XBridgeContext';
+import {
+  XBridgeContext,
+  xBridgeReducer,
+  initialXBridgeState,
+} from './context/XBridgeContext';
 import { widgetTheme } from '../../lib/theme';
 import { BridgeWalletSelection } from './views/BridgeWalletSelection';
+import { Bridge } from './views/Bridge';
 
 export type BridgeWidgetInputs = BridgeWidgetParams & {
   config: StrongCheckoutWidgetsConfig,
@@ -57,6 +62,9 @@ export function XBridgeWidget({
             {viewState.view.type === XBridgeWidgetViews.BRIDGE_WALLET_SELECTION && (
               <BridgeWalletSelection />
             )}
+            {viewState.view.type === XBridgeWidgetViews.BRIDGE_FORM && (
+              <Bridge />
+            )}
           </CryptoFiatProvider>
         </XBridgeContext.Provider>
       </ViewContext.Provider>