@rango-dev/widget-embedded 0.51.1-next.1 → 0.51.1-next.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ConfirmWalletsModal/WalletList.d.ts.map +1 -1
- package/dist/components/HeaderButtons/WalletButton.d.ts.map +1 -1
- package/dist/components/Layout/Layout.constants.d.ts +5 -3
- package/dist/components/Layout/Layout.constants.d.ts.map +1 -1
- package/dist/components/Layout/Layout.d.ts.map +1 -1
- package/dist/components/Layout/Layout.styles.d.ts.map +1 -1
- package/dist/components/WalletStatefulConnect/ConnectStatus.d.ts.map +1 -1
- package/dist/components/WalletStatefulConnect/Detached.d.ts.map +1 -1
- package/dist/components/WalletStatefulConnect/Namespaces.d.ts.map +1 -1
- package/dist/containers/App/App.styles.d.ts.map +1 -1
- package/dist/hooks/useScreenDetect.d.ts.map +1 -1
- package/dist/hooks/useWalletList.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +4 -4
- package/dist/pages/SelectBlockchainPage.d.ts.map +1 -1
- package/dist/pages/WalletsPage.d.ts.map +1 -1
- package/dist/store/slices/data.d.ts.map +1 -1
- package/dist/types/config.d.ts +0 -15
- package/dist/types/config.d.ts.map +1 -1
- package/dist/utils/common.d.ts +2 -1
- package/dist/utils/common.d.ts.map +1 -1
- package/dist/utils/wallets.d.ts +6 -13
- package/dist/utils/wallets.d.ts.map +1 -1
- package/dist/widget-embedded.build.json +1 -1
- package/package.json +10 -10
- package/src/components/ConfirmWalletsModal/WalletList.tsx +10 -9
- package/src/components/HeaderButtons/WalletButton.tsx +4 -2
- package/src/components/Layout/Layout.constants.ts +5 -3
- package/src/components/Layout/Layout.styles.ts +12 -5
- package/src/components/Layout/Layout.tsx +18 -32
- package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx +3 -3
- package/src/components/WalletStatefulConnect/ConnectStatus.tsx +6 -3
- package/src/components/WalletStatefulConnect/Detached.tsx +16 -4
- package/src/components/WalletStatefulConnect/Namespaces.tsx +16 -4
- package/src/containers/App/App.styles.ts +1 -0
- package/src/hooks/useScreenDetect.ts +7 -1
- package/src/hooks/useWalletList.ts +2 -5
- package/src/pages/SelectBlockchainPage.tsx +14 -5
- package/src/pages/WalletsPage.tsx +1 -20
- package/src/store/slices/data.ts +2 -13
- package/src/types/config.ts +1 -15
- package/src/utils/common.ts +16 -1
- package/src/utils/wallets.ts +42 -52
- package/dist/hooks/useDeepLink.d.ts +0 -7
- package/dist/hooks/useDeepLink.d.ts.map +0 -1
- package/src/hooks/useDeepLink.ts +0 -48
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rango-dev/widget-embedded",
|
|
3
|
-
"version": "0.51.1-next.
|
|
3
|
+
"version": "0.51.1-next.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"source": "./src/index.ts",
|
|
@@ -25,15 +25,15 @@
|
|
|
25
25
|
"@lingui/core": "4.2.1",
|
|
26
26
|
"@lingui/react": "4.2.1",
|
|
27
27
|
"@rango-dev/logging-core": "^0.11.0",
|
|
28
|
-
"@rango-dev/provider-all": "^0.53.1-next.
|
|
29
|
-
"@rango-dev/queue-manager-core": "^0.32.0",
|
|
30
|
-
"@rango-dev/queue-manager-rango-preset": "^0.53.
|
|
31
|
-
"@rango-dev/queue-manager-react": "^0.32.0",
|
|
28
|
+
"@rango-dev/provider-all": "^0.53.1-next.2",
|
|
29
|
+
"@rango-dev/queue-manager-core": "^0.32.1-next.0",
|
|
30
|
+
"@rango-dev/queue-manager-rango-preset": "^0.53.1-next.2",
|
|
31
|
+
"@rango-dev/queue-manager-react": "^0.32.1-next.0",
|
|
32
32
|
"@rango-dev/signer-solana": "^0.44.0",
|
|
33
|
-
"@rango-dev/ui": "^0.54.
|
|
34
|
-
"@rango-dev/wallets-core": "^0.50.
|
|
35
|
-
"@rango-dev/wallets-react": "^0.37.1-next.
|
|
36
|
-
"@rango-dev/wallets-shared": "^0.51.
|
|
33
|
+
"@rango-dev/ui": "^0.54.1-next.4",
|
|
34
|
+
"@rango-dev/wallets-core": "^0.50.1-next.1",
|
|
35
|
+
"@rango-dev/wallets-react": "^0.37.1-next.2",
|
|
36
|
+
"@rango-dev/wallets-shared": "^0.51.1-next.1",
|
|
37
37
|
"bignumber.js": "^9.1.1",
|
|
38
38
|
"copy-to-clipboard": "^3.3.3",
|
|
39
39
|
"dayjs": "^1.11.7",
|
|
@@ -54,4 +54,4 @@
|
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|
|
56
56
|
}
|
|
57
|
-
}
|
|
57
|
+
}
|
|
@@ -15,7 +15,6 @@ import React, { useEffect, useState } from 'react';
|
|
|
15
15
|
|
|
16
16
|
import { useWallets } from '../..';
|
|
17
17
|
import { WIDGET_UI_ID } from '../../constants';
|
|
18
|
-
import { useDeepLink } from '../../hooks/useDeepLink';
|
|
19
18
|
import { useWalletList } from '../../hooks/useWalletList';
|
|
20
19
|
import { useAppStore } from '../../store/AppStore';
|
|
21
20
|
import { useUiStore } from '../../store/ui';
|
|
@@ -39,7 +38,7 @@ export function WalletList(props: PropTypes) {
|
|
|
39
38
|
const { chain, quoteChains, isSelected, selectWallet, limit, onShowMore } =
|
|
40
39
|
props;
|
|
41
40
|
const isActiveTab = useUiStore.use.isActiveTab();
|
|
42
|
-
|
|
41
|
+
|
|
43
42
|
const { blockchains, connectedWallets } = useAppStore();
|
|
44
43
|
const [selectedWalletToConnect, setSelectedWalletToConnect] =
|
|
45
44
|
useState<ExtendedModalWalletInfo>();
|
|
@@ -119,7 +118,9 @@ export function WalletList(props: PropTypes) {
|
|
|
119
118
|
walletType: wallet.type,
|
|
120
119
|
chain,
|
|
121
120
|
});
|
|
122
|
-
const isConnected =
|
|
121
|
+
const isConnected =
|
|
122
|
+
wallet.state === WalletState.CONNECTED ||
|
|
123
|
+
wallet.state === WalletState.PARTIALLY_CONNECTED;
|
|
123
124
|
const conciseAddress = address
|
|
124
125
|
? getConciseAddress(address, ACCOUNT_ADDRESS_MAX_CHARACTERS)
|
|
125
126
|
: '';
|
|
@@ -160,9 +161,7 @@ export function WalletList(props: PropTypes) {
|
|
|
160
161
|
}
|
|
161
162
|
};
|
|
162
163
|
|
|
163
|
-
const info = makeInfo(wallet.state
|
|
164
|
-
hasDeepLink: checkHasDeepLink(wallet.type),
|
|
165
|
-
});
|
|
164
|
+
const info = makeInfo(wallet.state);
|
|
166
165
|
|
|
167
166
|
const getWalletDescription = () => {
|
|
168
167
|
if (couldAddExperimentalChain) {
|
|
@@ -179,12 +178,16 @@ export function WalletList(props: PropTypes) {
|
|
|
179
178
|
};
|
|
180
179
|
|
|
181
180
|
const getWalletDescriptionColor = () => {
|
|
182
|
-
if (
|
|
181
|
+
if (
|
|
182
|
+
wallet.state === WalletState.CONNECTED ||
|
|
183
|
+
wallet.state === WalletState.PARTIALLY_CONNECTED
|
|
184
|
+
) {
|
|
183
185
|
if (isConnectedButDifferentThanTargetNamespace) {
|
|
184
186
|
return 'neutral600';
|
|
185
187
|
}
|
|
186
188
|
return 'neutral700';
|
|
187
189
|
}
|
|
190
|
+
|
|
188
191
|
return info.color;
|
|
189
192
|
};
|
|
190
193
|
|
|
@@ -229,7 +232,6 @@ export function WalletList(props: PropTypes) {
|
|
|
229
232
|
</WatermarkedModal>
|
|
230
233
|
)}
|
|
231
234
|
<SelectableWallet
|
|
232
|
-
hasDeepLink={checkHasDeepLink(wallet.type)}
|
|
233
235
|
key={wallet.type}
|
|
234
236
|
id="widget-wallets-list-selectable-wallet-btn"
|
|
235
237
|
description={getWalletDescription()}
|
|
@@ -238,7 +240,6 @@ export function WalletList(props: PropTypes) {
|
|
|
238
240
|
selected={isSelected(wallet.type, chain)}
|
|
239
241
|
disabled={!isActiveTab}
|
|
240
242
|
{...wallet}
|
|
241
|
-
link={getWalletLink(wallet.type)}
|
|
242
243
|
/>
|
|
243
244
|
</React.Fragment>
|
|
244
245
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { PropTypes } from './HeaderButtons.types';
|
|
2
2
|
|
|
3
3
|
import { i18n } from '@lingui/core';
|
|
4
|
-
import { Image, Tooltip, WalletIcon } from '@rango-dev/ui';
|
|
4
|
+
import { Image, Tooltip, WalletIcon, WalletState } from '@rango-dev/ui';
|
|
5
5
|
import React from 'react';
|
|
6
6
|
|
|
7
7
|
import { useWalletList } from '../../hooks/useWalletList';
|
|
@@ -16,7 +16,9 @@ import {
|
|
|
16
16
|
function WalletButton(props: PropTypes) {
|
|
17
17
|
const { list } = useWalletList();
|
|
18
18
|
const connectedWallets = list.filter(
|
|
19
|
-
(wallet) =>
|
|
19
|
+
(wallet) =>
|
|
20
|
+
wallet.state === WalletState.CONNECTED ||
|
|
21
|
+
wallet.state === WalletState.PARTIALLY_CONNECTED
|
|
20
22
|
);
|
|
21
23
|
const content = !connectedWallets.length ? (
|
|
22
24
|
i18n.t('Connect Wallet')
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
export const WIDGET_MAX_HEIGHT =
|
|
2
|
-
export const
|
|
3
|
-
export const
|
|
1
|
+
export const WIDGET_MAX_HEIGHT = '700px';
|
|
2
|
+
export const WIDGET_MIN_HEIGHT_FOR_SMALL_SCREENS = '425px';
|
|
3
|
+
export const WIDGET_MIN_HEIGHT_FOR_LARGE_SCREENS = '550px';
|
|
4
|
+
export const COMPACT_TOKEN_SELECTOR_THRESHOLD = '640px';
|
|
5
|
+
export const LARGE_SCREEN_MIN_HEIGHT = '800px';
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { css, styled } from '@rango-dev/ui';
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
LARGE_SCREEN_MIN_HEIGHT,
|
|
5
|
+
WIDGET_MAX_HEIGHT,
|
|
6
|
+
WIDGET_MIN_HEIGHT_FOR_LARGE_SCREENS,
|
|
7
|
+
WIDGET_MIN_HEIGHT_FOR_SMALL_SCREENS,
|
|
8
|
+
} from './Layout.constants';
|
|
4
9
|
|
|
5
10
|
export const LayoutContainer = css({
|
|
6
11
|
borderRadius: '$primary',
|
|
@@ -16,16 +21,18 @@ export const Container = styled('div', {
|
|
|
16
21
|
minWidth: '300px',
|
|
17
22
|
maxWidth: '390px',
|
|
18
23
|
backgroundColor: '$background',
|
|
24
|
+
maxHeight: WIDGET_MAX_HEIGHT,
|
|
19
25
|
variants: {
|
|
20
26
|
height: {
|
|
21
27
|
auto: {
|
|
22
28
|
height: 'auto',
|
|
23
|
-
maxHeight: WIDGET_MAX_HEIGHT,
|
|
24
29
|
},
|
|
25
30
|
fixed: {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
height:
|
|
31
|
+
height: '100%',
|
|
32
|
+
minHeight: WIDGET_MIN_HEIGHT_FOR_SMALL_SCREENS,
|
|
33
|
+
[`@media screen and (min-height: ${LARGE_SCREEN_MIN_HEIGHT})`]: {
|
|
34
|
+
minHeight: WIDGET_MIN_HEIGHT_FOR_LARGE_SCREENS,
|
|
35
|
+
},
|
|
29
36
|
},
|
|
30
37
|
},
|
|
31
38
|
showBanner: {
|
|
@@ -10,7 +10,6 @@ import { WIDGET_UI_ID } from '../../constants';
|
|
|
10
10
|
import { useIframe } from '../../hooks/useIframe';
|
|
11
11
|
import { isAppLoadedIntoIframe } from '../../hooks/useIframe/useIframe.helpers';
|
|
12
12
|
import { useNavigateBack } from '../../hooks/useNavigateBack';
|
|
13
|
-
import useScreenDetect from '../../hooks/useScreenDetect';
|
|
14
13
|
import { useTheme } from '../../hooks/useTheme';
|
|
15
14
|
import { useAppStore } from '../../store/AppStore';
|
|
16
15
|
import { tabManager, useUiStore } from '../../store/ui';
|
|
@@ -22,10 +21,7 @@ import { ActivateTabModal } from '../common/ActivateTabModal';
|
|
|
22
21
|
import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
|
|
23
22
|
import { RefreshModal } from '../RefreshModal';
|
|
24
23
|
|
|
25
|
-
import {
|
|
26
|
-
COMPACT_TOKEN_SELECTOR_THRESHOLD,
|
|
27
|
-
WIDGET_MAX_HEIGHT,
|
|
28
|
-
} from './Layout.constants';
|
|
24
|
+
import { COMPACT_TOKEN_SELECTOR_THRESHOLD } from './Layout.constants';
|
|
29
25
|
import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
|
|
30
26
|
import {
|
|
31
27
|
BannerContainer,
|
|
@@ -47,7 +43,7 @@ function Layout(props: PropsWithChildren<PropTypes>) {
|
|
|
47
43
|
const {
|
|
48
44
|
config: { features, theme },
|
|
49
45
|
} = useAppStore();
|
|
50
|
-
const { watermark
|
|
46
|
+
const { watermark } = useUiStore();
|
|
51
47
|
|
|
52
48
|
const hasWatermark = watermark === 'FULL';
|
|
53
49
|
const { activeTheme } = useTheme(theme || {});
|
|
@@ -64,10 +60,10 @@ function Layout(props: PropsWithChildren<PropTypes>) {
|
|
|
64
60
|
showActivateTabModal,
|
|
65
61
|
setShowActivateTabModal,
|
|
66
62
|
activateCurrentTab,
|
|
63
|
+
setShowCompactTokenSelector,
|
|
67
64
|
} = useUiStore();
|
|
68
65
|
const navigateBack = useNavigateBack();
|
|
69
66
|
const { manager } = useManager();
|
|
70
|
-
const { isTablet, isMobile } = useScreenDetect();
|
|
71
67
|
const pendingSwaps: PendingSwap[] = getPendingSwaps(manager).map(
|
|
72
68
|
({ swap }) => swap
|
|
73
69
|
);
|
|
@@ -134,35 +130,25 @@ function Layout(props: PropsWithChildren<PropTypes>) {
|
|
|
134
130
|
}, [fetchStatus]);
|
|
135
131
|
|
|
136
132
|
useLayoutEffect(() => {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
const handler = () => {
|
|
142
|
-
if (isFixedHeight) {
|
|
143
|
-
return;
|
|
144
|
-
}
|
|
133
|
+
if (!containerRef.current) {
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
145
136
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
137
|
+
const observer = new ResizeObserver((entries) => {
|
|
138
|
+
for (const entry of entries) {
|
|
139
|
+
if (entry.contentRect) {
|
|
140
|
+
setShowCompactTokenSelector(
|
|
141
|
+
entry.contentRect.height <
|
|
142
|
+
parseInt(COMPACT_TOKEN_SELECTOR_THRESHOLD)
|
|
143
|
+
);
|
|
144
|
+
}
|
|
152
145
|
}
|
|
146
|
+
});
|
|
153
147
|
|
|
154
|
-
|
|
155
|
-
parseFloat(containerRef.current.style.height) <
|
|
156
|
-
COMPACT_TOKEN_SELECTOR_THRESHOLD
|
|
157
|
-
);
|
|
158
|
-
};
|
|
159
|
-
|
|
160
|
-
handler();
|
|
148
|
+
observer.observe(containerRef.current);
|
|
161
149
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
return () => window.removeEventListener('resize', handler);
|
|
165
|
-
}, [height, isMobile, isTablet]);
|
|
150
|
+
return () => observer.disconnect();
|
|
151
|
+
}, []);
|
|
166
152
|
|
|
167
153
|
return (
|
|
168
154
|
<Container
|
|
@@ -9,14 +9,14 @@ import { WalletState } from '@rango-dev/ui';
|
|
|
9
9
|
import { useWallets } from '@rango-dev/wallets-react';
|
|
10
10
|
import React from 'react';
|
|
11
11
|
|
|
12
|
-
import {
|
|
12
|
+
import { getWalletConnectionStatus } from '../../utils/wallets';
|
|
13
13
|
|
|
14
14
|
import { ConnectWalletContent } from './SwapDetailsModal.ConnectWallet';
|
|
15
15
|
import { InstallWalletContent } from './SwapDetailsModal.InstallWallet';
|
|
16
16
|
|
|
17
17
|
export const WalletStateContent = (props: WalletStateContentProps) => {
|
|
18
18
|
const { swap, onClose } = props;
|
|
19
|
-
const { state } = useWallets();
|
|
19
|
+
const { state, getWalletInfo } = useWallets();
|
|
20
20
|
|
|
21
21
|
const currentStep = getCurrentStep(swap);
|
|
22
22
|
const currentStepWallet = currentStep
|
|
@@ -25,7 +25,7 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
|
|
|
25
25
|
|
|
26
26
|
const walletType = currentStepWallet?.walletType;
|
|
27
27
|
const walletState = walletType
|
|
28
|
-
?
|
|
28
|
+
? getWalletConnectionStatus(getWalletInfo(walletType), state(walletType))
|
|
29
29
|
: null;
|
|
30
30
|
const currentNamespace = currentStep
|
|
31
31
|
? getCurrentNamespaceOfOrNull(swap, currentStep)
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
import { useWallets } from '@rango-dev/wallets-react';
|
|
11
11
|
import React from 'react';
|
|
12
12
|
|
|
13
|
-
import {
|
|
13
|
+
import { getWalletConnectionStatus } from '../../utils/wallets';
|
|
14
14
|
|
|
15
15
|
import { LogoContainer, Spinner } from './ConnectStatus.styles';
|
|
16
16
|
|
|
@@ -18,8 +18,11 @@ export function ConnectStatus(props: ConnectStatusProps) {
|
|
|
18
18
|
// See `wallet` notes on its type definition
|
|
19
19
|
const { wallet, error } = props;
|
|
20
20
|
const { type, image } = wallet;
|
|
21
|
-
const { state } = useWallets();
|
|
22
|
-
const walletState =
|
|
21
|
+
const { state, getWalletInfo } = useWallets();
|
|
22
|
+
const walletState = getWalletConnectionStatus(
|
|
23
|
+
getWalletInfo(type),
|
|
24
|
+
state(type)
|
|
25
|
+
);
|
|
23
26
|
|
|
24
27
|
if (walletState === WalletState.CONNECTED) {
|
|
25
28
|
return (
|
|
@@ -75,7 +75,10 @@ export function Detached(props: PropTypes) {
|
|
|
75
75
|
if (!!singleSelection) {
|
|
76
76
|
return (
|
|
77
77
|
<>
|
|
78
|
-
<Divider
|
|
78
|
+
<Divider
|
|
79
|
+
size={20}
|
|
80
|
+
className="_detached_namespace_list_header_alert_top_divider"
|
|
81
|
+
/>
|
|
79
82
|
<Alert
|
|
80
83
|
id="widget-wallet-stateful-connect-alert"
|
|
81
84
|
variant="alarm"
|
|
@@ -84,13 +87,19 @@ export function Detached(props: PropTypes) {
|
|
|
84
87
|
'This wallet can only connect to one chain at a time.'
|
|
85
88
|
)}
|
|
86
89
|
/>
|
|
87
|
-
<Divider
|
|
90
|
+
<Divider
|
|
91
|
+
size={30}
|
|
92
|
+
className="_detached_namespace_list_header_alert_bottom_divider"
|
|
93
|
+
/>
|
|
88
94
|
</>
|
|
89
95
|
);
|
|
90
96
|
}
|
|
91
97
|
return (
|
|
92
98
|
<>
|
|
93
|
-
<Divider
|
|
99
|
+
<Divider
|
|
100
|
+
size={30}
|
|
101
|
+
className="_detached_namespace_list_header_button_top_divider"
|
|
102
|
+
/>
|
|
94
103
|
<NamespacesHeader>
|
|
95
104
|
<Button
|
|
96
105
|
id="widget-detached-disconnect-wallet-btn"
|
|
@@ -102,7 +111,10 @@ export function Detached(props: PropTypes) {
|
|
|
102
111
|
{i18n.t('Disconnect wallet')}
|
|
103
112
|
</Button>
|
|
104
113
|
</NamespacesHeader>
|
|
105
|
-
<Divider
|
|
114
|
+
<Divider
|
|
115
|
+
size={16}
|
|
116
|
+
className="_detached_namespace_list_header_button_bottom_divider"
|
|
117
|
+
/>
|
|
106
118
|
</>
|
|
107
119
|
);
|
|
108
120
|
};
|
|
@@ -120,7 +120,10 @@ export function Namespaces(props: PropTypes) {
|
|
|
120
120
|
/>
|
|
121
121
|
{singleNamespace ? (
|
|
122
122
|
<>
|
|
123
|
-
<Divider
|
|
123
|
+
<Divider
|
|
124
|
+
size={20}
|
|
125
|
+
className="_initial_namespace_list_header_alert_top_divider"
|
|
126
|
+
/>
|
|
124
127
|
<Alert
|
|
125
128
|
id="widget-wallet-stateful-connect-alert"
|
|
126
129
|
variant="alarm"
|
|
@@ -129,11 +132,17 @@ export function Namespaces(props: PropTypes) {
|
|
|
129
132
|
'This wallet can only connect to one chain at a time. '
|
|
130
133
|
)}
|
|
131
134
|
/>
|
|
132
|
-
<Divider
|
|
135
|
+
<Divider
|
|
136
|
+
size={30}
|
|
137
|
+
className="_initial_namespace_list_header_alert_bottom_divider"
|
|
138
|
+
/>
|
|
133
139
|
</>
|
|
134
140
|
) : (
|
|
135
141
|
<>
|
|
136
|
-
<Divider
|
|
142
|
+
<Divider
|
|
143
|
+
size={30}
|
|
144
|
+
className="_initial_namespace_list_header_button_top_divider"
|
|
145
|
+
/>
|
|
137
146
|
<Button
|
|
138
147
|
style={{ marginLeft: 'auto' }}
|
|
139
148
|
id="widget-name-space-select-all-btn"
|
|
@@ -145,7 +154,10 @@ export function Namespaces(props: PropTypes) {
|
|
|
145
154
|
? i18n.t('Deselect all')
|
|
146
155
|
: i18n.t('Select all')}
|
|
147
156
|
</Button>
|
|
148
|
-
<Divider
|
|
157
|
+
<Divider
|
|
158
|
+
size={10}
|
|
159
|
+
className="_initial_namespace_list_header_button_bottom_divider"
|
|
160
|
+
/>
|
|
149
161
|
</>
|
|
150
162
|
)}
|
|
151
163
|
<NamespaceList>
|
|
@@ -43,7 +43,13 @@ const useScreenDetect = () => {
|
|
|
43
43
|
return () => window.removeEventListener('resize', handleResize);
|
|
44
44
|
}, []);
|
|
45
45
|
|
|
46
|
-
return {
|
|
46
|
+
return {
|
|
47
|
+
isMobile,
|
|
48
|
+
isTablet,
|
|
49
|
+
isNotebook,
|
|
50
|
+
isLargeScreen,
|
|
51
|
+
isExtraLargeScreen,
|
|
52
|
+
};
|
|
47
53
|
};
|
|
48
54
|
|
|
49
55
|
export default useScreenDetect;
|
|
@@ -20,7 +20,6 @@ import {
|
|
|
20
20
|
sortWalletsBasedOnConnectionState,
|
|
21
21
|
} from '../utils/wallets';
|
|
22
22
|
|
|
23
|
-
import { useDeepLink } from './useDeepLink';
|
|
24
23
|
import { useStatefulConnect } from './useStatefulConnect/useStatefulConnect';
|
|
25
24
|
|
|
26
25
|
interface Params {
|
|
@@ -45,7 +44,6 @@ export function useWalletList(params?: Params): API {
|
|
|
45
44
|
const { state, getWalletInfo } = useWallets();
|
|
46
45
|
const blockchains = useAppStore().blockchains();
|
|
47
46
|
const { handleDisconnect } = useStatefulConnect();
|
|
48
|
-
const { checkHasDeepLink } = useDeepLink();
|
|
49
47
|
|
|
50
48
|
/** It can be what has been set by widget config or as a fallback we use all the supported wallets by our library */
|
|
51
49
|
const listAvailableWalletTypes = configWalletsToWalletName(
|
|
@@ -62,12 +60,11 @@ export function useWalletList(params?: Params): API {
|
|
|
62
60
|
wallets = detectMobileScreens()
|
|
63
61
|
? wallets.filter(
|
|
64
62
|
(wallet) =>
|
|
65
|
-
wallet.showOnMobile !== false &&
|
|
66
|
-
(state(wallet.type).installed || checkHasDeepLink(wallet.type))
|
|
63
|
+
wallet.showOnMobile !== false && state(wallet.type).installed
|
|
67
64
|
)
|
|
68
65
|
: wallets;
|
|
69
66
|
|
|
70
|
-
const sortedWallets = sortWalletsBasedOnConnectionState(wallets
|
|
67
|
+
const sortedWallets = sortWalletsBasedOnConnectionState(wallets);
|
|
71
68
|
|
|
72
69
|
const isExperimentalChainNotAdded = (walletType: string) =>
|
|
73
70
|
!connectedWallets.find(
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
getCategoriesCount,
|
|
7
7
|
SelectableCategoryList,
|
|
8
8
|
} from '@rango-dev/ui';
|
|
9
|
-
import React, { useState } from 'react';
|
|
9
|
+
import React, { useMemo, useState } from 'react';
|
|
10
10
|
import { useNavigate } from 'react-router-dom';
|
|
11
11
|
|
|
12
12
|
import { BlockchainList } from '../components/BlockchainList';
|
|
@@ -16,6 +16,7 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
|
|
|
16
16
|
import { useSwapMode } from '../hooks/useSwapMode';
|
|
17
17
|
import { useAppStore } from '../store/AppStore';
|
|
18
18
|
import { useQuoteStore } from '../store/quote';
|
|
19
|
+
import { filterBlockchainsWithAtLeastOneToken } from '../utils/common';
|
|
19
20
|
|
|
20
21
|
interface PropTypes {
|
|
21
22
|
type: 'source' | 'destination' | 'custom-token';
|
|
@@ -37,7 +38,12 @@ export function SelectBlockchainPage(props: PropTypes) {
|
|
|
37
38
|
const blockchains = useAppStore().blockchains({
|
|
38
39
|
type,
|
|
39
40
|
});
|
|
40
|
-
const
|
|
41
|
+
const tokens = useAppStore().tokens();
|
|
42
|
+
const filteredBlockchains = useMemo(
|
|
43
|
+
() => filterBlockchainsWithAtLeastOneToken(blockchains, tokens),
|
|
44
|
+
[blockchains.length, tokens.length]
|
|
45
|
+
);
|
|
46
|
+
const activeCategoriesCount = getCategoriesCount(filteredBlockchains);
|
|
41
47
|
|
|
42
48
|
const showCategory = !props.hideCategory && activeCategoriesCount !== 1;
|
|
43
49
|
|
|
@@ -53,7 +59,10 @@ export function SelectBlockchainPage(props: PropTypes) {
|
|
|
53
59
|
} else {
|
|
54
60
|
const blockchainNativeToken = findNativeToken(blockchain);
|
|
55
61
|
if (blockchainNativeToken) {
|
|
56
|
-
setToToken({
|
|
62
|
+
setToToken({
|
|
63
|
+
token: blockchainNativeToken,
|
|
64
|
+
meta: { blockchains },
|
|
65
|
+
});
|
|
57
66
|
}
|
|
58
67
|
}
|
|
59
68
|
}
|
|
@@ -72,7 +81,7 @@ export function SelectBlockchainPage(props: PropTypes) {
|
|
|
72
81
|
<SelectableCategoryList
|
|
73
82
|
setCategory={setBlockchainCategory}
|
|
74
83
|
category={blockchainCategory}
|
|
75
|
-
blockchains={
|
|
84
|
+
blockchains={filteredBlockchains}
|
|
76
85
|
isLoading={fetchStatus === 'loading'}
|
|
77
86
|
/>
|
|
78
87
|
<Divider size={24} />
|
|
@@ -93,7 +102,7 @@ export function SelectBlockchainPage(props: PropTypes) {
|
|
|
93
102
|
<Divider size={16} />
|
|
94
103
|
|
|
95
104
|
<BlockchainList
|
|
96
|
-
list={
|
|
105
|
+
list={filteredBlockchains}
|
|
97
106
|
showTitle={type !== 'custom-token'}
|
|
98
107
|
searchedFor={searchedFor}
|
|
99
108
|
blockchainCategory={blockchainCategory}
|
|
@@ -8,20 +8,16 @@ import {
|
|
|
8
8
|
styled,
|
|
9
9
|
Typography,
|
|
10
10
|
Wallet,
|
|
11
|
-
WalletState,
|
|
12
11
|
} from '@rango-dev/ui';
|
|
13
|
-
import { useWallets } from '@rango-dev/wallets-react';
|
|
14
12
|
import React, { useState } from 'react';
|
|
15
13
|
|
|
16
14
|
import { Layout, PageContainer } from '../components/Layout';
|
|
17
15
|
import { StatefulConnectModal } from '../components/StatefulConnectModal';
|
|
18
|
-
import { useDeepLink } from '../hooks/useDeepLink';
|
|
19
16
|
import { useWalletList } from '../hooks/useWalletList';
|
|
20
17
|
import { useAppStore } from '../store/AppStore';
|
|
21
18
|
import { useUiStore } from '../store/ui';
|
|
22
19
|
import { getContainer, isSingleWalletActive } from '../utils/common';
|
|
23
20
|
import {
|
|
24
|
-
checkIsWalletPartiallyConnected,
|
|
25
21
|
filterBlockchainsByWalletTypes,
|
|
26
22
|
filterWalletsByCategory,
|
|
27
23
|
} from '../utils/wallets';
|
|
@@ -45,8 +41,6 @@ export function WalletsPage() {
|
|
|
45
41
|
const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
|
|
46
42
|
const blockchains = useAppStore().blockchains();
|
|
47
43
|
const { config } = useAppStore();
|
|
48
|
-
const { state } = useWallets();
|
|
49
|
-
const { checkHasDeepLink, getWalletLink } = useDeepLink();
|
|
50
44
|
const [selectedWalletToConnect, setSelectedWalletToConnect] =
|
|
51
45
|
useState<WalletInfoWithExtra>();
|
|
52
46
|
const isActiveTab = useUiStore.use.isActiveTab();
|
|
@@ -89,25 +83,12 @@ export function WalletsPage() {
|
|
|
89
83
|
</Typography>
|
|
90
84
|
<ListContainer>
|
|
91
85
|
{filteredWallets.map((wallet, index) => {
|
|
92
|
-
const namespacesState = state(wallet.type).namespaces;
|
|
93
86
|
const key = `wallet-${index}-${wallet.type}`;
|
|
94
|
-
const isWalletPartiallyConnected = checkIsWalletPartiallyConnected(
|
|
95
|
-
wallet,
|
|
96
|
-
namespacesState
|
|
97
|
-
);
|
|
98
|
-
|
|
99
|
-
let walletState = wallet.state;
|
|
100
|
-
if (isWalletPartiallyConnected) {
|
|
101
|
-
// If the wallet is connected to only a subset of namespaces, and the user has the option to connect to additional ones, we label the wallet as `Partially Connected`
|
|
102
|
-
walletState = WalletState.PARTIALLY_CONNECTED;
|
|
103
|
-
}
|
|
104
87
|
return (
|
|
105
88
|
<Wallet
|
|
106
89
|
key={key}
|
|
107
90
|
{...wallet}
|
|
108
|
-
state={
|
|
109
|
-
hasDeepLink={checkHasDeepLink(wallet.type)}
|
|
110
|
-
link={getWalletLink(wallet.type)}
|
|
91
|
+
state={wallet.state}
|
|
111
92
|
container={getContainer()}
|
|
112
93
|
onClick={() => handleWalletItemClick(wallet)}
|
|
113
94
|
isLoading={fetchMetaStatus === 'loading'}
|
package/src/store/slices/data.ts
CHANGED
|
@@ -355,33 +355,22 @@ export const createDataSlice: StateCreator<
|
|
|
355
355
|
>();
|
|
356
356
|
const tokensMapByBlockchainName: DataSlice['_tokensMapByBlockchainName'] =
|
|
357
357
|
{};
|
|
358
|
-
const tokens: Token[] = [];
|
|
359
358
|
const popularTokens: Token[] = response.popularTokens;
|
|
360
359
|
const swappers: SwapperMeta[] = response.swappers.filter(
|
|
361
360
|
(swapper) => swapper.enabled
|
|
362
361
|
);
|
|
363
|
-
const blockchainsWithAtLeastOneToken = new Set();
|
|
364
|
-
|
|
365
|
-
response.tokens.forEach((token) => {
|
|
366
|
-
blockchainsWithAtLeastOneToken.add(token.blockchain);
|
|
367
|
-
|
|
368
|
-
tokens.push(token);
|
|
369
|
-
});
|
|
370
362
|
|
|
371
363
|
const sortedBlockchain = response.blockchains.sort(
|
|
372
364
|
(a, b) => a.sort - b.sort
|
|
373
365
|
);
|
|
374
366
|
|
|
375
367
|
sortedBlockchain.forEach((blockchain) => {
|
|
376
|
-
if (
|
|
377
|
-
blockchain.enabled &&
|
|
378
|
-
blockchainsWithAtLeastOneToken.has(blockchain.name)
|
|
379
|
-
) {
|
|
368
|
+
if (blockchain.enabled) {
|
|
380
369
|
blockchainsMapByName.set(blockchain.name, blockchain);
|
|
381
370
|
}
|
|
382
371
|
});
|
|
383
372
|
|
|
384
|
-
tokens.forEach((token) => {
|
|
373
|
+
response.tokens.forEach((token) => {
|
|
385
374
|
const tokenHash = createTokenHash(token);
|
|
386
375
|
if (!tokensMapByBlockchainName[token.blockchain]) {
|
|
387
376
|
tokensMapByBlockchainName[token.blockchain] = [];
|
package/src/types/config.ts
CHANGED
|
@@ -176,19 +176,7 @@ export type TrezorManifest = {
|
|
|
176
176
|
appUrl: string;
|
|
177
177
|
email: string;
|
|
178
178
|
};
|
|
179
|
-
|
|
180
|
-
* `DeepLinking`
|
|
181
|
-
*
|
|
182
|
-
* @property {string} [targetUrl]
|
|
183
|
-
* - The URL to be opened in the provider's in-app browser.
|
|
184
|
-
*
|
|
185
|
-
* @property {string} [appHost]
|
|
186
|
-
* - The full domain of the app, excluding the protocol (https://), path, and query parameters.
|
|
187
|
-
*/
|
|
188
|
-
export type DeepLinking = {
|
|
189
|
-
targetUrl: string;
|
|
190
|
-
appHost: string;
|
|
191
|
-
};
|
|
179
|
+
|
|
192
180
|
/**
|
|
193
181
|
*
|
|
194
182
|
* @property {string} manifestUrl - The URL of the TON Connect [manifest]{@link https://github.com/ton-connect/docs/blob/main/requests-responses.md#app-manifest}, containing the Dapp metadata to be displayed in the user’s wallet.
|
|
@@ -236,7 +224,6 @@ export type TonConnectConfig = {
|
|
|
236
224
|
* @property {WidgetTheme} theme - The `theme` property is a part of the `WidgetConfig` type and is
|
|
237
225
|
* used to specify the visual theme of the widget. It is of type `WidgetTheme`, which is an interface
|
|
238
226
|
* that defines the various properties of the theme, such as colors, fonts, and others.
|
|
239
|
-
* @property {DeepLinking} deepLinking - Configures deep linking parameters for providers that support it.
|
|
240
227
|
* @property {boolean} externalWallets
|
|
241
228
|
* If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
|
|
242
229
|
* @property {boolean} excludeLiquiditySources - The `excludeLiquiditySources` property is a boolean value that when you
|
|
@@ -279,7 +266,6 @@ export type WidgetConfig = {
|
|
|
279
266
|
defaultCustomDestinations?: { [blockchain: string]: string };
|
|
280
267
|
language?: Language;
|
|
281
268
|
theme?: WidgetTheme;
|
|
282
|
-
deepLinking?: DeepLinking;
|
|
283
269
|
externalWallets?: boolean;
|
|
284
270
|
excludeLiquiditySources?: boolean;
|
|
285
271
|
features?: Features;
|