@reown/appkit-react-native 2.0.0 → 2.0.2

package/lib/commonjs/views/w3m-networks-view/index.js

@@ -7,26 +7,40 @@ exports.NetworksView = NetworksView;
 var _reactNative = require("react-native");
 var _appkitUiReactNative = require("@reown/appkit-ui-react-native");
 var _appkitCoreReactNative = require("@reown/appkit-core-react-native");
-var _useCustomDimensions = require("../../hooks/useCustomDimensions");
 var _styles = _interopRequireDefault(require("./styles"));
 var _AppKitContext = require("../../AppKitContext");
+var _valtio = require("valtio");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable valtio/state-snapshot-rule */
+
 function NetworksView() {
   const {
-    caipNetwork
-  } = _appkitCoreReactNative.NetworkController.state;
+    height,
+    width
+  } = (0, _reactNative.useWindowDimensions)();
+  const windowSize = Math.min(height, width);
+  const {
+    networkImages
+  } = (0, _valtio.useSnapshot)(_appkitCoreReactNative.AssetController.state);
+  const {
+    activeNetwork,
+    isConnected
+  } = (0, _valtio.useSnapshot)(_appkitCoreReactNative.ConnectionsController.state);
   const imageHeaders = _appkitCoreReactNative.ApiController._getApiHeaders();
   const {
-    maxWidth: width,
     padding
-  } = (0, _useCustomDimensions.useCustomDimensions)();
+  } = (0, _appkitUiReactNative.useCustomDimensions)();
   const numColumns = 4;
-  const usableWidth = width - _appkitUiReactNative.Spacing.xs * 2 - _appkitUiReactNative.Spacing['4xs'];
+  const usableWidth = windowSize - _appkitUiReactNative.Spacing.xs * 2 - _appkitUiReactNative.Spacing['4xs'];
   const itemWidth = Math.abs(Math.trunc(usableWidth / numColumns));
   const itemGap = Math.abs(Math.trunc((usableWidth - numColumns * _appkitUiReactNative.CardSelectWidth) / numColumns) / 2);
   const {
-    switchNetwork
-  } = (0, _AppKitContext.useAppKit)();
+    switchNetwork,
+    back
+  } = (0, _AppKitContext.useInternalAppKit)();
+  const networkList = _appkitCoreReactNative.ConnectionsController.getAvailableNetworks();
+  const connectedNetworks = _appkitCoreReactNative.ConnectionsController.getConnectedNetworks();
   const onHelpPress = () => {
     _appkitCoreReactNative.RouterController.push('WhatIsANetwork');
     _appkitCoreReactNative.EventsController.sendEvent({
@@ -35,60 +49,70 @@ function NetworksView() {
     });
   };
   const networksTemplate = () => {
-    //TODO: should show requested networks disabled
-    // const networks = CoreHelperUtil.sortNetworks(approvedCaipNetworkIds, requestedCaipNetworks);
-    const networks = _appkitCoreReactNative.ConnectionsController.getConnectedNetworks();
     const onNetworkPress = async network => {
-      await switchNetwork(network);
-      _appkitCoreReactNative.RouterController.goBack();
+      if (!isConnected || connectedNetworks.some(connectedNetwork => connectedNetwork.caipNetworkId === network.caipNetworkId)) {
+        await switchNetwork(network);
+        back();
+      } else {
+        _appkitCoreReactNative.RouterController.push('SwitchNetwork', {
+          network
+        });
+      }
     };
-    return networks.map(network => {
-      return /*#__PURE__*/React.createElement(_reactNative.View, {
-        key: network.id,
+    return networkList.map(network => {
+      const isSelected = isConnected ? activeNetwork?.caipNetworkId === network.caipNetworkId : _appkitCoreReactNative.OptionsController.state.defaultNetwork?.caipNetworkId === network.caipNetworkId;
+      const networkImage = _appkitCoreReactNative.AssetUtil.getNetworkImage(network, networkImages);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [_styles.default.itemContainer, {
           width: itemWidth,
           marginVertical: itemGap
-        }]
-      }, /*#__PURE__*/React.createElement(_appkitUiReactNative.CardSelect, {
-        testID: `w3m-network-switch-${network.name ?? network.id}`,
-        name: network.name ?? 'Unknown',
-        type: "network",
-        imageSrc: _appkitCoreReactNative.AssetUtil.getNetworkImage(network.id),
-        imageHeaders: imageHeaders
-        // disabled={!supportsAllNetworks && !approvedCaipNetworkIds?.includes(network.caipNetworkId)}
-        ,
-        selected: caipNetwork?.id === network.id,
-        onPress: () => onNetworkPress(network)
-      }));
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.CardSelect, {
+          testID: `w3m-network-switch-${network.name ?? network.id}`,
+          name: network.name ?? 'Unknown',
+          type: "network",
+          imageSrc: networkImage,
+          imageHeaders: imageHeaders,
+          selected: isSelected,
+          onPress: () => onNetworkPress(network)
+        })
+      }, network.id);
     });
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.ScrollView, {
-    bounces: false,
-    fadingEdgeLength: 20,
-    style: {
-      paddingHorizontal: padding
-    }
-  }, /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    padding: ['xs', 'xs', 's', 'xs']
-  }, networksTemplate())), /*#__PURE__*/React.createElement(_appkitUiReactNative.Separator, null), /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    padding: ['s', 's', '3xl', 's'],
-    alignItems: "center",
-    alignSelf: "center",
-    style: {
-      width
-    }
-  }, /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-    variant: "small-400",
-    color: "fg-300",
-    center: true
-  }, "Your connected wallet may not support some of the networks available for this dApp"), /*#__PURE__*/React.createElement(_appkitUiReactNative.Link, {
-    size: "sm",
-    iconLeft: "helpCircle",
-    onPress: onHelpPress,
-    style: _styles.default.helpButton,
-    testID: "what-is-a-network-button"
-  }, "What is a network?")));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      bounces: false,
+      fadingEdgeLength: 20,
+      style: {
+        paddingHorizontal: padding
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.FlexView, {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        padding: "xs",
+        children: networksTemplate()
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Separator, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
+      padding: "s",
+      alignItems: "center",
+      alignSelf: "center",
+      style: {
+        width
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
+        variant: "small-400",
+        color: "fg-300",
+        center: true,
+        children: "Your connected wallet may not support some of the networks available for this dApp"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Link, {
+        size: "sm",
+        iconLeft: "helpCircle",
+        onPress: onHelpPress,
+        style: _styles.default.helpButton,
+        testID: "what-is-a-network-button",
+        children: "What is a network?"
+      })]
+    })]
+  });
 }
 //# sourceMappingURL=index.js.map

package/lib/commonjs/views/w3m-networks-view/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_appkitUiReactNative","_appkitCoreReactNative","_useCustomDimensions","_styles","_interopRequireDefault","_AppKitContext","e","__esModule","default","NetworksView","caipNetwork","NetworkController","state","imageHeaders","ApiController","_getApiHeaders","maxWidth","width","padding","useCustomDimensions","numColumns","usableWidth","Spacing","xs","itemWidth","Math","abs","trunc","itemGap","CardSelectWidth","switchNetwork","useAppKit","onHelpPress","RouterController","push","EventsController","sendEvent","type","event","networksTemplate","networks","ConnectionsController","getConnectedNetworks","onNetworkPress","network","goBack","map","React","createElement","View","key","id","style","styles","itemContainer","marginVertical","CardSelect","testID","name","imageSrc","AssetUtil","getNetworkImage","selected","onPress","Fragment","ScrollView","bounces","fadingEdgeLength","paddingHorizontal","FlexView","flexDirection","flexWrap","Separator","alignItems","alignSelf","Text","variant","color","center","Link","size","iconLeft","helpButton"],"sourceRoot":"../../../../src","sources":["views/w3m-networks-view/index.tsx"],"mappings":"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"}
+{"version":3,"names":["_reactNative","require","_appkitUiReactNative","_appkitCoreReactNative","_styles","_interopRequireDefault","_AppKitContext","_valtio","_jsxRuntime","e","__esModule","default","NetworksView","height","width","useWindowDimensions","windowSize","Math","min","networkImages","useSnapshot","AssetController","state","activeNetwork","isConnected","ConnectionsController","imageHeaders","ApiController","_getApiHeaders","padding","useCustomDimensions","numColumns","usableWidth","Spacing","xs","itemWidth","abs","trunc","itemGap","CardSelectWidth","switchNetwork","back","useInternalAppKit","networkList","getAvailableNetworks","connectedNetworks","getConnectedNetworks","onHelpPress","RouterController","push","EventsController","sendEvent","type","event","networksTemplate","onNetworkPress","network","some","connectedNetwork","caipNetworkId","map","isSelected","OptionsController","defaultNetwork","networkImage","AssetUtil","getNetworkImage","jsx","View","style","styles","itemContainer","marginVertical","children","CardSelect","testID","name","id","imageSrc","selected","onPress","jsxs","Fragment","ScrollView","bounces","fadingEdgeLength","paddingHorizontal","FlexView","flexDirection","flexWrap","Separator","alignItems","alignSelf","Text","variant","color","center","Link","size","iconLeft","helpButton"],"sourceRoot":"../../../../src","sources":["views/w3m-networks-view/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/views/w3m-networks-view/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_appkitUiReactNative","require","_reactNative","_default","exports","default","StyleSheet","create","itemContainer","alignItems","justifyContent","helpButton","marginTop","Spacing","s"],"sourceRoot":"../../../../src","sources":["views/w3m-networks-view/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,oBAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAA0C,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAE3BC,uBAAU,CAACC,MAAM,CAAC;EAC/BC,aAAa,EAAE;IACbC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDC,UAAU,EAAE;IACVC,SAAS,EAAEC,4BAAO,CAACC;EACrB;AACF,CAAC,CAAC"}
+{"version":3,"names":["_appkitUiReactNative","require","_reactNative","_default","exports","default","StyleSheet","create","itemContainer","alignItems","justifyContent","helpButton","marginTop","Spacing","s"],"sourceRoot":"../../../../src","sources":["views/w3m-networks-view/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,oBAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAA0C,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAE3BC,uBAAU,CAACC,MAAM,CAAC;EAC/BC,aAAa,EAAE;IACbC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDC,UAAU,EAAE;IACVC,SAAS,EAAEC,4BAAO,CAACC;EACrB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/views/w3m-onramp-checkout-view/index.js

@@ -9,11 +9,18 @@ var _appkitUiReactNative = require("@reown/appkit-ui-react-native");
 var _reactNative = require("react-native");
 var _valtio = require("valtio");
 var _appkitCommonReactNative = require("@reown/appkit-common-react-native");
+var _jsxRuntime = require("react/jsx-runtime");
 function OnRampCheckoutView() {
   const Theme = (0, _appkitUiReactNative.useTheme)();
+  const {
+    padding
+  } = (0, _appkitUiReactNative.useCustomDimensions)();
   const {
     themeMode
   } = (0, _valtio.useSnapshot)(_appkitCoreReactNative.ThemeController.state);
+  const {
+    networkImages
+  } = (0, _valtio.useSnapshot)(_appkitCoreReactNative.AssetController.state);
   const {
     selectedQuote,
     selectedPaymentMethod,
@@ -22,7 +29,7 @@ function OnRampCheckoutView() {
   const {
     activeNetwork
   } = (0, _valtio.useSnapshot)(_appkitCoreReactNative.ConnectionsController.state);
-  const networkImage = _appkitCoreReactNative.AssetUtil.getNetworkImage(activeNetwork?.id);
+  const networkImage = _appkitCoreReactNative.AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const value = _appkitCommonReactNative.NumberUtil.roundNumber(selectedQuote?.destinationAmount ?? 0, 6, 5);
   const symbol = selectedQuote?.destinationCurrencyCode;
   const paymentLogo = selectedPaymentMethod?.logos[themeMode ?? 'light'];
@@ -34,146 +41,193 @@ function OnRampCheckoutView() {
   const onConfirm = () => {
     _appkitCoreReactNative.RouterController.push('OnRampLoading');
   };
-  return /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    padding: ['2xl', 'l', '4xl', 'l']
-  }, /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-    color: "fg-200"
-  }, "You Buy"), /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    flexDirection: "row",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-    style: [styles.amount, {
-      color: Theme['fg-100']
-    }]
-  }, value), /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-    variant: "paragraph-400",
-    color: "fg-200"
-  }, symbol?.split('_')[0] ?? symbol ?? '')), /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center"
-  }, /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-    color: "fg-200"
-  }, "via "), providerImage && /*#__PURE__*/React.createElement(_appkitUiReactNative.Image, {
-    source: providerImage,
-    style: styles.providerImage
-  }), /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-    color: "fg-200"
-  }, _appkitCommonReactNative.StringUtil.capitalize(selectedQuote?.serviceProvider)))), /*#__PURE__*/React.createElement(_appkitUiReactNative.Separator, {
-    style: styles.separator,
-    color: "gray-glass-010"
-  }), /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    padding: ['s', 's', 'xs', 's'],
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-    color: "fg-200"
-  }, "You Pay"), /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, null, selectedQuote?.sourceAmount, " ", selectedQuote?.sourceCurrencyCode)), /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    padding: ['xs', 's', 'xs', 's'],
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-    color: "fg-200"
-  }, "You Receive"), /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    flexDirection: "row",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, null, value, " ", symbol?.split('_')[0] ?? ''), purchaseCurrency?.symbolImageUrl && /*#__PURE__*/React.createElement(_appkitUiReactNative.Image, {
-    source: purchaseCurrency?.symbolImageUrl,
-    style: [styles.tokenImage, {
-      borderColor: Theme['gray-glass-010']
-    }]
-  }))), /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    padding: ['xs', 's', 'xs', 's'],
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  }, /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-    color: "fg-200"
-  }, "Network"), /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    flexDirection: "row",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, null, purchaseCurrency?.chainName))), /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    padding: ['xs', 's', 'm', 's'],
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  }, /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-    color: "fg-200"
-  }, "Pay with"), /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    flexDirection: "row",
-    alignItems: "center",
-    style: [styles.paymentMethodContainer, {
-      borderColor: Theme['gray-glass-020']
-    }]
-  }, paymentLogo && /*#__PURE__*/React.createElement(_appkitUiReactNative.Image, {
-    source: paymentLogo,
-    style: styles.paymentMethodImage,
-    tintColor: Theme['fg-150']
-  }), /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-    variant: "small-600",
-    color: "fg-150"
-  }, selectedPaymentMethod?.name))), showFees && /*#__PURE__*/React.createElement(_appkitUiReactNative.Toggle, {
-    title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-      variant: "paragraph-400",
-      color: "fg-200"
-    }, "Fees", ' ', showTotalFee && /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-      variant: "paragraph-400"
-    }, selectedQuote?.totalFee, " ", selectedQuote?.sourceCurrencyCode))),
-    style: [styles.feesToggle, {
-      backgroundColor: Theme['gray-glass-002']
-    }],
-    contentContainerStyle: styles.feesToggleContent
-  }, showNetworkFee && /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    style: [styles.toggleItem, {
-      backgroundColor: Theme['gray-glass-002']
-    }],
-    margin: ['0', '0', 'xs', '0']
-  }, /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-    variant: "small-500",
-    color: "fg-150"
-  }, "Network Fees"), /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    flexDirection: "row",
-    alignItems: "center"
-  }, networkImage && /*#__PURE__*/React.createElement(_appkitUiReactNative.Image, {
-    source: networkImage,
-    style: [styles.networkImage, {
-      borderColor: Theme['gray-glass-010']
-    }]
-  }), /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-    variant: "small-400"
-  }, selectedQuote?.networkFee, " ", selectedQuote?.sourceCurrencyCode))), showTransactionFee && /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    style: [styles.toggleItem, {
-      backgroundColor: Theme['gray-glass-002']
-    }]
-  }, /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-    variant: "small-500",
-    color: "fg-150"
-  }, "Transaction Fees"), /*#__PURE__*/React.createElement(_appkitUiReactNative.Text, {
-    variant: "small-400"
-  }, selectedQuote.transactionFee, " ", selectedQuote?.sourceCurrencyCode))), /*#__PURE__*/React.createElement(_appkitUiReactNative.FlexView, {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    margin: ['xl', '0', '0', '0']
-  }, /*#__PURE__*/React.createElement(_appkitUiReactNative.Button, {
-    variant: "shade",
-    size: "md",
-    style: styles.cancelButton,
-    onPress: _appkitCoreReactNative.RouterController.goBack
-  }, "Back"), /*#__PURE__*/React.createElement(_appkitUiReactNative.Button, {
-    variant: "fill",
-    size: "md",
-    style: styles.confirmButton,
-    onPress: onConfirm,
-    testID: "button-confirm"
-  }, "Confirm")));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    style: {
+      paddingHorizontal: padding
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
+      padding: ['2xl', 'l', 's', 'l'],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
+        alignItems: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
+          color: "fg-200",
+          children: "You Buy"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
+          flexDirection: "row",
+          alignItems: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
+            style: [styles.amount, {
+              color: Theme['fg-100']
+            }],
+            children: value
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
+            variant: "paragraph-400",
+            color: "fg-200",
+            children: symbol?.split('_')[0] ?? symbol ?? ''
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
+            color: "fg-200",
+            children: "via "
+          }), providerImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Image, {
+            source: providerImage,
+            style: styles.providerImage
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
+            color: "fg-200",
+            children: _appkitCommonReactNative.StringUtil.capitalize(selectedQuote?.serviceProvider)
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Separator, {
+        style: styles.separator,
+        color: "gray-glass-010"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
+        padding: ['s', 's', 'xs', 's'],
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
+          color: "fg-200",
+          children: "You Pay"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.Text, {
+          children: [selectedQuote?.sourceAmount, " ", selectedQuote?.sourceCurrencyCode]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
+        padding: ['xs', 's', 'xs', 's'],
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
+          color: "fg-200",
+          children: "You Receive"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
+          flexDirection: "row",
+          alignItems: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.Text, {
+            children: [value, " ", symbol?.split('_')[0] ?? '']
+          }), purchaseCurrency?.symbolImageUrl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Image, {
+            source: purchaseCurrency?.symbolImageUrl,
+            style: [styles.tokenImage, {
+              borderColor: Theme['gray-glass-010']
+            }]
+          }) : null]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
+        padding: ['xs', 's', 'xs', 's'],
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
+          color: "fg-200",
+          children: "Network"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.FlexView, {
+          flexDirection: "row",
+          alignItems: "center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
+            children: purchaseCurrency?.chainName
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
+        padding: ['xs', 's', 'm', 's'],
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
+          color: "fg-200",
+          children: "Pay with"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
+          flexDirection: "row",
+          alignItems: "center",
+          style: [styles.paymentMethodContainer, {
+            borderColor: Theme['gray-glass-020']
+          }],
+          children: [paymentLogo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Image, {
+            source: paymentLogo,
+            style: styles.paymentMethodImage,
+            tintColor: Theme['fg-150']
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
+            variant: "small-600",
+            color: "fg-150",
+            children: selectedPaymentMethod?.name
+          })]
+        })]
+      }), showFees ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.Toggle, {
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.Text, {
+            variant: "paragraph-400",
+            color: "fg-200",
+            children: ["Fees", ' ', showTotalFee ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.Text, {
+              variant: "paragraph-400",
+              children: [selectedQuote?.totalFee, " ", selectedQuote?.sourceCurrencyCode]
+            }) : null]
+          })
+        }),
+        style: [styles.feesToggle, {
+          backgroundColor: Theme['gray-glass-002']
+        }],
+        contentContainerStyle: styles.feesToggleContent,
+        children: [showNetworkFee ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          style: [styles.toggleItem, {
+            backgroundColor: Theme['gray-glass-002']
+          }],
+          margin: ['0', '0', 'xs', '0'],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
+            variant: "small-500",
+            color: "fg-150",
+            children: "Network Fees"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
+            flexDirection: "row",
+            alignItems: "center",
+            children: [networkImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Image, {
+              source: networkImage,
+              style: [styles.networkImage, {
+                borderColor: Theme['gray-glass-010']
+              }]
+            }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.Text, {
+              variant: "small-400",
+              children: [selectedQuote?.networkFee, " ", selectedQuote?.sourceCurrencyCode]
+            })]
+          })]
+        }) : null, showTransactionFee ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          style: [styles.toggleItem, {
+            backgroundColor: Theme['gray-glass-002']
+          }],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
+            variant: "small-500",
+            color: "fg-150",
+            children: "Transaction Fees"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.Text, {
+            variant: "small-400",
+            children: [selectedQuote.transactionFee, " ", selectedQuote?.sourceCurrencyCode]
+          })]
+        }) : null]
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        margin: ['xl', '0', '0', '0'],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Button, {
+          variant: "shade",
+          size: "md",
+          style: styles.cancelButton,
+          onPress: _appkitCoreReactNative.RouterController.goBack,
+          children: "Back"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Button, {
+          variant: "fill",
+          size: "md",
+          style: styles.confirmButton,
+          onPress: onConfirm,
+          testID: "button-confirm",
+          children: "Confirm"
+        })]
+      })]
+    })
+  });
 }
 const styles = _reactNative.StyleSheet.create({
   amount: {