Merge pull request #94 from WalletConnect/refactor/ui-improvements

UI improvements
reown-com · Nov 9, 2023 · 3d28e0c · 3d28e0c
2 parents b668012 + 0447140
commit 3d28e0c
Show file tree

Hide file tree

Showing 15 changed files with 49 additions and 32 deletions.
diff --git a/packages/scaffold/src/partials/w3m-connecting-mobile/index.tsx b/packages/scaffold/src/partials/w3m-connecting-mobile/index.tsx
@@ -6,7 +6,8 @@ import {
   ApiController,
   AssetUtil,
   ConnectionController,
-  CoreHelperUtil
+  CoreHelperUtil,
+  OptionsController
 } from '@web3modal/core-react-native';
 import {
   Button,
@@ -35,6 +36,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   const [linkingError, setLinkingError] = useState(false);
   const [isRetrying, setIsRetrying] = useState(false);
   const [ready, setReady] = useState(false);
+  const showCopy = OptionsController.isClipboardAvailable();
 
   const storeUrl = Platform.select({
     ios: data?.wallet?.app_store,
@@ -147,11 +149,11 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   }, [wcUri, isRetrying, onConnect]);
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20}>
+    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
       <FlexView
         alignItems="center"
         alignSelf="center"
-        padding={['2xl', 'l', '2xl', 'l']}
+        padding={['2xl', 'l', '0', 'l']}
         style={{ width }}
       >
         <LoadingThumbnail paused={linkingError || wcError}>
@@ -184,6 +186,8 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
             Try again
           </Button>
         )}
+      </FlexView>
+      {showCopy && (
         <Link
           iconLeft="copySmall"
           color="fg-200"
@@ -192,7 +196,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
         >
           Copy link
         </Link>
-      </FlexView>
+      )}
       {storeTemplate()}
     </ScrollView>
   );

diff --git a/packages/scaffold/src/partials/w3m-connecting-mobile/styles.ts b/packages/scaffold/src/partials/w3m-connecting-mobile/styles.ts
@@ -2,20 +2,23 @@ import { Spacing } from '@web3modal/ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
-  retryButton: {
-    marginVertical: Spacing.xs
+  container: {
+    paddingBottom: Spacing['3xl']
   },
-  copyButton: {
-    marginVertical: Spacing.xs
+  retryButton: {
+    marginTop: Spacing.m
   },
   retryIcon: {
     transform: [{ rotateY: '180deg' }]
   },
+  copyButton: {
+    marginTop: Spacing.m
+  },
   textContainer: {
     marginVertical: Spacing.xs
   },
   descriptionText: {
-    marginVertical: Spacing.xs,
+    marginTop: Spacing.xs,
     marginHorizontal: Spacing['3xl']
   },
   errorIcon: {
@@ -28,6 +31,6 @@ export default StyleSheet.create({
     justifyContent: 'space-between',
     paddingHorizontal: Spacing.l,
     marginHorizontal: Spacing.xl,
-    marginBottom: Spacing['2xl']
+    marginTop: Spacing.l
   }
 });
diff --git a/packages/scaffold/src/partials/w3m-connecting-web/index.tsx b/packages/scaffold/src/partials/w3m-connecting-web/index.tsx
@@ -6,7 +6,8 @@ import {
   ApiController,
   AssetUtil,
   ConnectionController,
-  CoreHelperUtil
+  CoreHelperUtil,
+  OptionsController
 } from '@web3modal/core-react-native';
 import {
   Button,
@@ -27,6 +28,7 @@ interface ConnectingWebProps {
 export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
   const { data } = useSnapshot(RouterController.state);
   const { wcUri, wcError } = useSnapshot(ConnectionController.state);
+  const showCopy = OptionsController.isClipboardAvailable();
 
   const onConnect = useCallback(async () => {
     try {
@@ -68,7 +70,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
 
   return (
     <ScrollView bounces={false} fadingEdgeLength={20}>
-      <FlexView alignItems="center" padding={['2xl', 'm', '2xl', 'm']}>
+      <FlexView alignItems="center" padding={['2xl', 'm', '3xl', 'm']}>
         <LoadingThumbnail paused={wcError}>
           <WalletImage
             size="lg"
@@ -96,14 +98,16 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
         >
           Open
         </Button>
-        <Link
-          iconLeft="copySmall"
-          color="fg-200"
-          style={styles.copyButton}
-          onPress={() => onCopyUri(wcUri)}
-        >
-          Copy link
-        </Link>
+        {showCopy && (
+          <Link
+            iconLeft="copySmall"
+            color="fg-200"
+            style={styles.copyButton}
+            onPress={() => onCopyUri(wcUri)}
+          >
+            Copy link
+          </Link>
+        )}
       </FlexView>
     </ScrollView>
   );

diff --git a/packages/scaffold/src/partials/w3m-connecting-web/styles.ts b/packages/scaffold/src/partials/w3m-connecting-web/styles.ts
@@ -3,10 +3,10 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   openButton: {
-    marginVertical: Spacing.xs
+    marginTop: Spacing.m
   },
   copyButton: {
-    marginVertical: Spacing.xs
+    marginTop: Spacing.m
   },
   mainText: {
     marginVertical: Spacing.xs

diff --git a/packages/scaffold/src/views/w3m-account-view/index.tsx b/packages/scaffold/src/views/w3m-account-view/index.tsx
@@ -79,7 +79,7 @@ export function AccountView() {
     <>
       <IconLink icon="close" style={styles.closeIcon} onPress={ModalController.close} />
       <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
-        <FlexView alignItems="center" padding={['3xl', 's', '2xl', 's']}>
+        <FlexView alignItems="center" padding={['3xl', 's', '3xl', 's']}>
           <Avatar imageSrc={profileImage} address={profileName ?? address} />
           <FlexView flexDirection="row" alignItems="center" margin={['s', '0', '0', '0']}>
             <Text variant="medium-title-600">

diff --git a/packages/scaffold/src/views/w3m-connect-view/index.tsx b/packages/scaffold/src/views/w3m-connect-view/index.tsx
@@ -142,7 +142,7 @@ export function ConnectView() {
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
-      <FlexView padding={['xs', 's', '2xl', 's']}>
+      <FlexView padding={['xs', 's', '3xl', 's']}>
         {recentTemplate()}
         {installedTemplate()}
         {featuredTemplate()}

diff --git a/packages/scaffold/src/views/w3m-get-wallet-view/index.tsx b/packages/scaffold/src/views/w3m-get-wallet-view/index.tsx
@@ -33,7 +33,7 @@ export function GetWalletView() {
 
   return (
     <ScrollView bounces={false} style={{ paddingHorizontal: padding }} fadingEdgeLength={20}>
-      <FlexView padding={['s', 's', '2xl', 's']}>
+      <FlexView padding={['s', 's', '3xl', 's']}>
         {listTemplate()}
         <ListWallet
           name="Explore all"

diff --git a/packages/scaffold/src/views/w3m-networks-view/index.tsx b/packages/scaffold/src/views/w3m-networks-view/index.tsx
@@ -95,7 +95,7 @@ export function NetworksView() {
       </ScrollView>
       <Separator />
       <FlexView
-        padding={['s', 's', '2xl', 's']}
+        padding={['s', 's', '3xl', 's']}
         alignItems="center"
         alignSelf="center"
         style={{ width }}

diff --git a/packages/scaffold/src/views/w3m-what-is-a-network-view/index.tsx b/packages/scaffold/src/views/w3m-what-is-a-network-view/index.tsx
@@ -11,7 +11,7 @@ export function WhatIsNetworkView() {
 
   return (
     <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
-      <FlexView alignItems="center" padding={['l', '4xl', '2xl', '4xl']}>
+      <FlexView alignItems="center" padding={['l', '4xl', '3xl', '4xl']}>
         <FlexView flexDirection="row" padding={['0', '0', 'xs', '0']}>
           <Visual name="network" />
           <Visual name="layers" style={styles.visual} />

diff --git a/packages/scaffold/src/views/w3m-what-is-a-wallet-view/index.tsx b/packages/scaffold/src/views/w3m-what-is-a-wallet-view/index.tsx
@@ -9,7 +9,7 @@ export function WhatIsAWalletView() {
 
   return (
     <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
-      <FlexView alignItems="center" padding={['l', '4xl', '2xl', '4xl']}>
+      <FlexView alignItems="center" padding={['l', '4xl', '3xl', '4xl']}>
         <FlexView flexDirection="row" padding={['0', '0', 'xs', '0']}>
           <Visual name="login" />
           <Visual name="profile" style={styles.visual} />

diff --git a/packages/ui/src/composites/wui-button/styles.ts b/packages/ui/src/composites/wui-button/styles.ts
@@ -62,7 +62,7 @@ export default StyleSheet.create({
   },
   mdButton: {
     height: 40,
-    paddingHorizontal: Spacing.s
+    paddingHorizontal: Spacing.xs
   },
   text: {
     marginHorizontal: Spacing['3xs']

diff --git a/packages/ui/src/composites/wui-input-text/styles.ts b/packages/ui/src/composites/wui-input-text/styles.ts
@@ -6,7 +6,7 @@ const baseStyle = {
   height: 40,
   borderRadius: BorderRadius.xxs,
   alignItems: 'center',
-  paddingHorizontal: Spacing.m,
+  paddingHorizontal: Spacing.xs,
   borderWidth: 1
 } as ViewStyle;
 
@@ -38,6 +38,7 @@ export default StyleSheet.create({
     fontWeight: '400'
   },
   icon: {
+    marginLeft: Spacing['3xs'],
     marginRight: Spacing.xs
   }
 });
diff --git a/packages/ui/src/composites/wui-list-item/index.tsx b/packages/ui/src/composites/wui-list-item/index.tsx
@@ -77,9 +77,9 @@ export function ListItem({
 
   function rightTemplate() {
     if (loading) {
-      return <LoadingSpinner color="fg-200" size="lg" />;
+      return <LoadingSpinner color="fg-200" size="lg" style={styles.rightIcon} />;
     } else if (chevron) {
-      return <Icon name="chevronRight" size="sm" color="fg-200" />;
+      return <Icon name="chevronRight" size="sm" color="fg-200" style={styles.rightIcon} />;
     }
 
     return null;

diff --git a/packages/ui/src/composites/wui-list-item/styles.ts b/packages/ui/src/composites/wui-list-item/styles.ts
@@ -30,5 +30,8 @@ export default StyleSheet.create({
   },
   disabledImage: {
     opacity: 0.4
+  },
+  rightIcon: {
+    marginRight: Spacing['2xs']
   }
 });
diff --git a/packages/ui/src/composites/wui-search-bar/index.tsx b/packages/ui/src/composites/wui-search-bar/index.tsx
@@ -3,6 +3,7 @@ import { TextInput, type TextInputProps } from 'react-native';
 
 import { InputElement } from '../wui-input-element';
 import { InputText } from '../wui-input-text';
+import { Spacing } from '../../utils/ThemeUtil';
 
 export interface SearchBarProps {
   placeholder?: string;
@@ -39,6 +40,7 @@ export function SearchBar({
       {showClear && (
         <InputElement
           icon="close"
+          style={{ marginRight: Spacing['4xs'] }}
           onPress={() => {
             inputRef.current?.clear();
             inputRef.current?.focus();