@rango-dev/widget-embedded 0.27.4-next.2 → 0.27.4-next.4
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/SwapDetailsModal/SwapDetailsModal.WalletState.d.ts.map +1 -1
- package/dist/components/WalletNamespacesModal/WalletNamespacesModal.d.ts +6 -0
- package/dist/components/WalletNamespacesModal/WalletNamespacesModal.d.ts.map +1 -0
- package/dist/components/WalletNamespacesModal/WalletNamespacesModal.styles.d.ts +163 -0
- package/dist/components/WalletNamespacesModal/WalletNamespacesModal.styles.d.ts.map +1 -0
- package/dist/components/WalletNamespacesModal/WalletNamespacesModal.types.d.ts +10 -0
- package/dist/components/WalletNamespacesModal/WalletNamespacesModal.types.d.ts.map +1 -0
- package/dist/components/WalletNamespacesModal/index.d.ts +2 -0
- package/dist/components/WalletNamespacesModal/index.d.ts.map +1 -0
- package/dist/hooks/useSwapInput.d.ts.map +1 -1
- package/dist/hooks/useSyncStoresWithConfig.d.ts.map +1 -1
- package/dist/hooks/useWalletList.d.ts +4 -4
- 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/ConfirmSwapPage.d.ts.map +1 -1
- package/dist/pages/Routes.d.ts.map +1 -1
- package/dist/pages/WalletsPage.d.ts.map +1 -1
- package/dist/types/wallets.d.ts +6 -1
- package/dist/types/wallets.d.ts.map +1 -1
- package/dist/utils/wallets.d.ts +3 -3
- package/dist/utils/wallets.d.ts.map +1 -1
- package/package.json +6 -6
- package/src/components/ConfirmWalletsModal/WalletList.tsx +68 -23
- package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx +40 -4
- package/src/components/WalletNamespacesModal/WalletNamespacesModal.styles.ts +7 -0
- package/src/components/WalletNamespacesModal/WalletNamespacesModal.tsx +142 -0
- package/src/components/WalletNamespacesModal/WalletNamespacesModal.types.tsx +10 -0
- package/src/components/WalletNamespacesModal/index.ts +1 -0
- package/src/hooks/useSwapInput.ts +11 -5
- package/src/hooks/useSyncStoresWithConfig.ts +3 -0
- package/src/hooks/useWalletList.ts +11 -3
- package/src/pages/ConfirmSwapPage.tsx +3 -4
- package/src/pages/Routes.tsx +5 -2
- package/src/pages/WalletsPage.tsx +38 -2
- package/src/types/wallets.ts +7 -1
- package/src/utils/wallets.ts +8 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AA6C5E,wBAAgB,eAAe,
|
|
1
|
+
{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AA6C5E,wBAAgB,eAAe,sBA6P9B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Routes.d.ts","sourceRoot":"","sources":["../../src/pages/Routes.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,wBAAgB,UAAU,
|
|
1
|
+
{"version":3,"file":"Routes.d.ts","sourceRoot":"","sources":["../../src/pages/Routes.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,wBAAgB,UAAU,sBAwDzB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA8BxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAqG1B"}
|
package/dist/types/wallets.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { WalletInfo } from '@rango-dev/ui';
|
|
2
|
+
import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
|
|
2
3
|
export interface Wallet {
|
|
3
4
|
chain: string;
|
|
4
5
|
address: string;
|
|
@@ -17,5 +18,9 @@ export type TokenHash = `${Blockchain}-${TokenSymbol}-${Address}`;
|
|
|
17
18
|
export type TokensBalance = {
|
|
18
19
|
[key: TokenHash]: Balance;
|
|
19
20
|
};
|
|
21
|
+
export type WalletInfoWithNamespaces = WalletInfo & {
|
|
22
|
+
namespaces?: Namespace[];
|
|
23
|
+
singleNamespace?: boolean;
|
|
24
|
+
};
|
|
20
25
|
export {};
|
|
21
26
|
//# sourceMappingURL=wallets.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/types/wallets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/types/wallets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvE,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,UAAU,CAAC;CACxB;AAED,MAAM,MAAM,OAAO,GAAG;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,UAAU,GAAG,MAAM,CAAC;AACzB,KAAK,WAAW,GAAG,MAAM,CAAC;AAC1B,KAAK,OAAO,GAAG,MAAM,CAAC;AAEtB,kCAAkC;AAClC,MAAM,MAAM,SAAS,GAAG,GAAG,UAAU,IAAI,WAAW,IAAI,OAAO,EAAE,CAAC;AAElE,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,GAAG,EAAE,SAAS,GAAG,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,UAAU,GAAG;IAClD,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC"}
|
package/dist/utils/wallets.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import type { ConnectedWallet, TokenBalance } from '../store/wallets';
|
|
2
|
-
import type { Balance, SelectedQuote, TokenHash, TokensBalance, Wallet } from '../types';
|
|
2
|
+
import type { Balance, SelectedQuote, TokenHash, TokensBalance, Wallet, WalletInfoWithNamespaces } from '../types';
|
|
3
3
|
import type { WalletInfo as ModalWalletInfo } from '@rango-dev/ui';
|
|
4
4
|
import type { Asset, Network, WalletInfo, WalletState, WalletType } from '@rango-dev/wallets-shared';
|
|
5
5
|
import type { BlockchainMeta, Token, WalletDetail } from 'rango-sdk';
|
|
6
6
|
import { WalletState as WalletStatus } from '@rango-dev/ui';
|
|
7
7
|
export declare function mapStatusToWalletState(state: WalletState): WalletStatus;
|
|
8
|
-
export declare function mapWalletTypesToWalletInfo(getState: (type: WalletType) => WalletState, getWalletInfo: (type: WalletType) => WalletInfo, list: WalletType[], chain?: string):
|
|
8
|
+
export declare function mapWalletTypesToWalletInfo(getState: (type: WalletType) => WalletState, getWalletInfo: (type: WalletType) => WalletInfo, list: WalletType[], chain?: string): WalletInfoWithNamespaces[];
|
|
9
9
|
export declare function walletAndSupportedChainsNames(supportedBlockchains: BlockchainMeta[]): Network[] | null;
|
|
10
10
|
export declare function prepareAccountsForWalletStore(wallet: WalletType, accounts: string[], evmBasedChains: string[], supportedChainNames: Network[] | null, isContractWallet: boolean): Wallet[];
|
|
11
11
|
export declare function getQuoteWallets(params: {
|
|
@@ -22,7 +22,7 @@ export declare const getKeplrCompatibleConnectedWallets: (selectableWallets: Wal
|
|
|
22
22
|
export declare function formatBalance(balance: Balance | null): Balance | null;
|
|
23
23
|
export declare function compareTokenBalance(token1Balance: Balance | null, token2Balance: Balance | null): number;
|
|
24
24
|
export declare function areTokensEqual(tokenA: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null, tokenB: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null): boolean;
|
|
25
|
-
export declare function sortWalletsBasedOnConnectionState(wallets:
|
|
25
|
+
export declare function sortWalletsBasedOnConnectionState(wallets: WalletInfoWithNamespaces[]): WalletInfoWithNamespaces[];
|
|
26
26
|
export declare function getConciseAddress(address: string, maxChars?: number, ellipsisLength?: number): string;
|
|
27
27
|
export declare function getAddress({ chain, connectedWallets, walletType, }: {
|
|
28
28
|
connectedWallets: ConnectedWallet[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/utils/wallets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,KAAK,EACV,OAAO,EACP,aAAa,EACb,SAAS,EACT,aAAa,EACb,MAAM,
|
|
1
|
+
{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/utils/wallets.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rango-dev/widget-embedded",
|
|
3
|
-
"version": "0.27.4-next.
|
|
3
|
+
"version": "0.27.4-next.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"source": "./src/index.ts",
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
"@lingui/core": "4.2.1",
|
|
26
26
|
"@lingui/react": "4.2.1",
|
|
27
27
|
"@rango-dev/logging-core": "^0.2.1-next.1",
|
|
28
|
-
"@rango-dev/provider-all": "^0.32.2-next.
|
|
28
|
+
"@rango-dev/provider-all": "^0.32.2-next.4",
|
|
29
29
|
"@rango-dev/queue-manager-core": "^0.26.0",
|
|
30
|
-
"@rango-dev/queue-manager-rango-preset": "^0.32.1-next.
|
|
30
|
+
"@rango-dev/queue-manager-rango-preset": "^0.32.1-next.1",
|
|
31
31
|
"@rango-dev/queue-manager-react": "^0.26.0",
|
|
32
|
-
"@rango-dev/ui": "^0.33.1-next.
|
|
33
|
-
"@rango-dev/wallets-react": "^0.18.1-next.
|
|
34
|
-
"@rango-dev/wallets-shared": "^0.32.1-next.
|
|
32
|
+
"@rango-dev/ui": "^0.33.1-next.5",
|
|
33
|
+
"@rango-dev/wallets-react": "^0.18.1-next.1",
|
|
34
|
+
"@rango-dev/wallets-shared": "^0.32.1-next.2",
|
|
35
35
|
"bignumber.js": "^9.1.1",
|
|
36
36
|
"copy-to-clipboard": "^3.3.3",
|
|
37
37
|
"dayjs": "^1.11.7",
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import type { PropTypes } from './WalletList.type';
|
|
2
|
-
import type { Wallet } from '../../types';
|
|
3
|
-
import type {
|
|
4
|
-
import type { WalletType } from '@rango-dev/wallets-shared';
|
|
2
|
+
import type { Wallet, WalletInfoWithNamespaces } from '../../types';
|
|
3
|
+
import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
|
|
5
4
|
|
|
6
5
|
import { i18n } from '@lingui/core';
|
|
7
6
|
import {
|
|
@@ -33,6 +32,7 @@ import {
|
|
|
33
32
|
} from '../../utils/wallets';
|
|
34
33
|
import { WatermarkedModal } from '../common/WatermarkedModal';
|
|
35
34
|
import { WalletModal } from '../WalletModal';
|
|
35
|
+
import { WalletNamespacesModal } from '../WalletNamespacesModal';
|
|
36
36
|
|
|
37
37
|
import { ShowMoreWallets } from './ConfirmWallets.styles';
|
|
38
38
|
import {
|
|
@@ -41,6 +41,13 @@ import {
|
|
|
41
41
|
WalletImageContainer,
|
|
42
42
|
} from './WalletList.styles';
|
|
43
43
|
|
|
44
|
+
interface WalletNamespacesModalState {
|
|
45
|
+
providerType: string;
|
|
46
|
+
providerImage: string;
|
|
47
|
+
availableNamespaces?: Namespace[];
|
|
48
|
+
singleNamespace?: boolean;
|
|
49
|
+
}
|
|
50
|
+
|
|
44
51
|
const ACCOUNT_ADDRESS_MAX_CHARACTERS = 7;
|
|
45
52
|
export function WalletList(props: PropTypes) {
|
|
46
53
|
const { chain, isSelected, selectWallet, limit, onShowMore } = props;
|
|
@@ -56,26 +63,34 @@ export function WalletList(props: PropTypes) {
|
|
|
56
63
|
useState(false);
|
|
57
64
|
const [addingExperimentalChainStatus, setAddingExperimentalChainStatus] =
|
|
58
65
|
useState<'in-progress' | 'completed' | 'rejected' | null>(null);
|
|
66
|
+
const [namespacesModalState, setNamespacesModalState] =
|
|
67
|
+
useState<WalletNamespacesModalState | null>(null);
|
|
59
68
|
const { suggestAndConnect } = useWallets();
|
|
60
69
|
let modalTimerId: ReturnType<typeof setTimeout> | null = null;
|
|
61
|
-
const {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
70
|
+
const {
|
|
71
|
+
list,
|
|
72
|
+
error,
|
|
73
|
+
handleClick,
|
|
74
|
+
disconnectWallet,
|
|
75
|
+
disconnectConnectingWallets,
|
|
76
|
+
} = useWalletList({
|
|
77
|
+
chain,
|
|
78
|
+
onBeforeConnect: (type) => {
|
|
79
|
+
modalTimerId = setTimeout(() => {
|
|
80
|
+
setOpenWalletStateModal(type);
|
|
81
|
+
}, TIME_TO_IGNORE_MODAL);
|
|
82
|
+
},
|
|
83
|
+
onConnect: () => {
|
|
84
|
+
if (modalTimerId) {
|
|
85
|
+
clearTimeout(modalTimerId);
|
|
86
|
+
}
|
|
87
|
+
setTimeout(() => {
|
|
88
|
+
setOpenWalletStateModal('');
|
|
89
|
+
}, TIME_TO_CLOSE_MODAL);
|
|
90
|
+
},
|
|
91
|
+
});
|
|
92
|
+
const [sortedList, setSortedList] =
|
|
93
|
+
useState<WalletInfoWithNamespaces[]>(list);
|
|
79
94
|
const numberOfSupportedWallets = list.length;
|
|
80
95
|
const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
|
|
81
96
|
|
|
@@ -90,6 +105,15 @@ export function WalletList(props: PropTypes) {
|
|
|
90
105
|
}
|
|
91
106
|
};
|
|
92
107
|
|
|
108
|
+
const handleOpenNamespacesModal = (wallet: WalletInfoWithNamespaces) => {
|
|
109
|
+
setNamespacesModalState({
|
|
110
|
+
providerType: wallet.type,
|
|
111
|
+
providerImage: wallet.image,
|
|
112
|
+
availableNamespaces: wallet.namespaces,
|
|
113
|
+
singleNamespace: wallet.singleNamespace,
|
|
114
|
+
});
|
|
115
|
+
};
|
|
116
|
+
|
|
93
117
|
useEffect(() => {
|
|
94
118
|
setSortedList((sortedList) => {
|
|
95
119
|
const selectedWalletIndex = list.findIndex((wallet) =>
|
|
@@ -169,9 +193,16 @@ export function WalletList(props: PropTypes) {
|
|
|
169
193
|
})
|
|
170
194
|
: conciseAddress;
|
|
171
195
|
|
|
172
|
-
const onClick = () => {
|
|
196
|
+
const onClick = async () => {
|
|
173
197
|
if (wallet.state === WalletState.DISCONNECTED) {
|
|
174
|
-
|
|
198
|
+
if (!!wallet.namespaces) {
|
|
199
|
+
handleOpenNamespacesModal(wallet);
|
|
200
|
+
} else {
|
|
201
|
+
void handleClick(wallet.type);
|
|
202
|
+
}
|
|
203
|
+
} else if (!!wallet.namespaces && !conciseAddress) {
|
|
204
|
+
await disconnectWallet(wallet.type);
|
|
205
|
+
handleOpenNamespacesModal(wallet);
|
|
175
206
|
} else if (couldAddExperimentalChain) {
|
|
176
207
|
setExperimentalChainWallet({
|
|
177
208
|
walletType: wallet.type,
|
|
@@ -204,6 +235,20 @@ export function WalletList(props: PropTypes) {
|
|
|
204
235
|
state={wallet.state}
|
|
205
236
|
error={error}
|
|
206
237
|
/>
|
|
238
|
+
<WalletNamespacesModal
|
|
239
|
+
open={!!namespacesModalState}
|
|
240
|
+
onClose={() => setNamespacesModalState(null)}
|
|
241
|
+
onConfirm={(namespaces) => {
|
|
242
|
+
void handleClick(
|
|
243
|
+
namespacesModalState?.providerType as string,
|
|
244
|
+
namespaces
|
|
245
|
+
);
|
|
246
|
+
setNamespacesModalState(null);
|
|
247
|
+
}}
|
|
248
|
+
image={namespacesModalState?.providerImage}
|
|
249
|
+
namespaces={namespacesModalState?.availableNamespaces}
|
|
250
|
+
singleNamespace={namespacesModalState?.singleNamespace}
|
|
251
|
+
/>
|
|
207
252
|
{!!experimentalChainWallet && (
|
|
208
253
|
<WatermarkedModal
|
|
209
254
|
open={!!experimentalChainWallet && showExperimentalChainModal}
|
|
@@ -1,15 +1,24 @@
|
|
|
1
1
|
import type { WalletStateContentProps } from './SwapDetailsModal.types';
|
|
2
|
+
import type { Namespace } from '@rango-dev/wallets-shared';
|
|
2
3
|
|
|
3
4
|
import { debug } from '@rango-dev/logging-core';
|
|
4
5
|
import { MessageBox, Wallet } from '@rango-dev/ui';
|
|
5
6
|
import { useWallets } from '@rango-dev/wallets-react';
|
|
6
|
-
import React from 'react';
|
|
7
|
+
import React, { useState } from 'react';
|
|
7
8
|
|
|
8
9
|
import { getContainer } from '../../utils/common';
|
|
9
10
|
import { mapStatusToWalletState } from '../../utils/wallets';
|
|
11
|
+
import { WalletNamespacesModal } from '../WalletNamespacesModal';
|
|
10
12
|
|
|
11
13
|
import { WalletContainer } from './SwapDetailsModal.styles';
|
|
12
14
|
|
|
15
|
+
interface NamespacesModalState {
|
|
16
|
+
providerType: string;
|
|
17
|
+
providerImage: string;
|
|
18
|
+
availableNamespaces?: Namespace[];
|
|
19
|
+
singleNamespace?: boolean;
|
|
20
|
+
}
|
|
21
|
+
|
|
13
22
|
export const WalletStateContent = (props: WalletStateContentProps) => {
|
|
14
23
|
const {
|
|
15
24
|
type,
|
|
@@ -20,6 +29,8 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
|
|
|
20
29
|
walletButtonDisabled,
|
|
21
30
|
} = props;
|
|
22
31
|
const { connect, getWalletInfo, state } = useWallets();
|
|
32
|
+
const [namespacesModalState, setNamespacesModalState] =
|
|
33
|
+
useState<NamespacesModalState | null>(null);
|
|
23
34
|
const walletType = currentStepWallet?.walletType;
|
|
24
35
|
const walletState = walletType
|
|
25
36
|
? mapStatusToWalletState(state(walletType))
|
|
@@ -27,6 +38,7 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
|
|
|
27
38
|
const walletInfo = walletType ? getWalletInfo(walletType) : null;
|
|
28
39
|
const shouldShowWallet =
|
|
29
40
|
showWalletButton && !!walletType && !!walletState && !!walletInfo;
|
|
41
|
+
|
|
30
42
|
return (
|
|
31
43
|
<>
|
|
32
44
|
<MessageBox type={type} title={title} description={message} />
|
|
@@ -41,12 +53,36 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
|
|
|
41
53
|
link={walletInfo.installLink}
|
|
42
54
|
disabled={walletButtonDisabled}
|
|
43
55
|
// TODO we need to show an error modal when user reject the connection
|
|
44
|
-
onClick={async () =>
|
|
45
|
-
|
|
46
|
-
|
|
56
|
+
onClick={async () => {
|
|
57
|
+
if (walletInfo.namespaces) {
|
|
58
|
+
setNamespacesModalState({
|
|
59
|
+
providerType: walletType,
|
|
60
|
+
providerImage: walletInfo.img,
|
|
61
|
+
availableNamespaces: walletInfo.namespaces,
|
|
62
|
+
singleNamespace: walletInfo.singleNamespace,
|
|
63
|
+
});
|
|
64
|
+
} else {
|
|
65
|
+
connect(walletType).catch((error) => debug(error));
|
|
66
|
+
}
|
|
67
|
+
}}
|
|
47
68
|
/>
|
|
48
69
|
</WalletContainer>
|
|
49
70
|
)}
|
|
71
|
+
<WalletNamespacesModal
|
|
72
|
+
open={!!namespacesModalState}
|
|
73
|
+
onClose={() => setNamespacesModalState(null)}
|
|
74
|
+
onConfirm={(namespaces) => {
|
|
75
|
+
connect(
|
|
76
|
+
namespacesModalState?.providerType as string,
|
|
77
|
+
undefined,
|
|
78
|
+
namespaces
|
|
79
|
+
).catch((error) => debug(error));
|
|
80
|
+
setNamespacesModalState(null);
|
|
81
|
+
}}
|
|
82
|
+
image={namespacesModalState?.providerImage}
|
|
83
|
+
namespaces={namespacesModalState?.availableNamespaces}
|
|
84
|
+
singleNamespace={namespacesModalState?.singleNamespace}
|
|
85
|
+
/>
|
|
50
86
|
</>
|
|
51
87
|
);
|
|
52
88
|
};
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import type { PropTypes } from './WalletNamespacesModal.types';
|
|
2
|
+
import type { BlockchainMeta } from 'rango-sdk';
|
|
3
|
+
|
|
4
|
+
import { i18n } from '@lingui/core';
|
|
5
|
+
import {
|
|
6
|
+
Button,
|
|
7
|
+
Checkbox,
|
|
8
|
+
Image,
|
|
9
|
+
ListItemButton,
|
|
10
|
+
MessageBox,
|
|
11
|
+
Radio,
|
|
12
|
+
RadioRoot,
|
|
13
|
+
} from '@rango-dev/ui';
|
|
14
|
+
import { Namespace } from '@rango-dev/wallets-shared';
|
|
15
|
+
import React, { useMemo, useState } from 'react';
|
|
16
|
+
|
|
17
|
+
import { WIDGET_UI_ID } from '../../constants';
|
|
18
|
+
import { useAppStore } from '../../store/AppStore';
|
|
19
|
+
import { WatermarkedModal } from '../common/WatermarkedModal';
|
|
20
|
+
import { WalletImageContainer } from '../HeaderButtons/HeaderButtons.styles';
|
|
21
|
+
import {
|
|
22
|
+
LogoContainer,
|
|
23
|
+
Spinner,
|
|
24
|
+
} from '../WalletModal/WalletModalContent.styles';
|
|
25
|
+
|
|
26
|
+
import { NamespaceList } from './WalletNamespacesModal.styles';
|
|
27
|
+
|
|
28
|
+
export const namespaceMainBlockchain: Record<Namespace, string> = {
|
|
29
|
+
[Namespace.Evm]: 'ETH',
|
|
30
|
+
[Namespace.Solana]: 'SOLANA',
|
|
31
|
+
[Namespace.Cosmos]: 'COSMOS',
|
|
32
|
+
[Namespace.Utxo]: 'BTC',
|
|
33
|
+
[Namespace.Starknet]: 'STARKNET',
|
|
34
|
+
[Namespace.Tron]: 'TRON',
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
const getBlockchainLogo = (
|
|
38
|
+
blockchains: BlockchainMeta[],
|
|
39
|
+
blockchainName: string
|
|
40
|
+
) => {
|
|
41
|
+
return blockchains.find((blockchain) => blockchain.name === blockchainName)
|
|
42
|
+
?.logo;
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export function WalletNamespacesModal(props: PropTypes) {
|
|
46
|
+
const { singleNamespace, namespaces } = props;
|
|
47
|
+
|
|
48
|
+
const [selectedNamespaces, setSelectedNamespaces] = useState<Namespace[]>([]);
|
|
49
|
+
|
|
50
|
+
const blockchains = useAppStore().blockchains();
|
|
51
|
+
|
|
52
|
+
const namespacesInfo = useMemo(
|
|
53
|
+
() =>
|
|
54
|
+
namespaces?.map((namespace) => ({
|
|
55
|
+
name: namespace,
|
|
56
|
+
logo: getBlockchainLogo(
|
|
57
|
+
blockchains,
|
|
58
|
+
namespaceMainBlockchain[namespace]
|
|
59
|
+
),
|
|
60
|
+
})),
|
|
61
|
+
[namespaces]
|
|
62
|
+
);
|
|
63
|
+
|
|
64
|
+
const onSelect = (namespace: Namespace) => {
|
|
65
|
+
if (singleNamespace) {
|
|
66
|
+
setSelectedNamespaces([namespace]);
|
|
67
|
+
} else {
|
|
68
|
+
setSelectedNamespaces((selectedNamespaces) =>
|
|
69
|
+
selectedNamespaces.includes(namespace)
|
|
70
|
+
? selectedNamespaces.filter((item) => item !== namespace)
|
|
71
|
+
: selectedNamespaces.concat(namespace)
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
const wrapRadioRoot = (children: React.ReactNode) => {
|
|
77
|
+
if (singleNamespace) {
|
|
78
|
+
return <RadioRoot value={selectedNamespaces?.[0]}>{children}</RadioRoot>;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
return <>{children}</>;
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
return (
|
|
85
|
+
<WatermarkedModal
|
|
86
|
+
open={props.open}
|
|
87
|
+
onClose={props.onClose}
|
|
88
|
+
container={
|
|
89
|
+
document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
|
|
90
|
+
}>
|
|
91
|
+
<MessageBox
|
|
92
|
+
type="info"
|
|
93
|
+
title={i18n.t('Select chain types')}
|
|
94
|
+
description={i18n.t(
|
|
95
|
+
`This wallet supports multiple chains. Select which chain you'd like to connect to.`
|
|
96
|
+
)}
|
|
97
|
+
icon={
|
|
98
|
+
<LogoContainer>
|
|
99
|
+
<WalletImageContainer>
|
|
100
|
+
<Image src={props.image} size={45} />
|
|
101
|
+
</WalletImageContainer>
|
|
102
|
+
<Spinner />
|
|
103
|
+
</LogoContainer>
|
|
104
|
+
}
|
|
105
|
+
/>
|
|
106
|
+
<NamespaceList>
|
|
107
|
+
{wrapRadioRoot(
|
|
108
|
+
<>
|
|
109
|
+
{namespacesInfo?.map((namespaceInfoItem) => (
|
|
110
|
+
<ListItemButton
|
|
111
|
+
key={namespaceInfoItem.name}
|
|
112
|
+
id={namespaceInfoItem.name}
|
|
113
|
+
title={namespaceInfoItem.name}
|
|
114
|
+
hasDivider
|
|
115
|
+
style={{ height: 60 }}
|
|
116
|
+
onClick={() => onSelect(namespaceInfoItem.name)}
|
|
117
|
+
start={<Image src={namespaceInfoItem.logo} size={22} />}
|
|
118
|
+
end={
|
|
119
|
+
singleNamespace ? (
|
|
120
|
+
<Radio value={namespaceInfoItem.name} />
|
|
121
|
+
) : (
|
|
122
|
+
<Checkbox
|
|
123
|
+
checked={selectedNamespaces.includes(
|
|
124
|
+
namespaceInfoItem.name
|
|
125
|
+
)}
|
|
126
|
+
/>
|
|
127
|
+
)
|
|
128
|
+
}
|
|
129
|
+
/>
|
|
130
|
+
))}
|
|
131
|
+
</>
|
|
132
|
+
)}
|
|
133
|
+
</NamespaceList>
|
|
134
|
+
<Button
|
|
135
|
+
type="primary"
|
|
136
|
+
disabled={!selectedNamespaces.length}
|
|
137
|
+
onClick={() => props.onConfirm(selectedNamespaces)}>
|
|
138
|
+
{i18n.t('Confirm')}
|
|
139
|
+
</Button>
|
|
140
|
+
</WatermarkedModal>
|
|
141
|
+
);
|
|
142
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { WalletNamespacesModal } from './WalletNamespacesModal';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Token } from 'rango-sdk';
|
|
2
2
|
|
|
3
|
-
import { useCallback, useEffect, useState } from 'react';
|
|
3
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
4
4
|
|
|
5
5
|
import { useAppStore } from '../store/AppStore';
|
|
6
6
|
import { useQuoteStore } from '../store/quote';
|
|
@@ -80,6 +80,7 @@ export function useSwapInput({
|
|
|
80
80
|
const excludeLiquiditySources = useAppStore().excludeLiquiditySources();
|
|
81
81
|
|
|
82
82
|
const [loading, setLoading] = useState(true);
|
|
83
|
+
const prevInputAmount = useRef(inputAmount);
|
|
83
84
|
const userSlippage = customSlippage ?? slippage;
|
|
84
85
|
const tokensValueInvalid = !fromToken || !toToken;
|
|
85
86
|
const shouldSkipRequest =
|
|
@@ -174,9 +175,7 @@ export function useSwapInput({
|
|
|
174
175
|
|
|
175
176
|
const debouncedFetch = useCallback(
|
|
176
177
|
debounce((params: FetchQuoteParams) => {
|
|
177
|
-
|
|
178
|
-
fetch(params);
|
|
179
|
-
}
|
|
178
|
+
fetch(params);
|
|
180
179
|
}, DEBOUNCE_DELAY),
|
|
181
180
|
[shouldSkipRequest]
|
|
182
181
|
);
|
|
@@ -204,7 +203,14 @@ export function useSwapInput({
|
|
|
204
203
|
|
|
205
204
|
resetQuote();
|
|
206
205
|
resetState(true);
|
|
207
|
-
|
|
206
|
+
|
|
207
|
+
let fetchQuotes = fetch;
|
|
208
|
+
if (prevInputAmount.current && prevInputAmount.current != inputAmount) {
|
|
209
|
+
fetchQuotes = debouncedFetch;
|
|
210
|
+
}
|
|
211
|
+
prevInputAmount.current = inputAmount;
|
|
212
|
+
|
|
213
|
+
fetchQuotes({
|
|
208
214
|
inputAmount,
|
|
209
215
|
fromToken,
|
|
210
216
|
toToken,
|
|
@@ -16,6 +16,7 @@ export function useSyncStoresWithConfig() {
|
|
|
16
16
|
setToToken,
|
|
17
17
|
setToBlockchain,
|
|
18
18
|
setFromBlockchain,
|
|
19
|
+
resetQuote,
|
|
19
20
|
setFromToken,
|
|
20
21
|
fromToken,
|
|
21
22
|
toToken,
|
|
@@ -46,6 +47,7 @@ export function useSyncStoresWithConfig() {
|
|
|
46
47
|
|
|
47
48
|
useEffect(() => {
|
|
48
49
|
if (fetchMetaStatus === 'success') {
|
|
50
|
+
resetQuote();
|
|
49
51
|
const chain = blockchains.find(
|
|
50
52
|
(chain) => chain.name === config?.from?.blockchain
|
|
51
53
|
);
|
|
@@ -95,6 +97,7 @@ export function useSyncStoresWithConfig() {
|
|
|
95
97
|
|
|
96
98
|
useEffect(() => {
|
|
97
99
|
if (fetchMetaStatus === 'success') {
|
|
100
|
+
resetQuote();
|
|
98
101
|
const chain = blockchains.find(
|
|
99
102
|
(chain) => chain.name === config?.to?.blockchain
|
|
100
103
|
);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { WalletInfo } from '@rango-dev/ui';
|
|
2
|
+
import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
|
|
2
3
|
import type { BlockchainMeta } from 'rango-sdk';
|
|
3
4
|
|
|
4
5
|
import { WalletState } from '@rango-dev/ui';
|
|
@@ -6,7 +7,6 @@ import { useWallets } from '@rango-dev/wallets-react';
|
|
|
6
7
|
import {
|
|
7
8
|
detectMobileScreens,
|
|
8
9
|
KEPLR_COMPATIBLE_WALLETS,
|
|
9
|
-
type WalletType,
|
|
10
10
|
WalletTypes,
|
|
11
11
|
} from '@rango-dev/wallets-shared';
|
|
12
12
|
import { useCallback, useEffect, useState } from 'react';
|
|
@@ -70,7 +70,7 @@ export function useWalletList(params: Params) {
|
|
|
70
70
|
connectedWallet.chain === chain
|
|
71
71
|
);
|
|
72
72
|
|
|
73
|
-
const handleClick = async (type: WalletType) => {
|
|
73
|
+
const handleClick = async (type: WalletType, namespaces?: Namespace[]) => {
|
|
74
74
|
const wallet = state(type);
|
|
75
75
|
try {
|
|
76
76
|
if (error) {
|
|
@@ -86,7 +86,7 @@ export function useWalletList(params: Params) {
|
|
|
86
86
|
return;
|
|
87
87
|
}
|
|
88
88
|
onBeforeConnect?.(type);
|
|
89
|
-
await connect(type);
|
|
89
|
+
await connect(type, undefined, namespaces);
|
|
90
90
|
onConnect?.(type);
|
|
91
91
|
}
|
|
92
92
|
} catch (e) {
|
|
@@ -103,6 +103,13 @@ export function useWalletList(params: Params) {
|
|
|
103
103
|
}
|
|
104
104
|
}, [hashWalletsState(wallets)]);
|
|
105
105
|
|
|
106
|
+
const disconnectWallet = async (type: WalletType) => {
|
|
107
|
+
const wallet = state(type);
|
|
108
|
+
if (wallet.connected) {
|
|
109
|
+
await disconnect(type);
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
|
|
106
113
|
useEffect(() => {
|
|
107
114
|
return () => {
|
|
108
115
|
disconnectConnectingWallets();
|
|
@@ -161,5 +168,6 @@ export function useWalletList(params: Params) {
|
|
|
161
168
|
error,
|
|
162
169
|
handleClick,
|
|
163
170
|
disconnectConnectingWallets,
|
|
171
|
+
disconnectWallet,
|
|
164
172
|
};
|
|
165
173
|
}
|
|
@@ -17,7 +17,7 @@ import {
|
|
|
17
17
|
WalletIcon,
|
|
18
18
|
} from '@rango-dev/ui';
|
|
19
19
|
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
20
|
-
import {
|
|
20
|
+
import { useNavigate } from 'react-router-dom';
|
|
21
21
|
|
|
22
22
|
import { ConfirmWalletsModal } from '../components/ConfirmWalletsModal/ConfirmWalletsModal';
|
|
23
23
|
import { RefreshButton } from '../components/HeaderButtons/RefreshButton';
|
|
@@ -72,7 +72,6 @@ export function ConfirmSwapPage() {
|
|
|
72
72
|
quoteWarningsConfirmed,
|
|
73
73
|
} = useQuoteStore();
|
|
74
74
|
const navigate = useNavigate();
|
|
75
|
-
const location = useLocation();
|
|
76
75
|
const [dbErrorMessage, setDbErrorMessage] = useState<string>('');
|
|
77
76
|
|
|
78
77
|
const showWalletsOnInit = !quoteWalletsConfirmed;
|
|
@@ -185,10 +184,10 @@ export function ConfirmSwapPage() {
|
|
|
185
184
|
}, []);
|
|
186
185
|
|
|
187
186
|
useLayoutEffect(() => {
|
|
188
|
-
if (!selectedQuote) {
|
|
187
|
+
if (!selectedQuote?.requestId) {
|
|
189
188
|
navigate(`../${location.search}`);
|
|
190
189
|
}
|
|
191
|
-
}, []);
|
|
190
|
+
}, [selectedQuote?.requestId]);
|
|
192
191
|
|
|
193
192
|
const quoteWarning = confirmSwapResult.warnings?.quote ?? null;
|
|
194
193
|
const quoteError = confirmSwapResult.error;
|
package/src/pages/Routes.tsx
CHANGED
|
@@ -15,7 +15,6 @@ import { useQuoteStore } from '../store/quote';
|
|
|
15
15
|
export function RoutesPage() {
|
|
16
16
|
const navigate = useNavigate();
|
|
17
17
|
const navigateBack = useNavigateBack();
|
|
18
|
-
|
|
19
18
|
const {
|
|
20
19
|
selectedQuote,
|
|
21
20
|
refetchQuote,
|
|
@@ -41,6 +40,7 @@ export function RoutesPage() {
|
|
|
41
40
|
header={{
|
|
42
41
|
onWallet: () => {
|
|
43
42
|
navigate(wallets_url);
|
|
43
|
+
updateQuotePartialState('refetchQuote', true);
|
|
44
44
|
},
|
|
45
45
|
onBack: () => {
|
|
46
46
|
updateQuotePartialState('refetchQuote', false);
|
|
@@ -52,7 +52,10 @@ export function RoutesPage() {
|
|
|
52
52
|
!!selectedQuote || quoteError ? fetchQuote : undefined
|
|
53
53
|
}
|
|
54
54
|
hidden={['notifications', 'history']}
|
|
55
|
-
onClickSettings={() =>
|
|
55
|
+
onClickSettings={() => {
|
|
56
|
+
navigate(settings_url);
|
|
57
|
+
updateQuotePartialState('refetchQuote', true);
|
|
58
|
+
}}
|
|
56
59
|
/>
|
|
57
60
|
),
|
|
58
61
|
}}>
|