[RN] Improve UI and theming

thirdweb-dev · iketw · Oct 20, 2023 · Oct 19, 2023 · Oct 19, 2023 · Oct 19, 2023
commit 2885a2223b97ca8267d5025d34f216c3654c769d
diff --git a/packages/react-native/src/evm/assets/close.tsx b/packages/react-native/src/evm/assets/close.tsx
@@ -1,12 +1,12 @@
 import Svg, { Path } from "react-native-svg";
 import { IconStyleProp } from "./types";
 
-const CloseIcon = ({ width, height }: IconStyleProp) => {
+const CloseIcon = ({ width, height, color }: IconStyleProp) => {
   return (
     <Svg width={width} height={height} viewBox="0 0 14 14" fill="none">
       <Path
         d="M13.3002 0.70998C13.2077 0.617276 13.0978 0.543728 12.9768 0.493547C12.8559 0.443366 12.7262 0.417535 12.5952 0.417535C12.4643 0.417535 12.3346 0.443366 12.2136 0.493547C12.0926 0.543728 11.9827 0.617276 11.8902 0.70998L7.00022 5.58998L2.11022 0.699979C2.01764 0.607397 1.90773 0.533957 1.78677 0.483852C1.6658 0.433747 1.53615 0.407959 1.40522 0.407959C1.27429 0.407959 1.14464 0.433747 1.02368 0.483852C0.902716 0.533957 0.792805 0.607397 0.700223 0.699979C0.607642 0.792561 0.534202 0.902472 0.484097 1.02344C0.433992 1.1444 0.408203 1.27405 0.408203 1.40498C0.408203 1.53591 0.433992 1.66556 0.484097 1.78652C0.534202 1.90749 0.607642 2.0174 0.700223 2.10998L5.59022 6.99998L0.700223 11.89C0.607642 11.9826 0.534202 12.0925 0.484097 12.2134C0.433992 12.3344 0.408203 12.464 0.408203 12.595C0.408203 12.7259 0.433992 12.8556 0.484097 12.9765C0.534202 13.0975 0.607642 13.2074 0.700223 13.3C0.792805 13.3926 0.902716 13.466 1.02368 13.5161C1.14464 13.5662 1.27429 13.592 1.40522 13.592C1.53615 13.592 1.6658 13.5662 1.78677 13.5161C1.90773 13.466 2.01764 13.3926 2.11022 13.3L7.00022 8.40998L11.8902 13.3C11.9828 13.3926 12.0927 13.466 12.2137 13.5161C12.3346 13.5662 12.4643 13.592 12.5952 13.592C12.7262 13.592 12.8558 13.5662 12.9768 13.5161C13.0977 13.466 13.2076 13.3926 13.3002 13.3C13.3928 13.2074 13.4662 13.0975 13.5163 12.9765C13.5665 12.8556 13.5922 12.7259 13.5922 12.595C13.5922 12.464 13.5665 12.3344 13.5163 12.2134C13.4662 12.0925 13.3928 11.9826 13.3002 11.89L8.41022 6.99998L13.3002 2.10998C13.6802 1.72998 13.6802 1.08998 13.3002 0.70998Z"
-        fill="#646D7A"
+        fill={color}
       />
     </Svg>
   );

diff --git a/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx b/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx
@@ -142,6 +142,8 @@ export const ConnectWalletDetailsModal = ({
           <BaseButton
             backgroundColor="background"
             borderColor="border"
+            borderRadius="lg"
+            borderWidth={0.5}
             mb="sm"
             justifyContent="space-between"
             style={styles.exportWallet}
@@ -159,6 +161,8 @@ export const ConnectWalletDetailsModal = ({
           <BaseButton
             backgroundColor="background"
             borderColor="border"
+            borderRadius="lg"
+            borderWidth={0.5}
             mb="sm"
             justifyContent="space-between"
             style={styles.exportWallet}
@@ -323,8 +327,6 @@ const styles = StyleSheet.create({
     alignContent: "center",
     alignItems: "center",
     justifyContent: "flex-start",
-    borderRadius: 12,
-    borderWidth: 0.5,
     paddingHorizontal: 10,
     paddingVertical: 12,
     minWidth: 200,
@@ -336,5 +338,6 @@ const styles = StyleSheet.create({
     alignItems: "flex-start",
     justifyContent: "flex-start",
     marginBottom: 8,
+    marginTop: 12,
   },
 });
diff --git a/...ges/react-native/src/evm/components/ConnectWalletDetails/SmartWalletAdditionalActions.tsx b/...ges/react-native/src/evm/components/ConnectWalletDetails/SmartWalletAdditionalActions.tsx
@@ -85,6 +85,8 @@ export const SmartWalletAdditionalActions = ({
           <BaseButton
             backgroundColor="background"
             borderColor="border"
+            borderRadius="lg"
+            borderWidth={0.5}
             mb="sm"
             mt="xs"
             justifyContent="space-between"
@@ -141,8 +143,6 @@ const styles = StyleSheet.create({
     alignContent: "center",
     alignItems: "center",
     justifyContent: "flex-start",
-    borderRadius: 12,
-    borderWidth: 0.5,
     paddingHorizontal: 10,
     paddingVertical: 12,
     minWidth: 200,

diff --git a/packages/react-native/src/evm/components/ConnectWalletFlow/ChooseWallet/ChooseWallet.tsx b/packages/react-native/src/evm/components/ConnectWalletFlow/ChooseWallet/ChooseWallet.tsx
@@ -122,13 +122,7 @@ export function ChooseWallet({
                   color={theme.colors.backgroundInverted}
                 />
               )}
-              <Text
-                variant="header"
-                ml="xxs"
-                fontWeight="700"
-                fontSize={20}
-                lineHeight={24}
-              >
+              <Text variant="headerBold" ml="xxs" fontSize={20} lineHeight={24}>
                 Connect
               </Text>
             </Box>
@@ -180,7 +174,6 @@ export function ChooseWallet({
       !isConnectAWalletEnabled &&
       (guestWallet || connectionWallets.length > 0) ? (
         <Box
-          mb="md"
           mt="md"
           marginHorizontal="xl"
           flexDirection="row"
@@ -202,7 +195,7 @@ export function ChooseWallet({
             marginHorizontal="xl"
             paddingHorizontal="none"
             paddingVertical="none"
-            mb="md"
+            mt="md"
             walletIconUrl={connectionWallets[0].meta.iconURL}
             name={connectionWallets[0].meta.name}
             onPress={onSingleWalletPress}
@@ -212,6 +205,7 @@ export function ChooseWallet({
             marginHorizontal="xl"
             justifyContent="center"
             borderRadius="lg"
+            mt="md"
             paddingVertical="md"
             borderColor="border"
             flexDirection="row"
@@ -230,9 +224,7 @@ export function ChooseWallet({
                 </Box>
               );
             })}
-            <Text variant="bodySmall" fontWeight="700">
-              Connect a wallet
-            </Text>
+            <Text variant="bodyLarge">Connect a wallet</Text>
           </BaseButton>
         )
       ) : null}
@@ -253,9 +245,7 @@ export function ChooseWallet({
               color={theme.colors.textPrimary}
             />
           ) : (
-            <Text variant="bodySmall" fontWeight="700">
-              Continue as guest
-            </Text>
+            <Text variant="bodySmall">Continue as guest</Text>
           )}
         </BaseButton>
       ) : null}

diff --git a/packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletButton.tsx b/packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletButton.tsx
@@ -95,6 +95,8 @@ export const ConnectWalletButton = ({
     <ThemeProvider theme={theme ? theme : appTheme}>
       <BaseButton
         backgroundColor="buttonBackgroundColor"
+        borderColor="buttonBorderColor"
+        borderWidth={1}
         onPress={onConnectWalletPress}
         style={styles.connectWalletButton}
       >

diff --git a/packages/react-native/src/evm/components/SendFunds/TokenSelector.tsx b/packages/react-native/src/evm/components/SendFunds/TokenSelector.tsx
@@ -197,7 +197,7 @@ export function TokenSelector(props: {
           minHeight={150}
           paddingTop="none"
         >
-          <CloseIcon width={16} height={16} />
+          <CloseIcon width={16} height={16} color={theme.colors.border} />
           <Text variant="bodySmall">No Tokens found</Text>
         </Box>
       )}

diff --git a/packages/react-native/src/evm/components/base/NetworkButton.tsx b/packages/react-native/src/evm/components/base/NetworkButton.tsx
@@ -151,7 +151,7 @@ export const SwitchChainModal = ({
             </Text>
             <ModalHeaderTextClose flex={1} onClose={onCloseInternal} />
           </Box>
-          <ScrollView>
+          <ScrollView contentContainerStyle={{ paddingBottom: 10 }}>
             {supportedChains?.length > 0 ? (
               supportedChains.map((chain) => {
                 return (

diff --git a/packages/react-native/src/evm/components/base/TextBalance.tsx b/packages/react-native/src/evm/components/base/TextBalance.tsx
@@ -4,7 +4,7 @@ import LoadingTextAnimation from "./LoadingTextAnimation";
 import { baseTheme } from "../../styles/theme";
 
 type TextBalance = {
-  textVariant: keyof typeof baseTheme.textVariants;
+  textVariant: keyof Omit<typeof baseTheme.textVariants, "defaults">;
   tokenAddress?: string;
 };
 

diff --git a/packages/react-native/src/evm/styles/colors.ts b/packages/react-native/src/evm/styles/colors.ts
@@ -1,6 +1,7 @@
 export type Palette = {
   buttonBackgroundColor: string;
   buttonTextColor: string;
+  buttonBorderColor: string;
 
   accentButtonColor: string;
   accentButtonTextColor: string;
@@ -41,6 +42,7 @@ export const paletteBase = {
 
 export const paletteLight: Palette = {
   buttonBackgroundColor: "black",
+  buttonBorderColor: "black",
   buttonTextColor: "white",
 
   accentButtonColor: "#3385FF",
@@ -67,6 +69,7 @@ export const paletteLight: Palette = {
 
 export const paletteDark: Palette = {
   buttonBackgroundColor: "white",
+  buttonBorderColor: "white",
   buttonTextColor: "black",
 
   accentButtonColor: "#3385FF",

diff --git a/packages/react-native/src/evm/styles/textVariants.ts b/packages/react-native/src/evm/styles/textVariants.ts
@@ -1,10 +1,23 @@
 export const textVariants = {
+  defaults: {
+    fontFamily: "none",
+    fontSize: 24,
+    fontWeight: "700",
+    lineHeight: 32,
+    color: "textPrimary",
+  },
   header: {
     fontSize: 24,
     fontWeight: "600",
     lineHeight: 32,
     color: "textPrimary",
   },
+  headerBold: {
+    fontSize: 24,
+    fontWeight: "700",
+    lineHeight: 32,
+    color: "textPrimary",
+  },
   subHeader: {
     fontSize: 16,
     fontWeight: "500",
@@ -32,6 +45,13 @@ export const textVariants = {
     fontSize: 14,
     lineHeight: 16,
   },
+  bodySmallBold: {
+    color: "textPrimary",
+    textAlign: "center",
+    fontWeight: "700",
+    fontSize: 14,
+    lineHeight: 16,
+  },
   bodySmallSecondary: {
     color: "textSecondary",
     textAlign: "left",

diff --git a/packages/react-native/src/evm/styles/theme.ts b/packages/react-native/src/evm/styles/theme.ts
@@ -1,4 +1,4 @@
-import { DeepPartial } from "../types/deepPartial";
+import { DeepPartial, deepMerge } from "../types/deepPartial";
 import { paletteDark, paletteLight } from "./colors";
 import { textVariants } from "./textVariants";
 import { createTheme } from "@shopify/restyle";
@@ -45,40 +45,43 @@ export type Theme = typeof _darkTheme;
 export type ButtonTheme = {
   buttonBackgroundColor?: string;
   buttonTextColor?: string;
+  buttonBorderColor?: string;
 };
 
 export const darkTheme = ({
   buttonBackgroundColor = paletteDark.buttonBackgroundColor,
   buttonTextColor = paletteDark.buttonTextColor,
+  buttonBorderColor = paletteLight.buttonBorderColor,
   colors,
   ...props
 }: ButtonTheme & DeepPartial<Theme> = _darkTheme): Theme => {
-  return {
-    ..._darkTheme,
+  return deepMerge(_darkTheme, {
     colors: {
       ..._darkTheme.colors,
       ...colors,
       buttonBackgroundColor,
       buttonTextColor,
+      buttonBorderColor,
     },
     ...props,
-  } as Theme;
+  });
 };
 
 export const lightTheme = ({
   buttonBackgroundColor = paletteLight.buttonBackgroundColor,
   buttonTextColor = paletteLight.buttonTextColor,
+  buttonBorderColor = paletteLight.buttonBorderColor,
   colors,
   ...props
 }: ButtonTheme & DeepPartial<Theme> = _lightTheme): Theme => {
-  return {
-    ..._lightTheme,
+  return deepMerge(_lightTheme, {
     colors: {
       ..._lightTheme.colors,
       ...colors,
       buttonBackgroundColor,
       buttonTextColor,
+      buttonBorderColor,
     },
     ...props,
-  } as Theme;
+  });
 };
diff --git a/packages/react-native/src/evm/types/deepPartial.ts b/packages/react-native/src/evm/types/deepPartial.ts
@@ -1,3 +1,22 @@
 export type DeepPartial<T> = {
   [P in keyof T]?: DeepPartial<T[P]>;
 };
+
+export function deepMerge<T>(target: T, source: DeepPartial<T>): T {
+  for (const key in source) {
+    if (
+      source[key] instanceof Object &&
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      key in target &&
+      target[key] instanceof Object
+    ) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      deepMerge(target[key], source[key]);
+    } else {
+      target[key] = source[key] as any;
+    }
+  }
+  return target;
+}
diff --git a/packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedSelectionUI.tsx b/packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedSelectionUI.tsx
@@ -133,6 +133,7 @@ export const EmailSelectionUI: React.FC<
               style: {
                 fontSize: 14,
                 color: theme.colors.textPrimary,
+                fontFamily: theme.textVariants.defaults.fontFamily,
                 lineHeight: 16,
                 padding: 0,
                 flex: 1,
@@ -166,11 +167,7 @@ export const EmailSelectionUI: React.FC<
                 color={theme.colors.accentButtonTextColor}
               />
             ) : (
-              <Text
-                variant="bodySmall"
-                color="accentButtonTextColor"
-                fontWeight="700"
-              >
+              <Text variant="bodySmall" color="accentButtonTextColor">
                 Continue
               </Text>
             )}