From 1bbb79ab212b7f64576017d1b4cd79d78d92bc25 Mon Sep 17 00:00:00 2001 From: ignaciosantise Date: Wed, 8 Nov 2023 15:10:58 -0300 Subject: [PATCH 1/4] refactor: replaced flex-gap with margins --- .../stories/composites/IconLink.stories.tsx | 10 ++++ apps/gallery/utils/PresetUtils.ts | 43 ++++++++++++++++ .../partials/w3m-all-wallets-list/index.tsx | 44 ++++++++-------- .../partials/w3m-all-wallets-list/styles.ts | 12 +++-- .../partials/w3m-all-wallets-search/index.tsx | 51 +++++++++++-------- .../partials/w3m-all-wallets-search/styles.ts | 22 ++++++-- .../partials/w3m-connecting-header/index.tsx | 2 +- .../partials/w3m-connecting-mobile/index.tsx | 15 ++++-- .../partials/w3m-connecting-mobile/styles.ts | 6 ++- .../partials/w3m-connecting-qrcode/index.tsx | 6 +-- .../partials/w3m-connecting-qrcode/styles.ts | 8 +++ .../src/partials/w3m-connecting-web/index.tsx | 6 +-- .../src/partials/w3m-connecting-web/styles.ts | 9 +++- .../src/views/w3m-account-view/index.tsx | 13 +++-- .../src/views/w3m-account-view/styles.ts | 7 +++ .../src/views/w3m-all-wallets-view/index.tsx | 29 +++++------ .../src/views/w3m-all-wallets-view/styles.ts | 8 +-- .../src/views/w3m-connect-view/index.tsx | 7 ++- .../src/views/w3m-connect-view/styles.ts | 8 +++ .../src/views/w3m-get-wallet-view/index.tsx | 4 +- .../src/views/w3m-get-wallet-view/styles.ts | 8 +++ .../views/w3m-network-switch-view/index.tsx | 8 +-- .../views/w3m-network-switch-view/styles.ts | 5 +- .../src/views/w3m-networks-view/index.tsx | 49 ++++++++++-------- .../src/views/w3m-networks-view/styles.ts | 12 +++++ .../w3m-what-is-a-network-view/index.tsx | 18 ++++--- .../w3m-what-is-a-network-view/styles.ts | 8 ++- .../views/w3m-what-is-a-wallet-view/index.tsx | 26 ++++++---- .../views/w3m-what-is-a-wallet-view/styles.ts | 8 ++- .../ui/src/components/wui-shimmer/index.tsx | 8 +-- .../ui/src/components/wui-visual/index.tsx | 5 +- .../composites/wui-account-button/index.tsx | 4 +- .../composites/wui-account-button/styles.ts | 12 +++-- .../ui/src/composites/wui-button/index.tsx | 16 ++++-- .../ui/src/composites/wui-button/styles.ts | 6 +++ .../wui-card-select-loader/index.tsx | 8 ++- .../wui-card-select-loader/styles.ts | 6 +-- .../ui/src/composites/wui-icon-link/index.tsx | 11 ++-- .../ui/src/composites/wui-icon-link/styles.ts | 2 +- packages/ui/src/composites/wui-link/index.tsx | 6 +-- packages/ui/src/composites/wui-link/styles.ts | 6 +++ .../ui/src/composites/wui-list-item/styles.ts | 3 +- .../src/composites/wui-list-wallet/index.tsx | 9 ++-- packages/ui/src/composites/wui-tabs/index.tsx | 7 ++- packages/ui/src/composites/wui-tabs/styles.ts | 4 +- packages/ui/src/index.ts | 1 + packages/ui/src/layout/wui-flex/index.tsx | 7 --- 47 files changed, 396 insertions(+), 177 deletions(-) create mode 100644 packages/scaffold/src/partials/w3m-connecting-qrcode/styles.ts create mode 100644 packages/scaffold/src/views/w3m-connect-view/styles.ts create mode 100644 packages/scaffold/src/views/w3m-get-wallet-view/styles.ts create mode 100644 packages/scaffold/src/views/w3m-networks-view/styles.ts diff --git a/apps/gallery/stories/composites/IconLink.stories.tsx b/apps/gallery/stories/composites/IconLink.stories.tsx index a6dff994..a0e13432 100644 --- a/apps/gallery/stories/composites/IconLink.stories.tsx +++ b/apps/gallery/stories/composites/IconLink.stories.tsx @@ -27,6 +27,14 @@ const meta: Meta = { 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 = { diff --git a/apps/gallery/utils/PresetUtils.ts b/apps/gallery/utils/PresetUtils.ts index 7ceab424..7376a2da 100644 --- 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', diff --git a/packages/scaffold/src/partials/w3m-all-wallets-list/index.tsx b/packages/scaffold/src/partials/w3m-all-wallets-list/index.tsx index 3611b201..370b884f 100644 --- 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(false); const [pageLoading, setPageLoading] = useState(false); const { maxWidth, padding } = useCustomDimensions(); @@ -42,7 +42,7 @@ 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 ( @@ -50,11 +50,13 @@ export function AllWalletsList({ columns, gap = 0 }: AllWalletsListProps) { 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) => ( - + + + ))} ); @@ -62,17 +64,22 @@ export function AllWalletsList({ columns, gap = 0 }: AllWalletsListProps) { const walletTemplate = ({ item, index }: { item: WcWallet; index: number }) => { if (!item?.id) { - return ; + return ( + + + + ); } return ( - RouterController.push('ConnectingWalletConnect', { wallet: item })} - /> + + RouterController.push('ConnectingWalletConnect', { wallet: item })} + /> + ); }; @@ -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 index 2f34e9bc..3b172bc3 100644 --- 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 index fb687a92..9df6cf12 100644 --- 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(false); const { search } = useSnapshot(ApiController.state); const [prevSearchQuery, setPrevSearchQuery] = useState(''); 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 ( - RouterController.push('ConnectingWalletConnect', { wallet: item })} - /> + + RouterController.push('ConnectingWalletConnect', { wallet: item })} + /> + ); }; @@ -52,11 +53,13 @@ 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) => ( - + + + ))} ); @@ -64,7 +67,10 @@ export function AllWalletsSearch({ searchQuery, columns, gap = 0 }: AllWalletsSe const emptyTemplate = () => { return ( - + - + No wallet found @@ -96,6 +102,10 @@ export function AllWalletsSearch({ searchQuery, columns, gap = 0 }: AllWalletsSe return loadingTemplate(20); } + if (search.length === 0) { + return emptyTemplate(); + } + return ( 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 index 5c5162f5..daa9bb5d 100644 --- 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 } }); diff --git a/packages/scaffold/src/partials/w3m-connecting-header/index.tsx b/packages/scaffold/src/partials/w3m-connecting-header/index.tsx index d98de4c0..02fc1c59 100644 --- a/packages/scaffold/src/partials/w3m-connecting-header/index.tsx +++ b/packages/scaffold/src/partials/w3m-connecting-header/index.tsx @@ -12,7 +12,7 @@ export function ConnectingHeader({ platforms, onSelectPlatform }: ConnectingHead if (platform === 'mobile') { return { label: 'Mobile', icon: 'mobile', platform: 'mobile' } as const; } else if (platform === 'web') { - return { label: 'Webapp', icon: 'browser', platform: 'web' } as const; + return { label: 'Web', icon: 'browser', platform: 'web' } as const; } else { return { label: 'QR Code', icon: 'qrCode', platform: 'qrcode' } as const; } diff --git a/packages/scaffold/src/partials/w3m-connecting-mobile/index.tsx b/packages/scaffold/src/partials/w3m-connecting-mobile/index.tsx index 5fc54f63..072bfc03 100644 --- a/packages/scaffold/src/partials/w3m-connecting-mobile/index.tsx +++ b/packages/scaffold/src/partials/w3m-connecting-mobile/index.tsx @@ -72,7 +72,11 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) { const walletName = data?.wallet?.name ?? 'Wallet'; if (linkingError) { return ( - + {`${walletName} is not installed`} {`To connect with ${walletName}, install the application on your device`} @@ -81,7 +85,11 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) { ); } else if (wcError) { return ( - + Connection declined @@ -93,7 +101,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) { } return ( - + {`Continue in ${walletName}`} Accept connection request in the wallet @@ -144,7 +152,6 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) { diff --git a/packages/scaffold/src/partials/w3m-connecting-mobile/styles.ts b/packages/scaffold/src/partials/w3m-connecting-mobile/styles.ts index 03772c92..cceda46e 100644 --- a/packages/scaffold/src/partials/w3m-connecting-mobile/styles.ts +++ b/packages/scaffold/src/partials/w3m-connecting-mobile/styles.ts @@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native'; export default StyleSheet.create({ retryButton: { - marginTop: Spacing.xs + marginVertical: Spacing.xs }, copyButton: { marginVertical: Spacing.xs @@ -11,7 +11,11 @@ export default StyleSheet.create({ retryIcon: { transform: [{ rotateY: '180deg' }] }, + textContainer: { + marginVertical: Spacing.xs + }, descriptionText: { + marginVertical: Spacing.xs, marginHorizontal: Spacing['3xl'] }, errorIcon: { diff --git a/packages/scaffold/src/partials/w3m-connecting-qrcode/index.tsx b/packages/scaffold/src/partials/w3m-connecting-qrcode/index.tsx index f2735242..140e42a8 100644 --- a/packages/scaffold/src/partials/w3m-connecting-qrcode/index.tsx +++ b/packages/scaffold/src/partials/w3m-connecting-qrcode/index.tsx @@ -6,6 +6,7 @@ import { } from '@web3modal/core-react-native'; import { FlexView, Link, QrCode, Text, Spacing } from '@web3modal/ui-react-native'; import { useCustomDimensions } from '../../hooks/useCustomDimensions'; +import styles from './styles'; export function ConnectingQrCode() { const { wcUri } = useSnapshot(ConnectionController.state); @@ -24,15 +25,14 @@ export function ConnectingQrCode() { - + Scan this QR code with your phone {showCopy && ( - + Copy link )} diff --git a/packages/scaffold/src/partials/w3m-connecting-qrcode/styles.ts b/packages/scaffold/src/partials/w3m-connecting-qrcode/styles.ts new file mode 100644 index 00000000..3ee590cf --- /dev/null +++ b/packages/scaffold/src/partials/w3m-connecting-qrcode/styles.ts @@ -0,0 +1,8 @@ +import { Spacing } from '@web3modal/ui-react-native'; +import { StyleSheet } from 'react-native'; + +export default StyleSheet.create({ + copyButton: { + marginTop: Spacing.m + } +}); diff --git a/packages/scaffold/src/partials/w3m-connecting-web/index.tsx b/packages/scaffold/src/partials/w3m-connecting-web/index.tsx index ddcd9eee..9d957f12 100644 --- a/packages/scaffold/src/partials/w3m-connecting-web/index.tsx +++ b/packages/scaffold/src/partials/w3m-connecting-web/index.tsx @@ -46,7 +46,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) { if (wcError) { return ( <> - + Connection declined @@ -58,7 +58,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) { return ( <> - {`Continue in ${walletName}`} + {`Continue in ${walletName}`} Open and continue in a browser tab @@ -68,7 +68,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) { return ( - + - + {profileName ? UiUtil.getTruncateString({ @@ -98,7 +98,13 @@ export function AccountView() { })} {showCopy && ( - + )} {balance && ( @@ -107,7 +113,7 @@ export function AccountView() { )} {addressExplorerTemplate()} - + Disconnect diff --git a/packages/scaffold/src/views/w3m-account-view/styles.ts b/packages/scaffold/src/views/w3m-account-view/styles.ts index 5b00feb0..de699226 100644 --- a/packages/scaffold/src/views/w3m-account-view/styles.ts +++ b/packages/scaffold/src/views/w3m-account-view/styles.ts @@ -1,3 +1,4 @@ +import { Spacing } from '@web3modal/ui-react-native'; import { StyleSheet } from 'react-native'; export default StyleSheet.create({ @@ -7,5 +8,11 @@ export default StyleSheet.create({ zIndex: 1, top: 16, right: 16 + }, + copyButton: { + marginLeft: Spacing['4xs'] + }, + disconnectButton: { + marginTop: Spacing.xs } }); diff --git a/packages/scaffold/src/views/w3m-all-wallets-view/index.tsx b/packages/scaffold/src/views/w3m-all-wallets-view/index.tsx index 62c0499d..35688e65 100644 --- a/packages/scaffold/src/views/w3m-all-wallets-view/index.tsx +++ b/packages/scaffold/src/views/w3m-all-wallets-view/index.tsx @@ -1,13 +1,6 @@ import { useState } from 'react'; import { ConnectionController, RouterController } from '@web3modal/core-react-native'; -import { - CardSelectWidth, - FlexView, - IconLink, - SearchBar, - Spacing, - useTheme -} from '@web3modal/ui-react-native'; +import { FlexView, IconLink, SearchBar, Spacing, useTheme } from '@web3modal/ui-react-native'; import styles from './styles'; import { useDebounceCallback } from '../../hooks/useDebounceCallback'; @@ -19,9 +12,9 @@ export function AllWalletsView() { const Theme = useTheme(); const [searchQuery, setSearchQuery] = useState(''); const { maxWidth } = useCustomDimensions(); - const usableWidth = maxWidth - Spacing.s * 2; - const numColumns = Math.floor(usableWidth / CardSelectWidth); - const gap = Math.abs(Math.trunc((usableWidth - numColumns * CardSelectWidth) / (numColumns - 1))); + const numColumns = 4; + const usableWidth = maxWidth - Spacing.xs * 2; + const itemWidth = Math.abs(Math.trunc(usableWidth / numColumns)); const onInputChange = useDebounceCallback({ callback: setSearchQuery }); @@ -34,10 +27,9 @@ export function AllWalletsView() { const headerTemplate = () => { return ( ); @@ -58,10 +51,12 @@ export function AllWalletsView() { const listTemplate = () => { if (searchQuery) { - return ; + return ( + + ); } - return ; + return ; }; return ( diff --git a/packages/scaffold/src/views/w3m-all-wallets-view/styles.ts b/packages/scaffold/src/views/w3m-all-wallets-view/styles.ts index 617db9e1..0471c897 100644 --- a/packages/scaffold/src/views/w3m-all-wallets-view/styles.ts +++ b/packages/scaffold/src/views/w3m-all-wallets-view/styles.ts @@ -1,11 +1,6 @@ import { Platform, StyleSheet } from 'react-native'; export default StyleSheet.create({ - contentContainer: { - paddingBottom: 24, - paddingHorizontal: 8, - alignItems: 'center' - }, header: { zIndex: 1, alignSelf: 'center', @@ -17,6 +12,7 @@ export default StyleSheet.create({ }) }, icon: { - marginLeft: 8 + marginLeft: 8, + borderWidth: 1 } }); diff --git a/packages/scaffold/src/views/w3m-connect-view/index.tsx b/packages/scaffold/src/views/w3m-connect-view/index.tsx index 4506eed5..4943676b 100644 --- a/packages/scaffold/src/views/w3m-connect-view/index.tsx +++ b/packages/scaffold/src/views/w3m-connect-view/index.tsx @@ -10,6 +10,7 @@ import type { WcWallet } from '@web3modal/core-react-native'; import { ListWallet, FlexView } from '@web3modal/ui-react-native'; import { UiUtil } from '../../utils/UiUtil'; import { useCustomDimensions } from '../../hooks/useCustomDimensions'; +import styles from './styles'; export function ConnectView() { const { recommended, featured, installed, count } = useSnapshot(ApiController.state); @@ -51,6 +52,7 @@ export function ConnectView() { onPress={() => onWalletPress(wallet!)} tagLabel="Recent" tagVariant="shade" + style={styles.item} /> )); }; @@ -91,6 +93,7 @@ export function ConnectView() { imageHeaders={imageHeaders} name={wallet?.name ?? 'Unknown'} onPress={() => onWalletPress(wallet!)} + style={styles.item} /> )); }; @@ -110,6 +113,7 @@ export function ConnectView() { imageHeaders={imageHeaders} name={wallet?.name ?? 'Unknown'} onPress={() => onWalletPress(wallet!)} + style={styles.item} /> )); }; @@ -122,6 +126,7 @@ export function ConnectView() { tagLabel={`${Math.floor(count / 10) * 10}+`} tagVariant="shade" onPress={() => RouterController.push('AllWallets')} + style={styles.item} /> ); }; @@ -137,7 +142,7 @@ export function ConnectView() { return ( - + {recentTemplate()} {installedTemplate()} {featuredTemplate()} diff --git a/packages/scaffold/src/views/w3m-connect-view/styles.ts b/packages/scaffold/src/views/w3m-connect-view/styles.ts new file mode 100644 index 00000000..f0b9b2af --- /dev/null +++ b/packages/scaffold/src/views/w3m-connect-view/styles.ts @@ -0,0 +1,8 @@ +import { Spacing } from '@web3modal/ui-react-native'; +import { StyleSheet } from 'react-native'; + +export default StyleSheet.create({ + item: { + marginVertical: Spacing['3xs'] + } +}); 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 2a37420f..a593cc51 100644 --- a/packages/scaffold/src/views/w3m-get-wallet-view/index.tsx +++ b/packages/scaffold/src/views/w3m-get-wallet-view/index.tsx @@ -3,6 +3,7 @@ import { Linking, Platform, ScrollView } from 'react-native'; import { FlexView, ListWallet } from '@web3modal/ui-react-native'; import { ApiController, AssetUtil, type WcWallet } from '@web3modal/core-react-native'; import { useCustomDimensions } from '../../hooks/useCustomDimensions'; +import styles from './styles'; export function GetWalletView() { const { padding } = useCustomDimensions(); @@ -25,13 +26,14 @@ export function GetWalletView() { imageSrc={AssetUtil.getWalletImage(wallet)} imageHeaders={imageHeaders} onPress={() => onWalletPress(wallet)} + style={styles.item} /> )); }; return ( - + {listTemplate()} - Switch declined + + Switch declined + Switch can be declined if chain is not supported by a wallet or previous request is still active @@ -80,7 +82,7 @@ export function NetworkSwitchView() { return ( <> - {`Approve in ${walletName}`} + {`Approve in ${walletName}`} Accept switch request in your wallet @@ -89,7 +91,7 @@ export function NetworkSwitchView() { }; return ( - + { if (!requestedCaipNetworks?.length) return undefined; @@ -59,34 +63,38 @@ export function NetworksView() { }; return requested.map(network => ( - onNetworkPress(network)} - /> + style={[ + styles.itemContainer, + { + width: itemWidth, + marginVertical: itemGap + } + ]} + > + onNetworkPress(network)} + /> + )); }; return ( <> - + {networksTemplate()} RouterController.push('WhatIsANetwork')} + style={styles.helpButton} > What is a network diff --git a/packages/scaffold/src/views/w3m-networks-view/styles.ts b/packages/scaffold/src/views/w3m-networks-view/styles.ts new file mode 100644 index 00000000..848eee76 --- /dev/null +++ b/packages/scaffold/src/views/w3m-networks-view/styles.ts @@ -0,0 +1,12 @@ +import { Spacing } from '@web3modal/ui-react-native'; +import { StyleSheet } from 'react-native'; + +export default StyleSheet.create({ + itemContainer: { + alignItems: 'center', + justifyContent: 'center' + }, + helpButton: { + marginTop: Spacing.s + } +}); 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 index eb9adc07..593cda25 100644 --- 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,23 +11,27 @@ export function WhatIsNetworkView() { return ( - - + + - + - The system’s nuts and bolts + + The system’s nuts and bolts + A network is what brings the blockchain to life, as this technical infrastructure allows apps to access the ledger and smart contract services. - + - + - Designed for different uses + + Designed for different uses + Each network is designed differently, and may therefore suit certain apps and experiences. diff --git a/packages/scaffold/src/views/w3m-what-is-a-network-view/styles.ts b/packages/scaffold/src/views/w3m-what-is-a-network-view/styles.ts index a62e110b..22118e07 100644 --- a/packages/scaffold/src/views/w3m-what-is-a-network-view/styles.ts +++ b/packages/scaffold/src/views/w3m-what-is-a-network-view/styles.ts @@ -1,8 +1,14 @@ -import { Spacing } from '@web3modal/ui-react-native'; import { StyleSheet } from 'react-native'; +import { Spacing } from '@web3modal/ui-react-native'; export default StyleSheet.create({ learnButton: { marginTop: Spacing.xl + }, + visual: { + marginHorizontal: Spacing.s + }, + text: { + marginVertical: Spacing.xs } }); 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 c26e16e0..3b39ac09 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,31 +9,37 @@ export function WhatIsAWalletView() { return ( - - + + - + - One login for all of web3 + + One login for all of web3 + Log in to any app by connecting your wallet. Say goodbye to countless passwords! - + - + - A home for your digital assets + + A home for your digital assets + A wallet lets you store, send and receive digital assets like cryptocurrencies and NFTs. - + - + - Your gateway to a new web + + Your gateway to a new web + With your wallet, you can explore and interact with DeFi, NFTs, DAOs, and much more. diff --git a/packages/scaffold/src/views/w3m-what-is-a-wallet-view/styles.ts b/packages/scaffold/src/views/w3m-what-is-a-wallet-view/styles.ts index d7d91d42..d48a3d62 100644 --- a/packages/scaffold/src/views/w3m-what-is-a-wallet-view/styles.ts +++ b/packages/scaffold/src/views/w3m-what-is-a-wallet-view/styles.ts @@ -1,8 +1,14 @@ -import { Spacing } from '@web3modal/ui-react-native'; import { StyleSheet } from 'react-native'; +import { Spacing } from '@web3modal/ui-react-native'; export default StyleSheet.create({ getWalletButton: { marginTop: Spacing.xl + }, + visual: { + marginHorizontal: Spacing.s + }, + text: { + marginVertical: Spacing.xs } }); diff --git a/packages/ui/src/components/wui-shimmer/index.tsx b/packages/ui/src/components/wui-shimmer/index.tsx index d794a63a..798ee391 100644 --- a/packages/ui/src/components/wui-shimmer/index.tsx +++ b/packages/ui/src/components/wui-shimmer/index.tsx @@ -1,5 +1,5 @@ import { Svg, Rect } from 'react-native-svg'; -import { Animated } from 'react-native'; +import { Animated, type StyleProp, type ViewStyle } from 'react-native'; import { useTheme } from '../../hooks/useTheme'; const AnimatedRect = Animated.createAnimatedComponent(Rect); @@ -11,6 +11,7 @@ export interface ShimmerProps { borderRadius?: number; backgroundColor?: string; foregroundColor?: string; + style?: StyleProp; } export const Shimmer = ({ @@ -19,7 +20,8 @@ export const Shimmer = ({ duration = 1000, borderRadius = 0, backgroundColor, - foregroundColor + foregroundColor, + style }: ShimmerProps) => { const animatedValue = new Animated.Value(0); const Theme = useTheme(); @@ -50,7 +52,7 @@ export const Shimmer = ({ ).start(); return ( - + ); diff --git a/packages/ui/src/components/wui-visual/index.tsx b/packages/ui/src/components/wui-visual/index.tsx index 9d745195..c6b849cb 100644 --- a/packages/ui/src/components/wui-visual/index.tsx +++ b/packages/ui/src/components/wui-visual/index.tsx @@ -33,10 +33,11 @@ const svgOptions: Record JSX.Element> = { export interface VisualProps { name: VisualType; + style?: SvgProps['style']; } -export function Visual({ name }: VisualProps) { +export function Visual({ name, style }: VisualProps) { const Component = svgOptions[name]; - return ; + return ; } diff --git a/packages/ui/src/composites/wui-account-button/index.tsx b/packages/ui/src/composites/wui-account-button/index.tsx index af151bf9..3cb415a3 100644 --- a/packages/ui/src/composites/wui-account-button/index.tsx +++ b/packages/ui/src/composites/wui-account-button/index.tsx @@ -61,7 +61,7 @@ export function AccountButton({ return ( {network} - + {balance} @@ -98,7 +98,7 @@ export function AccountButton({ style={[styles.image, !avatarSrc && styles.avatarPlaceholder]} /> {address && ( - + {UiUtil.getTruncateString({ string: address, charsStart: isProfileName ? 18 : 4, diff --git a/packages/ui/src/composites/wui-account-button/styles.ts b/packages/ui/src/composites/wui-account-button/styles.ts index fe63aea4..28f72ab9 100644 --- a/packages/ui/src/composites/wui-account-button/styles.ts +++ b/packages/ui/src/composites/wui-account-button/styles.ts @@ -9,8 +9,7 @@ export default StyleSheet.create({ borderWidth: 1, justifyContent: 'center', alignItems: 'center', - paddingHorizontal: Spacing['3xs'], - gap: Spacing.xs + paddingHorizontal: Spacing['3xs'] }, image: { height: 24, @@ -24,7 +23,6 @@ export default StyleSheet.create({ networkContainer: { flexDirection: 'row', height: 32, - gap: Spacing['3xs'], paddingLeft: Spacing['3xs'], justifyContent: 'center', alignItems: 'center' @@ -36,8 +34,14 @@ export default StyleSheet.create({ alignItems: 'center', paddingLeft: Spacing['3xs'], paddingRight: Spacing.xs, - gap: Spacing['3xs'], + marginLeft: Spacing.xs, borderRadius: 100, borderWidth: 1 + }, + address: { + marginLeft: Spacing['3xs'] + }, + balance: { + marginLeft: Spacing['3xs'] } }); diff --git a/packages/ui/src/composites/wui-button/index.tsx b/packages/ui/src/composites/wui-button/index.tsx index 51df2961..0955522c 100644 --- a/packages/ui/src/composites/wui-button/index.tsx +++ b/packages/ui/src/composites/wui-button/index.tsx @@ -87,15 +87,25 @@ export function Button({ onPress={onPress} {...rest} > - + {iconLeft && ( - + )} {children} {iconRight && ( - + )} diff --git a/packages/ui/src/composites/wui-button/styles.ts b/packages/ui/src/composites/wui-button/styles.ts index 99ed89e8..7e02fdea 100644 --- a/packages/ui/src/composites/wui-button/styles.ts +++ b/packages/ui/src/composites/wui-button/styles.ts @@ -63,5 +63,11 @@ export default StyleSheet.create({ mdButton: { height: 40, paddingHorizontal: Spacing.s + }, + iconRight: { + marginLeft: Spacing['2xs'] + }, + iconLeft: { + marginRight: Spacing['2xs'] } }); diff --git a/packages/ui/src/composites/wui-card-select-loader/index.tsx b/packages/ui/src/composites/wui-card-select-loader/index.tsx index 7352de25..3c2259c5 100644 --- a/packages/ui/src/composites/wui-card-select-loader/index.tsx +++ b/packages/ui/src/composites/wui-card-select-loader/index.tsx @@ -16,7 +16,6 @@ export function CardSelectLoader({ style }: CardSelectLoaderProps) { return ( - + ); } diff --git a/packages/ui/src/composites/wui-card-select-loader/styles.ts b/packages/ui/src/composites/wui-card-select-loader/styles.ts index 353c121b..83c4e7ff 100644 --- a/packages/ui/src/composites/wui-card-select-loader/styles.ts +++ b/packages/ui/src/composites/wui-card-select-loader/styles.ts @@ -10,10 +10,6 @@ export default StyleSheet.create({ borderRadius: BorderRadius.xs }, text: { - marginTop: Spacing.xs, - marginHorizontal: Spacing['2xs'] - }, - disabledImage: { - opacity: 0.4 + marginTop: Spacing.xs } }); diff --git a/packages/ui/src/composites/wui-icon-link/index.tsx b/packages/ui/src/composites/wui-icon-link/index.tsx index 69c98e70..6f0b28f3 100644 --- a/packages/ui/src/composites/wui-icon-link/index.tsx +++ b/packages/ui/src/composites/wui-icon-link/index.tsx @@ -2,7 +2,7 @@ import { Animated, Pressable, type StyleProp, type ViewStyle } from 'react-nativ import { Icon } from '../../components/wui-icon'; import useAnimatedValue from '../../hooks/useAnimatedValue'; import { useTheme } from '../../hooks/useTheme'; -import type { ColorType, IconType, SizeType } from '../../utils/TypesUtil'; +import type { ColorType, IconType, SizeType, ThemeKeys } from '../../utils/TypesUtil'; import styles from './styles'; const AnimatedPressable = Animated.createAnimatedComponent(Pressable); @@ -15,6 +15,8 @@ export interface IconLinkProps { disabled?: boolean; background?: boolean; style?: StyleProp; + backgroundColor?: ThemeKeys; + pressedColor?: ThemeKeys; } export function IconLink({ @@ -22,15 +24,16 @@ export function IconLink({ onPress, size = 'md', iconColor = 'fg-100', - background, + backgroundColor, + pressedColor = 'gray-glass-010', disabled, style }: IconLinkProps) { const Theme = useTheme(); - const bgColor = background ? `${Theme[iconColor]}1E` : 'transparent'; + const bgColor = backgroundColor ? Theme[backgroundColor] : 'transparent'; const { animatedValue, setStartValue, setEndValue } = useAnimatedValue( bgColor, - Theme['gray-glass-010'] + Theme[pressedColor] ); return ( diff --git a/packages/ui/src/composites/wui-icon-link/styles.ts b/packages/ui/src/composites/wui-icon-link/styles.ts index 1944472d..5048ae7a 100644 --- a/packages/ui/src/composites/wui-icon-link/styles.ts +++ b/packages/ui/src/composites/wui-icon-link/styles.ts @@ -4,7 +4,7 @@ import { BorderRadius, Spacing } from '../../utils/ThemeUtil'; export default StyleSheet.create({ 'container': { padding: Spacing.xs, - borderRadius: BorderRadius['3xs'], + borderRadius: BorderRadius.xxs, alignItems: 'center', justifyContent: 'center' }, diff --git a/packages/ui/src/composites/wui-link/index.tsx b/packages/ui/src/composites/wui-link/index.tsx index 295e9e31..45eff3d6 100644 --- a/packages/ui/src/composites/wui-link/index.tsx +++ b/packages/ui/src/composites/wui-link/index.tsx @@ -52,12 +52,12 @@ export function Link({ style={[styles[`${size}Container`], { backgroundColor: animatedValue }, style]} {...rest} > - - {iconLeft && } + + {iconLeft && } {children} - {iconRight && } + {iconRight && } ); diff --git a/packages/ui/src/composites/wui-link/styles.ts b/packages/ui/src/composites/wui-link/styles.ts index 331374ee..06428554 100644 --- a/packages/ui/src/composites/wui-link/styles.ts +++ b/packages/ui/src/composites/wui-link/styles.ts @@ -11,5 +11,11 @@ export default StyleSheet.create({ paddingVertical: Spacing['4xs'], paddingHorizontal: Spacing.xs, borderRadius: BorderRadius['3xs'] + }, + iconRight: { + marginLeft: Spacing['2xs'] + }, + iconLeft: { + marginRight: Spacing['2xs'] } }); diff --git a/packages/ui/src/composites/wui-list-item/styles.ts b/packages/ui/src/composites/wui-list-item/styles.ts index de5d7029..d2c9e727 100644 --- a/packages/ui/src/composites/wui-list-item/styles.ts +++ b/packages/ui/src/composites/wui-list-item/styles.ts @@ -13,8 +13,7 @@ export default StyleSheet.create({ content: { flexDirection: 'row', flexGrow: 1, - paddingHorizontal: Spacing.s, - gap: Spacing['3xs'] + paddingHorizontal: Spacing.s }, imageContainer: { width: 36, diff --git a/packages/ui/src/composites/wui-list-wallet/index.tsx b/packages/ui/src/composites/wui-list-wallet/index.tsx index a78db8d4..9040bb9b 100644 --- a/packages/ui/src/composites/wui-list-wallet/index.tsx +++ b/packages/ui/src/composites/wui-list-wallet/index.tsx @@ -1,4 +1,4 @@ -import { Animated, Pressable, View } from 'react-native'; +import { Animated, Pressable, View, type StyleProp, type ViewStyle } from 'react-native'; import { Text } from '../../components/wui-text'; import useAnimatedValue from '../../hooks/useAnimatedValue'; import { useTheme } from '../../hooks/useTheme'; @@ -24,6 +24,7 @@ export interface ListWalletProps { tagVariant?: TagType; icon?: IconType; disabled?: boolean; + style?: StyleProp; } export function ListWallet({ @@ -37,7 +38,8 @@ export function ListWallet({ tagLabel, tagVariant, icon, - disabled + disabled, + style }: ListWalletProps) { const Theme = useTheme(); const { animatedValue, setStartValue, setEndValue } = useAnimatedValue( @@ -98,7 +100,8 @@ export function ListWallet({ onTabPress(index)} key={option.label} style={styles.tabItem}> {option.icon && ( - + )} {option.label} diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts index 72354183..7d1dca5d 100644 --- a/packages/ui/src/composites/wui-tabs/styles.ts +++ b/packages/ui/src/composites/wui-tabs/styles.ts @@ -14,9 +14,11 @@ export default StyleSheet.create({ justifyContent: 'center', alignItems: 'center', width: 100, - gap: Spacing['3xs'], paddingVertical: Spacing['2xs'] }, + tabIcon: { + marginRight: Spacing['3xs'] + }, activeMark: { position: 'absolute', height: 28, diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index b616034c..cd313d20 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -57,6 +57,7 @@ export type { CardSelectType, ChipType, ColorType, + ThemeKeys as ThemeColorType, IconType, LogoType, PlacementType, diff --git a/packages/ui/src/layout/wui-flex/index.tsx b/packages/ui/src/layout/wui-flex/index.tsx index c422a4c3..fdee104b 100644 --- a/packages/ui/src/layout/wui-flex/index.tsx +++ b/packages/ui/src/layout/wui-flex/index.tsx @@ -11,7 +11,6 @@ import type { } from '../../utils/TypesUtil'; import { UiUtil } from '../../utils/UiUtil'; -import { Spacing } from '../../utils/ThemeUtil'; export interface FlexViewProps { children?: React.ReactNode; @@ -22,9 +21,6 @@ export interface FlexViewProps { alignItems?: FlexAlignType; alignSelf?: FlexAlignType; justifyContent?: FlexJustifyContentType; - columnGap?: SpacingType; - rowGap?: SpacingType; - gap?: SpacingType; padding?: SpacingType | SpacingType[]; margin?: SpacingType | SpacingType[]; style?: StyleProp; @@ -39,9 +35,6 @@ export function FlexView(props: FlexViewProps) { alignItems: props.alignItems, alignSelf: props.alignSelf, justifyContent: props.justifyContent, - columnGap: props.columnGap && Spacing[props.columnGap], - rowGap: props.rowGap && Spacing[props.rowGap], - gap: props.gap && Spacing[props.gap], paddingTop: props.padding && UiUtil.getSpacingStyles(props.padding, 0), paddingRight: props.padding && UiUtil.getSpacingStyles(props.padding, 1), paddingBottom: props.padding && UiUtil.getSpacingStyles(props.padding, 2), From 7b294034044517b558a2ac8f90f7fac1fea6ab32 Mon Sep 17 00:00:00 2001 From: ignaciosantise Date: Wed, 8 Nov 2023 16:52:29 -0300 Subject: [PATCH 2/4] refactor: other style improvements --- apps/gallery/utils/PresetUtils.ts | 3 ++ .../partials/w3m-connecting-mobile/index.tsx | 29 ++++++++++--------- .../partials/w3m-connecting-qrcode/index.tsx | 11 +++++-- .../src/partials/w3m-connecting-web/index.tsx | 4 +-- .../src/views/w3m-account-view/styles.ts | 4 +-- .../src/views/w3m-connecting-view/index.tsx | 1 - .../views/w3m-what-is-a-wallet-view/index.tsx | 2 +- .../ui/src/assets/svg/ChevronRightSmall.tsx | 12 ++++++++ packages/ui/src/assets/svg/CopySmall.tsx | 12 ++++++++ packages/ui/src/assets/svg/WalletSmall.tsx | 12 ++++++++ packages/ui/src/components/wui-icon/index.tsx | 10 +++++-- .../ui/src/composites/wui-avatar/index.tsx | 4 +-- .../ui/src/composites/wui-button/index.tsx | 12 ++++---- .../ui/src/composites/wui-button/styles.ts | 9 ++++-- .../src/composites/wui-input-text/styles.ts | 8 ++--- packages/ui/src/composites/wui-link/index.tsx | 9 ++++-- .../ui/src/composites/wui-list-item/index.tsx | 1 + .../ui/src/composites/wui-qr-code/index.tsx | 4 +-- packages/ui/src/utils/TypesUtil.ts | 3 ++ 19 files changed, 106 insertions(+), 44 deletions(-) create mode 100644 packages/ui/src/assets/svg/ChevronRightSmall.tsx create mode 100644 packages/ui/src/assets/svg/CopySmall.tsx create mode 100644 packages/ui/src/assets/svg/WalletSmall.tsx diff --git a/apps/gallery/utils/PresetUtils.ts b/apps/gallery/utils/PresetUtils.ts index 7376a2da..e16c48fc 100644 --- a/apps/gallery/utils/PresetUtils.ts +++ b/apps/gallery/utils/PresetUtils.ts @@ -135,12 +135,14 @@ export const iconOptions: IconType[] = [ 'chevronBottom', 'chevronLeft', 'chevronRight', + 'chevronRightSmall', 'chevronTop', 'clock', 'close', 'coinPlaceholder', 'compass', 'copy', + 'copySmall', 'cursor', 'desktop', 'disconnect', @@ -169,6 +171,7 @@ export const iconOptions: IconType[] = [ 'twitterIcon', 'twitter', 'wallet', + 'walletSmall', 'walletConnect', 'walletPlaceholder', 'warningCircle' diff --git a/packages/scaffold/src/partials/w3m-connecting-mobile/index.tsx b/packages/scaffold/src/partials/w3m-connecting-mobile/index.tsx index 072bfc03..81e41186 100644 --- a/packages/scaffold/src/partials/w3m-connecting-mobile/index.tsx +++ b/packages/scaffold/src/partials/w3m-connecting-mobile/index.tsx @@ -120,8 +120,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) { - {(wcError || linkingError) && ( + {wcError && ( {textTemplate()} - + {!linkingError && ( + + )} onCopyUri(wcUri)} diff --git a/packages/scaffold/src/partials/w3m-connecting-qrcode/index.tsx b/packages/scaffold/src/partials/w3m-connecting-qrcode/index.tsx index 140e42a8..f73a3e04 100644 --- a/packages/scaffold/src/partials/w3m-connecting-qrcode/index.tsx +++ b/packages/scaffold/src/partials/w3m-connecting-qrcode/index.tsx @@ -12,7 +12,7 @@ export function ConnectingQrCode() { const { wcUri } = useSnapshot(ConnectionController.state); const showCopy = OptionsController.isClipboardAvailable(); const { maxWidth: windowSize, isPortrait } = useCustomDimensions(); - const qrSize = (windowSize - Spacing.l * 2) / (isPortrait ? 1 : 1.5); + const qrSize = (windowSize - Spacing.xl * 2) / (isPortrait ? 1 : 1.5); const onCopyAddress = () => { if (wcUri) { @@ -26,13 +26,18 @@ export function ConnectingQrCode() { alignItems="center" justifyContent="center" flexDirection={isPortrait ? 'column' : 'row'} - padding={['m', 'm', '2xl', 'm']} + padding={['xl', 'xl', '2xl', 'xl']} > Scan this QR code with your phone {showCopy && ( - + Copy link )} diff --git a/packages/scaffold/src/partials/w3m-connecting-web/index.tsx b/packages/scaffold/src/partials/w3m-connecting-web/index.tsx index 9d957f12..2ba6987f 100644 --- a/packages/scaffold/src/partials/w3m-connecting-web/index.tsx +++ b/packages/scaffold/src/partials/w3m-connecting-web/index.tsx @@ -90,14 +90,14 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) { {textTemplate()} onCopyUri(wcUri)} diff --git a/packages/scaffold/src/views/w3m-account-view/styles.ts b/packages/scaffold/src/views/w3m-account-view/styles.ts index de699226..34923417 100644 --- a/packages/scaffold/src/views/w3m-account-view/styles.ts +++ b/packages/scaffold/src/views/w3m-account-view/styles.ts @@ -6,8 +6,8 @@ export default StyleSheet.create({ alignSelf: 'flex-end', position: 'absolute', zIndex: 1, - top: 16, - right: 16 + top: Spacing.l, + right: Spacing.xl }, copyButton: { marginLeft: Spacing['4xs'] diff --git a/packages/scaffold/src/views/w3m-connecting-view/index.tsx b/packages/scaffold/src/views/w3m-connecting-view/index.tsx index f5251b7e..3fb9f943 100644 --- a/packages/scaffold/src/views/w3m-connecting-view/index.tsx +++ b/packages/scaffold/src/views/w3m-connecting-view/index.tsx @@ -43,7 +43,6 @@ export function ConnectingView() { } catch { ConnectionController.setWcError(true); if (CoreHelperUtil.isAllowedRetry(lastRetry)) { - SnackController.showError('Declined'); setLastRetry(Date.now()); initializeConnection(true); } 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 3b39ac09..7982c319 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 @@ -45,7 +45,7 @@ export function WhatIsAWalletView() { diff --git a/packages/ui/src/composites/wui-button/index.tsx b/packages/ui/src/composites/wui-button/index.tsx index 0955522c..ce2e43fc 100644 --- a/packages/ui/src/composites/wui-button/index.tsx +++ b/packages/ui/src/composites/wui-button/index.tsx @@ -26,7 +26,6 @@ export type ButtonProps = NativeProps & { children: React.ReactNode; style?: StyleProp; iconStyle?: SvgProps['style']; - iconSize?: SizeType; }; export function Button({ @@ -39,12 +38,12 @@ export function Button({ iconLeft, iconRight, iconStyle, - iconSize, ...rest }: ButtonProps) { const Theme = useTheme(); const themedTextStyle = getThemedTextStyle(Theme, variant, disabled); const colorAnimation = useRef(new Animated.Value(0)); + const iconSize = size === 'md' ? 'sm' : 'xs'; const iconColor = ( variant === 'fill' ? 'inverse-100' : variant === 'accent' ? 'accent-100' : 'fg-150' ) as ColorType; @@ -92,18 +91,21 @@ export function Button({ )} - + {children} {iconRight && ( )} diff --git a/packages/ui/src/composites/wui-button/styles.ts b/packages/ui/src/composites/wui-button/styles.ts index 7e02fdea..f3733ef8 100644 --- a/packages/ui/src/composites/wui-button/styles.ts +++ b/packages/ui/src/composites/wui-button/styles.ts @@ -58,16 +58,19 @@ export default StyleSheet.create({ }, smButton: { height: 32, - paddingHorizontal: Spacing.xs + paddingHorizontal: Spacing['2xs'] }, mdButton: { height: 40, paddingHorizontal: Spacing.s }, + text: { + marginHorizontal: Spacing['3xs'] + }, iconRight: { - marginLeft: Spacing['2xs'] + marginRight: Spacing['3xs'] }, iconLeft: { - marginRight: Spacing['2xs'] + marginLeft: Spacing['3xs'] } }); diff --git a/packages/ui/src/composites/wui-input-text/styles.ts b/packages/ui/src/composites/wui-input-text/styles.ts index abee0caf..187f1dd0 100644 --- a/packages/ui/src/composites/wui-input-text/styles.ts +++ b/packages/ui/src/composites/wui-input-text/styles.ts @@ -33,13 +33,11 @@ export default StyleSheet.create({ }, input: { flex: 1, - marginHorizontal: Spacing['4xs'] + marginHorizontal: Spacing['4xs'], + fontSize: 16, + fontWeight: '400' }, icon: { marginRight: Spacing.xs - }, - text: { - fontSize: 16, - fontWeight: '500' } }); diff --git a/packages/ui/src/composites/wui-link/index.tsx b/packages/ui/src/composites/wui-link/index.tsx index 45eff3d6..db495065 100644 --- a/packages/ui/src/composites/wui-link/index.tsx +++ b/packages/ui/src/composites/wui-link/index.tsx @@ -38,6 +38,7 @@ export function Link({ }: LinkProps) { const Theme = useTheme(); const _color = (disabled ? 'bg-300' : color ?? 'accent-100') as ColorType; + const iconSize = size === 'md' ? 'sm' : 'xs'; const { animatedValue, setStartValue, setEndValue } = useAnimatedValue( 'transparent', Theme['gray-glass-010'] @@ -53,11 +54,15 @@ export function Link({ {...rest} > - {iconLeft && } + {iconLeft && ( + + )} {children} - {iconRight && } + {iconRight && ( + + )} ); diff --git a/packages/ui/src/composites/wui-list-item/index.tsx b/packages/ui/src/composites/wui-list-item/index.tsx index c10d659d..6c140301 100644 --- a/packages/ui/src/composites/wui-list-item/index.tsx +++ b/packages/ui/src/composites/wui-list-item/index.tsx @@ -65,6 +65,7 @@ export function ListItem({ iconColor={iconColor} size="md" background + backgroundColor="gray-glass-010" border style={{ borderColor: Theme[borderColor] }} /> diff --git a/packages/ui/src/composites/wui-qr-code/index.tsx b/packages/ui/src/composites/wui-qr-code/index.tsx index a75ea79e..31be9170 100644 --- a/packages/ui/src/composites/wui-qr-code/index.tsx +++ b/packages/ui/src/composites/wui-qr-code/index.tsx @@ -44,8 +44,8 @@ export function QrCode({ size, uri, imageSrc }: QrCodeProps) { ); diff --git a/packages/ui/src/utils/TypesUtil.ts b/packages/ui/src/utils/TypesUtil.ts index ec377566..57745529 100644 --- a/packages/ui/src/utils/TypesUtil.ts +++ b/packages/ui/src/utils/TypesUtil.ts @@ -108,12 +108,14 @@ export type IconType = | 'chevronBottom' | 'chevronLeft' | 'chevronRight' + | 'chevronRightSmall' | 'chevronTop' | 'clock' | 'close' | 'coinPlaceholder' | 'compass' | 'copy' + | 'copySmall' | 'cursor' | 'desktop' | 'disconnect' @@ -142,6 +144,7 @@ export type IconType = | 'twitter' | 'twitterIcon' | 'wallet' + | 'walletSmall' | 'walletConnect' | 'walletPlaceholder' | 'warningCircle'; From 1151273ed6ffed75b5693e1961481561625a13e8 Mon Sep 17 00:00:00 2001 From: ignaciosantise Date: Wed, 8 Nov 2023 17:10:43 -0300 Subject: [PATCH 3/4] refactor: ui improvements --- .../composites/AllWalletsImage.stories.tsx | 19 --------- .../src/views/w3m-connect-view/index.tsx | 2 +- .../src/views/w3m-get-wallet-view/index.tsx | 4 +- .../wui-all-wallets-image/index.tsx | 41 ------------------- .../wui-all-wallets-image/styles.ts | 22 ---------- .../src/composites/wui-list-wallet/index.tsx | 23 +---------- .../src/composites/wui-wallet-image/index.tsx | 19 +++++---- packages/ui/src/index.ts | 1 - 8 files changed, 16 insertions(+), 115 deletions(-) delete mode 100644 apps/gallery/stories/composites/AllWalletsImage.stories.tsx delete mode 100644 packages/ui/src/composites/wui-all-wallets-image/index.tsx delete mode 100644 packages/ui/src/composites/wui-all-wallets-image/styles.ts diff --git a/apps/gallery/stories/composites/AllWalletsImage.stories.tsx b/apps/gallery/stories/composites/AllWalletsImage.stories.tsx deleted file mode 100644 index b1fe8968..00000000 --- a/apps/gallery/stories/composites/AllWalletsImage.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import type { Meta, StoryObj } from '@storybook/react'; - -import { AllWalletsImage } from '@web3modal/ui-react-native'; -import { walletImagesOptions } from '../../utils/PresetUtils'; - -const meta: Meta = { - component: AllWalletsImage, - args: { - walletImages: walletImagesOptions - } -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - render: args => -}; diff --git a/packages/scaffold/src/views/w3m-connect-view/index.tsx b/packages/scaffold/src/views/w3m-connect-view/index.tsx index 4943676b..42a28ab0 100644 --- a/packages/scaffold/src/views/w3m-connect-view/index.tsx +++ b/packages/scaffold/src/views/w3m-connect-view/index.tsx @@ -121,8 +121,8 @@ export function ConnectView() { const allWalletsTemplate = () => { return ( RouterController.push('AllWallets')} 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 a593cc51..4e24096d 100644 --- a/packages/scaffold/src/views/w3m-get-wallet-view/index.tsx +++ b/packages/scaffold/src/views/w3m-get-wallet-view/index.tsx @@ -36,8 +36,8 @@ export function GetWalletView() { {listTemplate()} Linking.openURL('https://walletconnect.com/explorer?type=wallet')} /> diff --git a/packages/ui/src/composites/wui-all-wallets-image/index.tsx b/packages/ui/src/composites/wui-all-wallets-image/index.tsx deleted file mode 100644 index 7c9c8001..00000000 --- a/packages/ui/src/composites/wui-all-wallets-image/index.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { Animated, View } from 'react-native'; -import { useTheme } from '../../hooks/useTheme'; -import { WalletImage } from '../wui-wallet-image'; -import styles from './styles'; - -export interface AllWalletsImageProps { - walletImages?: string[]; - imageHeaders?: Record; - style?: any; -} - -export function AllWalletsImage({ walletImages, imageHeaders, style }: AllWalletsImageProps) { - const Theme = useTheme(); - const _wallets = walletImages?.slice(0, 4) || []; - const _emptyBoxes = Array.from(Array(4 - _wallets.length).keys()); - - return ( - - - {_wallets.map(wallet => ( - - ))} - {_emptyBoxes.map((_, i) => ( - - ))} - - - ); -} diff --git a/packages/ui/src/composites/wui-all-wallets-image/styles.ts b/packages/ui/src/composites/wui-all-wallets-image/styles.ts deleted file mode 100644 index a83cb983..00000000 --- a/packages/ui/src/composites/wui-all-wallets-image/styles.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { StyleSheet } from 'react-native'; -import { BorderRadius } from '../../utils/ThemeUtil'; - -export default StyleSheet.create({ - container: { - height: 40, - width: 40, - borderRadius: BorderRadius.xxs, - justifyContent: 'center', - alignItems: 'center', - borderWidth: 1 - }, - icon: { - margin: 1 - }, - row: { - flexDirection: 'row', - flexWrap: 'wrap', - justifyContent: 'center', - alignItems: 'center' - } -}); diff --git a/packages/ui/src/composites/wui-list-wallet/index.tsx b/packages/ui/src/composites/wui-list-wallet/index.tsx index 9040bb9b..43d00cf4 100644 --- a/packages/ui/src/composites/wui-list-wallet/index.tsx +++ b/packages/ui/src/composites/wui-list-wallet/index.tsx @@ -5,7 +5,6 @@ import { useTheme } from '../../hooks/useTheme'; import type { IconType, TagType } from '../../utils/TypesUtil'; import { Tag } from '../wui-tag'; import { WalletImage } from '../wui-wallet-image'; -import { AllWalletsImage } from '../wui-all-wallets-image'; import { Icon } from '../../components/wui-icon'; import styles from './styles'; @@ -17,8 +16,6 @@ export interface ListWalletProps { onPress?: () => void; imageSrc?: string; imageHeaders?: Record; - walletImages?: string[]; - walletIcon?: IconType; showAllWallets?: boolean; tagLabel?: string; tagVariant?: TagType; @@ -32,9 +29,7 @@ export function ListWallet({ onPress, imageSrc, imageHeaders, - walletImages, - walletIcon, - showAllWallets = false, + showAllWallets, tagLabel, tagVariant, icon, @@ -48,26 +43,12 @@ export function ListWallet({ ); function imageTemplate() { - if (showAllWallets) { - return ( - - ); - } - return ( ); diff --git a/packages/ui/src/composites/wui-wallet-image/index.tsx b/packages/ui/src/composites/wui-wallet-image/index.tsx index c15365b0..2733d81d 100644 --- a/packages/ui/src/composites/wui-wallet-image/index.tsx +++ b/packages/ui/src/composites/wui-wallet-image/index.tsx @@ -2,7 +2,7 @@ import { type StyleProp, View, type ViewStyle } from 'react-native'; import { Icon } from '../../components/wui-icon'; import { Image } from '../../components/wui-image'; import { useTheme } from '../../hooks/useTheme'; -import type { IconType, SizeType } from '../../utils/TypesUtil'; +import type { SizeType } from '../../utils/TypesUtil'; import styles from './styles'; @@ -11,13 +11,13 @@ export interface WalletImageProps { imageHeaders?: Record; size?: Exclude; style?: StyleProp; - walletIcon?: IconType; + showAllWallets?: boolean; } const IconSize = { xs: 10, - sm: 20, - md: 25, + sm: 24, + md: 32, lg: 40 }; @@ -26,7 +26,7 @@ export function WalletImage({ imageHeaders, size = 'md', style, - walletIcon + showAllWallets }: WalletImageProps) { const Theme = useTheme(); @@ -35,13 +35,13 @@ export function WalletImage({ return ; } - if (walletIcon) { + if (showAllWallets) { return ( @@ -69,7 +69,10 @@ export function WalletImage({ styles[`${size}Image`], { borderColor: Theme['gray-glass-010'] }, !imageSrc && { backgroundColor: Theme['gray-glass-002'] }, - walletIcon && { backgroundColor: `${Theme['accent-100']}1E` } + showAllWallets && { + backgroundColor: `${Theme['accent-100']}1E`, + borderColor: Theme['accent-glass-010'] + } ]} /> diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index cd313d20..3cb911d7 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -10,7 +10,6 @@ export { Shimmer, type ShimmerProps } from './components/wui-shimmer'; export { AccountButton, type AccountButtonProps } from './composites/wui-account-button'; export { ActionEntry, type ActionEntryProps } from './composites/wui-action-entry'; -export { AllWalletsImage, type AllWalletsImageProps } from './composites/wui-all-wallets-image'; export { Avatar, type AvatarProps } from './composites/wui-avatar'; export { Button, type ButtonProps } from './composites/wui-button'; export { From b75439b87c0c0ad55a22bc24ae3db24278deb6e3 Mon Sep 17 00:00:00 2001 From: ignaciosantise Date: Wed, 8 Nov 2023 17:18:21 -0300 Subject: [PATCH 4/4] refactor: changed maxHeight of modal --- packages/scaffold/src/modal/w3m-modal/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/scaffold/src/modal/w3m-modal/index.tsx b/packages/scaffold/src/modal/w3m-modal/index.tsx index 904b2773..c0fa533a 100644 --- 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} > - +