@rango-dev/widget-embedded 0.22.2 → 0.22.4-next.0
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/CHANGELOG.md +13 -0
- package/dist/components/SettingsContainer/SettingsContainer.style.d.ts +3 -1
- package/dist/components/SettingsContainer/SettingsContainer.style.d.ts.map +1 -1
- package/dist/constants/searchParams.d.ts +1 -0
- package/dist/constants/searchParams.d.ts.map +1 -1
- package/dist/hooks/usePrepareBlockchainList/usePrepareBlockchainList.helpers.d.ts +2 -2
- package/dist/hooks/useSwapInput.d.ts.map +1 -1
- package/dist/hooks/useSyncUrlAndStore/useSyncUrlAndStore.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +3 -3
- package/dist/pages/LiquiditySourcePage.d.ts.map +1 -1
- package/dist/pages/SettingsPage.d.ts.map +1 -1
- package/dist/store/app.d.ts +1 -1
- package/dist/store/app.d.ts.map +1 -1
- package/dist/store/slices/config.d.ts +13 -3
- package/dist/store/slices/config.d.ts.map +1 -1
- package/dist/store/slices/data.d.ts.map +1 -1
- package/dist/utils/settings.d.ts +1 -1
- package/package.json +3 -2
- package/src/components/NoResult/NoResult.tsx +1 -1
- package/src/components/SettingsContainer/SettingsContainer.style.ts +7 -0
- package/src/constants/searchParams.ts +5 -0
- package/src/hooks/useConfirmSwap/useConfirmSwap.ts +1 -1
- package/src/hooks/useSwapInput.ts +8 -6
- package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts +26 -4
- package/src/pages/ConfirmSwapPage.tsx +1 -1
- package/src/pages/LiquiditySourcePage.tsx +9 -4
- package/src/pages/SettingsPage.tsx +49 -2
- package/src/store/app.ts +2 -2
- package/src/store/slices/config.ts +56 -5
- package/src/store/slices/data.ts +12 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,qBA6H5D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,MAAM,OAAO,CAAC;AAoB1B,wBAAgB,YAAY,sBA+M3B"}
|
package/dist/store/app.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import type { DataSlice } from './slices/data';
|
|
|
3
3
|
import type { SettingsSlice } from './slices/settings';
|
|
4
4
|
import type { WidgetConfig } from '../types';
|
|
5
5
|
import type { StateCreator } from 'zustand';
|
|
6
|
-
export type StateCreatorWithInitialData<T extends Partial<WidgetConfig>, R extends
|
|
6
|
+
export type StateCreatorWithInitialData<T extends Partial<WidgetConfig>, R extends Partial<AppStoreState>, V extends Partial<AppStoreState>> = (initialData: T | undefined, ...rest: Parameters<StateCreator<R, [], [], V>>) => ReturnType<StateCreator<R, [], [], V>>;
|
|
7
7
|
export type AppStoreState = DataSlice & ConfigSlice & SettingsSlice;
|
|
8
8
|
export declare function createAppStore(initialData?: WidgetConfig): import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<AppStoreState>, "persist"> & {
|
|
9
9
|
persist: {
|
package/dist/store/app.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../src/store/app.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAS5C,MAAM,MAAM,2BAA2B,CACrC,CAAC,SAAS,OAAO,CAAC,YAAY,CAAC,EAC/B,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../src/store/app.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAS5C,MAAM,MAAM,2BAA2B,CACrC,CAAC,SAAS,OAAO,CAAC,YAAY,CAAC,EAC/B,CAAC,SAAS,OAAO,CAAC,aAAa,CAAC,EAChC,CAAC,SAAS,OAAO,CAAC,aAAa,CAAC,IAC9B,CACF,WAAW,EAAE,CAAC,GAAG,SAAS,EAC1B,GAAG,IAAI,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,KAC5C,UAAU,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;AAE5C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,CAAC;AAEpE,wBAAgB,cAAc,CAAC,WAAW,CAAC,EAAE,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BxD"}
|
|
@@ -1,17 +1,27 @@
|
|
|
1
|
+
import type { SettingsSlice } from './settings';
|
|
1
2
|
import type { WidgetConfig } from '../../types';
|
|
2
3
|
import type { StateCreatorWithInitialData } from '../app';
|
|
3
4
|
export declare const DEFAULT_CONFIG: WidgetConfig;
|
|
4
5
|
interface IframeConfigs {
|
|
5
6
|
clientUrl?: string;
|
|
6
7
|
}
|
|
7
|
-
|
|
8
|
+
interface CampaignMode {
|
|
9
|
+
liquiditySources?: string[];
|
|
10
|
+
}
|
|
11
|
+
export interface ConfigSlice {
|
|
8
12
|
config: WidgetConfig;
|
|
13
|
+
campaignMode: CampaignMode;
|
|
14
|
+
isInCampaignMode: () => boolean;
|
|
15
|
+
getLiquiditySources: () => string[];
|
|
16
|
+
getDisabledLiquiditySources: () => string[];
|
|
17
|
+
excludeLiquiditySources: () => boolean;
|
|
9
18
|
updateConfig: (config: WidgetConfig) => void;
|
|
19
|
+
updateCampaignMode: <K extends keyof CampaignMode>(name: K, value: CampaignMode[K]) => void;
|
|
10
20
|
iframe: {
|
|
11
21
|
clientUrl?: string;
|
|
12
22
|
};
|
|
13
23
|
updateIframe: <K extends keyof IframeConfigs>(name: K, value: IframeConfigs[K]) => void;
|
|
14
|
-
}
|
|
15
|
-
export declare const createConfigSlice: StateCreatorWithInitialData<WidgetConfig, ConfigSlice, ConfigSlice>;
|
|
24
|
+
}
|
|
25
|
+
export declare const createConfigSlice: StateCreatorWithInitialData<WidgetConfig, ConfigSlice & SettingsSlice, ConfigSlice>;
|
|
16
26
|
export {};
|
|
17
27
|
//# sourceMappingURL=config.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/store/slices/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAE1D,eAAO,MAAM,cAAc,EAAE,YAM5B,CAAC;AAEF,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/store/slices/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAE1D,eAAO,MAAM,cAAc,EAAE,YAM5B,CAAC;AAEF,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,YAAY;IACpB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AAUD,MAAM,WAAW,WAAW;IAE1B,MAAM,EAAE,YAAY,CAAC;IACrB,YAAY,EAAE,YAAY,CAAC;IAC3B,gBAAgB,EAAE,MAAM,OAAO,CAAC;IAChC,mBAAmB,EAAE,MAAM,MAAM,EAAE,CAAC;IACpC,2BAA2B,EAAE,MAAM,MAAM,EAAE,CAAC;IAC5C,uBAAuB,EAAE,MAAM,OAAO,CAAC;IACvC,YAAY,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7C,kBAAkB,EAAE,CAAC,CAAC,SAAS,MAAM,YAAY,EAC/C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KACnB,IAAI,CAAC;IAEV,MAAM,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,YAAY,EAAE,CAAC,CAAC,SAAS,MAAM,aAAa,EAC1C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KACpB,IAAI,CAAC;CACX;AAED,eAAO,MAAM,iBAAiB,EAAE,2BAA2B,CACzD,YAAY,EACZ,WAAW,GAAG,aAAa,EAC3B,WAAW,CA+DZ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../src/store/slices/data.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQ5C,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;CACjC,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;IAE/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AACF,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC3D,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,OAAO,EAAE,KAAK,EAAE,CAAC;IACjB,cAAc,EAAE,KAAK,EAAE,CAAC;IACxB,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,iBAAiB,KAAK,cAAc,EAAE,CAAC;IAC/D,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,KAAK,EAAE,CAAC;IAC5C,QAAQ,EAAE,MAAM,WAAW,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,GAAG,aAAa,KAAK,OAAO,CAAC;IAEzE,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,EAAE,YAAY,CACxC,SAAS,GAAG,WAAW,EACvB;CAAE,EACF;CAAE,EACF,SAAS,
|
|
1
|
+
{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../src/store/slices/data.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQ5C,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;CACjC,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;IAE/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AACF,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC3D,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,OAAO,EAAE,KAAK,EAAE,CAAC;IACjB,cAAc,EAAE,KAAK,EAAE,CAAC;IACxB,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,iBAAiB,KAAK,cAAc,EAAE,CAAC;IAC/D,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,KAAK,EAAE,CAAC;IAC5C,QAAQ,EAAE,MAAM,WAAW,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,GAAG,aAAa,KAAK,OAAO,CAAC;IAEzE,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,EAAE,YAAY,CACxC,SAAS,GAAG,WAAW,EACvB;CAAE,EACF;CAAE,EACF,SAAS,CA+MT,CAAC"}
|
package/dist/utils/settings.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ export type UniqueSwappersGroupType = {
|
|
|
9
9
|
selected: boolean;
|
|
10
10
|
};
|
|
11
11
|
export declare function getUniqueSwappersGroups(swappers: SwapperMeta[], disabledLiquiditySources: string[]): UniqueSwappersGroupType[];
|
|
12
|
-
export declare function sortLiquiditySourcesByGroupTitle(a: SwapperMeta, b: SwapperMeta):
|
|
12
|
+
export declare function sortLiquiditySourcesByGroupTitle(a: SwapperMeta, b: SwapperMeta): 1 | 0 | -1;
|
|
13
13
|
export declare function isFeatureHidden(feature: keyof Features, features?: Features): boolean;
|
|
14
14
|
export declare function isFeatureEnabled(feature: keyof Features, features?: Features): boolean;
|
|
15
15
|
//# sourceMappingURL=settings.d.ts.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rango-dev/widget-embedded",
|
|
3
|
-
"version": "0.22.
|
|
3
|
+
"version": "0.22.4-next.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"source": "./src/index.ts",
|
|
@@ -25,12 +25,13 @@
|
|
|
25
25
|
"@rango-dev/queue-manager-core": "^0.25.0",
|
|
26
26
|
"@rango-dev/queue-manager-rango-preset": "^0.27.0",
|
|
27
27
|
"@rango-dev/queue-manager-react": "^0.25.0",
|
|
28
|
-
"@rango-dev/ui": "^0.28.
|
|
28
|
+
"@rango-dev/ui": "^0.28.2-next.0",
|
|
29
29
|
"@rango-dev/wallets-react": "^0.13.0",
|
|
30
30
|
"@rango-dev/wallets-shared": "^0.27.0",
|
|
31
31
|
"bignumber.js": "^9.1.1",
|
|
32
32
|
"copy-to-clipboard": "^3.3.3",
|
|
33
33
|
"dayjs": "^1.11.7",
|
|
34
|
+
"ethers": "^5.7.2",
|
|
34
35
|
"immer": "^9.0.19",
|
|
35
36
|
"mitt": "^3.0.0",
|
|
36
37
|
"rango-sdk": "^0.1.44",
|
|
@@ -18,7 +18,7 @@ import { Container, Footer, PrefixIcon } from './NoResult.styles';
|
|
|
18
18
|
|
|
19
19
|
export function NoResult(props: PropTypes) {
|
|
20
20
|
const { fetch, error } = props;
|
|
21
|
-
const disabledLiquiditySources = useAppStore().
|
|
21
|
+
const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
|
|
22
22
|
const toggleAllLiquiditySources = useAppStore().toggleAllLiquiditySources;
|
|
23
23
|
|
|
24
24
|
const swappers = useAppStore().swappers();
|
|
@@ -6,6 +6,13 @@ export const LiquiditySourceList = styled('ul', {
|
|
|
6
6
|
listStyle: 'none',
|
|
7
7
|
height: '100%',
|
|
8
8
|
overflowY: 'auto',
|
|
9
|
+
variants: {
|
|
10
|
+
disabled: {
|
|
11
|
+
true: {
|
|
12
|
+
pointerEvents: 'none',
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
},
|
|
9
16
|
});
|
|
10
17
|
|
|
11
18
|
export const LiquiditySourceSuffix = styled('div', {
|
|
@@ -5,6 +5,11 @@ export enum SearchParams {
|
|
|
5
5
|
TO_TOKEN = 'toToken',
|
|
6
6
|
FROM_AMOUNT = 'fromAmount',
|
|
7
7
|
AUTO_CONNECT = 'autoConnect',
|
|
8
|
+
/*
|
|
9
|
+
* dApps can transmit liquidity sources as a search parameter,
|
|
10
|
+
* and these take precedence over widget configurations
|
|
11
|
+
*/
|
|
12
|
+
LIQUIDITY_SOURCES = 'liquiditySources',
|
|
8
13
|
// iframe environments
|
|
9
14
|
CLIENT_URL = 'clientUrl',
|
|
10
15
|
}
|
|
@@ -35,8 +35,8 @@ export function useConfirmSwap(): ConfirmSwap {
|
|
|
35
35
|
affiliatePercent,
|
|
36
36
|
affiliateRef,
|
|
37
37
|
affiliateWallets,
|
|
38
|
-
disabledLiquiditySources,
|
|
39
38
|
} = useAppStore();
|
|
39
|
+
const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
|
|
40
40
|
const { connectedWallets } = useWalletsStore();
|
|
41
41
|
const blockchains = useAppStore().blockchains();
|
|
42
42
|
const tokens = useAppStore().tokens();
|
|
@@ -40,8 +40,7 @@ type UseSwapInput = {
|
|
|
40
40
|
*/
|
|
41
41
|
export function useSwapInput(): UseSwapInput {
|
|
42
42
|
const { fetch: fetchQuote, cancelFetch } = useFetchQuote();
|
|
43
|
-
const {
|
|
44
|
-
useAppStore().config;
|
|
43
|
+
const { enableNewLiquiditySources, features } = useAppStore().config;
|
|
45
44
|
const tokens = useAppStore().tokens();
|
|
46
45
|
const {
|
|
47
46
|
fromToken,
|
|
@@ -58,9 +57,12 @@ export function useSwapInput(): UseSwapInput {
|
|
|
58
57
|
affiliatePercent,
|
|
59
58
|
affiliateRef,
|
|
60
59
|
affiliateWallets,
|
|
61
|
-
disabledLiquiditySources,
|
|
62
60
|
fetchStatus,
|
|
63
61
|
} = useAppStore();
|
|
62
|
+
const liquiditySources = useAppStore().getLiquiditySources();
|
|
63
|
+
const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
|
|
64
|
+
const excludeLiquiditySources = useAppStore().excludeLiquiditySources();
|
|
65
|
+
|
|
64
66
|
const [loading, setLoading] = useState(true);
|
|
65
67
|
const [error, setError] = useState<QuoteError | null>(null);
|
|
66
68
|
const [warning, setWarning] = useState<QuoteWarning | null>(null);
|
|
@@ -99,7 +101,7 @@ export function useSwapInput(): UseSwapInput {
|
|
|
99
101
|
fromToken,
|
|
100
102
|
toToken,
|
|
101
103
|
inputAmount,
|
|
102
|
-
liquiditySources,
|
|
104
|
+
liquiditySources: liquiditySources,
|
|
103
105
|
excludeLiquiditySources,
|
|
104
106
|
disabledLiquiditySources,
|
|
105
107
|
slippage,
|
|
@@ -170,7 +172,7 @@ export function useSwapInput(): UseSwapInput {
|
|
|
170
172
|
fromToken,
|
|
171
173
|
toToken,
|
|
172
174
|
liquiditySources,
|
|
173
|
-
excludeLiquiditySources
|
|
175
|
+
excludeLiquiditySources,
|
|
174
176
|
disabledLiquiditySources,
|
|
175
177
|
slippage: userSlippage,
|
|
176
178
|
affiliateRef,
|
|
@@ -204,7 +206,7 @@ export function useSwapInput(): UseSwapInput {
|
|
|
204
206
|
fromToken,
|
|
205
207
|
toToken,
|
|
206
208
|
liquiditySources,
|
|
207
|
-
excludeLiquiditySources
|
|
209
|
+
excludeLiquiditySources,
|
|
208
210
|
disabledLiquiditySources,
|
|
209
211
|
slippage: userSlippage,
|
|
210
212
|
affiliateRef,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
|
2
2
|
import {
|
|
3
3
|
useInRouterContext,
|
|
4
4
|
useLocation,
|
|
@@ -33,7 +33,9 @@ export function useSyncUrlAndStore() {
|
|
|
33
33
|
const blockchains = useAppStore().blockchains();
|
|
34
34
|
const tokens = useAppStore().tokens();
|
|
35
35
|
const isInRouterContext = useInRouterContext();
|
|
36
|
-
const { updateIframe } = useAppStore();
|
|
36
|
+
const { updateIframe, updateCampaignMode } = useAppStore();
|
|
37
|
+
const campaignMode = useAppStore().isInCampaignMode();
|
|
38
|
+
const liquiditySourcesParamsRef = useRef<string>();
|
|
37
39
|
|
|
38
40
|
const getUrlSearchParams = () => {
|
|
39
41
|
const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
|
|
@@ -43,6 +45,7 @@ export function useSyncUrlAndStore() {
|
|
|
43
45
|
const toToken = searchParams.get(SearchParams.TO_TOKEN);
|
|
44
46
|
const autoConnect = searchParams.get(SearchParams.AUTO_CONNECT);
|
|
45
47
|
const clientUrl = searchParams.get(SearchParams.CLIENT_URL);
|
|
48
|
+
const liquiditySources = searchParams.get(SearchParams.LIQUIDITY_SOURCES);
|
|
46
49
|
|
|
47
50
|
return {
|
|
48
51
|
fromAmount,
|
|
@@ -52,6 +55,7 @@ export function useSyncUrlAndStore() {
|
|
|
52
55
|
toToken,
|
|
53
56
|
autoConnect,
|
|
54
57
|
clientUrl,
|
|
58
|
+
liquiditySources,
|
|
55
59
|
};
|
|
56
60
|
};
|
|
57
61
|
|
|
@@ -77,6 +81,9 @@ export function useSyncUrlAndStore() {
|
|
|
77
81
|
[SearchParams.FROM_AMOUNT]: inputAmount,
|
|
78
82
|
[SearchParams.AUTO_CONNECT]: autoConnect ?? undefined,
|
|
79
83
|
[SearchParams.CLIENT_URL]: clientUrl ?? undefined,
|
|
84
|
+
[SearchParams.LIQUIDITY_SOURCES]: campaignMode
|
|
85
|
+
? liquiditySourcesParamsRef.current
|
|
86
|
+
: undefined,
|
|
80
87
|
});
|
|
81
88
|
}
|
|
82
89
|
}, [
|
|
@@ -86,16 +93,24 @@ export function useSyncUrlAndStore() {
|
|
|
86
93
|
fromToken,
|
|
87
94
|
toBlockchain,
|
|
88
95
|
toToken,
|
|
96
|
+
campaignMode,
|
|
89
97
|
]);
|
|
90
98
|
|
|
91
99
|
useEffect(() => {
|
|
92
100
|
if (!isInRouterContext) {
|
|
93
101
|
return;
|
|
94
102
|
}
|
|
103
|
+
|
|
95
104
|
const searchParams = getUrlSearchParams();
|
|
105
|
+
|
|
106
|
+
if (!liquiditySourcesParamsRef.current && searchParams.liquiditySources) {
|
|
107
|
+
liquiditySourcesParamsRef.current = searchParams.liquiditySources;
|
|
108
|
+
}
|
|
109
|
+
|
|
96
110
|
if (searchParams.fromAmount) {
|
|
97
111
|
setInputAmount(searchParams.fromAmount);
|
|
98
112
|
}
|
|
113
|
+
|
|
99
114
|
if (fetchMetaStatus === 'success') {
|
|
100
115
|
const fromBlockchain = blockchains.find(
|
|
101
116
|
(blockchain) => blockchain.name === searchParams.fromBlockchain
|
|
@@ -113,6 +128,7 @@ export function useSyncUrlAndStore() {
|
|
|
113
128
|
searchParams.toToken,
|
|
114
129
|
toBlockchain ?? null
|
|
115
130
|
);
|
|
131
|
+
|
|
116
132
|
if (!!fromBlockchain) {
|
|
117
133
|
setFromBlockchain(fromBlockchain);
|
|
118
134
|
if (!!fromToken) {
|
|
@@ -125,6 +141,7 @@ export function useSyncUrlAndStore() {
|
|
|
125
141
|
});
|
|
126
142
|
}
|
|
127
143
|
}
|
|
144
|
+
|
|
128
145
|
if (!!toBlockchain) {
|
|
129
146
|
setToBlockchain(toBlockchain);
|
|
130
147
|
if (!!toToken) {
|
|
@@ -137,9 +154,14 @@ export function useSyncUrlAndStore() {
|
|
|
137
154
|
}
|
|
138
155
|
}, [fetchMetaStatus]);
|
|
139
156
|
|
|
140
|
-
// We run this only once, because if the app is embedded into an iframe, the data in url for iframe will not change.
|
|
141
157
|
useEffect(() => {
|
|
142
|
-
const { clientUrl } = getUrlSearchParams();
|
|
158
|
+
const { clientUrl, liquiditySources } = getUrlSearchParams();
|
|
159
|
+
// We run this only once, because if the app is embedded into an iframe, the data in url for iframe will not change.
|
|
143
160
|
updateIframe('clientUrl', clientUrl || undefined);
|
|
161
|
+
|
|
162
|
+
updateCampaignMode(
|
|
163
|
+
'liquiditySources',
|
|
164
|
+
liquiditySources?.split(',') ?? undefined
|
|
165
|
+
);
|
|
144
166
|
}, []);
|
|
145
167
|
}
|
|
@@ -88,7 +88,7 @@ export function ConfirmSwapPage() {
|
|
|
88
88
|
const showWalletsOnInit = !quoteWalletsConfirmed;
|
|
89
89
|
const [showWallets, setShowWallets] = useState(false);
|
|
90
90
|
const { isActiveTab } = useUiStore();
|
|
91
|
-
const disabledLiquiditySources = useAppStore().
|
|
91
|
+
const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
|
|
92
92
|
const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
|
|
93
93
|
const { manager } = useManager();
|
|
94
94
|
const {
|
|
@@ -33,9 +33,10 @@ interface PropTypes {
|
|
|
33
33
|
export function LiquiditySourcePage({ sourceType }: PropTypes) {
|
|
34
34
|
const fetchStatus = useAppStore().fetchStatus;
|
|
35
35
|
const swappers = useAppStore().swappers();
|
|
36
|
-
const disabledLiquiditySources = useAppStore().
|
|
36
|
+
const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
|
|
37
37
|
const [searchedFor, setSearchedFor] = useState<string>('');
|
|
38
38
|
const toggleLiquiditySource = useAppStore().toggleLiquiditySource;
|
|
39
|
+
const campaignMode = useAppStore().isInCampaignMode();
|
|
39
40
|
const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
|
|
40
41
|
getUniqueSwappersGroups(swappers, disabledLiquiditySources);
|
|
41
42
|
|
|
@@ -73,8 +74,12 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
|
|
|
73
74
|
const { selected, groupTitle, logo } = sourceItem;
|
|
74
75
|
return {
|
|
75
76
|
start: <Image src={logo} size={22} type="circular" />,
|
|
76
|
-
onClick: () =>
|
|
77
|
-
|
|
77
|
+
onClick: () => {
|
|
78
|
+
if (!campaignMode) {
|
|
79
|
+
toggleLiquiditySource(groupTitle);
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
end: <Checkbox checked={selected} disabled={campaignMode} />,
|
|
78
83
|
title: (
|
|
79
84
|
<Typography variant="title" size="xmedium">
|
|
80
85
|
{i18n.t(groupTitle)}
|
|
@@ -131,7 +136,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
|
|
|
131
136
|
</NotFoundContainer>
|
|
132
137
|
) : (
|
|
133
138
|
fetchStatus === 'success' && (
|
|
134
|
-
<LiquiditySourceList>
|
|
139
|
+
<LiquiditySourceList disabled={campaignMode}>
|
|
135
140
|
{filteredList.map((sourceItem) => {
|
|
136
141
|
return (
|
|
137
142
|
<React.Fragment key={sourceItem.id}>
|
|
@@ -1,35 +1,50 @@
|
|
|
1
1
|
import { i18n } from '@lingui/core';
|
|
2
2
|
import {
|
|
3
|
+
Alert,
|
|
4
|
+
Button,
|
|
3
5
|
ChevronRightIcon,
|
|
4
6
|
Divider,
|
|
5
7
|
InfoIcon,
|
|
6
8
|
List,
|
|
7
9
|
ListItemButton,
|
|
8
10
|
Skeleton,
|
|
11
|
+
styled,
|
|
9
12
|
Switch,
|
|
10
13
|
Tooltip,
|
|
11
14
|
Typography,
|
|
12
15
|
} from '@rango-dev/ui';
|
|
13
16
|
import React from 'react';
|
|
14
|
-
import {
|
|
17
|
+
import {
|
|
18
|
+
useInRouterContext,
|
|
19
|
+
useNavigate,
|
|
20
|
+
useSearchParams,
|
|
21
|
+
} from 'react-router-dom';
|
|
15
22
|
|
|
16
23
|
import { Layout, PageContainer } from '../components/Layout';
|
|
17
24
|
import { Slippage } from '../components/Slippage';
|
|
18
25
|
import { SlippageTooltipContainer as TooltipContainer } from '../components/Slippage/Slippage.styles';
|
|
19
26
|
import { navigationRoutes } from '../constants/navigationRoutes';
|
|
27
|
+
import { SearchParams } from '../constants/searchParams';
|
|
20
28
|
import { useAppStore } from '../store/AppStore';
|
|
21
29
|
import { getContainer } from '../utils/common';
|
|
22
30
|
import { getUniqueSwappersGroups, isFeatureHidden } from '../utils/settings';
|
|
23
31
|
|
|
32
|
+
const ResetAction = styled('div', {
|
|
33
|
+
paddingLeft: '$8',
|
|
34
|
+
});
|
|
35
|
+
|
|
24
36
|
export function SettingsPage() {
|
|
25
37
|
const navigate = useNavigate();
|
|
26
38
|
const { theme } = useAppStore().config;
|
|
27
39
|
const fetchStatus = useAppStore().fetchStatus;
|
|
28
40
|
const swappers = useAppStore().swappers();
|
|
29
|
-
const disabledLiquiditySources = useAppStore().
|
|
41
|
+
const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
|
|
30
42
|
const {
|
|
31
43
|
config: { features },
|
|
44
|
+
isInCampaignMode,
|
|
45
|
+
updateCampaignMode,
|
|
32
46
|
} = useAppStore();
|
|
47
|
+
const campaignMode = isInCampaignMode();
|
|
33
48
|
const isThemeHidden = isFeatureHidden('theme', features);
|
|
34
49
|
|
|
35
50
|
const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
|
|
@@ -177,12 +192,44 @@ export function SettingsPage() {
|
|
|
177
192
|
}
|
|
178
193
|
settingItems.push(infiniteApprovalItem);
|
|
179
194
|
|
|
195
|
+
const [, setSearchParams] = useSearchParams();
|
|
196
|
+
const isRouterInContext = useInRouterContext();
|
|
197
|
+
|
|
198
|
+
const onClick = () => {
|
|
199
|
+
if (isRouterInContext && campaignMode) {
|
|
200
|
+
setSearchParams(
|
|
201
|
+
(prev) => {
|
|
202
|
+
prev.delete(SearchParams.LIQUIDITY_SOURCES);
|
|
203
|
+
return prev;
|
|
204
|
+
},
|
|
205
|
+
{ replace: true }
|
|
206
|
+
);
|
|
207
|
+
updateCampaignMode('liquiditySources', undefined);
|
|
208
|
+
}
|
|
209
|
+
};
|
|
210
|
+
|
|
180
211
|
return (
|
|
181
212
|
<Layout
|
|
182
213
|
header={{
|
|
183
214
|
title: i18n.t('Settings'),
|
|
184
215
|
}}>
|
|
185
216
|
<PageContainer>
|
|
217
|
+
{campaignMode && (
|
|
218
|
+
<Alert
|
|
219
|
+
type="info"
|
|
220
|
+
variant="alarm"
|
|
221
|
+
title={i18n.t(
|
|
222
|
+
"Currently, you're in campaign mode with restrictions on liquidity sources. Would you like to switch out of this mode and make use of all available liquidity sources?"
|
|
223
|
+
)}
|
|
224
|
+
action={
|
|
225
|
+
<ResetAction>
|
|
226
|
+
<Button type="secondary" size="small" onClick={onClick}>
|
|
227
|
+
Reset
|
|
228
|
+
</Button>
|
|
229
|
+
</ResetAction>
|
|
230
|
+
}
|
|
231
|
+
/>
|
|
232
|
+
)}
|
|
186
233
|
<Slippage />
|
|
187
234
|
<List
|
|
188
235
|
type={
|
package/src/store/app.ts
CHANGED
|
@@ -13,8 +13,8 @@ import { createSettingsSlice } from './slices/settings';
|
|
|
13
13
|
|
|
14
14
|
export type StateCreatorWithInitialData<
|
|
15
15
|
T extends Partial<WidgetConfig>,
|
|
16
|
-
R extends
|
|
17
|
-
V extends
|
|
16
|
+
R extends Partial<AppStoreState>,
|
|
17
|
+
V extends Partial<AppStoreState>
|
|
18
18
|
> = (
|
|
19
19
|
initialData: T | undefined,
|
|
20
20
|
...rest: Parameters<StateCreator<R, [], [], V>>
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { SettingsSlice } from './settings';
|
|
1
2
|
import type { WidgetConfig } from '../../types';
|
|
2
3
|
import type { StateCreatorWithInitialData } from '../app';
|
|
3
4
|
|
|
@@ -13,31 +14,70 @@ interface IframeConfigs {
|
|
|
13
14
|
clientUrl?: string;
|
|
14
15
|
}
|
|
15
16
|
|
|
17
|
+
interface CampaignMode {
|
|
18
|
+
liquiditySources?: string[];
|
|
19
|
+
}
|
|
20
|
+
|
|
16
21
|
const DEFAULT_IFRAME_CONFIGS: IframeConfigs = {
|
|
17
22
|
clientUrl: undefined,
|
|
18
23
|
};
|
|
19
24
|
|
|
20
|
-
|
|
25
|
+
const DEFAULT_CAMPAIGN_MODE: CampaignMode = {
|
|
26
|
+
liquiditySources: undefined,
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export interface ConfigSlice {
|
|
21
30
|
// What user can set directly.
|
|
22
31
|
config: WidgetConfig;
|
|
32
|
+
campaignMode: CampaignMode;
|
|
33
|
+
isInCampaignMode: () => boolean;
|
|
34
|
+
getLiquiditySources: () => string[];
|
|
35
|
+
getDisabledLiquiditySources: () => string[];
|
|
36
|
+
excludeLiquiditySources: () => boolean;
|
|
23
37
|
updateConfig: (config: WidgetConfig) => void;
|
|
24
|
-
|
|
25
|
-
|
|
38
|
+
updateCampaignMode: <K extends keyof CampaignMode>(
|
|
39
|
+
name: K,
|
|
40
|
+
value: CampaignMode[K]
|
|
41
|
+
) => void;
|
|
42
|
+
// What we are setting based on environments.
|
|
26
43
|
iframe: { clientUrl?: string };
|
|
27
44
|
updateIframe: <K extends keyof IframeConfigs>(
|
|
28
45
|
name: K,
|
|
29
46
|
value: IframeConfigs[K]
|
|
30
47
|
) => void;
|
|
31
|
-
}
|
|
48
|
+
}
|
|
32
49
|
|
|
33
50
|
export const createConfigSlice: StateCreatorWithInitialData<
|
|
34
51
|
WidgetConfig,
|
|
35
|
-
ConfigSlice,
|
|
52
|
+
ConfigSlice & SettingsSlice,
|
|
36
53
|
ConfigSlice
|
|
37
54
|
> = (initialData, set, get) => {
|
|
38
55
|
return {
|
|
39
56
|
config: { ...DEFAULT_CONFIG, ...initialData },
|
|
40
57
|
iframe: DEFAULT_IFRAME_CONFIGS,
|
|
58
|
+
campaignMode: DEFAULT_CAMPAIGN_MODE,
|
|
59
|
+
getLiquiditySources: () => {
|
|
60
|
+
const { config, campaignMode } = get();
|
|
61
|
+
return campaignMode.liquiditySources?.length
|
|
62
|
+
? campaignMode.liquiditySources
|
|
63
|
+
: config.liquiditySources ?? [];
|
|
64
|
+
},
|
|
65
|
+
getDisabledLiquiditySources: () => {
|
|
66
|
+
const { disabledLiquiditySources, campaignMode } = get();
|
|
67
|
+
return campaignMode.liquiditySources?.length
|
|
68
|
+
? []
|
|
69
|
+
: disabledLiquiditySources;
|
|
70
|
+
},
|
|
71
|
+
excludeLiquiditySources: () => {
|
|
72
|
+
const { config, campaignMode } = get();
|
|
73
|
+
return campaignMode.liquiditySources?.length
|
|
74
|
+
? false
|
|
75
|
+
: !!config.enableNewLiquiditySources;
|
|
76
|
+
},
|
|
77
|
+
isInCampaignMode: () => {
|
|
78
|
+
const { campaignMode } = get();
|
|
79
|
+
return !!campaignMode.liquiditySources?.length;
|
|
80
|
+
},
|
|
41
81
|
|
|
42
82
|
// Actions
|
|
43
83
|
updateConfig: (nextConfig: WidgetConfig) => {
|
|
@@ -51,6 +91,17 @@ export const createConfigSlice: StateCreatorWithInitialData<
|
|
|
51
91
|
});
|
|
52
92
|
},
|
|
53
93
|
|
|
94
|
+
updateCampaignMode: (name, value) => {
|
|
95
|
+
const currentCampaignMode = get().campaignMode;
|
|
96
|
+
|
|
97
|
+
set({
|
|
98
|
+
campaignMode: {
|
|
99
|
+
...currentCampaignMode,
|
|
100
|
+
[name]: value,
|
|
101
|
+
},
|
|
102
|
+
});
|
|
103
|
+
},
|
|
104
|
+
|
|
54
105
|
updateIframe: (name, value) => {
|
|
55
106
|
const currentIframeConfig = get().iframe;
|
|
56
107
|
|
package/src/store/slices/data.ts
CHANGED
|
@@ -168,9 +168,18 @@ export const createDataSlice: StateCreator<
|
|
|
168
168
|
return pinned;
|
|
169
169
|
},
|
|
170
170
|
swappers: () => {
|
|
171
|
-
const {
|
|
172
|
-
|
|
173
|
-
|
|
171
|
+
const { config, campaignMode } = get();
|
|
172
|
+
|
|
173
|
+
const campaignModeLiquiditySource = campaignMode.liquiditySources?.length
|
|
174
|
+
? campaignMode.liquiditySources
|
|
175
|
+
: null;
|
|
176
|
+
|
|
177
|
+
const liquiditySources =
|
|
178
|
+
campaignModeLiquiditySource ?? config.liquiditySources;
|
|
179
|
+
|
|
180
|
+
const enableNewLiquiditySources = campaignModeLiquiditySource
|
|
181
|
+
? false
|
|
182
|
+
: config.enableNewLiquiditySources;
|
|
174
183
|
|
|
175
184
|
/*
|
|
176
185
|
* If the enableNewLiquiditySources flag is set to true, we return all swappers that are not included in the config.
|