Merge pull request #93 from WalletConnect/fix/remove-gap

Fix/remove gap
reown-com · Nov 8, 2023 · b668012 · b668012
2 parents f465c63 + b75439b
commit b668012
Show file tree

Hide file tree

Showing 62 changed files with 513 additions and 330 deletions.
diff --git a/apps/gallery/stories/composites/AllWalletsImage.stories.tsx b/apps/gallery/stories/composites/AllWalletsImage.stories.tsx
diff --git a/apps/gallery/stories/composites/IconLink.stories.tsx b/apps/gallery/stories/composites/IconLink.stories.tsx
@@ -27,6 +27,14 @@ const meta: Meta<typeof IconLink> = {
     icon: {
       options: iconOptions,
       control: { type: 'select' }
+    },
+    backgroundColor: {
+      options: themeColorOptions,
+      control: { type: 'select' }
+    },
+    pressedColor: {
+      options: themeColorOptions,
+      control: { type: 'select' }
     }
   }
 };
@@ -39,6 +47,8 @@ export const Default: Story = {
     <IconLink
       size={args.size}
       iconColor={args.iconColor}
+      backgroundColor={args.backgroundColor}
+      pressedColor={args.pressedColor}
       icon={args.icon}
       disabled={args.disabled}
     />

diff --git a/apps/gallery/utils/PresetUtils.ts b/apps/gallery/utils/PresetUtils.ts
@@ -1,5 +1,6 @@
 import type {
   ColorType,
+  ThemeColorType,
   TextType,
   ButtonType,
   IconType,
@@ -46,6 +47,48 @@ export const colorOptions: ColorType[] = [
   'success-100'
 ];
 
+export const themeColorOptions: ThemeColorType[] = [
+  'accent-100',
+  'accent-090',
+  'accent-020',
+  'accent-glass-090',
+  'accent-glass-080',
+  'accent-glass-020',
+  'accent-glass-015',
+  'accent-glass-010',
+  'accent-glass-005',
+  'accent-glass-002',
+  'fg-100',
+  'fg-125',
+  'fg-150',
+  'fg-175',
+  'fg-200',
+  'fg-225',
+  'fg-250',
+  'fg-275',
+  'fg-300',
+  'bg-100',
+  'bg-125',
+  'bg-150',
+  'bg-175',
+  'bg-200',
+  'bg-225',
+  'bg-250',
+  'bg-275',
+  'bg-300',
+  'gray-glass-001',
+  'gray-glass-002',
+  'gray-glass-005',
+  'gray-glass-010',
+  'gray-glass-015',
+  'gray-glass-020',
+  'gray-glass-025',
+  'gray-glass-030',
+  'gray-glass-060',
+  'gray-glass-080',
+  'gray-glass-090'
+];
+
 export const textOptions: TextType[] = [
   'medium-title-400',
   'medium-title-500',
@@ -92,12 +135,14 @@ export const iconOptions: IconType[] = [
   'chevronBottom',
   'chevronLeft',
   'chevronRight',
+  'chevronRightSmall',
   'chevronTop',
   'clock',
   'close',
   'coinPlaceholder',
   'compass',
   'copy',
+  'copySmall',
   'cursor',
   'desktop',
   'disconnect',
@@ -126,6 +171,7 @@ export const iconOptions: IconType[] = [
   'twitterIcon',
   'twitter',
   'wallet',
+  'walletSmall',
   'walletConnect',
   'walletPlaceholder',
   'warningCircle'

diff --git a/packages/scaffold/src/modal/w3m-modal/index.tsx b/packages/scaffold/src/modal/w3m-modal/index.tsx
@@ -17,6 +17,7 @@ export function Web3Modal() {
   const { history } = useSnapshot(RouterController.state);
   const { height } = useWindowDimensions();
   const { isLandscape } = useCustomDimensions();
+  const portraitHeight = height - 120;
   const landScapeHeight = height * 0.95 - (StatusBar.currentHeight ?? 0);
 
   const onBackButtonPress = () => {
@@ -42,7 +43,7 @@ export function Web3Modal() {
       onBackdropPress={ModalController.close}
       onBackButtonPress={onBackButtonPress}
     >
-      <Card style={[styles.card, isLandscape && { maxHeight: landScapeHeight }]}>
+      <Card style={[styles.card, { maxHeight: isLandscape ? landScapeHeight : portraitHeight }]}>
         <Header />
         <Web3Router />
         <Snackbar />

diff --git a/packages/scaffold/src/partials/w3m-all-wallets-list/index.tsx b/packages/scaffold/src/partials/w3m-all-wallets-list/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { FlatList } from 'react-native';
+import { FlatList, View } from 'react-native';
 import {
   ApiController,
   AssetUtil,
@@ -20,10 +20,10 @@ import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 
 interface AllWalletsListProps {
   columns: number;
-  gap?: number;
+  itemWidth?: number;
 }
 
-export function AllWalletsList({ columns, gap = 0 }: AllWalletsListProps) {
+export function AllWalletsList({ columns, itemWidth }: AllWalletsListProps) {
   const [loading, setLoading] = useState<boolean>(false);
   const [pageLoading, setPageLoading] = useState<boolean>(false);
   const { maxWidth, padding } = useCustomDimensions();
@@ -42,37 +42,44 @@ export function AllWalletsList({ columns, gap = 0 }: AllWalletsListProps) {
     ...(pageLoading ? (Array.from({ length: loadingItems }) as WcWallet[]) : [])
   ];
 
-  const ITEM_HEIGHT = CardSelectHeight + gap;
+  const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
 
   const loadingTemplate = (items: number) => {
     return (
       <FlexView
         flexDirection="row"
         flexWrap="wrap"
         alignSelf="center"
-        padding={['2xs', '0', 's', 's']}
-        style={{ gap, maxWidth }}
+        padding={['0', '0', 's', 'xs']}
+        style={[styles.container, { maxWidth }]}
       >
         {Array.from({ length: items }).map((_, index) => (
-          <CardSelectLoader key={index} />
+          <View key={index} style={[styles.itemContainer, { width: itemWidth }]}>
+            <CardSelectLoader />
+          </View>
         ))}
       </FlexView>
     );
   };
 
   const walletTemplate = ({ item, index }: { item: WcWallet; index: number }) => {
     if (!item?.id) {
-      return <CardSelectLoader key={index} />;
+      return (
+        <View key={index} style={[styles.itemContainer, { width: itemWidth }]}>
+          <CardSelectLoader />
+        </View>
+      );
     }
 
     return (
-      <CardSelect
-        key={item?.id}
-        imageSrc={AssetUtil.getWalletImage(item)}
-        imageHeaders={imageHeaders}
-        name={item?.name ?? 'Unknown'}
-        onPress={() => RouterController.push('ConnectingWalletConnect', { wallet: item })}
-      />
+      <View key={item?.id} style={[styles.itemContainer, { width: itemWidth }]}>
+        <CardSelect
+          imageSrc={AssetUtil.getWalletImage(item)}
+          imageHeaders={imageHeaders}
+          name={item?.name ?? 'Unknown'}
+          onPress={() => RouterController.push('ConnectingWalletConnect', { wallet: item })}
+        />
+      </View>
     );
   };
 
@@ -109,11 +116,8 @@ export function AllWalletsList({ columns, gap = 0 }: AllWalletsListProps) {
       numColumns={columns}
       data={walletList}
       renderItem={walletTemplate}
-      contentContainerStyle={[
-        styles.contentContainer,
-        { gap, paddingHorizontal: padding + Spacing.s }
-      ]}
-      columnWrapperStyle={{ gap }}
+      style={styles.container}
+      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
       onEndReached={fetchNextPage}
       onEndReachedThreshold={2}
       keyExtractor={(item, index) => item?.id ?? index}

diff --git a/packages/scaffold/src/partials/w3m-all-wallets-list/styles.ts b/packages/scaffold/src/partials/w3m-all-wallets-list/styles.ts
@@ -2,10 +2,16 @@ import { Spacing } from '@web3modal/ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
+  container: {
+    height: '100%'
+  },
   contentContainer: {
-    paddingTop: Spacing['2xs'],
-    paddingBottom: Spacing['2xl'],
-    paddingHorizontal: Spacing.s
+    paddingBottom: Spacing['2xl']
+  },
+  itemContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: Spacing.xs
   },
   pageLoader: {
     marginTop: Spacing.xl

diff --git a/packages/scaffold/src/partials/w3m-all-wallets-search/index.tsx b/packages/scaffold/src/partials/w3m-all-wallets-search/index.tsx
@@ -1,6 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
-import { FlatList } from 'react-native';
+import { FlatList, View } from 'react-native';
 import {
   ApiController,
   AssetUtil,
@@ -22,27 +22,28 @@ import styles from './styles';
 export interface AllWalletsSearchProps {
   searchQuery?: string;
   columns: number;
-  gap?: number;
+  itemWidth?: number;
 }
 
-export function AllWalletsSearch({ searchQuery, columns, gap = 0 }: AllWalletsSearchProps) {
+export function AllWalletsSearch({ searchQuery, columns, itemWidth }: AllWalletsSearchProps) {
   const [loading, setLoading] = useState<boolean>(false);
   const { search } = useSnapshot(ApiController.state);
   const [prevSearchQuery, setPrevSearchQuery] = useState<string>('');
   const imageHeaders = ApiController._getApiHeaders();
-  const { maxWidth, padding } = useCustomDimensions();
+  const { maxWidth, padding, isLandscape } = useCustomDimensions();
 
-  const ITEM_HEIGHT = CardSelectHeight + gap;
+  const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
 
   const walletTemplate = ({ item }: { item: WcWallet }) => {
     return (
-      <CardSelect
-        key={item?.id}
-        imageSrc={AssetUtil.getWalletImage(item)}
-        imageHeaders={imageHeaders}
-        name={item?.name ?? 'Unknown'}
-        onPress={() => RouterController.push('ConnectingWalletConnect', { wallet: item })}
-      />
+      <View key={item?.id} style={[styles.itemContainer, { width: itemWidth }]}>
+        <CardSelect
+          imageSrc={AssetUtil.getWalletImage(item)}
+          imageHeaders={imageHeaders}
+          name={item?.name ?? 'Unknown'}
+          onPress={() => RouterController.push('ConnectingWalletConnect', { wallet: item })}
+        />
+      </View>
     );
   };
 
@@ -52,27 +53,32 @@ export function AllWalletsSearch({ searchQuery, columns, gap = 0 }: AllWalletsSe
         flexDirection="row"
         flexWrap="wrap"
         alignSelf="center"
-        padding={['2xs', '0', 's', 's']}
-        style={{ gap, maxWidth }}
+        padding={['0', '0', 's', 'xs']}
+        style={[styles.container, { maxWidth }]}
       >
         {Array.from({ length: items }).map((_, index) => (
-          <CardSelectLoader key={index} />
+          <View key={index} style={[styles.itemContainer, { width: itemWidth }]}>
+            <CardSelectLoader />
+          </View>
         ))}
       </FlexView>
     );
   };
 
   const emptyTemplate = () => {
     return (
-      <FlexView justifyContent="center" alignItems="center" gap="m" style={styles.emptyContainer}>
+      <FlexView
+        alignItems="center"
+        style={[styles.emptyContainer, isLandscape && styles.emptyLandscape]}
+      >
         <IconBox
           icon="walletPlaceholder"
           background
           size="lg"
           iconColor="fg-200"
           backgroundColor="gray-glass-005"
         />
-        <Text variant="paragraph-500" color="fg-200">
+        <Text variant="paragraph-500" color="fg-200" style={styles.text}>
           No wallet found
         </Text>
       </FlexView>
@@ -96,6 +102,10 @@ export function AllWalletsSearch({ searchQuery, columns, gap = 0 }: AllWalletsSe
     return loadingTemplate(20);
   }
 
+  if (search.length === 0) {
+    return emptyTemplate();
+  }
+
   return (
     <FlatList
       key={columns}
@@ -104,11 +114,8 @@ export function AllWalletsSearch({ searchQuery, columns, gap = 0 }: AllWalletsSe
       numColumns={columns}
       data={search}
       renderItem={walletTemplate}
-      contentContainerStyle={[
-        styles.contentContainer,
-        { gap, paddingHorizontal: padding + Spacing.s }
-      ]}
-      columnWrapperStyle={{ gap }}
+      style={styles.container}
+      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
       ListEmptyComponent={emptyTemplate()}
       keyExtractor={item => item.id}
       getItemLayout={(_, index) => ({

diff --git a/packages/scaffold/src/partials/w3m-all-wallets-search/styles.ts b/packages/scaffold/src/partials/w3m-all-wallets-search/styles.ts
@@ -2,13 +2,25 @@ import { Spacing } from '@web3modal/ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
+  container: {
+    height: '100%'
+  },
   contentContainer: {
-    height: '100%',
-    paddingTop: Spacing['2xs'],
-    paddingBottom: Spacing['2xl'],
-    paddingHorizontal: Spacing.s
+    paddingBottom: Spacing['2xl']
   },
   emptyContainer: {
-    height: '100%'
+    height: '100%',
+    paddingTop: '50%'
+  },
+  emptyLandscape: {
+    paddingTop: '10%'
+  },
+  itemContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: Spacing.xs
+  },
+  text: {
+    marginTop: Spacing.xs
   }
 });