@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.
Files changed (46) hide show
  1. package/dist/components/ConfirmWalletsModal/WalletList.d.ts.map +1 -1
  2. package/dist/components/HeaderButtons/WalletButton.d.ts.map +1 -1
  3. package/dist/components/Layout/Layout.constants.d.ts +5 -3
  4. package/dist/components/Layout/Layout.constants.d.ts.map +1 -1
  5. package/dist/components/Layout/Layout.d.ts.map +1 -1
  6. package/dist/components/Layout/Layout.styles.d.ts.map +1 -1
  7. package/dist/components/WalletStatefulConnect/ConnectStatus.d.ts.map +1 -1
  8. package/dist/components/WalletStatefulConnect/Detached.d.ts.map +1 -1
  9. package/dist/components/WalletStatefulConnect/Namespaces.d.ts.map +1 -1
  10. package/dist/containers/App/App.styles.d.ts.map +1 -1
  11. package/dist/hooks/useScreenDetect.d.ts.map +1 -1
  12. package/dist/hooks/useWalletList.d.ts.map +1 -1
  13. package/dist/index.js +2 -2
  14. package/dist/index.js.map +4 -4
  15. package/dist/pages/SelectBlockchainPage.d.ts.map +1 -1
  16. package/dist/pages/WalletsPage.d.ts.map +1 -1
  17. package/dist/store/slices/data.d.ts.map +1 -1
  18. package/dist/types/config.d.ts +0 -15
  19. package/dist/types/config.d.ts.map +1 -1
  20. package/dist/utils/common.d.ts +2 -1
  21. package/dist/utils/common.d.ts.map +1 -1
  22. package/dist/utils/wallets.d.ts +6 -13
  23. package/dist/utils/wallets.d.ts.map +1 -1
  24. package/dist/widget-embedded.build.json +1 -1
  25. package/package.json +10 -10
  26. package/src/components/ConfirmWalletsModal/WalletList.tsx +10 -9
  27. package/src/components/HeaderButtons/WalletButton.tsx +4 -2
  28. package/src/components/Layout/Layout.constants.ts +5 -3
  29. package/src/components/Layout/Layout.styles.ts +12 -5
  30. package/src/components/Layout/Layout.tsx +18 -32
  31. package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx +3 -3
  32. package/src/components/WalletStatefulConnect/ConnectStatus.tsx +6 -3
  33. package/src/components/WalletStatefulConnect/Detached.tsx +16 -4
  34. package/src/components/WalletStatefulConnect/Namespaces.tsx +16 -4
  35. package/src/containers/App/App.styles.ts +1 -0
  36. package/src/hooks/useScreenDetect.ts +7 -1
  37. package/src/hooks/useWalletList.ts +2 -5
  38. package/src/pages/SelectBlockchainPage.tsx +14 -5
  39. package/src/pages/WalletsPage.tsx +1 -20
  40. package/src/store/slices/data.ts +2 -13
  41. package/src/types/config.ts +1 -15
  42. package/src/utils/common.ts +16 -1
  43. package/src/utils/wallets.ts +42 -52
  44. package/dist/hooks/useDeepLink.d.ts +0 -7
  45. package/dist/hooks/useDeepLink.d.ts.map +0 -1
  46. 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.1",
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.0",
29
- "@rango-dev/queue-manager-core": "^0.32.0",
30
- "@rango-dev/queue-manager-rango-preset": "^0.53.0",
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.0",
34
- "@rango-dev/wallets-core": "^0.50.0",
35
- "@rango-dev/wallets-react": "^0.37.1-next.0",
36
- "@rango-dev/wallets-shared": "^0.51.0",
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
- const { checkHasDeepLink, getWalletLink } = useDeepLink();
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 = wallet.state === WalletState.CONNECTED;
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 (wallet.state === WalletState.CONNECTED) {
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) => wallet.state === 'connected'
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 = 700;
2
- export const WIDGET_MIN_HEIGHT = 425;
3
- export const COMPACT_TOKEN_SELECTOR_THRESHOLD = 640;
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 { WIDGET_MAX_HEIGHT, WIDGET_MIN_HEIGHT } from './Layout.constants';
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
- minHeight: WIDGET_MIN_HEIGHT,
27
- maxHeight: WIDGET_MAX_HEIGHT,
28
- height: WIDGET_MAX_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, setShowCompactTokenSelector } = useUiStore();
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
- const isFixedHeight =
138
- height === 'auto' || !containerRef.current || isAppLoadedIntoIframe();
139
- const isSmallScreen = isMobile || isTablet;
140
-
141
- const handler = () => {
142
- if (isFixedHeight) {
143
- return;
144
- }
133
+ if (!containerRef.current) {
134
+ return;
135
+ }
145
136
 
146
- if (isSmallScreen) {
147
- containerRef.current.style.height = `${
148
- window.innerHeight - containerRef.current.offsetTop
149
- }px`;
150
- } else {
151
- containerRef.current.style.height = `${WIDGET_MAX_HEIGHT}px`;
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
- setShowCompactTokenSelector(
155
- parseFloat(containerRef.current.style.height) <
156
- COMPACT_TOKEN_SELECTOR_THRESHOLD
157
- );
158
- };
159
-
160
- handler();
148
+ observer.observe(containerRef.current);
161
149
 
162
- window.addEventListener('resize', handler);
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 { mapStatusToWalletState } from '../../utils/wallets';
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
- ? mapStatusToWalletState(state(walletType))
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 { mapStatusToWalletState } from '../../utils/wallets';
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 = mapStatusToWalletState(state(type));
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 size={20} />
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 size={30} />
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 size={30} />
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 size={16} />
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 size={20} />
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 size={30} />
135
+ <Divider
136
+ size={30}
137
+ className="_initial_namespace_list_header_alert_bottom_divider"
138
+ />
133
139
  </>
134
140
  ) : (
135
141
  <>
136
- <Divider size={30} />
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 size={10} />
157
+ <Divider
158
+ size={10}
159
+ className="_initial_namespace_list_header_button_bottom_divider"
160
+ />
149
161
  </>
150
162
  )}
151
163
  <NamespaceList>
@@ -4,6 +4,7 @@ export const MainContainer = styled('div', {
4
4
  fontFamily: '$widget',
5
5
  boxSizing: 'border-box',
6
6
  textAlign: 'left',
7
+ height: '100%',
7
8
  '& *, *::before, *::after': {
8
9
  boxSizing: 'inherit',
9
10
  },
@@ -43,7 +43,13 @@ const useScreenDetect = () => {
43
43
  return () => window.removeEventListener('resize', handleResize);
44
44
  }, []);
45
45
 
46
- return { isMobile, isTablet, isNotebook, isLargeScreen, isExtraLargeScreen };
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, state);
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 activeCategoriesCount = getCategoriesCount(blockchains);
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({ token: blockchainNativeToken, meta: { blockchains } });
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={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={blockchains}
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={walletState}
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'}
@@ -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] = [];
@@ -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;