Skip to content

Commit e14f193

Browse files
ignaciosantiseignaciosantise
authored
fix: added a default error in connecting view (#182)
* fix: added a default error in connecting view
1 parent cf895e3 commit e14f193

File tree

10 files changed

+203
-132
lines changed

10 files changed

+203
-132
lines changed

‎.changeset/soft-grapes-behave.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
'@web3modal/scaffold-react-native': patch
3+
'@web3modal/core-react-native': patch
4+
'@web3modal/coinbase-ethers-react-native': patch
5+
'@web3modal/coinbase-wagmi-react-native': patch
6+
'@web3modal/email-react-native': patch
7+
'@web3modal/email-ethers-react-native': patch
8+
'@web3modal/email-wagmi-react-native': patch
9+
'@web3modal/ethers-react-native': patch
10+
'@web3modal/ethers5-react-native': patch
11+
'@web3modal/scaffold-utils-react-native': patch
12+
'@web3modal/ui-react-native': patch
13+
'@web3modal/wagmi-react-native': patch
14+
---
15+
16+
fix: added a default error in connecting view

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,7 @@ export const ConstantsUtil = {
1010

1111
BLOCKCHAIN_API_RPC_URL: 'https://rpc.walletconnect.org',
1212

13-
PULSE_API_URL: 'https://pulse.walletconnect.org'
13+
PULSE_API_URL: 'https://pulse.walletconnect.org',
14+
15+
LINKING_ERROR: 'LINKING_ERROR'
1416
};

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,12 @@ export const CoreHelperUtil = {
105105
};
106106
},
107107

108-
openLink(url: string) {
109-
Linking.openURL(url);
108+
async openLink(url: string) {
109+
try {
110+
await Linking.openURL(url);
111+
} catch (error) {
112+
throw new Error(ConstantsUtil.LINKING_ERROR);
113+
}
110114
},
111115

112116
formatBalance(balance: string | undefined, symbol: string | undefined, decimals = 3) {

‎packages/scaffold/src/partials/w3m-connecting-mobile/components/Body.tsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { StyleSheet } from 'react-native';
2+
import { FlexView, Spacing, Text } from '@web3modal/ui-react-native';
3+
4+
export interface ConnectingBodyProps {
5+
errorType?: 'linking' | 'default';
6+
wcError?: boolean;
7+
walletName?: string;
8+
}
9+
10+
export function ConnectingBody({ errorType, wcError, walletName = 'Wallet' }: ConnectingBodyProps) {
11+
if (errorType === 'linking') {
12+
return (
13+
<FlexView
14+
padding={['3xs', '2xl', '0', '2xl']}
15+
alignItems="center"
16+
style={styles.textContainer}
17+
>
18+
<Text variant="paragraph-500">App not installed</Text>
19+
</FlexView>
20+
);
21+
} else if (errorType === 'default') {
22+
return (
23+
<FlexView
24+
padding={['3xs', '2xl', '0', '2xl']}
25+
alignItems="center"
26+
style={styles.textContainer}
27+
>
28+
<Text variant="paragraph-500">Connection error</Text>
29+
<Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
30+
There was an unexpected connection error.
31+
</Text>
32+
</FlexView>
33+
);
34+
} else if (wcError) {
35+
return (
36+
<FlexView
37+
padding={['3xs', '2xl', '0', '2xl']}
38+
alignItems="center"
39+
style={styles.textContainer}
40+
>
41+
<Text variant="paragraph-500" color="error-100">
42+
Connection declined
43+
</Text>
44+
<Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
45+
Connection can be declined if a previous request is still active
46+
</Text>
47+
</FlexView>
48+
);
49+
}
50+
51+
return (
52+
<FlexView padding={['3xs', '2xl', '0', '2xl']} alignItems="center" style={styles.textContainer}>
53+
<Text variant="paragraph-500">{`Continue in ${walletName}`}</Text>
54+
<Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
55+
Accept connection request in the wallet
56+
</Text>
57+
</FlexView>
58+
);
59+
}
60+
61+
const styles = StyleSheet.create({
62+
textContainer: {
63+
marginVertical: Spacing.xs
64+
},
65+
descriptionText: {
66+
marginTop: Spacing.xs,
67+
marginHorizontal: Spacing['3xl']
68+
}
69+
});

‎packages/scaffold/src/partials/w3m-connecting-mobile/components/StoreLink.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { ActionEntry, Button, Spacing, Text } from '@web3modal/ui-react-native';
2+
import { StyleSheet } from 'react-native';
3+
4+
export interface StoreLinkProps {
5+
visible: boolean;
6+
walletName?: string;
7+
onPress: () => void;
8+
}
9+
10+
export function StoreLink({ visible, walletName = 'Wallet', onPress }: StoreLinkProps) {
11+
if (!visible) return null;
12+
13+
return (
14+
<ActionEntry style={styles.storeButton}>
15+
<Text numberOfLines={1} variant="paragraph-500" color="fg-200">
16+
{`Don't have ${walletName}?`}
17+
</Text>
18+
<Button
19+
variant="accent"
20+
iconRight="chevronRightSmall"
21+
onPress={onPress}
22+
size="sm"
23+
hitSlop={20}
24+
>
25+
Get
26+
</Button>
27+
</ActionEntry>
28+
);
29+
}
30+
31+
const styles = StyleSheet.create({
32+
storeButton: {
33+
justifyContent: 'space-between',
34+
paddingHorizontal: Spacing.l,
35+
marginHorizontal: Spacing.xl,
36+
marginTop: Spacing.l
37+
}
38+
});

‎packages/scaffold/src/partials/w3m-connecting-mobile/index.tsx

Lines changed: 26 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
import { useSnapshot } from 'valtio';
22
import { useCallback, useEffect, useState } from 'react';
3-
import { Linking, Platform, ScrollView } from 'react-native';
3+
import { Platform, ScrollView } from 'react-native';
44
import {
55
RouterController,
66
ApiController,
77
AssetUtil,
88
ConnectionController,
99
CoreHelperUtil,
1010
OptionsController,
11-
EventsController
11+
EventsController,
12+
ConstantsUtil
1213
} from '@web3modal/core-react-native';
1314
import {
1415
Button,
1516
FlexView,
1617
LoadingThumbnail,
17-
Text,
1818
WalletImage,
1919
Link,
20-
IconBox,
21-
ActionEntry
20+
IconBox
2221
} from '@web3modal/ui-react-native';
2322

2423
import { useCustomDimensions } from '../../hooks/useCustomDimensions';
24+
import { ConnectingBody } from './components/Body';
25+
import { StoreLink } from './components/StoreLink';
2526
import styles from './styles';
2627

2728
interface Props {
@@ -34,10 +35,11 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
3435
const { data } = useSnapshot(RouterController.state);
3536
const { maxWidth: width } = useCustomDimensions();
3637
const { wcUri, wcError } = useSnapshot(ConnectionController.state);
37-
const [linkingError, setLinkingError] = useState(false);
38+
const [errorType, setErrorType] = useState<'linking' | 'default' | undefined>();
3839
const [isRetrying, setIsRetrying] = useState(false);
3940
const [ready, setReady] = useState(false);
40-
const showCopy = OptionsController.isClipboardAvailable() && !linkingError;
41+
const showCopy = OptionsController.isClipboardAvailable() && errorType !== 'linking';
42+
const showRetry = errorType !== 'linking';
4143

4244
const storeUrl = Platform.select({
4345
ios: data?.wallet?.app_store,
@@ -51,20 +53,20 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
5153

5254
const onStorePress = () => {
5355
if (storeUrl) {
54-
Linking.openURL(storeUrl);
56+
CoreHelperUtil.openLink(storeUrl);
5557
}
5658
};
5759

5860
const onConnect = useCallback(async () => {
5961
try {
6062
const { name, mobile_link } = data?.wallet ?? {};
6163
if (name && mobile_link && wcUri) {
62-
setLinkingError(false);
64+
setErrorType(undefined);
6365
ConnectionController.setWcError(false);
6466
const { redirect, href } = CoreHelperUtil.formatNativeUrl(mobile_link, wcUri);
6567
ConnectionController.setWcLinking({ name, href });
6668
ConnectionController.setPressedWallet(data?.wallet);
67-
await Linking.openURL(redirect);
69+
await CoreHelperUtil.openLink(redirect);
6870
await ConnectionController.state.wcPromise;
6971

7072
EventsController.sendEvent({
@@ -76,75 +78,15 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
7678
}
7779
});
7880
}
79-
} catch (error) {
80-
setLinkingError(true);
81+
} catch (error: any) {
82+
if (error.message.includes(ConstantsUtil.LINKING_ERROR)) {
83+
setErrorType('linking');
84+
} else {
85+
setErrorType('default');
86+
}
8187
}
8288
}, [data?.wallet, wcUri]);
8389

84-
const textTemplate = () => {
85-
const walletName = data?.wallet?.name ?? 'Wallet';
86-
if (linkingError) {
87-
return (
88-
<FlexView
89-
padding={['3xs', '2xl', '0', '2xl']}
90-
alignItems="center"
91-
style={styles.textContainer}
92-
>
93-
<Text variant="paragraph-500">App not installed</Text>
94-
</FlexView>
95-
);
96-
} else if (wcError) {
97-
return (
98-
<FlexView
99-
padding={['3xs', '2xl', '0', '2xl']}
100-
alignItems="center"
101-
style={styles.textContainer}
102-
>
103-
<Text variant="paragraph-500" color="error-100">
104-
Connection declined
105-
</Text>
106-
<Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
107-
Connection can be declined if a previous request is still active
108-
</Text>
109-
</FlexView>
110-
);
111-
}
112-
113-
return (
114-
<FlexView
115-
padding={['3xs', '2xl', '0', '2xl']}
116-
alignItems="center"
117-
style={styles.textContainer}
118-
>
119-
<Text variant="paragraph-500">{`Continue in ${walletName}`}</Text>
120-
<Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
121-
Accept connection request in the wallet
122-
</Text>
123-
</FlexView>
124-
);
125-
};
126-
127-
const storeTemplate = () => {
128-
if (!storeUrl || isInstalled) return null;
129-
130-
return (
131-
<ActionEntry style={styles.storeButton}>
132-
<Text numberOfLines={1} variant="paragraph-500" color="fg-200">
133-
{`Don't have ${data?.wallet?.name}?`}
134-
</Text>
135-
<Button
136-
variant="accent"
137-
iconRight="chevronRightSmall"
138-
onPress={onStorePress}
139-
size="sm"
140-
hitSlop={20}
141-
>
142-
Get
143-
</Button>
144-
</ActionEntry>
145-
);
146-
};
147-
14890
useEffect(() => {
14991
// First connection
15092
if (!ready && wcUri) {
@@ -168,7 +110,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
168110
padding={['2xl', 'l', '0', 'l']}
169111
style={{ width }}
170112
>
171-
<LoadingThumbnail paused={linkingError || wcError}>
113+
<LoadingThumbnail paused={!!errorType || wcError}>
172114
<WalletImage
173115
size="lg"
174116
imageSrc={AssetUtil.getWalletImage(data?.wallet)}
@@ -186,8 +128,8 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
186128
/>
187129
)}
188130
</LoadingThumbnail>
189-
{textTemplate()}
190-
{!linkingError && (
131+
<ConnectingBody errorType={errorType} wcError={wcError} walletName={data?.wallet?.name} />
132+
{showRetry && (
191133
<Button
192134
variant="accent"
193135
iconLeft="refresh"
@@ -209,7 +151,11 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
209151
Copy link
210152
</Link>
211153
)}
212-
{storeTemplate()}
154+
<StoreLink
155+
visible={!isInstalled && !!storeUrl}
156+
walletName={data?.wallet?.name}
157+
onPress={onStorePress}
158+
/>
213159
</ScrollView>
214160
);
215161
}

‎packages/scaffold/src/partials/w3m-connecting-mobile/styles.ts

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Spacing } from '@web3modal/ui-react-native';
21
import { StyleSheet } from 'react-native';
2+
import { Spacing } from '@web3modal/ui-react-native';
33

44
export default StyleSheet.create({
55
container: {
@@ -15,23 +15,10 @@ export default StyleSheet.create({
1515
alignSelf: 'center',
1616
marginTop: Spacing.m
1717
},
18-
textContainer: {
19-
marginVertical: Spacing.xs
20-
},
21-
descriptionText: {
22-
marginTop: Spacing.xs,
23-
marginHorizontal: Spacing['3xl']
24-
},
2518
errorIcon: {
2619
position: 'absolute',
2720
bottom: 5,
2821
right: 5,
2922
zIndex: 2
30-
},
31-
storeButton: {
32-
justifyContent: 'space-between',
33-
paddingHorizontal: Spacing.l,
34-
marginHorizontal: Spacing.xl,
35-
marginTop: Spacing.l
3623
}
3724
});

0 commit comments

Comments
 (0)