From c0a77659079411e6c59dadd0148e939f72aeffc3 Mon Sep 17 00:00:00 2001 From: ignaciosantise Date: Thu, 9 Nov 2023 09:46:52 -0300 Subject: [PATCH 1/3] refactor: small ui improvements --- .../partials/w3m-connecting-mobile/index.tsx | 12 ++++++---- .../partials/w3m-connecting-mobile/styles.ts | 15 +++++++----- .../src/partials/w3m-connecting-web/index.tsx | 24 +++++++++++-------- .../src/partials/w3m-connecting-web/styles.ts | 4 ++-- .../src/views/w3m-account-view/index.tsx | 2 +- .../src/views/w3m-connect-view/index.tsx | 2 +- .../src/views/w3m-get-wallet-view/index.tsx | 2 +- .../src/views/w3m-networks-view/index.tsx | 2 +- .../w3m-what-is-a-network-view/index.tsx | 2 +- .../views/w3m-what-is-a-wallet-view/index.tsx | 2 +- .../ui/src/composites/wui-button/styles.ts | 2 +- 11 files changed, 40 insertions(+), 29 deletions(-) diff --git a/packages/scaffold/src/partials/w3m-connecting-mobile/index.tsx b/packages/scaffold/src/partials/w3m-connecting-mobile/index.tsx index 81e41186..b5148b00 100644 --- 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 ( - + @@ -184,6 +186,8 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) { Try again )} + + {showCopy && ( Copy link - + )} {storeTemplate()} ); diff --git a/packages/scaffold/src/partials/w3m-connecting-mobile/styles.ts b/packages/scaffold/src/partials/w3m-connecting-mobile/styles.ts index cceda46e..6c49a014 100644 --- 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 index 2ba6987f..2da5555d 100644 --- 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 ( - + Open - onCopyUri(wcUri)} - > - Copy link - + {showCopy && ( + onCopyUri(wcUri)} + > + Copy link + + )} ); diff --git a/packages/scaffold/src/partials/w3m-connecting-web/styles.ts b/packages/scaffold/src/partials/w3m-connecting-web/styles.ts index d723fe7d..52906e49 100644 --- 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 index a2fd4923..f4d8327a 100644 --- 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() { <> - + diff --git a/packages/scaffold/src/views/w3m-connect-view/index.tsx b/packages/scaffold/src/views/w3m-connect-view/index.tsx index 42a28ab0..f172314d 100644 --- 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 ( - + {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 index 4e24096d..714589c9 100644 --- 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 ( - + {listTemplate()} - + 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 index 7982c319..29f2f6de 100644 --- 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 ( - + diff --git a/packages/ui/src/composites/wui-button/styles.ts b/packages/ui/src/composites/wui-button/styles.ts index f3733ef8..1feca138 100644 --- 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'] From af9f78639d8931091ee395d7170df94247083237 Mon Sep 17 00:00:00 2001 From: ignaciosantise Date: Thu, 9 Nov 2023 09:52:11 -0300 Subject: [PATCH 2/3] chore: added margin in listitem right icon --- packages/ui/src/composites/wui-list-item/index.tsx | 4 ++-- packages/ui/src/composites/wui-list-item/styles.ts | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/composites/wui-list-item/index.tsx b/packages/ui/src/composites/wui-list-item/index.tsx index 6c140301..0042fb23 100644 --- 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 ; + return ; } else if (chevron) { - return ; + return ; } return null; diff --git a/packages/ui/src/composites/wui-list-item/styles.ts b/packages/ui/src/composites/wui-list-item/styles.ts index d2c9e727..4e12fe62 100644 --- 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'] } }); From 0447140f91ab1435bfc72d63b27728fbd7fbef3a Mon Sep 17 00:00:00 2001 From: ignaciosantise Date: Thu, 9 Nov 2023 09:55:53 -0300 Subject: [PATCH 3/3] chore: searchbar ui improvements --- packages/ui/src/composites/wui-input-text/styles.ts | 3 ++- packages/ui/src/composites/wui-search-bar/index.tsx | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/composites/wui-input-text/styles.ts b/packages/ui/src/composites/wui-input-text/styles.ts index 187f1dd0..49d915fe 100644 --- 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-search-bar/index.tsx b/packages/ui/src/composites/wui-search-bar/index.tsx index cecf3cf4..3c619226 100644 --- 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 && ( { inputRef.current?.clear(); inputRef.current?.focus();