Skip to content

Commit aaf06cd

Browse files
author
ignaciosantise
committed
chore: several ui improvements
1 parent 38f35a5 commit aaf06cd

File tree

41 files changed

+252
-186
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+252
-186
lines changed

‎apps/gallery/stories/components/LoadingSpinner.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const meta: Meta<typeof LoadingSpinner> = {
1010
},
1111
argTypes: {
1212
size: {
13-
options: ['sm', 'md', 'lg'],
13+
options: ['sm', 'md', 'lg', 'xl'],
1414
control: { type: 'select' }
1515
},
1616
color: {

‎packages/core/src/utils/ConstantsUtil.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,7 @@ export const ConstantsUtil = {
1616
'ASIA/MACAO',
1717
'ASIA/BEIJING',
1818
'ASIA/HARBIN'
19-
]
19+
],
20+
21+
EMAIL_REGEX: /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/
2022
};

‎packages/core/src/utils/CoreHelperUtil.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,5 +216,9 @@ export const CoreHelperUtil = {
216216
}
217217

218218
return isInstalled;
219+
},
220+
221+
isValidEmail(email: string) {
222+
return ConstantsUtil.EMAIL_REGEX.test(email);
219223
}
220224
};

‎packages/core/src/utils/StorageUtil.ts

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ import type { ConnectorType, WcWallet } from './TypeUtil';
66
const WC_DEEPLINK = 'WALLETCONNECT_DEEPLINK_CHOICE';
77
const W3M_RECENT = '@w3m/recent';
88
const W3M_CONNECTED_CONNECTOR = '@w3m/connected_connector';
9-
const LAST_EMAIL_LOGIN_TIME = 'LAST_EMAIL_LOGIN_TIME'; // Also present in email/src/W3mFrameConstants.ts
10-
11-
const EMAIL_MINIMUM_TIMEOUT = 30 * 1000;
129

1310
// -- Utility -----------------------------------------------------------------
1411
export const StorageUtil = {
@@ -102,17 +99,5 @@ export const StorageUtil = {
10299
} catch {
103100
console.info('Unable to remove Connected Connector');
104101
}
105-
},
106-
107-
async getTimeToNextEmailLogin() {
108-
const lastEmailLoginTime = await AsyncStorage.getItem(LAST_EMAIL_LOGIN_TIME);
109-
if (lastEmailLoginTime) {
110-
const difference = Date.now() - Number(lastEmailLoginTime);
111-
if (difference < EMAIL_MINIMUM_TIMEOUT) {
112-
return Math.ceil((EMAIL_MINIMUM_TIMEOUT - difference) / 1000);
113-
}
114-
}
115-
116-
return 0;
117102
}
118103
};

‎packages/scaffold/src/modal/w3m-connect-button/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ export function W3mConnectButton({
2323
<ConnectButton
2424
onPress={() => ModalController.open()}
2525
size={size}
26-
loading={open || loading}
26+
loading={loading || open}
2727
style={style}
2828
testID={testID}
2929
>
30-
{open ? loadingLabel : label}
30+
{loading || open ? loadingLabel : label}
3131
</ConnectButton>
3232
);
3333
}

‎packages/scaffold/src/partials/w3m-header/index.tsx

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useSnapshot } from 'valtio';
22
import { RouterController, ModalController, EventsController } from '@web3modal/core-react-native';
3-
import { IconLink, Text, FlexView, Separator } from '@web3modal/ui-react-native';
3+
import { IconLink, Text, FlexView } from '@web3modal/ui-react-native';
44

55
export function Header() {
66
const { view, history } = useSnapshot(RouterController.state);
@@ -19,19 +19,19 @@ export function Header() {
1919
Connect: 'Connect wallet',
2020
Account: undefined,
2121
ConnectingWalletConnect: walletName ?? 'WalletConnect',
22-
ConnectingExternal: connectorName ?? 'Connect Wallet',
22+
ConnectingExternal: connectorName ?? 'Connect wallet',
2323
Networks: 'Select network',
2424
SwitchNetwork: networkName ?? 'Switch network',
2525
AllWallets: 'All wallets',
2626
WhatIsANetwork: 'What is a network?',
2727
WhatIsAWallet: 'What is a wallet?',
2828
GetWallet: 'Get a wallet',
29-
EmailVerifyDevice: 'Register Device',
30-
EmailVerifyOtp: 'Confirm Email',
31-
UpdateEmailWallet: 'Edit Email',
32-
UpdateEmailPrimaryOtp: 'Confirm Current Email',
33-
UpdateEmailSecondaryOtp: 'Confirm New Email',
34-
UpgradeEmailWallet: 'Upgrade your Wallet'
29+
EmailVerifyDevice: ' ',
30+
EmailVerifyOtp: 'Confirm email',
31+
UpdateEmailWallet: 'Edit email',
32+
UpdateEmailPrimaryOtp: 'Confirm current email',
33+
UpdateEmailSecondaryOtp: 'Confirm new email',
34+
UpgradeEmailWallet: 'Upgrade wallet'
3535
};
3636
};
3737

@@ -54,21 +54,22 @@ export function Header() {
5454

5555
if (!header) return null;
5656

57+
const bottomPadding = header === ' ' ? '0' : '4xs';
58+
5759
return (
5860
<>
5961
<FlexView
6062
justifyContent="space-between"
6163
flexDirection="row"
6264
alignItems="center"
63-
padding={['l', 'xl', 'l', 'xl']}
65+
padding={['l', 'xl', bottomPadding, 'xl']}
6466
>
6567
{dynamicButtonTemplate()}
6668
<Text variant="paragraph-600" numberOfLines={1}>
6769
{header}
6870
</Text>
6971
<IconLink icon="close" size="md" onPress={ModalController.close} testID="button-close" />
7072
</FlexView>
71-
<Separator />
7273
</>
7374
);
7475
}

‎packages/scaffold/src/partials/w3m-otp-code/index.tsx

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ interface Props {
1111
loading?: boolean;
1212
error?: string;
1313
email?: string;
14-
timeLeft: number;
14+
timeLeft?: number;
1515
codeExpiry?: number;
1616
retryDisabledLabel?: string;
1717
retryLabel?: string;
@@ -24,15 +24,15 @@ export function OtpCodeView({
2424
error,
2525
loading,
2626
email,
27-
timeLeft,
27+
timeLeft = 0,
2828
codeExpiry = 20,
2929
retryDisabledLabel = 'Resend',
3030
retryLabel = 'Resend code'
3131
}: Props) {
3232
const { keyboardShown, keyboardHeight } = useKeyboard();
3333
const paddingBottom = Platform.select({
34-
android: keyboardShown ? keyboardHeight + Spacing['3xl'] : Spacing['3xl'],
35-
default: Spacing['3xl']
34+
android: keyboardShown ? keyboardHeight + Spacing.l : Spacing.l,
35+
default: Spacing.l
3636
});
3737

3838
const handleCodeChange = (code: string) => {
@@ -45,31 +45,35 @@ export function OtpCodeView({
4545

4646
return (
4747
<FlexView padding={['l', 'l', '3xl', 'l']} alignItems="center" style={{ paddingBottom }}>
48-
<Text center variant="paragraph-500">
49-
Enter the code we sent to your email{' '}
50-
<Text variant="paragraph-600" style={styles.emailText}>
51-
{email ?? 'your email'}
52-
</Text>
48+
<Text center variant="paragraph-400">
49+
Enter the code we sent to{' '}
5350
</Text>
51+
<Text variant="paragraph-500">{email ?? 'your email'}</Text>
5452
<Text style={styles.expiryText} variant="small-400" color="fg-200">
5553
{`The code expires in ${codeExpiry} minutes`}
5654
</Text>
5755
<FlexView justifyContent="center" style={styles.otpContainer}>
58-
{loading ? <LoadingSpinner /> : <Otp length={6} onChangeText={handleCodeChange} />}
56+
{loading ? (
57+
<LoadingSpinner size="xl" />
58+
) : (
59+
<Otp length={6} onChangeText={handleCodeChange} autoFocus />
60+
)}
5961
</FlexView>
6062
{error && (
6163
<Text variant="small-400" color="error-100" style={styles.errorText}>
6264
{error}
6365
</Text>
6466
)}
65-
<FlexView alignItems="center" flexDirection="row" margin="3xs">
66-
<Text variant="small-400" color="fg-200">
67-
Didn't receive it?
68-
</Text>
69-
<Link onPress={onRetry} disabled={timeLeft > 0 || loading}>
70-
{timeLeft > 0 ? `${retryDisabledLabel} in ${timeLeft}s` : retryLabel}
71-
</Link>
72-
</FlexView>
67+
{!loading && (
68+
<FlexView alignItems="center" flexDirection="row" margin={['s', '0', '0', '0']}>
69+
<Text variant="small-400" color="fg-200">
70+
Didn't receive it?
71+
</Text>
72+
<Link onPress={onRetry} disabled={timeLeft > 0 || loading}>
73+
{timeLeft > 0 ? `${retryDisabledLabel} in ${timeLeft}s` : retryLabel}
74+
</Link>
75+
</FlexView>
76+
)}
7377
</FlexView>
7478
);
7579
}

‎packages/scaffold/src/partials/w3m-otp-code/styles.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ export default StyleSheet.create({
66
marginTop: Spacing.s,
77
marginBottom: Spacing.l
88
},
9-
emailText: {
10-
fontWeight: 'bold'
11-
},
129
otpContainer: {
1310
height: 60
1411
},

‎packages/scaffold/src/views/w3m-account-view/components/upgrade-wallet-button.tsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,21 +32,23 @@ export function UpgradeWalletButton({ style, onPress }: Props) {
3232
style={[styles.container, { backgroundColor: animatedValue }, style]}
3333
>
3434
<IconBox icon="wallet" size="lg" background iconColor="accent-100" />
35-
<FlexView flexGrow={1} margin={['0', 'm', '0', 'm']}>
36-
<Text color="fg-100">Upgrade your wallet</Text>
37-
<Text variant="small-400" color="fg-200">
35+
<FlexView flexGrow={1} margin={['0', 's', '0', 's']}>
36+
<Text style={styles.upgradeText} color="fg-100">
37+
Upgrade your wallet
38+
</Text>
39+
<Text variant="small-400" color="fg-150">
3840
Transition to a self-custodial wallet
3941
</Text>
4042
</FlexView>
41-
<Icon name="chevronRight" size="sm" color="fg-200" style={styles.chevron} />
43+
<Icon name="chevronRight" size="md" color="fg-150" style={styles.chevron} />
4244
</AnimatedPressable>
4345
);
4446
}
4547

4648
const styles = StyleSheet.create({
4749
container: {
4850
height: 75,
49-
borderRadius: BorderRadius.xs,
51+
borderRadius: BorderRadius.s,
5052
backgroundColor: 'red',
5153
flexDirection: 'row',
5254
alignItems: 'center',
@@ -56,6 +58,9 @@ const styles = StyleSheet.create({
5658
textContainer: {
5759
marginHorizontal: Spacing.m
5860
},
61+
upgradeText: {
62+
marginBottom: Spacing['3xs']
63+
},
5964
chevron: {
6065
marginRight: Spacing['2xs']
6166
}

‎packages/scaffold/src/views/w3m-connect-view/components/connect-email-input.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useSnapshot } from 'valtio';
22
import { useState } from 'react';
3-
import { EmailInput, Separator, Spacing } from '@web3modal/ui-react-native';
3+
import { EmailInput, FlexView, Separator, Spacing } from '@web3modal/ui-react-native';
44
import {
55
ConnectorController,
66
CoreHelperUtil,
@@ -45,7 +45,7 @@ export function ConnectEmailInput({ isEmailEnabled, showSeparator, loading }: Pr
4545
}
4646
} catch (e: any) {
4747
const parsedError = CoreHelperUtil.parseError(e);
48-
if (parsedError?.includes('Invalid email')) {
48+
if (parsedError?.includes('valid email')) {
4949
setError('Invalid email. Try again.');
5050
} else {
5151
SnackController.showError(parsedError);
@@ -61,13 +61,15 @@ export function ConnectEmailInput({ isEmailEnabled, showSeparator, loading }: Pr
6161

6262
return (
6363
<>
64-
<EmailInput
65-
onSubmit={onEmailSubmit}
66-
onFocus={onEmailFocus}
67-
loading={inputLoading || loading}
68-
errorMessage={error}
69-
onChangeText={onChangeText}
70-
/>
64+
<FlexView padding={['0', 's', '0', 's']}>
65+
<EmailInput
66+
onSubmit={onEmailSubmit}
67+
onFocus={onEmailFocus}
68+
loading={inputLoading || loading}
69+
errorMessage={error}
70+
onChangeText={onChangeText}
71+
/>
72+
</FlexView>
7173
{showSeparator && <Separator text="or" style={styles.emailSeparator} />}
7274
</>
7375
);

‎packages/scaffold/src/views/w3m-connect-view/index.tsx

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -55,33 +55,35 @@ export function ConnectView() {
5555

5656
return (
5757
<ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
58-
<FlexView padding={['xs', 's', '0', 's']} style={{ paddingBottom }}>
58+
<FlexView padding={['xs', '0', '0', '0']} style={{ paddingBottom }}>
5959
<ConnectEmailInput
6060
isEmailEnabled={isEmailEnabled}
6161
showSeparator={isWalletConnectEnabled || isCoinbaseEnabled}
6262
loading={emailLoading}
6363
/>
64-
<RecentWalletList
65-
itemStyle={styles.item}
66-
onWalletPress={onWalletPress}
67-
isWalletConnectEnabled={isWalletConnectEnabled}
68-
/>
69-
<AllWalletList
70-
itemStyle={styles.item}
71-
onWalletPress={onWalletPress}
72-
isWalletConnectEnabled={isWalletConnectEnabled}
73-
/>
74-
<CustomWalletList
75-
itemStyle={styles.item}
76-
onWalletPress={onWalletPress}
77-
isWalletConnectEnabled={isWalletConnectEnabled}
78-
/>
79-
<ConnectorList itemStyle={styles.item} isWalletConnectEnabled={isWalletConnectEnabled} />
80-
<AllWalletsButton
81-
itemStyle={styles.item}
82-
onPress={onViewAllPress}
83-
isWalletConnectEnabled={isWalletConnectEnabled}
84-
/>
64+
<FlexView padding={['0', 's', '0', 's']}>
65+
<RecentWalletList
66+
itemStyle={styles.item}
67+
onWalletPress={onWalletPress}
68+
isWalletConnectEnabled={isWalletConnectEnabled}
69+
/>
70+
<AllWalletList
71+
itemStyle={styles.item}
72+
onWalletPress={onWalletPress}
73+
isWalletConnectEnabled={isWalletConnectEnabled}
74+
/>
75+
<CustomWalletList
76+
itemStyle={styles.item}
77+
onWalletPress={onWalletPress}
78+
isWalletConnectEnabled={isWalletConnectEnabled}
79+
/>
80+
<ConnectorList itemStyle={styles.item} isWalletConnectEnabled={isWalletConnectEnabled} />
81+
<AllWalletsButton
82+
itemStyle={styles.item}
83+
onPress={onViewAllPress}
84+
isWalletConnectEnabled={isWalletConnectEnabled}
85+
/>
86+
</FlexView>
8587
</FlexView>
8688
</ScrollView>
8789
);

‎packages/scaffold/src/views/w3m-email-verify-device-view/index.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export function EmailVerifyDeviceView() {
4040
setLoading(true);
4141
emailProvider?.connectEmail({ email: data.email });
4242
listenForDeviceApproval();
43-
SnackController.showSuccess('Email sent');
43+
SnackController.showSuccess('Link resent');
4444
startTimer(30);
4545
setLoading(false);
4646
} catch (e) {
@@ -55,23 +55,24 @@ export function EmailVerifyDeviceView() {
5555
}, []);
5656

5757
return (
58-
<FlexView alignItems="center" padding={['2xl', '4xl', '3xl', '4xl']}>
59-
<View style={[styles.iconContainer, { backgroundColor: Theme['accent-glass-020'] }]}>
60-
<Icon name="verify" size="lg" height={30} width={30} color="accent-100" />
58+
<FlexView alignItems="center" padding={['0', '4xl', '3xl', '4xl']}>
59+
<View style={[styles.iconContainer, { backgroundColor: Theme['accent-glass-010'] }]}>
60+
<Icon name="verify" size="lg" height={28} width={28} color="accent-100" />
6161
</View>
62+
<Text center variant="medium-600" style={styles.headingText}>
63+
Register this device to continue
64+
</Text>
6265
<Text center variant="paragraph-400">
63-
Approve the login link we sent to{' '}
64-
<Text variant="paragraph-600" style={styles.emailText}>
65-
{data?.email ?? 'your email'}
66-
</Text>
66+
Check the instructions sent to{' '}
6767
</Text>
68+
<Text variant="paragraph-500">{data?.email ?? 'your email'}</Text>
6869
<Text variant="small-400" color="fg-200" style={styles.expiryText}>
6970
The link expires in 20 minutes
7071
</Text>
7172
<FlexView alignItems="center" justifyContent="center" flexDirection="row">
7273
<Text variant="small-400">Didn't receive it?</Text>
7374
<Link onPress={onResendEmail} disabled={timeLeft > 0 || loading}>
74-
{timeLeft > 0 ? `Resend in ${timeLeft}s` : 'Resend email'}
75+
{timeLeft > 0 ? `Resend in ${timeLeft}s` : 'Resend link'}
7576
</Link>
7677
</FlexView>
7778
</FlexView>

0 commit comments

Comments
 (0)