@reown/appkit-react-native 2.0.0-alpha.2 → 2.0.0-alpha.4

package/src/views/w3m-swap-view/components/select-token-view/index.tsx

@@ -1,6 +1,13 @@
 import { useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { ScrollView, SectionList, View, type SectionListData } from 'react-native';
+import {
+  ScrollView,
+  SectionList,
+  View,
+  type SectionListData,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
 import {
   FlexView,
   IconLink,
@@ -10,19 +17,20 @@ import {
   Separator,
   Text,
   TokenButton,
-  useTheme
+  useTheme,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 
 import {
   AssetController,
+  AssetUtil,
   ConnectionsController,
   SwapController,
-  type SwapControllerState,
-  type SwapInputTarget,
-  type SwapTokenWithBalance
+  type SwapControllerState
 } from '@reown/appkit-core-react-native';
 
-import { useCustomDimensions } from '../../../../hooks/useCustomDimensions';
+import { type SwapInputTarget, type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
+
 import { Placeholder } from '../../../../partials/w3m-placeholder';
 import styles from './styles';
 import { createSections } from './utils';
@@ -30,9 +38,10 @@ import { createSections } from './utils';
 interface Props {
   onClose: () => void;
   type?: SwapInputTarget;
+  style?: StyleProp<ViewStyle>;
 }
 
-export function SwapSelectTokenView({ onClose, type }: Props) {
+export function SwapSelectTokenView({ onClose, type, style }: Props) {
   const { padding } = useCustomDimensions();
   const Theme = useTheme();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
@@ -41,7 +50,7 @@ export function SwapSelectTokenView({ onClose, type }: Props) {
     SwapController.state
   ) as SwapControllerState;
 
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const [tokenSearch, setTokenSearch] = useState<string>('');
   const isSourceToken = type === 'sourceToken';
 
@@ -77,7 +86,8 @@ export function SwapSelectTokenView({ onClose, type }: Props) {
         {
           paddingHorizontal: padding,
           backgroundColor: Theme['bg-100']
-        }
+        },
+        style
       ]}
     >
       <FlexView

package/src/views/w3m-swap-view/components/select-token-view/styles.ts

@@ -8,8 +8,7 @@ export default StyleSheet.create({
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,
     overflow: 'hidden',
-    marginTop: 80,
-    flex: 1
+    marginTop: 80
   },
   title: {
     paddingTop: Spacing['2xs']

package/src/views/w3m-swap-view/components/select-token-view/utils.ts

@@ -1,4 +1,5 @@
-import { SwapController, type SwapTokenWithBalance } from '@reown/appkit-core-react-native';
+import { type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
+import { SwapController } from '@reown/appkit-core-react-native';
 
 export function filterTokens(tokens?: SwapTokenWithBalance[], searchValue?: string) {
   if (!tokens) {

package/src/views/w3m-swap-view/index.tsx

@@ -1,20 +1,23 @@
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
-import { Platform, ScrollView } from 'react-native';
-import Modal from 'react-native-modal';
+import { ScrollView, Modal } from 'react-native';
 import {
   ConnectionsController,
   ConstantsUtil,
   EventsController,
   RouterController,
-  SwapController,
-  type SwapInputTarget
+  SwapController
 } from '@reown/appkit-core-react-native';
-import { Button, FlexView, IconLink, Spacing, useTheme } from '@reown/appkit-ui-react-native';
-import { NumberUtil } from '@reown/appkit-common-react-native';
+import {
+  Button,
+  FlexView,
+  IconLink,
+  useTheme,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+import { NumberUtil, type SwapInputTarget } from '@reown/appkit-common-react-native';
 
 import { useKeyboard } from '../../hooks/useKeyboard';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { SwapInput } from '../../partials/w3m-swap-input';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { SwapDetails } from '../../partials/w3m-swap-details';
@@ -37,7 +40,7 @@ export function SwapView() {
   } = useSnapshot(SwapController.state);
   const Theme = useTheme();
   const { padding } = useCustomDimensions();
-  const { keyboardShown, keyboardHeight } = useKeyboard();
+  const { keyboardShown } = useKeyboard();
   const [showModal, setShowModal] = useState<SwapInputTarget | undefined>();
   const showDetails = !!sourceToken && !!toToken && !inputError;
 
@@ -51,11 +54,6 @@ export function SwapView() {
       token => token.address === SwapController.state.toToken?.address
     ) >= 0;
 
-  const paddingBottom = Platform.select({
-    android: keyboardShown ? keyboardHeight + Spacing['2xl'] : Spacing['2xl'],
-    default: Spacing['2xl']
-  });
-
   const getActionButtonState = () => {
     if (!SwapController.state.sourceToken || !SwapController.state.toToken) {
       return { text: 'Select token', disabled: true };
@@ -159,11 +157,11 @@ export function SwapView() {
   return (
     <>
       <ScrollView
-        style={{ paddingHorizontal: padding }}
+        style={[{ paddingHorizontal: padding }, keyboardShown && styles.withKeyboard]}
         bounces={false}
         keyboardShouldPersistTaps="always"
       >
-        <FlexView padding="l" alignItems="center" justifyContent="center" style={{ paddingBottom }}>
+        <FlexView padding={['l', 'l', '2xl', 'l']} alignItems="center" justifyContent="center">
           <SwapInput
             token={sourceToken}
             value={sourceTokenAmount}
@@ -186,7 +184,7 @@ export function SwapView() {
               onTokenPress={() => setShowModal('toToken')}
               editable={false}
             />
-            {showSwitch && (
+            {showSwitch ? (
               <IconLink
                 icon="recycleHorizontal"
                 size="lg"
@@ -197,9 +195,9 @@ export function SwapView() {
                 style={[styles.arrowIcon, { borderColor: Theme['bg-100'] }]}
                 onPress={onSwitchPress}
               />
-            )}
+            ) : null}
           </FlexView>
-          {showDetails && <SwapDetails />}
+          {showDetails ? <SwapDetails /> : null}
           <Button
             style={styles.actionButton}
             loading={actionLoading}
@@ -210,15 +208,8 @@ export function SwapView() {
           </Button>
         </FlexView>
       </ScrollView>
-      <Modal
-        isVisible={!!showModal}
-        useNativeDriver
-        useNativeDriverForBackdrop
-        onBackdropPress={onModalClose}
-        onDismiss={onModalClose}
-        style={styles.modal}
-      >
-        <SwapSelectTokenView onClose={onModalClose} type={showModal} />
+      <Modal visible={!!showModal} transparent animationType="slide" onRequestClose={onModalClose}>
+        <SwapSelectTokenView style={styles.modalContent} onClose={onModalClose} type={showModal} />
       </Modal>
     </>
   );

package/src/views/w3m-swap-view/styles.ts

@@ -20,8 +20,12 @@ export default StyleSheet.create({
     marginTop: Spacing.xs,
     width: '100%'
   },
-  modal: {
+  modalContent: {
     margin: 0,
+    flex: 1,
     justifyContent: 'flex-end'
+  },
+  withKeyboard: {
+    height: '100%'
   }
 });

package/src/views/w3m-unsupported-chain-view/index.tsx

@@ -5,21 +5,20 @@ import { Icon, ListItem, Separator, Text } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController
 } from '@reown/appkit-core-react-native';
 import type { AppKitNetwork } from '@reown/appkit-common-react-native';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function UnsupportedChainView() {
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const [disconnecting, setDisconnecting] = useState(false);
-  //TODO: should show requested networks disabled
-  // const networks = CoreHelperUtil.sortNetworks(approvedCaipNetworkIds, requestedCaipNetworks);
   const networks = ConnectionsController.getConnectedNetworks();
   const imageHeaders = ApiController._getApiHeaders();
-  const { disconnect, switchNetwork } = useAppKit();
+  const { disconnect, switchNetwork } = useInternalAppKit();
 
   const onNetworkPress = async (network: AppKitNetwork) => {
     switchNetwork(network);
@@ -48,7 +47,7 @@ export function UnsupportedChainView() {
           key={item.id}
           icon="networkPlaceholder"
           iconBackgroundColor="gray-glass-010"
-          imageSrc={networkImages[item.id]}
+          imageSrc={AssetUtil.getNetworkImage(item, networkImages)}
           imageHeaders={imageHeaders}
           onPress={() => onNetworkPress(item)}
           testID="button-network"

package/src/views/w3m-wallet-compatible-networks-view/index.tsx

@@ -1,12 +1,18 @@
 import { ScrollView } from 'react-native';
 import { useSnapshot } from 'valtio';
-import { FlexView, Text, Banner, NetworkImage } from '@reown/appkit-ui-react-native';
+import {
+  FlexView,
+  Text,
+  Banner,
+  NetworkImage,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController
 } from '@reown/appkit-core-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 
 export function WalletCompatibleNetworks() {
@@ -25,7 +31,7 @@ export function WalletCompatibleNetworks() {
 
   return (
     <ScrollView bounces={false} style={{ paddingHorizontal: padding }} fadingEdgeLength={20}>
-      <FlexView padding={['xl', 's', '2xl', 's']}>
+      <FlexView padding={['xl', 's', '2xl', 's']} margin={['0', '0', '2xl', '0']}>
         <Banner icon="warningCircle" text="You can only receive assets on these networks." />
         {approvedNetworks.map((network, index) => (
           <FlexView
@@ -35,7 +41,7 @@ export function WalletCompatibleNetworks() {
             padding={['s', 's', 's', 's']}
           >
             <NetworkImage
-              imageSrc={networkImages[network.id]}
+              imageSrc={AssetUtil.getNetworkImage(network, networkImages)}
               imageHeaders={imageHeaders}
               size="sm"
               style={styles.image}

package/src/views/w3m-wallet-receive-view/index.tsx

@@ -7,18 +7,19 @@ import {
   QrCode,
   Spacing,
   Text,
-  UiUtil
+  UiUtil,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController,
   CoreHelperUtil,
   OptionsController,
   RouterController,
   SnackController
 } from '@reown/appkit-core-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 
 export function WalletReceiveView() {
   const { networkImages } = useSnapshot(AssetController.state);
@@ -26,7 +27,7 @@ export function WalletReceiveView() {
     ConnectionsController.state
   );
   const address = CoreHelperUtil.getPlainAddress(activeAddress);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const { padding } = useCustomDimensions();
   const canCopy = OptionsController.isClipboardAvailable();
   const isSmartAccount = accountType === 'smartAccount';
@@ -40,7 +41,10 @@ export function WalletReceiveView() {
   const imagesArray = approvedNetworks
     .filter(network => network?.id)
     .slice(0, 5)
-    .map(network => AssetController.state.networkImages[network.id])
+    .map(
+      network =>
+        network.imageUrl ?? AssetUtil.getNetworkImage(network, AssetController.state.networkImages)
+    )
     .filter(Boolean) as string[];
 
   const label = UiUtil.getTruncateString({

package/src/views/w3m-wallet-send-preview-view/components/preview-send-details.tsx

@@ -1,4 +1,4 @@
-import { AssetController } from '@reown/appkit-core-react-native';
+import { AssetController, AssetUtil } from '@reown/appkit-core-react-native';
 import type { AppKitNetwork } from '@reown/appkit-common-react-native';
 import {
   BorderRadius,
@@ -43,7 +43,7 @@ export function PreviewSendDetails({
     truncate: 'middle'
   });
 
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   return (
     <FlexView

package/src/views/w3m-wallet-send-preview-view/index.tsx

@@ -1,13 +1,21 @@
 import { useSnapshot } from 'valtio';
 import { ScrollView } from 'react-native';
-import { Avatar, Button, FlexView, Icon, Image, Text, UiUtil } from '@reown/appkit-ui-react-native';
+import {
+  Avatar,
+  Button,
+  FlexView,
+  Icon,
+  Image,
+  Text,
+  UiUtil,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 import { NumberUtil } from '@reown/appkit-common-react-native';
 import {
   ConnectionsController,
   RouterController,
   SendController
 } from '@reown/appkit-core-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { PreviewSendPill } from './components/preview-send-pill';
 import styles from './styles';
 import { PreviewSendDetails } from './components/preview-send-details';

package/src/views/w3m-wallet-send-select-token-view/index.tsx

@@ -1,16 +1,22 @@
 import { useState } from 'react';
 import { useSnapshot } from 'valtio';
 import { ScrollView } from 'react-native';
-import { FlexView, InputText, ListToken, Text } from '@reown/appkit-ui-react-native';
+import {
+  FlexView,
+  InputText,
+  ListToken,
+  Text,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 import {
   AssetController,
+  AssetUtil,
   ConnectionsController,
   RouterController,
   SendController
 } from '@reown/appkit-core-react-native';
 import type { Balance } from '@reown/appkit-common-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { Placeholder } from '../../partials/w3m-placeholder';
 import styles from './styles';
 
@@ -18,7 +24,7 @@ export function WalletSendSelectTokenView() {
   const { padding } = useCustomDimensions();
   const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const [tokenSearch, setTokenSearch] = useState<string>('');
   const [filteredTokens, setFilteredTokens] = useState(balances ?? []);
 

package/src/views/w3m-wallet-send-view/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Platform, ScrollView } from 'react-native';
+import { ScrollView } from 'react-native';
 import { useSnapshot } from 'valtio';
 import {
   ConnectionsController,
@@ -7,26 +7,20 @@ import {
   RouterController,
   SendController
 } from '@reown/appkit-core-react-native';
-import { Button, FlexView, IconBox, Spacing } from '@reown/appkit-ui-react-native';
+import { Button, FlexView, IconBox, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { SendInputToken } from '../../partials/w3m-send-input-token';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { useKeyboard } from '../../hooks/useKeyboard';
 import { SendInputAddress } from '../../partials/w3m-send-input-address';
 import styles from './styles';
 
 export function WalletSendView() {
   const { padding } = useCustomDimensions();
-  const { keyboardShown, keyboardHeight } = useKeyboard();
+  const { keyboardShown } = useKeyboard();
   const [isBalanceLoading, setBalanceLoading] = useState(false);
   const { token, sendTokenAmount, receiverAddress, receiverProfileName, loading } = useSnapshot(
     SendController.state
   );
 
-  const paddingBottom = Platform.select({
-    android: keyboardShown ? keyboardHeight + Spacing['2xl'] : Spacing['2xl'],
-    default: Spacing['2xl']
-  });
-
   const onSendPress = () => {
     RouterController.push('WalletSendPreview');
   };
@@ -86,11 +80,11 @@ export function WalletSendView() {
 
   return (
     <ScrollView
-      style={{ paddingHorizontal: padding }}
+      style={[{ paddingHorizontal: padding }, keyboardShown && styles.withKeyboard]}
       bounces={false}
       keyboardShouldPersistTaps="always"
     >
-      <FlexView padding="l" alignItems="center" justifyContent="center" style={{ paddingBottom }}>
+      <FlexView padding={['l', 'l', '2xl', 'l']} alignItems="center" justifyContent="center">
         <SendInputToken
           token={token}
           sendTokenAmount={sendTokenAmount}

package/src/views/w3m-wallet-send-view/styles.ts

@@ -17,5 +17,8 @@ export default StyleSheet.create({
   },
   addressContainer: {
     width: '100%'
+  },
+  withKeyboard: {
+    height: '100%'
   }
 });

package/src/views/w3m-what-is-a-network-view/index.tsx

@@ -1,6 +1,5 @@
 import { Linking, ScrollView } from 'react-native';
-import { Button, FlexView, Text, Visual } from '@reown/appkit-ui-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { Button, FlexView, Text, Visual, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import styles from './styles';
 
 export function WhatIsANetworkView() {

package/src/views/w3m-what-is-a-wallet-view/index.tsx

@@ -1,7 +1,6 @@
 import { ScrollView } from 'react-native';
-import { Button, FlexView, Text, Visual } from '@reown/appkit-ui-react-native';
+import { Button, FlexView, Text, Visual, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { EventsController, RouterController } from '@reown/appkit-core-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 
 export function WhatIsAWalletView() {

package/lib/commonjs/config/animations.js

@@ -1,9 +0,0 @@
-"use strict";
-
-var _reactNative = require("react-native");
-if (_reactNative.Platform.OS === 'android') {
-  if (_reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
-    _reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-}
-//# sourceMappingURL=animations.js.map

package/lib/commonjs/config/animations.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","Platform","OS","UIManager","setLayoutAnimationEnabledExperimental"],"sourceRoot":"../../../src","sources":["config/animations.ts"],"mappings":";;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAIC,qBAAQ,CAACC,EAAE,KAAK,SAAS,EAAE;EAC7B,IAAIC,sBAAS,CAACC,qCAAqC,EAAE;IACnDD,sBAAS,CAACC,qCAAqC,CAAC,IAAI,CAAC;EACvD;AACF","ignoreList":[]}

package/lib/commonjs/hooks/useCustomDimensions.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useCustomDimensions = useCustomDimensions;
-var _react = require("react");
-var _reactNative = require("react-native");
-/**
- * Hook used to get the width of the screen and the padding needed to accomplish portrait and landscape modes.
- * @returns { width: number, isPortrait: boolean, isLandscape: boolean, padding: number }
- */
-function useCustomDimensions() {
-  const {
-    width,
-    height
-  } = (0, _reactNative.useWindowDimensions)();
-  const [maxWidth, setMaxWidth] = (0, _react.useState)(Math.min(width, height));
-  const [isPortrait, setIsPortrait] = (0, _react.useState)(height > width);
-  const [padding, setPadding] = (0, _react.useState)(0);
-  (0, _react.useEffect)(() => {
-    setMaxWidth(Math.min(width, height));
-    setIsPortrait(height > width);
-    setPadding(width < height ? 0 : (width - height) / 2);
-  }, [width, height]);
-  return {
-    maxWidth,
-    isPortrait,
-    isLandscape: !isPortrait,
-    padding
-  };
-}
-//# sourceMappingURL=useCustomDimensions.js.map

package/lib/commonjs/hooks/useCustomDimensions.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_reactNative","useCustomDimensions","width","height","useWindowDimensions","maxWidth","setMaxWidth","useState","Math","min","isPortrait","setIsPortrait","padding","setPadding","useEffect","isLandscape"],"sourceRoot":"../../../src","sources":["hooks/useCustomDimensions.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA;AACA;AACA;AACA;AACO,SAASE,mBAAmBA,CAAA,EAAG;EACpC,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAG,IAAAC,gCAAmB,EAAC,CAAC;EAC/C,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAASC,IAAI,CAACC,GAAG,CAACP,KAAK,EAAEC,MAAM,CAAC,CAAC;EACzE,MAAM,CAACO,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAJ,eAAQ,EAAUJ,MAAM,GAAGD,KAAK,CAAC;EACrE,MAAM,CAACU,OAAO,EAAEC,UAAU,CAAC,GAAG,IAAAN,eAAQ,EAAS,CAAC,CAAC;EAEjD,IAAAO,gBAAS,EAAC,MAAM;IACdR,WAAW,CAACE,IAAI,CAACC,GAAG,CAACP,KAAK,EAAEC,MAAM,CAAC,CAAC;IACpCQ,aAAa,CAACR,MAAM,GAAGD,KAAK,CAAC;IAC7BW,UAAU,CAACX,KAAK,GAAGC,MAAM,GAAG,CAAC,GAAG,CAACD,KAAK,GAAGC,MAAM,IAAI,CAAC,CAAC;EACvD,CAAC,EAAE,CAACD,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnB,OAAO;IAAEE,QAAQ;IAAEK,UAAU;IAAEK,WAAW,EAAE,CAACL,UAAU;IAAEE;EAAQ,CAAC;AACpE","ignoreList":[]}

package/lib/commonjs/partials/w3m-otp-code/index.js

@@ -1,89 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.OtpCodeView = OtpCodeView;
-var _reactNative = require("react-native");
-var _appkitUiReactNative = require("@reown/appkit-ui-react-native");
-var _useKeyboard = require("../../hooks/useKeyboard");
-var _styles = _interopRequireDefault(require("./styles"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function OtpCodeView({
-  onCodeChange,
-  onSubmit,
-  onRetry,
-  error,
-  loading,
-  email,
-  timeLeft = 0,
-  codeExpiry = 20,
-  retryLabel = "Didn't receive it?",
-  retryDisabledButtonLabel = 'Resend',
-  retryButtonLabel = 'Resend code'
-}) {
-  const {
-    keyboardShown,
-    keyboardHeight
-  } = (0, _useKeyboard.useKeyboard)();
-  const paddingBottom = _reactNative.Platform.select({
-    android: keyboardShown ? keyboardHeight + _appkitUiReactNative.Spacing.l : _appkitUiReactNative.Spacing.l,
-    default: _appkitUiReactNative.Spacing.l
-  });
-  const handleCodeChange = code => {
-    onCodeChange?.(code);
-    if (code.length === 6) {
-      onSubmit?.(code);
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
-    padding: ['l', 'l', '3xl', 'l'],
-    alignItems: "center",
-    style: {
-      paddingBottom
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.Text, {
-      center: true,
-      variant: "paragraph-400",
-      children: ["Enter the code we sent to", ' ']
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
-      variant: "paragraph-500",
-      children: email ?? 'your email'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
-      style: _styles.default.expiryText,
-      variant: "small-400",
-      color: "fg-200",
-      children: `The code expires in ${codeExpiry} minutes`
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.FlexView, {
-      justifyContent: "center",
-      style: _styles.default.otpContainer,
-      children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.LoadingSpinner, {
-        size: "xl"
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Otp, {
-        length: 6,
-        onChangeText: handleCodeChange,
-        autoFocus: true
-      })
-    }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
-      variant: "small-400",
-      color: "error-100",
-      style: _styles.default.errorText,
-      children: error
-    }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_appkitUiReactNative.FlexView, {
-      alignItems: "center",
-      flexDirection: "row",
-      margin: ['s', '0', '0', '0'],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Text, {
-        variant: "small-400",
-        color: "fg-200",
-        children: retryLabel
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_appkitUiReactNative.Link, {
-        onPress: onRetry,
-        disabled: timeLeft > 0 || loading,
-        children: timeLeft > 0 ? `${retryDisabledButtonLabel} in ${timeLeft}s` : retryButtonLabel
-      })]
-    })]
-  });
-}
-//# sourceMappingURL=index.js.map

package/lib/commonjs/partials/w3m-otp-code/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","_appkitUiReactNative","_useKeyboard","_styles","_interopRequireDefault","_jsxRuntime","e","__esModule","default","OtpCodeView","onCodeChange","onSubmit","onRetry","error","loading","email","timeLeft","codeExpiry","retryLabel","retryDisabledButtonLabel","retryButtonLabel","keyboardShown","keyboardHeight","useKeyboard","paddingBottom","Platform","select","android","Spacing","l","handleCodeChange","code","length","jsxs","FlexView","padding","alignItems","style","children","Text","center","variant","jsx","styles","expiryText","color","justifyContent","otpContainer","LoadingSpinner","size","Otp","onChangeText","autoFocus","errorText","flexDirection","margin","Link","onPress","disabled"],"sourceRoot":"../../../../src","sources":["partials/w3m-otp-code/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/partials/w3m-otp-code/styles.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactNative = require("react-native");
-var _appkitUiReactNative = require("@reown/appkit-ui-react-native");
-var _default = exports.default = _reactNative.StyleSheet.create({
-  expiryText: {
-    marginTop: _appkitUiReactNative.Spacing.s,
-    marginBottom: _appkitUiReactNative.Spacing.l
-  },
-  otpContainer: {
-    height: 60
-  },
-  errorText: {
-    marginTop: _appkitUiReactNative.Spacing['2xs']
-  }
-});
-//# sourceMappingURL=styles.js.map

package/lib/commonjs/partials/w3m-otp-code/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","_appkitUiReactNative","_default","exports","default","StyleSheet","create","expiryText","marginTop","Spacing","s","marginBottom","l","otpContainer","height","errorText"],"sourceRoot":"../../../../src","sources":["partials/w3m-otp-code/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,oBAAA,GAAAD,OAAA;AAAwD,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEzCC,uBAAU,CAACC,MAAM,CAAC;EAC/BC,UAAU,EAAE;IACVC,SAAS,EAAEC,4BAAO,CAACC,CAAC;IACpBC,YAAY,EAAEF,4BAAO,CAACG;EACxB,CAAC;EACDC,YAAY,EAAE;IACZC,MAAM,EAAE;EACV,CAAC;EACDC,SAAS,EAAE;IACTP,SAAS,EAAEC,4BAAO,CAAC,KAAK;EAC1B;AACF,CAAC,CAAC","ignoreList":[]}