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

package/src/partials/w3m-all-wallets-list/components/Loading.tsx

@@ -0,0 +1,47 @@
+import { CardSelectLoader, FlexView, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { memo } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+
+interface LoadingProps {
+  itemWidth?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+function _Loading({ itemWidth, containerStyle }: LoadingProps) {
+  const { maxWidth, maxHeight } = useCustomDimensions();
+
+  return (
+    <FlexView
+      flexDirection="row"
+      flexWrap="wrap"
+      alignSelf="center"
+      padding={['0', '0', 's', 'xs']}
+      style={{ maxWidth, maxHeight }}
+    >
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
+    </FlexView>
+  );
+}
+
+export const Loading = memo(_Loading, () => {
+  return true;
+});

package/src/partials/w3m-all-wallets-list/components/WalletItem.tsx

@@ -0,0 +1,47 @@
+import { useSnapshot } from 'valtio';
+import { ApiController, AssetController, AssetUtil } from '@reown/appkit-core-react-native';
+import { CardSelect, CardSelectLoader } from '@reown/appkit-ui-react-native';
+import type { WcWallet } from '@reown/appkit-common-react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { memo } from 'react';
+
+interface WalletItemProps {
+  containerStyle?: StyleProp<ViewStyle>;
+  item: WcWallet;
+  itemWidth?: number;
+  imageHeaders?: Record<string, string>;
+  onItemPress: (wallet: WcWallet) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function WalletItem({
+  containerStyle,
+  item,
+  itemWidth,
+  imageHeaders,
+  onItemPress,
+  style
+}: WalletItemProps) {
+  const { walletImages } = useSnapshot(AssetController.state);
+  const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
+  const imageSrc = AssetUtil.getWalletImage(item, walletImages);
+
+  if (!item?.id) {
+    return <CardSelectLoader style={[containerStyle, { width: itemWidth }, style]} />;
+  }
+
+  return (
+    <CardSelect
+      imageSrc={imageSrc}
+      style={[containerStyle, { width: itemWidth }, style]}
+      imageHeaders={imageHeaders}
+      name={item?.name ?? 'Unknown'}
+      onPress={() => onItemPress(item)}
+      installed={!!isInstalled}
+    />
+  );
+}
+
+export const MemoizedWalletItem = memo(WalletItem, (prevProps, nextProps) => {
+  return prevProps.item.id === nextProps.item.id;
+});

package/src/partials/w3m-all-wallets-list/index.tsx

@@ -1,37 +1,38 @@
 import { useEffect, useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { FlatList, View } from 'react-native';
+import { FlatList } from 'react-native';
 import {
   ApiController,
-  AssetUtil,
   OptionsController,
   SnackController,
-  type OptionsControllerState,
-  type WcWallet
+  type OptionsControllerState
 } from '@reown/appkit-core-react-native';
-import {
-  CardSelect,
-  CardSelectLoader,
-  CardSelectHeight,
-  FlexView,
-  Spacing
-} from '@reown/appkit-ui-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
+import { CardSelectHeight, Spacing, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import styles from './styles';
-import { UiUtil } from '../../utils/UiUtil';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { Placeholder } from '../w3m-placeholder';
+import { Loading } from './components/Loading';
+import { WalletItem } from './components/WalletItem';
 
 interface AllWalletsListProps {
   columns: number;
   onItemPress: (wallet: WcWallet) => void;
   itemWidth?: number;
+  headerHeight?: number;
 }
 
-export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsListProps) {
+const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
+
+export function AllWalletsList({
+  columns,
+  itemWidth,
+  onItemPress,
+  headerHeight = 0
+}: AllWalletsListProps) {
   const [loading, setLoading] = useState<boolean>(ApiController.state.wallets.length === 0);
   const [loadingError, setLoadingError] = useState<boolean>(false);
   const [pageLoading, setPageLoading] = useState<boolean>(false);
-  const { maxWidth, padding } = useCustomDimensions();
+  const { maxHeight, padding } = useCustomDimensions();
   const { installed, featured, recommended, wallets } = useSnapshot(ApiController.state);
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
   const imageHeaders = ApiController._getApiHeaders();
@@ -56,55 +57,11 @@ export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsLi
     ...(pageLoading ? (Array.from({ length: loadingItems }) as WcWallet[]) : [])
   ];
 
-  const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
-
-  const loadingTemplate = (items: number) => {
-    return (
-      <FlexView
-        flexDirection="row"
-        flexWrap="wrap"
-        alignSelf="center"
-        padding={['0', '0', 's', 'xs']}
-        style={[styles.container, { maxWidth }]}
-      >
-        {Array.from({ length: items }).map((_, index) => (
-          <View key={index} style={[styles.itemContainer, { width: itemWidth }]}>
-            <CardSelectLoader />
-          </View>
-        ))}
-      </FlexView>
-    );
-  };
-
-  const walletTemplate = ({ item }: { item: WcWallet; index: number }) => {
-    const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
-    if (!item?.id) {
-      return (
-        <View style={[styles.itemContainer, { width: itemWidth }]}>
-          <CardSelectLoader />
-        </View>
-      );
-    }
-
-    return (
-      <View style={[styles.itemContainer, { width: itemWidth }]}>
-        <CardSelect
-          imageSrc={AssetUtil.getWalletImage(item)}
-          imageHeaders={imageHeaders}
-          name={item?.name ?? 'Unknown'}
-          onPress={() => onItemPress(item)}
-          installed={!!isInstalled}
-        />
-      </View>
-    );
-  };
-
   const initialFetch = async () => {
     try {
       setLoading(true);
       setLoadingError(false);
       await ApiController.fetchWallets({ page: 1 });
-      UiUtil.createViewTransition();
       setLoading(false);
     } catch (error) {
       SnackController.showError('Failed to load wallets');
@@ -138,7 +95,7 @@ export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsLi
   }, []);
 
   if (loading) {
-    return loadingTemplate(20);
+    return <Loading itemWidth={itemWidth} containerStyle={styles.itemContainer} />;
   }
 
   if (loadingError) {
@@ -163,9 +120,20 @@ export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsLi
       bounces={false}
       numColumns={columns}
       data={walletList}
-      renderItem={walletTemplate}
-      style={styles.container}
-      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
+      renderItem={({ item }) => (
+        <WalletItem
+          item={item}
+          itemWidth={itemWidth}
+          imageHeaders={imageHeaders}
+          onItemPress={onItemPress}
+          style={styles.itemContainer}
+        />
+      )}
+      style={{ maxHeight: maxHeight - headerHeight - Spacing['4xl'] }}
+      contentContainerStyle={[
+        styles.contentContainer,
+        { paddingHorizontal: padding + Spacing['2xs'] }
+      ]}
       onEndReached={fetchNextPage}
       onEndReachedThreshold={2}
       keyExtractor={(item, index) => item?.id ?? index}

package/src/partials/w3m-all-wallets-list/styles.ts

@@ -2,16 +2,14 @@ import { Spacing } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
-  container: {
-    height: '100%'
-  },
   contentContainer: {
-    paddingBottom: Spacing['2xl']
+    paddingBottom: Spacing['4xl'],
+    paddingTop: Spacing['3xs']
   },
   itemContainer: {
     alignItems: 'center',
     justifyContent: 'center',
-    marginVertical: Spacing.xs
+    margin: Spacing['4xs']
   },
   pageLoader: {
     marginTop: Spacing.xl

package/src/partials/w3m-all-wallets-search/index.tsx

@@ -1,77 +1,36 @@
 import { useCallback, useEffect, useState } from 'react';
-import { FlatList, View } from 'react-native';
-import {
-  ApiController,
-  AssetUtil,
-  SnackController,
-  type WcWallet
-} from '@reown/appkit-core-react-native';
-import {
-  CardSelect,
-  CardSelectHeight,
-  CardSelectLoader,
-  FlexView,
-  Spacing
-} from '@reown/appkit-ui-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { FlatList } from 'react-native';
+import { ApiController, SnackController } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
+import { CardSelectHeight, Spacing, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { Placeholder } from '../w3m-placeholder';
 import styles from './styles';
 
+import { Loading } from '../w3m-all-wallets-list/components/Loading';
+import { WalletItem } from '../w3m-all-wallets-list/components/WalletItem';
+
 export interface AllWalletsSearchProps {
   columns: number;
   onItemPress: (wallet: WcWallet) => void;
   itemWidth?: number;
   searchQuery?: string;
+  headerHeight?: number;
 }
 
+const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
+
 export function AllWalletsSearch({
   searchQuery,
   columns,
   itemWidth,
-  onItemPress
+  onItemPress,
+  headerHeight = 0
 }: AllWalletsSearchProps) {
   const [loading, setLoading] = useState<boolean>(false);
   const [loadingError, setLoadingError] = useState<boolean>(false);
   const [prevSearchQuery, setPrevSearchQuery] = useState<string>('');
   const imageHeaders = ApiController._getApiHeaders();
-  const { maxWidth, padding, isLandscape } = useCustomDimensions();
-
-  const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
-
-  const walletTemplate = ({ item }: { item: WcWallet }) => {
-    const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
-
-    return (
-      <View key={item?.id} style={[styles.itemContainer, { width: itemWidth }]}>
-        <CardSelect
-          imageSrc={AssetUtil.getWalletImage(item)}
-          imageHeaders={imageHeaders}
-          name={item?.name ?? 'Unknown'}
-          onPress={() => onItemPress(item)}
-          installed={!!isInstalled}
-          testID={`wallet-search-item-${item?.id}`}
-        />
-      </View>
-    );
-  };
-
-  const loadingTemplate = (items: number) => {
-    return (
-      <FlexView
-        flexDirection="row"
-        flexWrap="wrap"
-        alignSelf="center"
-        padding={['0', '0', 's', 'xs']}
-        style={[styles.container, { maxWidth }]}
-      >
-        {Array.from({ length: items }).map((_, index) => (
-          <View key={index} style={[styles.itemContainer, { width: itemWidth }]}>
-            <CardSelectLoader />
-          </View>
-        ))}
-      </FlexView>
-    );
-  };
+  const { maxHeight, padding, isLandscape } = useCustomDimensions();
 
   const emptyTemplate = () => {
     return (
@@ -104,7 +63,7 @@ export function AllWalletsSearch({
   }, [searchQuery, prevSearchQuery, searchFetch]);
 
   if (loading) {
-    return loadingTemplate(20);
+    return <Loading itemWidth={itemWidth} containerStyle={styles.itemContainer} />;
   }
 
   if (loadingError) {
@@ -133,9 +92,20 @@ export function AllWalletsSearch({
       bounces={false}
       numColumns={columns}
       data={ApiController.state.search}
-      renderItem={walletTemplate}
-      style={styles.container}
-      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
+      renderItem={({ item }) => (
+        <WalletItem
+          item={item}
+          itemWidth={itemWidth}
+          imageHeaders={imageHeaders}
+          onItemPress={onItemPress}
+          style={styles.itemContainer}
+        />
+      )}
+      style={{ maxHeight: maxHeight - headerHeight - Spacing['2xl'] }}
+      contentContainerStyle={[
+        styles.contentContainer,
+        { paddingHorizontal: padding + Spacing['2xs'] }
+      ]}
       keyExtractor={item => item.id}
       getItemLayout={(_, index) => ({
         length: ITEM_HEIGHT,

package/src/partials/w3m-all-wallets-search/styles.ts

@@ -2,11 +2,8 @@ import { Spacing } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
-  container: {
-    height: '100%'
-  },
   contentContainer: {
-    paddingBottom: Spacing['2xl']
+    paddingBottom: Spacing['4xl']
   },
   placeholderContainer: {
     flex: 0,
@@ -22,7 +19,7 @@ export default StyleSheet.create({
   itemContainer: {
     alignItems: 'center',
     justifyContent: 'center',
-    marginVertical: Spacing.xs
+    margin: Spacing['4xs']
   },
   text: {
     marginTop: Spacing.xs

package/src/partials/w3m-connecting-body/index.tsx

@@ -12,11 +12,11 @@ export function ConnectingBody({ title, description }: ConnectingBodyProps) {
   return (
     <FlexView padding={['3xs', '2xl', '0', '2xl']} alignItems="center" style={styles.textContainer}>
       <Text variant="paragraph-500">{title}</Text>
-      {description && (
+      {description ? (
         <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
           {description}
         </Text>
-      )}
+      ) : null}
     </FlexView>
   );
 }

package/src/partials/w3m-connecting-header/index.tsx

@@ -1,4 +1,4 @@
-import type { Platform } from '@reown/appkit-core-react-native';
+import type { Platform } from '@reown/appkit-common-react-native';
 import { FlexView, Tabs, type IconType } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 

package/src/partials/w3m-connecting-mobile/index.tsx

@@ -5,11 +5,12 @@ import {
   RouterController,
   ApiController,
   AssetUtil,
-  ConnectionController,
+  WcController,
   CoreHelperUtil,
   OptionsController,
   EventsController,
-  ConstantsUtil
+  ConstantsUtil,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -17,11 +18,10 @@ import {
   LoadingThumbnail,
   WalletImage,
   Link,
-  IconBox
+  IconBox,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { UiUtil } from '../../utils/UiUtil';
 import { StoreLink } from './components/StoreLink';
 import { ConnectingBody, getMessage, type BodyErrorType } from '../w3m-connecting-body';
 import styles from './styles';
@@ -35,7 +35,8 @@ interface Props {
 export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   const { data } = RouterController.state;
   const { maxWidth: width } = useCustomDimensions();
-  const { wcUri, wcError } = useSnapshot(ConnectionController.state);
+  const { wcUri, wcError } = useSnapshot(WcController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const showCopy =
     OptionsController.isClipboardAvailable() &&
@@ -52,7 +53,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
 
   const onRetryPress = () => {
     setErrorType(undefined);
-    ConnectionController.setWcError(false);
+    WcController.setWcError(false);
     onRetry?.();
   };
 
@@ -68,11 +69,11 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
       if (name && mobile_link && wcUri) {
         const { redirect, href } = CoreHelperUtil.formatNativeUrl(mobile_link, wcUri);
         const wcLinking = { name, href };
-        ConnectionController.setWcLinking(wcLinking);
-        ConnectionController.setPressedWallet(data?.wallet);
+        WcController.setWcLinking(wcLinking);
+        WcController.setPressedWallet(data?.wallet);
         await CoreHelperUtil.openLink(redirect);
-        await ConnectionController.state.wcPromise;
-        UiUtil.storeConnectedWallet(wcLinking, data?.wallet);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking, data?.wallet);
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
@@ -109,10 +110,10 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
         <LoadingThumbnail paused={!!errorType || wcError}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getWalletImage(RouterController.state.data?.wallet)}
+            imageSrc={AssetUtil.getWalletImage(RouterController.state.data?.wallet, walletImages)}
             imageHeaders={ApiController._getApiHeaders()}
           />
-          {wcError && (
+          {wcError ? (
             <IconBox
               icon={'close'}
               border
@@ -122,10 +123,10 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
               iconColor="error-100"
               style={styles.errorIcon}
             />
-          )}
+          ) : null}
         </LoadingThumbnail>
         <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
-        {showRetry && (
+        {showRetry ? (
           <Button
             size="sm"
             variant="accent"
@@ -136,9 +137,9 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
           >
             Try again
           </Button>
-        )}
+        ) : null}
       </FlexView>
-      {showCopy && (
+      {showCopy ? (
         <Link
           iconLeft="copySmall"
           color="fg-200"
@@ -147,7 +148,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
         >
           Copy link
         </Link>
-      )}
+      ) : null}
       <StoreLink
         visible={!isInstalled && !!storeUrl}
         walletName={data?.wallet?.name}

package/src/partials/w3m-connecting-qrcode/components/ReownButton.tsx

@@ -0,0 +1,20 @@
+import { Linking, type StyleProp, type ViewStyle } from 'react-native';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { FlexView, Icon, Pressable, Text } from '@reown/appkit-ui-react-native';
+
+interface Props {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ReownButton({ style }: Props) {
+  return (
+    <Pressable transparent onPress={() => Linking.openURL(ConstantsUtil.REOWN_URL)} style={style}>
+      <FlexView alignItems="center" justifyContent="center" flexDirection="row" columnGap="2xs">
+        <Text variant="small-500" color="fg-100">
+          UX by
+        </Text>
+        <Icon name="reown" color="fg-150" width={100} height={30} />
+      </FlexView>
+    </Pressable>
+  );
+}

package/src/partials/w3m-connecting-qrcode/index.tsx

@@ -1,32 +1,37 @@
 import { useEffect } from 'react';
 import { useSnapshot } from 'valtio';
 import {
-  AssetUtil,
-  ConnectionController,
+  WcController,
   EventsController,
   OptionsController,
   SnackController
 } from '@reown/appkit-core-react-native';
-import { FlexView, Link, QrCode, Text, Spacing } from '@reown/appkit-ui-react-native';
-import { ConstantsUtil } from '@reown/appkit-common-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import {
+  FlexView,
+  Link,
+  QrCode,
+  Text,
+  Spacing,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 import styles from './styles';
+import { ReownButton } from './components/ReownButton';
 
 export function ConnectingQrCode() {
-  const { wcUri } = useSnapshot(ConnectionController.state);
+  const { wcUri } = useSnapshot(WcController.state);
   const showCopy = OptionsController.isClipboardAvailable();
   const { maxWidth: windowSize, isPortrait } = useCustomDimensions();
   const qrSize = (windowSize - Spacing.xl * 2) / (isPortrait ? 1 : 1.5);
 
   const onCopyAddress = () => {
-    if (ConnectionController.state.wcUri) {
-      OptionsController.copyToClipboard(ConnectionController.state.wcUri);
+    if (WcController.state.wcUri) {
+      OptionsController.copyToClipboard(WcController.state.wcUri);
       SnackController.showSuccess('Link copied');
     }
   };
 
   const onConnect = async () => {
-    await ConnectionController.state.wcPromise;
+    await WcController.state.wcPromise;
 
     EventsController.sendEvent({
       type: 'track',
@@ -36,10 +41,6 @@ export function ConnectingQrCode() {
         name: 'WalletConnect'
       }
     });
-
-    //TODO: check this
-    const url = AssetUtil.getConnectorImage(ConstantsUtil.WALLET_CONNECT_IMAGE_ID);
-    ConnectionController.setConnectedWalletImageUrl(url);
   };
 
   useEffect(() => {
@@ -53,12 +54,12 @@ export function ConnectingQrCode() {
       alignItems="center"
       justifyContent="center"
       flexDirection={isPortrait ? 'column' : 'row'}
-      padding={['xl', 'xl', '2xl', 'xl']}
+      padding="xl"
     >
       <QrCode size={qrSize} uri={wcUri} testID="qr-code" />
       <FlexView alignItems="center" margin="m">
         <Text variant="paragraph-500">Scan this QR code with your phone</Text>
-        {showCopy && (
+        {showCopy ? (
           <Link
             iconLeft="copySmall"
             color="fg-200"
@@ -68,7 +69,8 @@ export function ConnectingQrCode() {
           >
             Copy link
           </Link>
-        )}
+        ) : null}
+        <ReownButton style={styles.reownButton} />
       </FlexView>
     </FlexView>
   );

package/src/partials/w3m-connecting-qrcode/styles.ts

@@ -4,5 +4,8 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   copyButton: {
     marginTop: Spacing.m
+  },
+  reownButton: {
+    marginTop: Spacing['2xl']
   }
 });