@reown/appkit-react-native 2.0.0 → 2.0.1

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

@@ -1,25 +1,40 @@
-import { ScrollView, View } from 'react-native';
-import { CardSelect, CardSelectWidth, FlexView, Link, Separator, Spacing, Text } from '@reown/appkit-ui-react-native';
-import { ApiController, NetworkController, RouterController, EventsController, ConnectionsController, AssetUtil } from '@reown/appkit-core-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+"use strict";
+
+/* eslint-disable valtio/state-snapshot-rule */
+import { ScrollView, useWindowDimensions, View } from 'react-native';
+import { CardSelect, CardSelectWidth, FlexView, Link, Separator, Spacing, Text, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { ApiController, RouterController, EventsController, ConnectionsController, OptionsController, AssetController, AssetUtil } from '@reown/appkit-core-react-native';
 import styles from './styles';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
+import { useSnapshot } from 'valtio';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function NetworksView() {
   const {
-    caipNetwork
-  } = NetworkController.state;
+    height,
+    width
+  } = useWindowDimensions();
+  const windowSize = Math.min(height, width);
+  const {
+    networkImages
+  } = useSnapshot(AssetController.state);
+  const {
+    activeNetwork,
+    isConnected
+  } = useSnapshot(ConnectionsController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const {
-    maxWidth: width,
     padding
   } = useCustomDimensions();
   const numColumns = 4;
-  const usableWidth = width - Spacing.xs * 2 - Spacing['4xs'];
+  const usableWidth = windowSize - Spacing.xs * 2 - Spacing['4xs'];
   const itemWidth = Math.abs(Math.trunc(usableWidth / numColumns));
   const itemGap = Math.abs(Math.trunc((usableWidth - numColumns * CardSelectWidth) / numColumns) / 2);
   const {
-    switchNetwork
-  } = useAppKit();
+    switchNetwork,
+    back
+  } = useInternalAppKit();
+  const networkList = ConnectionsController.getAvailableNetworks();
+  const connectedNetworks = ConnectionsController.getConnectedNetworks();
   const onHelpPress = () => {
     RouterController.push('WhatIsANetwork');
     EventsController.sendEvent({
@@ -28,60 +43,70 @@ export function NetworksView() {
     });
   };
   const networksTemplate = () => {
-    //TODO: should show requested networks disabled
-    // const networks = CoreHelperUtil.sortNetworks(approvedCaipNetworkIds, requestedCaipNetworks);
-    const networks = ConnectionsController.getConnectedNetworks();
     const onNetworkPress = async network => {
-      await switchNetwork(network);
-      RouterController.goBack();
+      if (!isConnected || connectedNetworks.some(connectedNetwork => connectedNetwork.caipNetworkId === network.caipNetworkId)) {
+        await switchNetwork(network);
+        back();
+      } else {
+        RouterController.push('SwitchNetwork', {
+          network
+        });
+      }
     };
-    return networks.map(network => {
-      return /*#__PURE__*/React.createElement(View, {
-        key: network.id,
+    return networkList.map(network => {
+      const isSelected = isConnected ? activeNetwork?.caipNetworkId === network.caipNetworkId : OptionsController.state.defaultNetwork?.caipNetworkId === network.caipNetworkId;
+      const networkImage = AssetUtil.getNetworkImage(network, networkImages);
+      return /*#__PURE__*/_jsx(View, {
         style: [styles.itemContainer, {
           width: itemWidth,
           marginVertical: itemGap
-        }]
-      }, /*#__PURE__*/React.createElement(CardSelect, {
-        testID: `w3m-network-switch-${network.name ?? network.id}`,
-        name: network.name ?? 'Unknown',
-        type: "network",
-        imageSrc: AssetUtil.getNetworkImage(network.id),
-        imageHeaders: imageHeaders
-        // disabled={!supportsAllNetworks && !approvedCaipNetworkIds?.includes(network.caipNetworkId)}
-        ,
-        selected: caipNetwork?.id === network.id,
-        onPress: () => onNetworkPress(network)
-      }));
+        }],
+        children: /*#__PURE__*/_jsx(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(ScrollView, {
-    bounces: false,
-    fadingEdgeLength: 20,
-    style: {
-      paddingHorizontal: padding
-    }
-  }, /*#__PURE__*/React.createElement(FlexView, {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    padding: ['xs', 'xs', 's', 'xs']
-  }, networksTemplate())), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(FlexView, {
-    padding: ['s', 's', '3xl', 's'],
-    alignItems: "center",
-    alignSelf: "center",
-    style: {
-      width
-    }
-  }, /*#__PURE__*/React.createElement(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(Link, {
-    size: "sm",
-    iconLeft: "helpCircle",
-    onPress: onHelpPress,
-    style: styles.helpButton,
-    testID: "what-is-a-network-button"
-  }, "What is a network?")));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ScrollView, {
+      bounces: false,
+      fadingEdgeLength: 20,
+      style: {
+        paddingHorizontal: padding
+      },
+      children: /*#__PURE__*/_jsx(FlexView, {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        padding: "xs",
+        children: networksTemplate()
+      })
+    }), /*#__PURE__*/_jsx(Separator, {}), /*#__PURE__*/_jsxs(FlexView, {
+      padding: "s",
+      alignItems: "center",
+      alignSelf: "center",
+      style: {
+        width
+      },
+      children: [/*#__PURE__*/_jsx(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__*/_jsx(Link, {
+        size: "sm",
+        iconLeft: "helpCircle",
+        onPress: onHelpPress,
+        style: styles.helpButton,
+        testID: "what-is-a-network-button",
+        children: "What is a network?"
+      })]
+    })]
+  });
 }
 //# sourceMappingURL=index.js.map

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

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

package/lib/module/views/w3m-networks-view/styles.js

@@ -1,3 +1,5 @@
+"use strict";
+
 import { Spacing } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 export default StyleSheet.create({

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

@@ -1 +1 @@
-{"version":3,"names":["Spacing","StyleSheet","create","itemContainer","alignItems","justifyContent","helpButton","marginTop","s"],"sourceRoot":"../../../../src","sources":["views/w3m-networks-view/styles.ts"],"mappings":"AAAA,SAASA,OAAO,QAAQ,+BAA+B;AACvD,SAASC,UAAU,QAAQ,cAAc;AAEzC,eAAeA,UAAU,CAACC,MAAM,CAAC;EAC/BC,aAAa,EAAE;IACbC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDC,UAAU,EAAE;IACVC,SAAS,EAAEP,OAAO,CAACQ;EACrB;AACF,CAAC,CAAC"}
+{"version":3,"names":["Spacing","StyleSheet","create","itemContainer","alignItems","justifyContent","helpButton","marginTop","s"],"sourceRoot":"../../../../src","sources":["views/w3m-networks-view/styles.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,+BAA+B;AACvD,SAASC,UAAU,QAAQ,cAAc;AAEzC,eAAeA,UAAU,CAACC,MAAM,CAAC;EAC/BC,aAAa,EAAE;IACbC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDC,UAAU,EAAE;IACVC,SAAS,EAAEP,OAAO,CAACQ;EACrB;AACF,CAAC,CAAC","ignoreList":[]}

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

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