From 623f9f4c402a36da8d9889362815f5ec5baf38e6 Mon Sep 17 00:00:00 2001 From: samobasquiat Date: Tue, 25 Apr 2023 13:32:09 +0000 Subject: [PATCH 001/769] retry blockedTasks when cancelSwap is called --- queue-manager/rango-preset/src/helpers.ts | 45 ++++++++++++++++++++--- 1 file changed, 40 insertions(+), 5 deletions(-) diff --git a/queue-manager/rango-preset/src/helpers.ts b/queue-manager/rango-preset/src/helpers.ts index 00231f6e12..e4dc6f5cc0 100644 --- a/queue-manager/rango-preset/src/helpers.ts +++ b/queue-manager/rango-preset/src/helpers.ts @@ -1620,6 +1620,35 @@ export function getRunningSwaps(manager: Manager): PendingSwap[] { return result; } +/** + * If found any blocked tasks that is depended for other queues, runs it. + * @param manager + */ +function retryWaitingForOtherQueues(manager: Manager) { + let foundFirstBlockedQueue = false; + manager?.getAll().forEach((q) => { + const isAnyDependsOnOtherQueues = Object.keys(q.list.state.tasks).find( + (taskId) => { + const task = q.list.state.tasks[taskId]; + return ( + q.status === Status.BLOCKED && + [BlockReason.DEPENDS_ON_OTHER_QUEUES].includes( + task.blockedFor?.reason + ) + ); + } + ); + if (isAnyDependsOnOtherQueues && !foundFirstBlockedQueue) { + foundFirstBlockedQueue = true; + const swap = q.list.getStorage() + ?.swapDetails as SwapStorage['swapDetails']; + if (swap.status === 'running') { + q.list.checkBlock(); + } + } + }); +} + /** * * Trying to reset notifications for pending swaps to correct message on page load. @@ -1755,19 +1784,25 @@ export async function throwOnOK( } } -export function cancelSwap(swap: QueueInfo): { +export function cancelSwap( + swap: QueueInfo, + manager?: Manager +): { swap: PendingSwap; step: PendingSwapStep | null; } { + const { reset } = claimQueue(); swap.actions.cancel(); - return updateSwapStatus({ + + const updateResult = updateSwapStatus({ getStorage: swap.actions.getStorage, setStorage: swap.actions.setStorage, message: 'Swap canceled by user.', - details: - "Warning: If you've already signed and sent a transaction, it won't be affected, but next swap steps will not be executed.", - nextStatus: 'failed', nextStepStatus: 'failed', errorCode: 'USER_CANCEL', }); + reset(); + if (manager) retryWaitingForOtherQueues(manager); + + return updateResult; } From 22f8c978580fa68688e9685ff9548801bc5812b4 Mon Sep 17 00:00:00 2001 From: samobasquiat Date: Tue, 25 Apr 2023 14:25:20 +0000 Subject: [PATCH 002/769] add nextStatus & details to cancelSwap --- queue-manager/rango-preset/src/helpers.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/queue-manager/rango-preset/src/helpers.ts b/queue-manager/rango-preset/src/helpers.ts index e4dc6f5cc0..3defed6c31 100644 --- a/queue-manager/rango-preset/src/helpers.ts +++ b/queue-manager/rango-preset/src/helpers.ts @@ -1798,6 +1798,9 @@ export function cancelSwap( getStorage: swap.actions.getStorage, setStorage: swap.actions.setStorage, message: 'Swap canceled by user.', + details: + "Warning: If you've already signed and sent a transaction, it won't be affected, but next swap steps will not be executed.", + nextStatus: 'failed', nextStepStatus: 'failed', errorCode: 'USER_CANCEL', }); From 8ec0483d77fb865fc8f1afb374bfb59b5bba7b0f Mon Sep 17 00:00:00 2001 From: samobasquiat Date: Tue, 25 Apr 2023 15:09:46 +0000 Subject: [PATCH 003/769] fix cancelswap for changing-network parallels --- queue-manager/rango-preset/src/helpers.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/queue-manager/rango-preset/src/helpers.ts b/queue-manager/rango-preset/src/helpers.ts index 3defed6c31..33d5784c0e 100644 --- a/queue-manager/rango-preset/src/helpers.ts +++ b/queue-manager/rango-preset/src/helpers.ts @@ -1630,12 +1630,7 @@ function retryWaitingForOtherQueues(manager: Manager) { const isAnyDependsOnOtherQueues = Object.keys(q.list.state.tasks).find( (taskId) => { const task = q.list.state.tasks[taskId]; - return ( - q.status === Status.BLOCKED && - [BlockReason.DEPENDS_ON_OTHER_QUEUES].includes( - task.blockedFor?.reason - ) - ); + return q.status === Status.BLOCKED && task.status === Status.BLOCKED; } ); if (isAnyDependsOnOtherQueues && !foundFirstBlockedQueue) { From 541e8cb48ccfb80bf39ec36839ad4ecbd0d53a9d Mon Sep 17 00:00:00 2001 From: samobasquiat Date: Wed, 26 Apr 2023 05:17:01 +0000 Subject: [PATCH 004/769] use manager retry function instead of writing a new one --- queue-manager/rango-preset/src/helpers.ts | 26 +---------------------- 1 file changed, 1 insertion(+), 25 deletions(-) diff --git a/queue-manager/rango-preset/src/helpers.ts b/queue-manager/rango-preset/src/helpers.ts index 33d5784c0e..5af8b809df 100644 --- a/queue-manager/rango-preset/src/helpers.ts +++ b/queue-manager/rango-preset/src/helpers.ts @@ -1620,30 +1620,6 @@ export function getRunningSwaps(manager: Manager): PendingSwap[] { return result; } -/** - * If found any blocked tasks that is depended for other queues, runs it. - * @param manager - */ -function retryWaitingForOtherQueues(manager: Manager) { - let foundFirstBlockedQueue = false; - manager?.getAll().forEach((q) => { - const isAnyDependsOnOtherQueues = Object.keys(q.list.state.tasks).find( - (taskId) => { - const task = q.list.state.tasks[taskId]; - return q.status === Status.BLOCKED && task.status === Status.BLOCKED; - } - ); - if (isAnyDependsOnOtherQueues && !foundFirstBlockedQueue) { - foundFirstBlockedQueue = true; - const swap = q.list.getStorage() - ?.swapDetails as SwapStorage['swapDetails']; - if (swap.status === 'running') { - q.list.checkBlock(); - } - } - }); -} - /** * * Trying to reset notifications for pending swaps to correct message on page load. @@ -1800,7 +1776,7 @@ export function cancelSwap( errorCode: 'USER_CANCEL', }); reset(); - if (manager) retryWaitingForOtherQueues(manager); + if (manager) manager?.retry(); return updateResult; } From c8a0f66373ce20820bcb783a86ab9b46d8f98895 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 26 Apr 2023 10:07:37 +0000 Subject: [PATCH 005/769] chore(release): publish - queue-manager-rango-preset@0.1.12-next.2 Affected packages: queue-manager-rango-preset@0.1.12-next.2 --- queue-manager/rango-preset/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/queue-manager/rango-preset/package.json b/queue-manager/rango-preset/package.json index e7c8d101a3..0e40159c03 100644 --- a/queue-manager/rango-preset/package.json +++ b/queue-manager/rango-preset/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/queue-manager-rango-preset", - "version": "0.1.12-next.1", + "version": "0.1.12-next.2", "license": "MIT", "module": "dist/queue-manager-rango-preset.esm.js", "main": "dist/index.js", From e7844001a74bf4f5fa0791a34fa7d0c7ffd46863 Mon Sep 17 00:00:00 2001 From: mikasackermn Date: Wed, 19 Apr 2023 12:45:36 +0000 Subject: [PATCH 006/769] refetch wallet balance after every transaction (cherry picked from commit 9cda27fb462be4b87ce6b17b47c92bdb1b5c2087) --- widget/embedded/src/QueueManager.tsx | 25 +++++++++++-- widget/embedded/src/store/wallets.ts | 56 +++++++++++++++------------- 2 files changed, 53 insertions(+), 28 deletions(-) diff --git a/widget/embedded/src/QueueManager.tsx b/widget/embedded/src/QueueManager.tsx index 3643b4853b..eee0f38835 100644 --- a/widget/embedded/src/QueueManager.tsx +++ b/widget/embedded/src/QueueManager.tsx @@ -4,6 +4,8 @@ import { makeQueueDefinition, SwapQueueContext, checkWaitingForNetworkChange, + EventType, + SwapProgressNotification, } from '@rango-dev/queue-manager-rango-preset'; import { useWallets } from '@rango-dev/wallets-core'; import { @@ -32,6 +34,9 @@ function QueueManager(props: PropsWithChildren<{}>) { API_KEY: getConfig('API_KEY'), }); }, []); + const getOneOFWalletsDetails = useWalletsStore.use.getOneOFWalletsDetails(); + const accounts = useWalletsStore.use.accounts(); + const { blockchains } = useMetaStore.use.meta(); const balances = useWalletsStore.use.balances(); @@ -64,6 +69,22 @@ function QueueManager(props: PropsWithChildren<{}>) { return walletAndSupportedChainsNames(supportedChains); }; const allProviders = providers(); + const notifier = (data: SwapProgressNotification) => { + if ( + data.eventType === 'contract_confirmed' || + data.eventType === 'task_completed' + ) { + const fromAccount = accounts.find( + (account) => account.chain === data.swap?.steps[0].fromBlockchain + ); + const toAccount = + data.swap?.steps[0].fromBlockchain !== data.step?.toBlockchain && + accounts.find((account) => account.chain === data.step?.toBlockchain); + + fromAccount && getOneOFWalletsDetails(fromAccount); + toAccount && getOneOFWalletsDetails(toAccount); + } + }; const context: SwapQueueContext = { meta: { blockchains: allBlockchains, @@ -80,9 +101,7 @@ function QueueManager(props: PropsWithChildren<{}>) { switchNetwork, connect, state, - notifier: (message) => { - console.log('[notifier]', message); - }, + notifier, }; return ( diff --git a/widget/embedded/src/store/wallets.ts b/widget/embedded/src/store/wallets.ts index 061634136b..fe39a43ad3 100644 --- a/widget/embedded/src/store/wallets.ts +++ b/widget/embedded/src/store/wallets.ts @@ -54,6 +54,7 @@ interface WalletsStore { initSelectedWallets: () => void; setSelectedWallet: (wallet: SelectableWallet) => void; clearConnectedWallet: () => void; + getOneOFWalletsDetails: (account: Account) => void; } export const useWalletsStore = createSelectors( @@ -63,8 +64,8 @@ export const useWalletsStore = createSelectors( balances: [], selectedWallets: [], connectWallet: (accounts) => { - const tokens = useMetaStore.getState().meta.tokens; - + const getOneOFWalletsDetails = + useWalletsStore.getState().getOneOFWalletsDetails; set((state) => ({ accounts: state.accounts.concat(accounts), balances: state.balances.concat( @@ -80,29 +81,7 @@ export const useWalletsStore = createSelectors( ), })); accounts.forEach(async (account) => { - try { - const response = await httpService().getWalletsDetails([ - { address: account.address, blockchain: account.chain }, - ]); - const retrivedBalance = response.wallets[0]; - if (retrivedBalance) { - set((state) => ({ - balances: state.balances.map((balance) => { - return isAccountAndBalanceMatched(account, balance) - ? makeBalanceFor(account, retrivedBalance, tokens) - : balance; - }), - })); - } else throw new Error('Wallet not found'); - } catch (error) { - set((state) => ({ - balances: state.balances.map((balance) => { - return isAccountAndBalanceMatched(account, balance) - ? resetBalanceState(balance) - : balance; - }), - })); - } + await getOneOFWalletsDetails(account); }); }, disconnectWallet: (walletType) => { @@ -162,6 +141,33 @@ export const useWalletsStore = createSelectors( balances: [], selectedWallets: [], })), + getOneOFWalletsDetails: async (account: Account) => { + const tokens = useMetaStore.getState().meta.tokens; + + try { + const response = await httpService().getWalletsDetails([ + { address: account.address, blockchain: account.chain }, + ]); + const retrivedBalance = response.wallets[0]; + if (retrivedBalance) { + set((state) => ({ + balances: state.balances.map((balance) => { + return isAccountAndBalanceMatched(account, balance) + ? makeBalanceFor(account, retrivedBalance, tokens) + : balance; + }), + })); + } else throw new Error('Wallet not found'); + } catch (error) { + set((state) => ({ + balances: state.balances.map((balance) => { + return isAccountAndBalanceMatched(account, balance) + ? resetBalanceState(balance) + : balance; + }), + })); + } + }, })) ) ); From cc9793e5ec2213c65cd89e2f88abbe9e56f74646 Mon Sep 17 00:00:00 2001 From: mikasackermn Date: Wed, 19 Apr 2023 15:50:40 +0000 Subject: [PATCH 007/769] Fixed problems (cherry picked from commit a85e4c5d98ef59772607c2fcf6218bac143bae01) --- widget/embedded/src/QueueManager.tsx | 17 ++++++++++++----- widget/embedded/src/store/wallets.ts | 17 +++++++++++------ 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/widget/embedded/src/QueueManager.tsx b/widget/embedded/src/QueueManager.tsx index eee0f38835..b8ae7ccae9 100644 --- a/widget/embedded/src/QueueManager.tsx +++ b/widget/embedded/src/QueueManager.tsx @@ -70,21 +70,28 @@ function QueueManager(props: PropsWithChildren<{}>) { }; const allProviders = providers(); const notifier = (data: SwapProgressNotification) => { + const lastStep = data.swap?.steps[data.swap.steps.length - 1]; + const outputAmount = data.step?.outputAmount || ''; + const step = data.step || lastStep; + if ( - data.eventType === 'contract_confirmed' || - data.eventType === 'task_completed' + data.eventType === 'task_completed' || + (data.eventType === 'step_completed_with_output' && + lastStep?.id !== data.step?.id) || + !!outputAmount ) { const fromAccount = accounts.find( - (account) => account.chain === data.swap?.steps[0].fromBlockchain + (account) => account.chain === step?.fromBlockchain ); const toAccount = - data.swap?.steps[0].fromBlockchain !== data.step?.toBlockchain && - accounts.find((account) => account.chain === data.step?.toBlockchain); + step?.fromBlockchain !== step?.toBlockchain && + accounts.find((account) => account.chain === step?.toBlockchain); fromAccount && getOneOFWalletsDetails(fromAccount); toAccount && getOneOFWalletsDetails(toAccount); } }; + const context: SwapQueueContext = { meta: { blockchains: allBlockchains, diff --git a/widget/embedded/src/store/wallets.ts b/widget/embedded/src/store/wallets.ts index fe39a43ad3..68d5957fb7 100644 --- a/widget/embedded/src/store/wallets.ts +++ b/widget/embedded/src/store/wallets.ts @@ -59,13 +59,12 @@ interface WalletsStore { export const useWalletsStore = createSelectors( create()( - subscribeWithSelector((set) => ({ + subscribeWithSelector((set, get) => ({ accounts: [], balances: [], selectedWallets: [], connectWallet: (accounts) => { - const getOneOFWalletsDetails = - useWalletsStore.getState().getOneOFWalletsDetails; + const getOneOFWalletsDetails = get().getOneOFWalletsDetails; set((state) => ({ accounts: state.accounts.concat(accounts), balances: state.balances.concat( @@ -80,9 +79,7 @@ export const useWalletsStore = createSelectors( })) ), })); - accounts.forEach(async (account) => { - await getOneOFWalletsDetails(account); - }); + accounts.forEach(async (account) => getOneOFWalletsDetails(account)); }, disconnectWallet: (walletType) => { set((state) => ({ @@ -145,6 +142,14 @@ export const useWalletsStore = createSelectors( const tokens = useMetaStore.getState().meta.tokens; try { + set((state) => ({ + balances: state.balances.map((balance) => { + return balance.address === account.address && + balance.chain === account.chain + ? { ...balance, loading: true } + : balance; + }), + })); const response = await httpService().getWalletsDetails([ { address: account.address, blockchain: account.chain }, ]); From 1537b71a0aa605730e064f838929af199787ac79 Mon Sep 17 00:00:00 2001 From: mikasackermn Date: Wed, 26 Apr 2023 10:35:19 +0000 Subject: [PATCH 008/769] update --- widget/embedded/src/QueueManager.tsx | 6 +++--- widget/embedded/src/store/wallets.ts | 25 ++++++++++++------------- 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/widget/embedded/src/QueueManager.tsx b/widget/embedded/src/QueueManager.tsx index b8ae7ccae9..60c27c43b5 100644 --- a/widget/embedded/src/QueueManager.tsx +++ b/widget/embedded/src/QueueManager.tsx @@ -34,7 +34,7 @@ function QueueManager(props: PropsWithChildren<{}>) { API_KEY: getConfig('API_KEY'), }); }, []); - const getOneOFWalletsDetails = useWalletsStore.use.getOneOFWalletsDetails(); + const getOneOfWalletsDetails = useWalletsStore.use.getOneOfWalletsDetails(); const accounts = useWalletsStore.use.accounts(); const { blockchains } = useMetaStore.use.meta(); @@ -87,8 +87,8 @@ function QueueManager(props: PropsWithChildren<{}>) { step?.fromBlockchain !== step?.toBlockchain && accounts.find((account) => account.chain === step?.toBlockchain); - fromAccount && getOneOFWalletsDetails(fromAccount); - toAccount && getOneOFWalletsDetails(toAccount); + fromAccount && getOneOfWalletsDetails(fromAccount); + toAccount && getOneOfWalletsDetails(toAccount); } }; diff --git a/widget/embedded/src/store/wallets.ts b/widget/embedded/src/store/wallets.ts index 68d5957fb7..ba574c94d2 100644 --- a/widget/embedded/src/store/wallets.ts +++ b/widget/embedded/src/store/wallets.ts @@ -54,7 +54,7 @@ interface WalletsStore { initSelectedWallets: () => void; setSelectedWallet: (wallet: SelectableWallet) => void; clearConnectedWallet: () => void; - getOneOFWalletsDetails: (account: Account) => void; + getOneOfWalletsDetails: (account: Account) => void; } export const useWalletsStore = createSelectors( @@ -64,7 +64,7 @@ export const useWalletsStore = createSelectors( balances: [], selectedWallets: [], connectWallet: (accounts) => { - const getOneOFWalletsDetails = get().getOneOFWalletsDetails; + const getOneOfWalletsDetails = get().getOneOfWalletsDetails; set((state) => ({ accounts: state.accounts.concat(accounts), balances: state.balances.concat( @@ -79,7 +79,7 @@ export const useWalletsStore = createSelectors( })) ), })); - accounts.forEach(async (account) => getOneOFWalletsDetails(account)); + accounts.forEach(async (account) => getOneOfWalletsDetails(account)); }, disconnectWallet: (walletType) => { set((state) => ({ @@ -138,18 +138,17 @@ export const useWalletsStore = createSelectors( balances: [], selectedWallets: [], })), - getOneOFWalletsDetails: async (account: Account) => { + getOneOfWalletsDetails: async (account: Account) => { const tokens = useMetaStore.getState().meta.tokens; - + set((state) => ({ + balances: state.balances.map((balance) => { + return balance.address === account.address && + balance.chain === account.chain + ? { ...balance, loading: true } + : balance; + }), + })); try { - set((state) => ({ - balances: state.balances.map((balance) => { - return balance.address === account.address && - balance.chain === account.chain - ? { ...balance, loading: true } - : balance; - }), - })); const response = await httpService().getWalletsDetails([ { address: account.address, blockchain: account.chain }, ]); From bec3c45ca2eacca6e404fec23e95c3361462ceea Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 26 Apr 2023 10:46:24 +0000 Subject: [PATCH 009/769] chore(release): publish - widget-embedded@0.1.13-next.1 Affected packages: widget-embedded@0.1.13-next.1 --- widget/embedded/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/widget/embedded/package.json b/widget/embedded/package.json index 6c04d3c713..8d0ad8ec68 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.1.13-next.0", + "version": "0.1.13-next.1", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", From 68ba4fce90eee4c0ae2c105053316c1ebad143dc Mon Sep 17 00:00:00 2001 From: mikasackermn Date: Mon, 24 Apr 2023 05:58:21 +0000 Subject: [PATCH 010/769] export widget config for playground (cherry picked from commit 565a8645e11153c82a975b6402aeef64627438de) --- widget/playground/src/containers/Config.tsx | 48 +++++++++++++++++-- .../playground/src/hook/useCopyToClipboard.ts | 23 +++++++++ 2 files changed, 68 insertions(+), 3 deletions(-) create mode 100644 widget/playground/src/hook/useCopyToClipboard.ts diff --git a/widget/playground/src/containers/Config.tsx b/widget/playground/src/containers/Config.tsx index 73c0496cbb..20fbd644fc 100644 --- a/widget/playground/src/containers/Config.tsx +++ b/widget/playground/src/containers/Config.tsx @@ -1,5 +1,5 @@ -import React, { PropsWithChildren } from 'react'; -import { Alert, Spacer, styled, Typography } from '@rango-dev/ui'; +import React, { PropsWithChildren, useState } from 'react'; +import { Alert, Button, Modal, Spacer, styled, Typography } from '@rango-dev/ui'; import { ChainsConfig } from '../components/ChainsConfig'; import { WalletsConfig } from '../components/WalletsConfig'; import { SourcesConfig } from '../components/SourcesConfig'; @@ -8,6 +8,8 @@ import { Provider } from '@rango-dev/wallets-core'; import { allProviders } from '@rango-dev/provider-all'; import { globalStyles } from '../globalStyles'; import { useMetaStore } from '../store/meta'; +import { useConfigStore } from '../store/config'; +import useCopyToClipboard from '../hook/useCopyToClipboard'; const providers = allProviders(); @@ -32,16 +34,38 @@ const Swap = styled('div', { marginTop: 115, }); +const Header = styled('div', { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', +}); + +const Pre = styled('pre', { + fontSize: '$14', + display: 'block', + padding: '10px 30px', + margin: 0, + overflowY: 'scroll', +}); + export function Config(props: PropsWithChildren) { globalStyles(); const loadingStatus = useMetaStore.use.loadingStatus(); + const [open, setOpen] = useState(false); + const config = useConfigStore.use.config(); + const [isCopied, handleCopy] = useCopyToClipboard(2000); return (
- Configuration +
+ Configuration + +
{loadingStatus === 'failed' && ( Error connecting server, please reload the app and try again @@ -64,6 +88,24 @@ export function Config(props: PropsWithChildren) { {props.children} + + handleCopy(JSON.stringify(config))}> + {isCopied ? 'Copied!' : 'Copy'} + + } + onClose={() => setOpen(false)} + content={ + <> +
+ 
 {JSON.stringify(config, null, 2)}
{' '} + + } + title="Export Widget Config" + containerStyle={{ width: '560px', height: '500px' }} + /> ); } diff --git a/widget/playground/src/hook/useCopyToClipboard.ts b/widget/playground/src/hook/useCopyToClipboard.ts new file mode 100644 index 0000000000..af15182aaf --- /dev/null +++ b/widget/playground/src/hook/useCopyToClipboard.ts @@ -0,0 +1,23 @@ +import React from 'react'; +import copy from 'copy-to-clipboard'; + +export default function useCopyToClipboard(resetInterval?: number) { + const [isCopied, setCopied] = React.useState(false); + + const handleCopy = React.useCallback((text: string | number) => { + copy(text.toString()); + setCopied(true); + }, []); + + React.useEffect(() => { + let timeout: NodeJS.Timeout; + if (isCopied && resetInterval) { + timeout = setTimeout(() => setCopied(false), resetInterval); + } + return () => { + clearTimeout(timeout); + }; + }, [isCopied, resetInterval]); + + return [isCopied, handleCopy] as const; +} From 0c4ec0c27d06c3914d56b834fe8ec8ecd6cd702c Mon Sep 17 00:00:00 2001 From: mikasackermn Date: Mon, 24 Apr 2023 09:02:33 +0000 Subject: [PATCH 011/769] Fixed configuration modal bug in the dark modal and move useCopyToClipboard to ui (cherry picked from commit 872924be03999ee9caeb9a2eddb4c28531b73700) --- widget/embedded/src/index.tsx | 2 +- widget/embedded/src/pages/SwapDetailsPage.tsx | 3 +-- widget/playground/src/containers/Config.tsx | 4 ++-- widget/playground/src/helpers.ts | 2 -- .../playground/src/hook/useCopyToClipboard.ts | 23 ------------------- widget/ui/src/hooks/index.ts | 1 + .../src/hooks/useCopyToClipboard.ts | 2 +- widget/ui/src/index.ts | 1 + 8 files changed, 7 insertions(+), 31 deletions(-) delete mode 100644 widget/playground/src/hook/useCopyToClipboard.ts create mode 100644 widget/ui/src/hooks/index.ts rename widget/{embedded => ui}/src/hooks/useCopyToClipboard.ts (88%) diff --git a/widget/embedded/src/index.tsx b/widget/embedded/src/index.tsx index 001fba290f..3a2890fea0 100644 --- a/widget/embedded/src/index.tsx +++ b/widget/embedded/src/index.tsx @@ -11,4 +11,4 @@ root.render( ); -export { Widget } from './lib'; +export { Widget } from './lib'; \ No newline at end of file diff --git a/widget/embedded/src/pages/SwapDetailsPage.tsx b/widget/embedded/src/pages/SwapDetailsPage.tsx index 191a2b2af4..1470a4cd13 100644 --- a/widget/embedded/src/pages/SwapDetailsPage.tsx +++ b/widget/embedded/src/pages/SwapDetailsPage.tsx @@ -1,10 +1,9 @@ import React from 'react'; import { navigationRoutes } from '../constants/navigationRoutes'; -import useCopyToClipboard from '../hooks/useCopyToClipboard'; import { useManager } from '@rango-dev/queue-manager-react'; import { useNavigateBack } from '../hooks/useNavigateBack'; import { getPendingSwaps } from '../utils/queue'; -import { SwapHistory } from '@rango-dev/ui'; +import { SwapHistory, useCopyToClipboard } from '@rango-dev/ui'; import { useUiStore } from '../store/ui'; import { cancelSwap, diff --git a/widget/playground/src/containers/Config.tsx b/widget/playground/src/containers/Config.tsx index 20fbd644fc..bb9c2b1ac2 100644 --- a/widget/playground/src/containers/Config.tsx +++ b/widget/playground/src/containers/Config.tsx @@ -1,5 +1,5 @@ import React, { PropsWithChildren, useState } from 'react'; -import { Alert, Button, Modal, Spacer, styled, Typography } from '@rango-dev/ui'; +import { Alert, Button, Modal, Spacer, styled, Typography, useCopyToClipboard } from '@rango-dev/ui'; import { ChainsConfig } from '../components/ChainsConfig'; import { WalletsConfig } from '../components/WalletsConfig'; import { SourcesConfig } from '../components/SourcesConfig'; @@ -9,7 +9,6 @@ import { allProviders } from '@rango-dev/provider-all'; import { globalStyles } from '../globalStyles'; import { useMetaStore } from '../store/meta'; import { useConfigStore } from '../store/config'; -import useCopyToClipboard from '../hook/useCopyToClipboard'; const providers = allProviders(); @@ -46,6 +45,7 @@ const Pre = styled('pre', { padding: '10px 30px', margin: 0, overflowY: 'scroll', + color:"$foreground" }); export function Config(props: PropsWithChildren) { diff --git a/widget/playground/src/helpers.ts b/widget/playground/src/helpers.ts index e1a5231da0..8933a1056f 100644 --- a/widget/playground/src/helpers.ts +++ b/widget/playground/src/helpers.ts @@ -4,8 +4,6 @@ import { Asset, Token } from 'rango-sdk'; export const excludedWallets = [WalletType.UNKNOWN, WalletType.TERRA_STATION, WalletType.LEAP]; export const onChangeMultiSelects = (value, values, list, findIndex) => { - console.log(value); - if (value === 'empty') return []; else if (value === 'all') return null; if (!values) { diff --git a/widget/playground/src/hook/useCopyToClipboard.ts b/widget/playground/src/hook/useCopyToClipboard.ts deleted file mode 100644 index af15182aaf..0000000000 --- a/widget/playground/src/hook/useCopyToClipboard.ts +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import copy from 'copy-to-clipboard'; - -export default function useCopyToClipboard(resetInterval?: number) { - const [isCopied, setCopied] = React.useState(false); - - const handleCopy = React.useCallback((text: string | number) => { - copy(text.toString()); - setCopied(true); - }, []); - - React.useEffect(() => { - let timeout: NodeJS.Timeout; - if (isCopied && resetInterval) { - timeout = setTimeout(() => setCopied(false), resetInterval); - } - return () => { - clearTimeout(timeout); - }; - }, [isCopied, resetInterval]); - - return [isCopied, handleCopy] as const; -} diff --git a/widget/ui/src/hooks/index.ts b/widget/ui/src/hooks/index.ts new file mode 100644 index 0000000000..49841526aa --- /dev/null +++ b/widget/ui/src/hooks/index.ts @@ -0,0 +1 @@ +export { useCopyToClipboard } from './useCopyToClipboard'; diff --git a/widget/embedded/src/hooks/useCopyToClipboard.ts b/widget/ui/src/hooks/useCopyToClipboard.ts similarity index 88% rename from widget/embedded/src/hooks/useCopyToClipboard.ts rename to widget/ui/src/hooks/useCopyToClipboard.ts index af15182aaf..fb718b22f3 100644 --- a/widget/embedded/src/hooks/useCopyToClipboard.ts +++ b/widget/ui/src/hooks/useCopyToClipboard.ts @@ -1,7 +1,7 @@ import React from 'react'; import copy from 'copy-to-clipboard'; -export default function useCopyToClipboard(resetInterval?: number) { +export function useCopyToClipboard(resetInterval?: number) { const [isCopied, setCopied] = React.useState(false); const handleCopy = React.useCallback((text: string | number) => { diff --git a/widget/ui/src/index.ts b/widget/ui/src/index.ts index 75b8e56c9e..cbaf9551ac 100644 --- a/widget/ui/src/index.ts +++ b/widget/ui/src/index.ts @@ -2,3 +2,4 @@ export * from './components'; export * from './containers'; export * from './theme'; export * from './types'; +export * from './hooks'; From 41d56fed92f913be6913406628c69a2161c45115 Mon Sep 17 00:00:00 2001 From: mikasackermn Date: Mon, 24 Apr 2023 09:59:45 +0000 Subject: [PATCH 012/769] update (cherry picked from commit 766406f41b992a10db2473ee11fc004320cf1a7c) --- widget/playground/src/containers/Config.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/widget/playground/src/containers/Config.tsx b/widget/playground/src/containers/Config.tsx index bb9c2b1ac2..3bfdda3978 100644 --- a/widget/playground/src/containers/Config.tsx +++ b/widget/playground/src/containers/Config.tsx @@ -100,7 +100,7 @@ export function Config(props: PropsWithChildren) { content={ <>
- 
 {JSON.stringify(config, null, 2)}
{' '} + 
 {JSON.stringify(config, null, 2)}
} title="Export Widget Config" From 093e7820482cb467d924db60e4fd75e540ead653 Mon Sep 17 00:00:00 2001 From: mikasackermn Date: Mon, 24 Apr 2023 20:42:08 +0000 Subject: [PATCH 013/769] Added highlighter to Exported Config (cherry picked from commit 6a3ecc7a8c3173aee8ac3aff445d107a38039bcd) --- widget/playground/src/containers/Config.tsx | 51 ++++++++++++++++--- widget/playground/src/helpers.ts | 35 +++++++++++++ .../ui/src/components/Icon/ArrowRightIcon.tsx | 6 +-- .../src/components/Icon/ChevronRightIcon.tsx | 6 +-- .../ui/src/components/Icon/DisconnectIcon.tsx | 6 +-- widget/ui/src/components/Icon/HistoryIcon.tsx | 6 +-- widget/ui/src/components/Icon/RetryIcon.tsx | 6 +-- widget/ui/src/components/Icon/SettingIcon.tsx | 6 +-- 8 files changed, 97 insertions(+), 25 deletions(-) diff --git a/widget/playground/src/containers/Config.tsx b/widget/playground/src/containers/Config.tsx index 3bfdda3978..3ca8c5a7bf 100644 --- a/widget/playground/src/containers/Config.tsx +++ b/widget/playground/src/containers/Config.tsx @@ -1,5 +1,13 @@ import React, { PropsWithChildren, useState } from 'react'; -import { Alert, Button, Modal, Spacer, styled, Typography, useCopyToClipboard } from '@rango-dev/ui'; +import { + Alert, + Button, + Modal, + Spacer, + styled, + Typography, + useCopyToClipboard, +} from '@rango-dev/ui'; import { ChainsConfig } from '../components/ChainsConfig'; import { WalletsConfig } from '../components/WalletsConfig'; import { SourcesConfig } from '../components/SourcesConfig'; @@ -9,6 +17,7 @@ import { allProviders } from '@rango-dev/provider-all'; import { globalStyles } from '../globalStyles'; import { useMetaStore } from '../store/meta'; import { useConfigStore } from '../store/config'; +import { filterConfig, syntaxHighlight } from '../helpers'; const providers = allProviders(); @@ -45,7 +54,17 @@ const Pre = styled('pre', { padding: '10px 30px', margin: 0, overflowY: 'scroll', - color:"$foreground" + color: '$foreground', + '.string': { + color: '$warning', + }, + '.key': { + color: '$success', + }, +}); + +const Link = styled('a', { + color: '$primary', }); export function Config(props: PropsWithChildren) { @@ -55,6 +74,8 @@ export function Config(props: PropsWithChildren) { const config = useConfigStore.use.config(); const [isCopied, handleCopy] = useCopyToClipboard(2000); + const filtered = filterConfig(config); + return ( @@ -63,7 +84,7 @@ export function Config(props: PropsWithChildren) {
Configuration
{loadingStatus === 'failed' && ( @@ -92,7 +113,10 @@ export function Config(props: PropsWithChildren) { handleCopy(JSON.stringify(config))}> + } @@ -100,11 +124,24 @@ export function Config(props: PropsWithChildren) { content={ <>
- 
 {JSON.stringify(config, null, 2)}
+ + See full instruction on{' '} + + docs.rango.exchange + + + + 
           
         }
-        title="Export Widget Config"
-        containerStyle={{ width: '560px', height: '500px' }}
+        title="Exported Config"
+        containerStyle={{ minWidth: '600px', height: '500px' }}
       />
     
   );
diff --git a/widget/playground/src/helpers.ts b/widget/playground/src/helpers.ts
index 8933a1056f..4bc1a04b78 100644
--- a/widget/playground/src/helpers.ts
+++ b/widget/playground/src/helpers.ts
@@ -1,5 +1,6 @@
 import { WalletType } from '@rango-dev/wallets-shared';
 import { Asset, Token } from 'rango-sdk';
+import { WidgetConfig } from './types';
 
 export const excludedWallets = [WalletType.UNKNOWN, WalletType.TERRA_STATION, WalletType.LEAP];
 
@@ -39,3 +40,37 @@ export const filterTokens = (list: Token[], searchedFor: string) =>
       containsText(token.address || '', searchedFor) ||
       containsText(token.name || '', searchedFor),
   );
+
+export const syntaxHighlight = (json) => {
+  json = json.replace(/&/g, '&').replace(//g, '>');
+  return json.replace(
+    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
+    function (match) {
+      var cls = 'string';
+      if (/^"/.test(match)) {
+        if (/:$/.test(match)) {
+          cls = 'key';
+        }
+      }
+      return `${match}`;
+    },
+  );
+};
+
+export const filterObject = (object) => {
+  return Object.fromEntries(
+    Object.entries(object).filter(([key, value]) => key !== 'apiKey' && !!value),
+  );
+};
+
+export const filterConfig = (config) => {
+  const obj = { ...config };
+  if (!Object.keys(filterObject(config.to)).length) {
+    obj.to = undefined;
+  }
+  if (!Object.keys(filterObject(config.from)).length) {
+    obj.from = undefined;
+  }
+
+  return { ...filterObject(obj), theme: filterObject(obj.theme) };
+};
diff --git a/widget/ui/src/components/Icon/ArrowRightIcon.tsx b/widget/ui/src/components/Icon/ArrowRightIcon.tsx
index 7d2683f9ea..b89e293abb 100644
--- a/widget/ui/src/components/Icon/ArrowRightIcon.tsx
+++ b/widget/ui/src/components/Icon/ArrowRightIcon.tsx
@@ -15,9 +15,9 @@ export const ArrowRightIcon: React.FC = ({
       color={color}
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
       {...props}
diff --git a/widget/ui/src/components/Icon/ChevronRightIcon.tsx b/widget/ui/src/components/Icon/ChevronRightIcon.tsx
index 54d64623a9..0ceb3b8f97 100644
--- a/widget/ui/src/components/Icon/ChevronRightIcon.tsx
+++ b/widget/ui/src/components/Icon/ChevronRightIcon.tsx
@@ -13,9 +13,9 @@ export const ChevronRightIcon = React.forwardRef(
         viewBox={`0 0 24 24`}
         fill="none"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
         className="_icon"
         {...props}
         ref={forwardedRef}
diff --git a/widget/ui/src/components/Icon/DisconnectIcon.tsx b/widget/ui/src/components/Icon/DisconnectIcon.tsx
index 61d849121f..4b9ded8c38 100644
--- a/widget/ui/src/components/Icon/DisconnectIcon.tsx
+++ b/widget/ui/src/components/Icon/DisconnectIcon.tsx
@@ -13,9 +13,9 @@ export const DisconnectIcon = React.forwardRef(
         viewBox={`0 0 24 24`}
         fill="none"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
         className="_icon"
         {...props}
         ref={forwardedRef}
diff --git a/widget/ui/src/components/Icon/HistoryIcon.tsx b/widget/ui/src/components/Icon/HistoryIcon.tsx
index fa07c4fc3b..22dabec5fd 100644
--- a/widget/ui/src/components/Icon/HistoryIcon.tsx
+++ b/widget/ui/src/components/Icon/HistoryIcon.tsx
@@ -15,9 +15,9 @@ export const HistoryIcon: React.FC = ({
       color={color}
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
       {...props}
diff --git a/widget/ui/src/components/Icon/RetryIcon.tsx b/widget/ui/src/components/Icon/RetryIcon.tsx
index 39949c5307..a71d0fc8fc 100644
--- a/widget/ui/src/components/Icon/RetryIcon.tsx
+++ b/widget/ui/src/components/Icon/RetryIcon.tsx
@@ -13,9 +13,9 @@ export const RetryIcon = React.forwardRef(
         viewBox={`0 0 24 24`}
         fill="none"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
         className="_icon"
         {...props}
         ref={forwardedRef}
diff --git a/widget/ui/src/components/Icon/SettingIcon.tsx b/widget/ui/src/components/Icon/SettingIcon.tsx
index 1afdac7a48..5c6bfde078 100644
--- a/widget/ui/src/components/Icon/SettingIcon.tsx
+++ b/widget/ui/src/components/Icon/SettingIcon.tsx
@@ -14,9 +14,9 @@ export const SettingsIcon: React.FC = ({
       viewBox="0 0 24 24"
       color={color}
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"

From 5bc9ccf1a001829eca43e168b4add86aa0a50f44 Mon Sep 17 00:00:00 2001
From: mikasackermn 
Date: Wed, 26 Apr 2023 10:14:33 +0000
Subject: [PATCH 014/769] Fixed exported default config

---
 widget/playground/src/components/Select.tsx   |  8 +++---
 .../src/components/StylesConfig.tsx           |  8 +++---
 .../playground/src/components/TokenInfo.tsx   |  1 +
 widget/playground/src/containers/Config.tsx   |  5 ++--
 widget/playground/src/helpers.ts              | 27 ++++++++++---------
 widget/playground/src/store/config.ts         | 26 +++++++++---------
 widget/playground/src/types.ts                | 14 +++++-----
 7 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/widget/playground/src/components/Select.tsx b/widget/playground/src/components/Select.tsx
index 9851237ecc..3ebe34db66 100644
--- a/widget/playground/src/components/Select.tsx
+++ b/widget/playground/src/components/Select.tsx
@@ -40,7 +40,6 @@ const Label = styled('label', {
 export function Select({ label, value, onChange, modalTitle, list, name }: PropTypes) {
   const [open, setOpen] = useState(false);
   const search = list.find((item) => item.value === value);
-
   return (
     

       
@@ -53,7 +52,7 @@ export function Select({ label, value, onChange, modalTitle, list, name }: PropT
         fullWidth
         align="start"
         size="large">
-        {search?.name}
+        {search?.name || value}
       
 
       }
                     suffix={item.value === value ?  : undefined}
                     align="start"
-                    onClick={() => onChange(name, item.value)}
+                    onClick={() => {
+                      setOpen(false);
+                      onChange(name, item.value);
+                    }}
                     key={index}>
                     {item.name}
                   
diff --git a/widget/playground/src/components/StylesConfig.tsx b/widget/playground/src/components/StylesConfig.tsx
index 44eb83c1af..4037c5bc29 100644
--- a/widget/playground/src/components/StylesConfig.tsx
+++ b/widget/playground/src/components/StylesConfig.tsx
@@ -81,6 +81,7 @@ export function StylesConfig() {
   const onChangeColors = useConfigStore.use.onChangeColors();
 
   const [checkedTheme, setChekedTheme] = useState(true);
+
   return (
     

       Style
@@ -90,7 +91,7 @@ export function StylesConfig() {
         
           
 
            onChangelanguage(value)}
-          />
+          /> */}
 
           
-              
+              
               
-              
+              
               
                 Light
               
@@ -345,10 +344,10 @@ export function StylesConfig() {
             />
           

         */}
-        
+        
 
         

-        
+        
 
          {
@@ -358,8 +357,7 @@ export function StylesConfig() {
           label="Single Theme"
           checked={singleTheme}
         />
-        
-
+        
         
           {!(singleTheme && mode === 'dark') && (
             
           ))}
         
-        
+        
 
         
           {COLORS.map((color) => (
@@ -448,8 +446,7 @@ export function StylesConfig() {
             />
           ))}
         
-        
-        
+        
       
     

   );
diff --git a/widget/playground/src/containers/Config.tsx b/widget/playground/src/containers/Config.tsx
index d55c911dc3..91b3057c05 100644
--- a/widget/playground/src/containers/Config.tsx
+++ b/widget/playground/src/containers/Config.tsx
@@ -2,9 +2,8 @@ import React, { PropsWithChildren, useState } from 'react';
 import {
   Alert,
   Button,
-  Divider,
   Modal,
-  Spacer,
+  Divider,
   styled,
   Typography,
   useCopyToClipboard,
@@ -101,7 +100,7 @@ export function Config(props: PropsWithChildren) {
                 Error connecting server, please reload the app and try again
               
             )}
-            
+            
             
             
             
diff --git a/widget/ui/src/components/Alert/Alert.tsx b/widget/ui/src/components/Alert/Alert.tsx
index a1c8bfc751..1d8c368e00 100644
--- a/widget/ui/src/components/Alert/Alert.tsx
+++ b/widget/ui/src/components/Alert/Alert.tsx
@@ -2,7 +2,7 @@ import React, { PropsWithChildren, ReactNode } from 'react';
 import { CheckCircleIcon, InfoCircleIcon, WarningIcon } from '../Icon';
 import { Typography } from '../Typography';
 import { styled } from '../../theme';
-import { Spacer } from '../Spacer';
+import { Divider } from '../Divider';
 
 const MainContainer = styled('div', {
   width: '100%',
@@ -72,7 +72,7 @@ export function Alert(props: PropsWithChildren) {
               {type === 'success' && }
               {type === 'warning' && }
               {type === 'error' && }
-              
+
)} @@ -90,7 +90,7 @@ export function Alert(props: PropsWithChildren) { {title} - {!!children && } + {!!children && } )} {children} diff --git a/widget/ui/src/components/Divider/Divider.tsx b/widget/ui/src/components/Divider/Divider.tsx index 707b150333..e1730b70be 100644 --- a/widget/ui/src/components/Divider/Divider.tsx +++ b/widget/ui/src/components/Divider/Divider.tsx @@ -4,38 +4,140 @@ import { styled } from '../../theme'; const DividerContainer = styled('div', { variants: { size: { - 4: { + 4: {}, + 8: {}, + 12: {}, + 16: {}, + 18: {}, + 20: {}, + 24: {}, + 32: {}, + }, + direction: { + vertical: {}, + horizontal: {}, + }, + }, + compoundVariants: [ + { + size: 4, + direction: 'horizontal', + css: { + width: '$4', + }, + }, + { + size: 4, + direction: 'vertical', + css: { height: '$4', }, - 8: { + }, + { + size: 8, + direction: 'horizontal', + css: { + width: '$8', + }, + }, + { + size: 8, + direction: 'vertical', + css: { height: '$8', }, - 12: { + }, + { + size: 12, + direction: 'horizontal', + css: { + width: '$12', + }, + }, + { + size: 12, + direction: 'vertical', + css: { height: '$12', }, - 16: { + }, + { + size: 16, + direction: 'horizontal', + css: { + width: '$16', + }, + }, + { + size: 16, + direction: 'vertical', + css: { height: '$16', }, - 18: { + }, + { + size: 18, + direction: 'horizontal', + css: { + width: '$18', + }, + }, + { + size: 18, + direction: 'vertical', + css: { height: '$18', }, - 20: { + }, + { + size: 20, + direction: 'horizontal', + css: { + width: '$20', + }, + }, + { + size: 20, + direction: 'vertical', + css: { height: '$20', }, - 24: { + }, + { + size: 24, + direction: 'horizontal', + css: { + width: '$24', + }, + }, + { + size: 24, + direction: 'vertical', + css: { height: '$24', }, - 32: { + }, + { + size: 32, + direction: 'horizontal', + css: { + width: '$32', + }, + }, + { + size: 32, + direction: 'vertical', + css: { height: '$32', }, }, - }, + ], }); export interface PropTypes { size?: 4 | 8 | 12 | 16 | 18 | 20 | 24 | 32; direction?: 'vertical' | 'horizontal'; } -export function Divider({ size = 12 }: PropTypes) { - return ; +export function Divider({ size = 12, direction = 'vertical' }: PropTypes) { + return ; } diff --git a/widget/ui/src/components/LiquiditySourceList/LiquiditySourceList.tsx b/widget/ui/src/components/LiquiditySourceList/LiquiditySourceList.tsx index b8148bfb62..c08e11c649 100644 --- a/widget/ui/src/components/LiquiditySourceList/LiquiditySourceList.tsx +++ b/widget/ui/src/components/LiquiditySourceList/LiquiditySourceList.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; import { styled } from '../../theme'; import { LiquiditySource, LoadingStatus } from '../../types/meta'; import { Button } from '../Button/Button'; -import { Spacer } from '../Spacer'; +import { Divider } from '../Divider'; import { Switch } from '../Switch'; import { Typography } from '../Typography'; import { Spinner } from '../Spinner'; @@ -111,7 +111,7 @@ export function LiquiditySourceList(props: PropTypes) { : `${totalSelectedBridges} / ${totalBridges}`} - + {loadingStatus === 'loading' && ( @@ -144,7 +144,7 @@ export function LiquiditySourceList(props: PropTypes) { : `${totalSelectedExchanges} / ${totalExchanges}`} - + {loadingStatus === 'loading' && ( diff --git a/widget/ui/src/components/Spacer/Spacer.stories.tsx b/widget/ui/src/components/Spacer/Spacer.stories.tsx deleted file mode 100644 index 243729a839..0000000000 --- a/widget/ui/src/components/Spacer/Spacer.stories.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Meta } from '@storybook/react'; -import React from 'react'; -import { Typography } from '../Typography'; -import { Spacer, PropTypes } from './Spacer'; - -export default { - title: 'Components/Spacer', - component: Spacer, - args: { - size: 12, - direction: 'horizontal', - }, - argTypes: { - size: { - name: 'size', - control: { type: 'select' }, - options: [12, 16, 18, 20], - defaultValue: 12, - }, - direction: { - name: 'direction', - control: { type: 'select' }, - options: ['vertical', 'horizontal'], - defaultValue: 'horizontal', - }, - }, -} as Meta; - -export const Main = (props: PropTypes) => ( -
- spacer - - spacer -
-); diff --git a/widget/ui/src/components/Spacer/Spacer.tsx b/widget/ui/src/components/Spacer/Spacer.tsx deleted file mode 100644 index 2401b45dea..0000000000 --- a/widget/ui/src/components/Spacer/Spacer.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import React from 'react'; -import { styled } from '../../theme'; - -const SpacerContainer = styled('div', { - variants: { - size: { - 4: {}, - 8: {}, - 12: {}, - 16: {}, - 18: {}, - 20: {}, - 24: {}, - }, - direction: { - vertical: {}, - horizontal: {}, - }, - }, - compoundVariants: [ - { - size: 4, - direction: 'horizontal', - css: { - width: '$4', - }, - }, - { - size: 4, - direction: 'vertical', - css: { - height: '$4', - }, - }, - { - size: 8, - direction: 'horizontal', - css: { - width: '$8', - }, - }, - { - size: 8, - direction: 'vertical', - css: { - height: '$8', - }, - }, - { - size: 12, - direction: 'horizontal', - css: { - width: '$12', - }, - }, - { - size: 12, - direction: 'vertical', - css: { - height: '$12', - }, - }, - { - size: 16, - direction: 'horizontal', - css: { - width: '$16', - }, - }, - { - size: 16, - direction: 'vertical', - css: { - height: '$16', - }, - }, - { - size: 18, - direction: 'horizontal', - css: { - width: '$18', - }, - }, - { - size: 18, - direction: 'vertical', - css: { - height: '$18', - }, - }, - { - size: 20, - direction: 'horizontal', - css: { - width: '$20', - }, - }, - { - size: 20, - direction: 'vertical', - css: { - height: '$20', - }, - }, - { - size: 24, - direction: 'horizontal', - css: { - width: '$24', - }, - }, - { - size: 24, - direction: 'vertical', - css: { - height: '$24', - }, - }, - ], -}); -export interface PropTypes { - size?: 4 | 8 | 12 | 16 | 18 | 20 | 24; - direction?: 'vertical' | 'horizontal'; -} - -export function Spacer({ size = 12, direction = 'horizontal' }: PropTypes) { - return ; -} diff --git a/widget/ui/src/components/Spacer/index.ts b/widget/ui/src/components/Spacer/index.ts deleted file mode 100644 index e7a837e9eb..0000000000 --- a/widget/ui/src/components/Spacer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Spacer } from './Spacer'; diff --git a/widget/ui/src/components/StatusDrawer/StatusDrawer.tsx b/widget/ui/src/components/StatusDrawer/StatusDrawer.tsx index f6f2e4511f..5e747506fd 100644 --- a/widget/ui/src/components/StatusDrawer/StatusDrawer.tsx +++ b/widget/ui/src/components/StatusDrawer/StatusDrawer.tsx @@ -3,7 +3,7 @@ import { styled } from '../../theme'; import { Button } from '../Button'; import { Drawer } from '../Drawer'; import { CheckCircleIcon, InfoCircleIcon, WarningIcon } from '../Icon'; -import { Spacer } from '../Spacer'; +import { Divider } from '../Divider'; import { Typography } from '../Typography'; export interface PropTypes { @@ -60,7 +60,7 @@ export function StatusDrawer({ {status === 'success' ? 'Cancel' : 'See detailes'} )} - + @@ -408,7 +407,7 @@ export function SwapHistory(props: PropTypes) { > Skip - + - - - - {list.map((wallet) => { - return ( - - - - - ); - })} - - - - - Confirm - - - ); -} diff --git a/widget/playground/src/components/SupportedWallets/SupportedWallets.types.ts b/widget/playground/src/components/SupportedWallets/SupportedWallets.types.ts deleted file mode 100644 index 92861207d0..0000000000 --- a/widget/playground/src/components/SupportedWallets/SupportedWallets.types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { WalletTypes } from '@rango-dev/wallets-shared'; -import type { WidgetConfig } from '@rango-dev/widget-embedded'; - -export interface PropTypes { - onBack: () => void; - configWallets: WidgetConfig['wallets']; - allWallets: MapSupportedWallet[]; -} - -type MapSupportedWallet = { - title: string; - logo: string; - type: WalletTypes; - networks: string[]; -}; diff --git a/widget/playground/src/components/SupportedWallets/index.ts b/widget/playground/src/components/SupportedWallets/index.ts deleted file mode 100644 index ddda8f13e1..0000000000 --- a/widget/playground/src/components/SupportedWallets/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { SupportedWallets } from './SupportedWallets'; diff --git a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.From.tsx b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.From.tsx index 173ace9787..13040707d5 100644 --- a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.From.tsx +++ b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.From.tsx @@ -5,6 +5,7 @@ import React from 'react'; import { useConfigStore } from '../../store/config'; import { DefaultChainAndToken } from '../DefaultChainAndToken'; +import { SupportedBlockchains } from '../SupportedBlockchains'; import { FromAmount, FromToContainer } from './FunctionalLayout.styles'; @@ -20,6 +21,9 @@ export function FromSection() { return ( <> + + + diff --git a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.To.tsx b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.To.tsx index 785766077f..ec1bd3ceef 100644 --- a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.To.tsx +++ b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.To.tsx @@ -1,13 +1,20 @@ +import { Divider } from '@rango-dev/ui'; import React from 'react'; import { DefaultChainAndToken } from '../DefaultChainAndToken/DefaultChainAndToken'; +import { SupportedBlockchains } from '../SupportedBlockchains'; import { FromToContainer } from './FunctionalLayout.styles'; export function ToSection() { return ( - - - + <> + + + + + + + ); } diff --git a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx index e01bbfb51d..8357fa74d1 100644 --- a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx +++ b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx @@ -10,13 +10,11 @@ import { } from '@rango-dev/ui'; import { WalletTypes } from '@rango-dev/wallets-shared'; import { useWallets } from '@rango-dev/widget-embedded'; -import React, { useState } from 'react'; +import React from 'react'; import { MultiSelect } from '../../components/MultiSelect/MultiSelect'; -import { OverlayPanel } from '../../components/OverlayPanel'; -import { SupportedWallets } from '../../components/SupportedWallets'; import { NOT_FOUND } from '../../constants'; -import { excludedWallets, getWalletNetworks } from '../../helpers'; +import { excludedWallets, getCategoryNetworks } from '../../helpers'; import { useConfigStore } from '../../store/config'; import { @@ -26,7 +24,6 @@ import { } from './FunctionalLayout.styles'; export function WalletSection() { - const [showNextModal, setShowNextModal] = useState(false); const { state, connect, disconnect, getWalletInfo } = useWallets(); const { onChangeWallets, @@ -36,13 +33,13 @@ export function WalletSection() { const allWalletList = Object.values(WalletTypes) .filter((wallet) => !excludedWallets.includes(wallet)) - .map((type) => { - const { name: title, img: logo, supportedChains } = getWalletInfo(type); + .map((wallet) => { + const { name: title, img: logo, supportedChains } = getWalletInfo(wallet); return { title, logo, - type, - networks: getWalletNetworks(supportedChains), + name: wallet, + networks: getCategoryNetworks(supportedChains), }; }); @@ -70,20 +67,23 @@ export function WalletSection() { onChangeWallets(!selectedWallets.length ? undefined : selectedWallets); }; - const onBack = () => setShowNextModal(false); - return ( <> } type="Wallets" - onClick={() => setShowNextModal(true)} value={ wallets?.length === allWalletList.length ? undefined : (wallets as WalletType[]) } + defaultSelectedItems={ + (wallets as WalletType[]) || + allWalletList.map((wallet) => wallet.name) + } + list={allWalletList} + onChange={(items) => onChangeWallets(items)} /> - {showNextModal && ( - - wallet.type) - } - allWallets={allWalletList} - /> - - )} ); } diff --git a/widget/playground/src/containers/SupportedBlockchains/SupportedBlockchains.tsx b/widget/playground/src/containers/SupportedBlockchains/SupportedBlockchains.tsx new file mode 100644 index 0000000000..6772bc75cf --- /dev/null +++ b/widget/playground/src/containers/SupportedBlockchains/SupportedBlockchains.tsx @@ -0,0 +1,67 @@ +import type { Type } from '../../types'; + +import { ChainsIcon } from '@rango-dev/ui'; +import React from 'react'; + +import { MultiSelect } from '../../components/MultiSelect/MultiSelect'; +import { getCategoryNetworks } from '../../helpers'; +import { useConfigStore } from '../../store/config'; +import { useMetaStore } from '../../store/meta'; + +export function SupportedBlockchains({ type }: { type: Type }) { + const { + config: { from, to }, + onChangeBlockChains, + onChangeBlockChain, + onChangeToken, + } = useConfigStore(); + const { + meta: { blockchains }, + } = useMetaStore(); + + const selectedType = type === 'Source' ? from : to; + + const configBlockchains = selectedType?.blockchains; + + const allBlockchains = blockchains.map((blockchain) => { + const { displayName: title, logo, name } = blockchain; + return { + title, + logo, + name, + networks: getCategoryNetworks([blockchain]), + }; + }); + + const handleBlockchainChange = (items?: string[]) => { + // Reset default blockchain and token when the default is not among the selected items. + if ( + selectedType?.blockchain && + items && + !items.includes(selectedType.blockchain) + ) { + onChangeBlockChain(undefined, type); + onChangeToken(undefined, type); + } + + onChangeBlockChains(items, type); + }; + + return ( + } + type="Blockchains" + value={ + configBlockchains?.length === allBlockchains.length + ? undefined + : configBlockchains + } + defaultSelectedItems={ + configBlockchains || allBlockchains.map((blockchain) => blockchain.name) + } + list={allBlockchains} + onChange={(items) => handleBlockchainChange(items)} + /> + ); +} diff --git a/widget/playground/src/containers/SupportedBlockchains/index.ts b/widget/playground/src/containers/SupportedBlockchains/index.ts new file mode 100644 index 0000000000..b66b12deaf --- /dev/null +++ b/widget/playground/src/containers/SupportedBlockchains/index.ts @@ -0,0 +1 @@ +export { SupportedBlockchains } from './SupportedBlockchains'; diff --git a/widget/playground/src/helpers.ts b/widget/playground/src/helpers.ts index b6bd526a94..01184cc92f 100755 --- a/widget/playground/src/helpers.ts +++ b/widget/playground/src/helpers.ts @@ -90,10 +90,7 @@ export function clearEmpties>(obj: T): T { continue; } clearEmpties(obj[key]); - if ( - (Array.isArray(obj[key]) && !obj[key].length) || - Object.keys(obj[key]).length === 0 - ) { + if (Object.keys(obj[key]).length === 0 && !Array.isArray(obj[key])) { delete obj[key]; } } @@ -110,6 +107,7 @@ export function filterConfig( (wallet) => typeof wallet === 'string' ), }; + const userSelectedConfig = clearEmpties( subtractObject( JSON.parse(JSON.stringify(initialConfig)) as WidgetConfig, @@ -225,7 +223,7 @@ export const getStateWallet = (state: { } }; -export function getWalletNetworks(chains: BlockchainMeta[]) { +export function getCategoryNetworks(chains: BlockchainMeta[]) { const supportedNetworks: Set = new Set(); chains.forEach((chain) => { From 0357ccbb1ad6a59d789e1a95b36100c735bd954e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sun, 22 Oct 2023 14:41:15 +0000 Subject: [PATCH 607/769] chore(release): publish - widget-embedded@0.14.1-next.2 - widget-playground@0.12.1-next.41 - widget-iframe@0.12.1-next.40 - widget-app@0.12.1-next.40 Affected packages: widget-embedded@0.14.1-next.2,widget-playground@0.12.1-next.41,widget-iframe@0.12.1-next.40,widget-app@0.12.1-next.40 --- widget/app/package.json | 4 ++-- widget/embedded/package.json | 2 +- widget/iframe/package.json | 4 ++-- widget/playground/package.json | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/widget/app/package.json b/widget/app/package.json index aa1e2994ce..644a49edbf 100644 --- a/widget/app/package.json +++ b/widget/app/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-app", - "version": "0.12.1-next.39", + "version": "0.12.1-next.40", "license": "MIT", "private": true, "source": "public/index.html", @@ -14,7 +14,7 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.1", + "@rango-dev/widget-embedded": "^0.14.1-next.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0" diff --git a/widget/embedded/package.json b/widget/embedded/package.json index 454bb18fae..d32c31a685 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.14.1-next.1", + "version": "0.14.1-next.2", "license": "MIT", "type": "module", "main": "dist/index.js", diff --git a/widget/iframe/package.json b/widget/iframe/package.json index a9f3c2e6db..e0f3aa0bb7 100644 --- a/widget/iframe/package.json +++ b/widget/iframe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-iframe", - "version": "0.12.1-next.39", + "version": "0.12.1-next.40", "license": "MIT", "private": true, "source": "src/index.ts", @@ -13,6 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.1" + "@rango-dev/widget-embedded": "^0.14.1-next.2" } } diff --git a/widget/playground/package.json b/widget/playground/package.json index 6f512900c3..2a07ace38c 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-playground", - "version": "0.12.1-next.40", + "version": "0.12.1-next.41", "license": "MIT", "private": true, "source": "public/index.html", @@ -20,7 +20,7 @@ "@rango-dev/ui": "^0.17.1-next.0", "@rango-dev/wallets-react": "^0.3.0", "@rango-dev/wallets-shared": "^0.17.0", - "@rango-dev/widget-embedded": "^0.14.1-next.1", + "@rango-dev/widget-embedded": "^0.14.1-next.2", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0", From 868e226d837c76dff8301f0f3be3961d8080480c Mon Sep 17 00:00:00 2001 From: RanGojo Date: Tue, 24 Oct 2023 21:29:33 +0000 Subject: [PATCH 608/769] chore: exclude binance and station providers --- wallets/provider-all/package.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/wallets/provider-all/package.json b/wallets/provider-all/package.json index 2d35ab6af4..dc4b8a7aed 100644 --- a/wallets/provider-all/package.json +++ b/wallets/provider-all/package.json @@ -21,7 +21,6 @@ }, "dependencies": { "@rango-dev/provider-argentx": "^0.17.0", - "@rango-dev/provider-binance-chain-wallet": "^0.17.0", "@rango-dev/provider-bitget": "^0.13.0", "@rango-dev/provider-braavos": "^0.10.0", "@rango-dev/provider-brave": "^0.17.0", @@ -40,7 +39,6 @@ "@rango-dev/provider-okx": "^0.17.0", "@rango-dev/provider-phantom": "^0.17.0", "@rango-dev/provider-safepal": "^0.17.0", - "@rango-dev/provider-station": "^0.17.0", "@rango-dev/provider-taho": "^0.17.0", "@rango-dev/provider-tokenpocket": "^0.17.0", "@rango-dev/provider-tron-link": "^0.17.0", From 465015dc1086f9ba63867a8ad6759922095e827d Mon Sep 17 00:00:00 2001 From: RanGojo Date: Tue, 24 Oct 2023 21:40:21 +0000 Subject: [PATCH 609/769] chore: exclude binance and station from provider-all --- wallets/provider-all/src/index.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/wallets/provider-all/src/index.ts b/wallets/provider-all/src/index.ts index e5050aba14..3728a28b13 100644 --- a/wallets/provider-all/src/index.ts +++ b/wallets/provider-all/src/index.ts @@ -1,5 +1,4 @@ import * as argentx from '@rango-dev/provider-argentx'; -import * as binance from '@rango-dev/provider-binance-chain-wallet'; import * as bitget from '@rango-dev/provider-bitget'; import * as braavos from '@rango-dev/provider-braavos'; import * as brave from '@rango-dev/provider-brave'; @@ -18,7 +17,6 @@ import * as metamask from '@rango-dev/provider-metamask'; import * as okx from '@rango-dev/provider-okx'; import * as phantom from '@rango-dev/provider-phantom'; import * as safepal from '@rango-dev/provider-safepal'; -import * as station from '@rango-dev/provider-station'; import * as taho from '@rango-dev/provider-taho'; import * as tokenpocket from '@rango-dev/provider-tokenpocket'; import * as tronLink from '@rango-dev/provider-tron-link'; @@ -39,7 +37,6 @@ export const allProviders = (enviroments?: Enviroments) => { argentx, tronLink, trustwallet, - binance, bitget, enkrypt, xdefi, @@ -58,6 +55,5 @@ export const allProviders = (enviroments?: Enviroments) => { frontier, taho, braavos, - station, ]; }; From 86a2c8e841bb73027eeaf9650d3dbde7f0c2d33f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 24 Oct 2023 21:48:40 +0000 Subject: [PATCH 610/769] chore(release): publish - provider-all@0.17.1-next.0 - wallets-adapter@0.14.1-next.1 - queue-manager-demo@0.11.1-next.14 - wallets-demo@0.11.1-next.30 - widget-embedded@0.14.1-next.3 - wallets-adapter-demo@0.12.1-next.29 - widget-playground@0.12.1-next.42 - widget-iframe@0.12.1-next.41 - widget-app@0.12.1-next.41 Affected packages: provider-all@0.17.1-next.0,wallets-adapter@0.14.1-next.1,queue-manager-demo@0.11.1-next.14,wallets-demo@0.11.1-next.30,widget-embedded@0.14.1-next.3,wallets-adapter-demo@0.12.1-next.29,widget-playground@0.12.1-next.42,widget-iframe@0.12.1-next.41,widget-app@0.12.1-next.41 --- examples/queue-manager-demo/package.json | 4 ++-- examples/wallets-adapter-demo/package.json | 6 +++--- examples/wallets-demo/package.json | 4 ++-- wallets/provider-all/package.json | 2 +- wallets/wallets-adapter/package.json | 4 ++-- widget/app/package.json | 4 ++-- widget/embedded/package.json | 4 ++-- widget/iframe/package.json | 4 ++-- widget/playground/package.json | 6 +++--- 9 files changed, 19 insertions(+), 19 deletions(-) diff --git a/examples/queue-manager-demo/package.json b/examples/queue-manager-demo/package.json index b3e7d50625..f0e12121c0 100644 --- a/examples/queue-manager-demo/package.json +++ b/examples/queue-manager-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/queue-manager-demo", - "version": "0.11.1-next.13", + "version": "0.11.1-next.14", "license": "MIT", "private": true, "source": "public/index.html", @@ -15,7 +15,7 @@ "rango-sdk": "^0.1.35" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.0", + "@rango-dev/provider-all": "^0.17.1-next.0", "@rango-dev/queue-manager-rango-preset": "^0.17.0", "@rango-dev/queue-manager-react": "^0.17.0", "@rango-dev/wallets-react": "^0.3.0", diff --git a/examples/wallets-adapter-demo/package.json b/examples/wallets-adapter-demo/package.json index b00a61cc96..472a7ba951 100644 --- a/examples/wallets-adapter-demo/package.json +++ b/examples/wallets-adapter-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter-demo", - "version": "0.12.1-next.28", + "version": "0.12.1-next.29", "license": "MIT", "private": true, "source": "public/index.html", @@ -11,8 +11,8 @@ "clean": "rimraf .parcel-cache && rimraf dist" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.0", - "@rango-dev/wallets-adapter": "^0.14.1-next.0", + "@rango-dev/provider-all": "^0.17.1-next.0", + "@rango-dev/wallets-adapter": "^0.14.1-next.1", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/wallets-demo/package.json b/examples/wallets-demo/package.json index c6eeb6e1cb..a9cd1360f0 100644 --- a/examples/wallets-demo/package.json +++ b/examples/wallets-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-demo", - "version": "0.11.1-next.29", + "version": "0.11.1-next.30", "license": "MIT", "private": true, "source": "public/index.html", @@ -11,7 +11,7 @@ "clean": "rimraf .parcel-cache && rimraf dist" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.0", + "@rango-dev/provider-all": "^0.17.1-next.0", "@rango-dev/ui": "^0.17.1-next.0", "@rango-dev/wallets-react": "^0.3.0", "@rango-dev/wallets-shared": "^0.17.0", diff --git a/wallets/provider-all/package.json b/wallets/provider-all/package.json index dc4b8a7aed..bdb6934c80 100644 --- a/wallets/provider-all/package.json +++ b/wallets/provider-all/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-all", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", diff --git a/wallets/wallets-adapter/package.json b/wallets/wallets-adapter/package.json index 1eab355ce0..dd0862da1c 100644 --- a/wallets/wallets-adapter/package.json +++ b/wallets/wallets-adapter/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter", - "version": "0.14.1-next.0", + "version": "0.14.1-next.1", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -23,7 +23,7 @@ "react": ">=16" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.0", + "@rango-dev/provider-all": "^0.17.1-next.0", "@rango-dev/ui": "^0.17.1-next.0", "@rango-dev/wallets-react": "^0.3.0", "@rango-dev/wallets-shared": "^0.17.0", diff --git a/widget/app/package.json b/widget/app/package.json index 644a49edbf..a2644520bb 100644 --- a/widget/app/package.json +++ b/widget/app/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-app", - "version": "0.12.1-next.40", + "version": "0.12.1-next.41", "license": "MIT", "private": true, "source": "public/index.html", @@ -14,7 +14,7 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.2", + "@rango-dev/widget-embedded": "^0.14.1-next.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0" diff --git a/widget/embedded/package.json b/widget/embedded/package.json index d32c31a685..cddbf4c76f 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.14.1-next.2", + "version": "0.14.1-next.3", "license": "MIT", "type": "module", "main": "dist/index.js", @@ -19,7 +19,7 @@ "dependencies": { "@lingui/core": "4.2.1", "@lingui/react": "4.2.1", - "@rango-dev/provider-all": "^0.17.0", + "@rango-dev/provider-all": "^0.17.1-next.0", "@rango-dev/queue-manager-core": "^0.17.0", "@rango-dev/queue-manager-rango-preset": "^0.17.0", "@rango-dev/queue-manager-react": "^0.17.0", diff --git a/widget/iframe/package.json b/widget/iframe/package.json index e0f3aa0bb7..ffb862dbc3 100644 --- a/widget/iframe/package.json +++ b/widget/iframe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-iframe", - "version": "0.12.1-next.40", + "version": "0.12.1-next.41", "license": "MIT", "private": true, "source": "src/index.ts", @@ -13,6 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.2" + "@rango-dev/widget-embedded": "^0.14.1-next.3" } } diff --git a/widget/playground/package.json b/widget/playground/package.json index 2a07ace38c..038f8af689 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-playground", - "version": "0.12.1-next.41", + "version": "0.12.1-next.42", "license": "MIT", "private": true, "source": "public/index.html", @@ -16,11 +16,11 @@ "@types/stringify-object": "^4.0.2" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.0", + "@rango-dev/provider-all": "^0.17.1-next.0", "@rango-dev/ui": "^0.17.1-next.0", "@rango-dev/wallets-react": "^0.3.0", "@rango-dev/wallets-shared": "^0.17.0", - "@rango-dev/widget-embedded": "^0.14.1-next.2", + "@rango-dev/widget-embedded": "^0.14.1-next.3", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0", From 2efcef1779a33aa0ea65d4f17f3d443c218e2be1 Mon Sep 17 00:00:00 2001 From: Shinji Date: Sat, 21 Oct 2023 08:22:53 +0000 Subject: [PATCH 611/769] fix: fix retry logic in failed swaps --- queue-manager/rango-preset/src/index.ts | 7 ++- widget/embedded/src/store/bestRoute.ts | 50 +++++---------------- widget/embedded/src/utils/meta.ts | 12 ++++- widget/embedded/src/utils/routing.ts | 58 +++++++++++++++++++++++++ 4 files changed, 86 insertions(+), 41 deletions(-) diff --git a/queue-manager/rango-preset/src/index.ts b/queue-manager/rango-preset/src/index.ts index b9844fa587..606bfa641c 100644 --- a/queue-manager/rango-preset/src/index.ts +++ b/queue-manager/rango-preset/src/index.ts @@ -1,5 +1,7 @@ -import { Configs, initConfig } from './configs'; -import { SwapQueueDef } from './types'; +import type { Configs } from './configs'; +import type { SwapQueueDef } from './types'; + +import { initConfig } from './configs'; import { swapQueueDef } from './queueDef'; export { PrettyError, prettifyErrorMessage } from './shared-errors'; @@ -56,6 +58,7 @@ export { splitWalletNetwork, resetRunningSwapNotifsOnPageLoad, isApprovalTX, + getLastSuccessfulStep, } from './helpers'; export { useMigration, useQueueManager, useEvents } from './hooks'; diff --git a/widget/embedded/src/store/bestRoute.ts b/widget/embedded/src/store/bestRoute.ts index ac7536f5c0..dc28e54278 100644 --- a/widget/embedded/src/store/bestRoute.ts +++ b/widget/embedded/src/store/bestRoute.ts @@ -9,9 +9,11 @@ import { subscribeWithSelector } from 'zustand/middleware'; import { ZERO } from '../constants/numbers'; import { isPositiveNumber } from '../utils/numbers'; -import { getBestRouteToTokenUsdPrice } from '../utils/routing'; +import { + createRetryRoute, + getBestRouteToTokenUsdPrice, +} from '../utils/routing'; import { calcOutputUsdValue } from '../utils/swap'; -import { tokensAreEqual } from '../utils/wallets'; import { useMetaStore } from './meta'; import createSelectors from './selectors'; @@ -173,49 +175,21 @@ export const useBestRouteStore = createSelectors( }, retry: (pendingSwap) => { const { tokens, blockchains } = useMetaStore.getState().meta; - const failedIndex = - pendingSwap.status === 'failed' - ? pendingSwap.steps.findIndex((s) => s.status === 'failed') - : null; - if (failedIndex === null || failedIndex < 0) { - return; - } - - const firstStep = pendingSwap.steps[0]; - const lastStep = pendingSwap.steps[pendingSwap.steps.length - 1]; - const fromBlockchain = - blockchains.find( - (blockchain) => blockchain.name === firstStep.fromBlockchain - ) || null; - const toBlockchain = - blockchains.find( - (blockchain) => blockchain.name === lastStep.toBlockchain - ) || null; - - const fromToken = tokens.find((token) => - tokensAreEqual(token, { - blockchain: firstStep.fromBlockchain, - symbol: firstStep.fromSymbol, - address: firstStep.fromSymbolAddress, - }) - ); - - const toToken = tokens.find((token) => - tokensAreEqual(token, { - blockchain: lastStep.toBlockchain, - symbol: lastStep.toSymbol, - address: lastStep.toSymbolAddress, - }) - ); + const { + fromBlockchain, + fromToken, + toBlockchain, + toToken, + inputAmount, + } = createRetryRoute(pendingSwap, blockchains, tokens); - const inputAmount = pendingSwap.inputAmount; set({ fromBlockchain, fromToken, inputAmount, outputAmount: null, - inputUsdValue: getUsdValue(fromToken || null, inputAmount), + inputUsdValue: getUsdValue(fromToken ?? null, inputAmount), outputUsdValue: new BigNumber(0), toBlockchain, toToken, diff --git a/widget/embedded/src/utils/meta.ts b/widget/embedded/src/utils/meta.ts index de61e86bc4..8047f0217d 100644 --- a/widget/embedded/src/utils/meta.ts +++ b/widget/embedded/src/utils/meta.ts @@ -1,4 +1,6 @@ -import type { BlockchainMeta } from 'rango-sdk'; +import type { Asset, BlockchainMeta, Token } from 'rango-sdk'; + +import { tokensAreEqual } from './wallets'; export function getBlockchainDisplayNameFor( blockchainName: string, @@ -14,3 +16,11 @@ export function getBlockchainShortNameFor( return blockchains.find((blockchain) => blockchain.name === blockchainName) ?.shortName; } + +export function findToken(t: Asset, tokens: Token[]) { + return tokens.find((token) => tokensAreEqual(token, t)) ?? null; +} + +export function findBlockchain(name: string, blockchains: BlockchainMeta[]) { + return blockchains.find((blockchain) => blockchain.name === name) ?? null; +} diff --git a/widget/embedded/src/utils/routing.ts b/widget/embedded/src/utils/routing.ts index 8dc87dc3db..4185ac2f03 100644 --- a/widget/embedded/src/utils/routing.ts +++ b/widget/embedded/src/utils/routing.ts @@ -13,6 +13,7 @@ import type { Token, } from 'rango-sdk'; +import { getLastSuccessfulStep } from '@rango-dev/queue-manager-rango-preset'; import BigNumber from 'bignumber.js'; import { @@ -25,6 +26,7 @@ import { } from '../constants/routing'; import { areEqual } from './common'; +import { findBlockchain, findToken } from './meta'; import { numberToString } from './numbers'; export function searchParamsToToken( @@ -261,3 +263,59 @@ export function findCommonTokens( return listB.filter((token) => set.has(tokenToString(token))) as R; } + +export function createRetryRoute( + pendingSwap: PendingSwap, + blockchains: BlockchainMeta[], + tokens: Token[] +): { + fromBlockchain: BlockchainMeta | null; + fromToken: Token | null; + toBlockchain: BlockchainMeta | null; + toToken: Token | null; + inputAmount: string; +} { + const firstStep = pendingSwap.steps[0]; + const lastStep = pendingSwap.steps[pendingSwap.steps.length - 1]; + const lastSuccessfulStep = getLastSuccessfulStep(pendingSwap.steps); + + const toToken = { + blockchain: lastStep.toBlockchain, + symbol: lastStep.toSymbol, + address: lastStep.toSymbolAddress, + }; + + const fromBlockchainMeta = findBlockchain( + lastSuccessfulStep + ? lastSuccessfulStep.toBlockchain + : firstStep.fromBlockchain, + blockchains + ); + const toBlockchainMeta = findBlockchain(lastStep.toBlockchain, blockchains); + const fromTokenMeta = findToken( + lastSuccessfulStep + ? { + blockchain: fromBlockchainMeta?.name ?? '', + symbol: lastSuccessfulStep.toSymbol, + address: lastSuccessfulStep.toSymbolAddress, + } + : { + blockchain: fromBlockchainMeta?.name ?? '', + symbol: firstStep.fromSymbol, + address: firstStep.fromSymbolAddress, + }, + tokens + ); + const toTokenMeta = findToken(toToken, tokens); + const inputAmount = lastSuccessfulStep + ? lastSuccessfulStep.outputAmount ?? '' + : pendingSwap.inputAmount; + + return { + fromBlockchain: fromBlockchainMeta, + fromToken: fromTokenMeta, + toBlockchain: toBlockchainMeta, + toToken: toTokenMeta, + inputAmount, + }; +} From 8d8afffc509a42e0a1dcda65ffdd2a554ded7bbf Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 25 Oct 2023 07:39:18 +0000 Subject: [PATCH 612/769] chore(release): publish - queue-manager-rango-preset@0.17.1-next.0 - ui@0.17.1-next.1 - queue-manager-demo@0.11.1-next.15 - wallets-adapter@0.14.1-next.2 - wallets-demo@0.11.1-next.31 - widget-embedded@0.14.1-next.4 - wallets-adapter-demo@0.12.1-next.30 - widget-playground@0.12.1-next.43 - widget-iframe@0.12.1-next.42 - widget-app@0.12.1-next.42 Affected packages: queue-manager-rango-preset@0.17.1-next.0,ui@0.17.1-next.1,queue-manager-demo@0.11.1-next.15,wallets-adapter@0.14.1-next.2,wallets-demo@0.11.1-next.31,widget-embedded@0.14.1-next.4,wallets-adapter-demo@0.12.1-next.30,widget-playground@0.12.1-next.43,widget-iframe@0.12.1-next.42,widget-app@0.12.1-next.42 --- examples/queue-manager-demo/package.json | 4 ++-- examples/wallets-adapter-demo/package.json | 4 ++-- examples/wallets-demo/package.json | 4 ++-- queue-manager/rango-preset/package.json | 2 +- wallets/wallets-adapter/package.json | 4 ++-- widget/app/package.json | 4 ++-- widget/embedded/package.json | 6 +++--- widget/iframe/package.json | 4 ++-- widget/playground/package.json | 6 +++--- widget/ui/package.json | 2 +- 10 files changed, 20 insertions(+), 20 deletions(-) diff --git a/examples/queue-manager-demo/package.json b/examples/queue-manager-demo/package.json index f0e12121c0..0187406170 100644 --- a/examples/queue-manager-demo/package.json +++ b/examples/queue-manager-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/queue-manager-demo", - "version": "0.11.1-next.14", + "version": "0.11.1-next.15", "license": "MIT", "private": true, "source": "public/index.html", @@ -16,7 +16,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.0", - "@rango-dev/queue-manager-rango-preset": "^0.17.0", + "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.0", "@rango-dev/queue-manager-react": "^0.17.0", "@rango-dev/wallets-react": "^0.3.0", "@rango-dev/wallets-shared": "^0.17.0", diff --git a/examples/wallets-adapter-demo/package.json b/examples/wallets-adapter-demo/package.json index 472a7ba951..4501097e9c 100644 --- a/examples/wallets-adapter-demo/package.json +++ b/examples/wallets-adapter-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter-demo", - "version": "0.12.1-next.29", + "version": "0.12.1-next.30", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.0", - "@rango-dev/wallets-adapter": "^0.14.1-next.1", + "@rango-dev/wallets-adapter": "^0.14.1-next.2", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/wallets-demo/package.json b/examples/wallets-demo/package.json index a9cd1360f0..cf0d040868 100644 --- a/examples/wallets-demo/package.json +++ b/examples/wallets-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-demo", - "version": "0.11.1-next.30", + "version": "0.11.1-next.31", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.0", - "@rango-dev/ui": "^0.17.1-next.0", + "@rango-dev/ui": "^0.17.1-next.1", "@rango-dev/wallets-react": "^0.3.0", "@rango-dev/wallets-shared": "^0.17.0", "rango-sdk": "^0.1.35", diff --git a/queue-manager/rango-preset/package.json b/queue-manager/rango-preset/package.json index c382357dcf..1ba12d39b4 100644 --- a/queue-manager/rango-preset/package.json +++ b/queue-manager/rango-preset/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/queue-manager-rango-preset", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", diff --git a/wallets/wallets-adapter/package.json b/wallets/wallets-adapter/package.json index dd0862da1c..664d6fbb22 100644 --- a/wallets/wallets-adapter/package.json +++ b/wallets/wallets-adapter/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter", - "version": "0.14.1-next.1", + "version": "0.14.1-next.2", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -24,7 +24,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.0", - "@rango-dev/ui": "^0.17.1-next.0", + "@rango-dev/ui": "^0.17.1-next.1", "@rango-dev/wallets-react": "^0.3.0", "@rango-dev/wallets-shared": "^0.17.0", "rango-types": "^0.1.46" diff --git a/widget/app/package.json b/widget/app/package.json index a2644520bb..02126d980b 100644 --- a/widget/app/package.json +++ b/widget/app/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-app", - "version": "0.12.1-next.41", + "version": "0.12.1-next.42", "license": "MIT", "private": true, "source": "public/index.html", @@ -14,7 +14,7 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.3", + "@rango-dev/widget-embedded": "^0.14.1-next.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0" diff --git a/widget/embedded/package.json b/widget/embedded/package.json index cddbf4c76f..821222168d 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.14.1-next.3", + "version": "0.14.1-next.4", "license": "MIT", "type": "module", "main": "dist/index.js", @@ -21,9 +21,9 @@ "@lingui/react": "4.2.1", "@rango-dev/provider-all": "^0.17.1-next.0", "@rango-dev/queue-manager-core": "^0.17.0", - "@rango-dev/queue-manager-rango-preset": "^0.17.0", + "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.0", "@rango-dev/queue-manager-react": "^0.17.0", - "@rango-dev/ui": "^0.17.1-next.0", + "@rango-dev/ui": "^0.17.1-next.1", "@rango-dev/wallets-react": "^0.3.0", "@rango-dev/wallets-shared": "^0.17.0", "bignumber.js": "^9.1.1", diff --git a/widget/iframe/package.json b/widget/iframe/package.json index ffb862dbc3..76fd7e939a 100644 --- a/widget/iframe/package.json +++ b/widget/iframe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-iframe", - "version": "0.12.1-next.41", + "version": "0.12.1-next.42", "license": "MIT", "private": true, "source": "src/index.ts", @@ -13,6 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.3" + "@rango-dev/widget-embedded": "^0.14.1-next.4" } } diff --git a/widget/playground/package.json b/widget/playground/package.json index 038f8af689..46b1a2a7cf 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-playground", - "version": "0.12.1-next.42", + "version": "0.12.1-next.43", "license": "MIT", "private": true, "source": "public/index.html", @@ -17,10 +17,10 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.0", - "@rango-dev/ui": "^0.17.1-next.0", + "@rango-dev/ui": "^0.17.1-next.1", "@rango-dev/wallets-react": "^0.3.0", "@rango-dev/wallets-shared": "^0.17.0", - "@rango-dev/widget-embedded": "^0.14.1-next.3", + "@rango-dev/widget-embedded": "^0.14.1-next.4", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/widget/ui/package.json b/widget/ui/package.json index a7c3da88f0..020c158998 100644 --- a/widget/ui/package.json +++ b/widget/ui/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/ui", - "version": "0.17.1-next.0", + "version": "0.17.1-next.1", "license": "MIT", "type": "module", "module": "./dist/index.js", From 079afc1c9e84d35de078a87121a83777176c3bd4 Mon Sep 17 00:00:00 2001 From: samobasquiat Date: Wed, 25 Oct 2023 07:21:58 +0000 Subject: [PATCH 613/769] fix: input outlines & blockchains displayNames --- widget/embedded/src/Widget.tsx | 2 +- .../containers/DefaultChainAndToken/DefaultChainAndToken.tsx | 2 +- .../containers/FunctionalLayout/FunctionalLayout.Wallets.tsx | 2 +- widget/ui/src/components/TextField/TextField.styles.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/widget/embedded/src/Widget.tsx b/widget/embedded/src/Widget.tsx index 348e83e876..6222c3c593 100644 --- a/widget/embedded/src/Widget.tsx +++ b/widget/embedded/src/Widget.tsx @@ -29,7 +29,7 @@ const MainContainer = styled('div', { listStyleType: 'none', }, '& *:focus-visible': { - outline: '1px $info500 solid', + outlineColor: '$info500', transition: 'none', }, }); diff --git a/widget/playground/src/containers/DefaultChainAndToken/DefaultChainAndToken.tsx b/widget/playground/src/containers/DefaultChainAndToken/DefaultChainAndToken.tsx index 59cc3d01ce..e62b7529de 100644 --- a/widget/playground/src/containers/DefaultChainAndToken/DefaultChainAndToken.tsx +++ b/widget/playground/src/containers/DefaultChainAndToken/DefaultChainAndToken.tsx @@ -97,7 +97,7 @@ export function DefaultChainAndToken({ type }: { type: Type }) { ({ - name: chain.shortName, + name: chain.displayName, image: chain.logo, value: chain.name, }))} diff --git a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx index 8357fa74d1..ef0dbbe374 100644 --- a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx +++ b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx @@ -118,7 +118,7 @@ export function WalletSection() { It's a sample using metamask, You can use your own wallet or what we - alredy implemented, check it out here. + already implemented, check it out here.
diff --git a/widget/ui/src/components/TextField/TextField.styles.ts b/widget/ui/src/components/TextField/TextField.styles.ts index d71363548d..2cff7d4710 100644 --- a/widget/ui/src/components/TextField/TextField.styles.ts +++ b/widget/ui/src/components/TextField/TextField.styles.ts @@ -113,7 +113,7 @@ export const Input = styled('input', { '&::placeholder, &::-webkit-input-placeholder': { color: '$neutral900', }, - '&:focus-within': { + '&:focus-visible': { outline: 'none', }, }); From 43acae0b02d51b735ffad2fc3fddd617f3b19227 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 25 Oct 2023 08:17:08 +0000 Subject: [PATCH 614/769] chore(release): publish - ui@0.17.1-next.2 - wallets-adapter@0.14.1-next.3 - wallets-demo@0.11.1-next.32 - widget-embedded@0.14.1-next.5 - wallets-adapter-demo@0.12.1-next.31 - widget-playground@0.12.1-next.44 - widget-iframe@0.12.1-next.43 - widget-app@0.12.1-next.43 Affected packages: ui@0.17.1-next.2,wallets-adapter@0.14.1-next.3,wallets-demo@0.11.1-next.32,widget-embedded@0.14.1-next.5,wallets-adapter-demo@0.12.1-next.31,widget-playground@0.12.1-next.44,widget-iframe@0.12.1-next.43,widget-app@0.12.1-next.43 --- examples/wallets-adapter-demo/package.json | 4 ++-- examples/wallets-demo/package.json | 4 ++-- wallets/wallets-adapter/package.json | 4 ++-- widget/app/package.json | 4 ++-- widget/embedded/package.json | 4 ++-- widget/iframe/package.json | 4 ++-- widget/playground/package.json | 6 +++--- widget/ui/package.json | 2 +- 8 files changed, 16 insertions(+), 16 deletions(-) diff --git a/examples/wallets-adapter-demo/package.json b/examples/wallets-adapter-demo/package.json index 4501097e9c..6d9f4068fe 100644 --- a/examples/wallets-adapter-demo/package.json +++ b/examples/wallets-adapter-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter-demo", - "version": "0.12.1-next.30", + "version": "0.12.1-next.31", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.0", - "@rango-dev/wallets-adapter": "^0.14.1-next.2", + "@rango-dev/wallets-adapter": "^0.14.1-next.3", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/wallets-demo/package.json b/examples/wallets-demo/package.json index cf0d040868..5104c4e246 100644 --- a/examples/wallets-demo/package.json +++ b/examples/wallets-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-demo", - "version": "0.11.1-next.31", + "version": "0.11.1-next.32", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.0", - "@rango-dev/ui": "^0.17.1-next.1", + "@rango-dev/ui": "^0.17.1-next.2", "@rango-dev/wallets-react": "^0.3.0", "@rango-dev/wallets-shared": "^0.17.0", "rango-sdk": "^0.1.35", diff --git a/wallets/wallets-adapter/package.json b/wallets/wallets-adapter/package.json index 664d6fbb22..de245f6cfa 100644 --- a/wallets/wallets-adapter/package.json +++ b/wallets/wallets-adapter/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter", - "version": "0.14.1-next.2", + "version": "0.14.1-next.3", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -24,7 +24,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.0", - "@rango-dev/ui": "^0.17.1-next.1", + "@rango-dev/ui": "^0.17.1-next.2", "@rango-dev/wallets-react": "^0.3.0", "@rango-dev/wallets-shared": "^0.17.0", "rango-types": "^0.1.46" diff --git a/widget/app/package.json b/widget/app/package.json index 02126d980b..6b5a340433 100644 --- a/widget/app/package.json +++ b/widget/app/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-app", - "version": "0.12.1-next.42", + "version": "0.12.1-next.43", "license": "MIT", "private": true, "source": "public/index.html", @@ -14,7 +14,7 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.4", + "@rango-dev/widget-embedded": "^0.14.1-next.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0" diff --git a/widget/embedded/package.json b/widget/embedded/package.json index 821222168d..5ff5ed90c5 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.14.1-next.4", + "version": "0.14.1-next.5", "license": "MIT", "type": "module", "main": "dist/index.js", @@ -23,7 +23,7 @@ "@rango-dev/queue-manager-core": "^0.17.0", "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.0", "@rango-dev/queue-manager-react": "^0.17.0", - "@rango-dev/ui": "^0.17.1-next.1", + "@rango-dev/ui": "^0.17.1-next.2", "@rango-dev/wallets-react": "^0.3.0", "@rango-dev/wallets-shared": "^0.17.0", "bignumber.js": "^9.1.1", diff --git a/widget/iframe/package.json b/widget/iframe/package.json index 76fd7e939a..f07a46a316 100644 --- a/widget/iframe/package.json +++ b/widget/iframe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-iframe", - "version": "0.12.1-next.42", + "version": "0.12.1-next.43", "license": "MIT", "private": true, "source": "src/index.ts", @@ -13,6 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.4" + "@rango-dev/widget-embedded": "^0.14.1-next.5" } } diff --git a/widget/playground/package.json b/widget/playground/package.json index 46b1a2a7cf..4b0f9891cb 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-playground", - "version": "0.12.1-next.43", + "version": "0.12.1-next.44", "license": "MIT", "private": true, "source": "public/index.html", @@ -17,10 +17,10 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.0", - "@rango-dev/ui": "^0.17.1-next.1", + "@rango-dev/ui": "^0.17.1-next.2", "@rango-dev/wallets-react": "^0.3.0", "@rango-dev/wallets-shared": "^0.17.0", - "@rango-dev/widget-embedded": "^0.14.1-next.4", + "@rango-dev/widget-embedded": "^0.14.1-next.5", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/widget/ui/package.json b/widget/ui/package.json index 020c158998..67fc2778ad 100644 --- a/widget/ui/package.json +++ b/widget/ui/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/ui", - "version": "0.17.1-next.1", + "version": "0.17.1-next.2", "license": "MIT", "type": "module", "module": "./dist/index.js", From 5503b2eaceedb1aa64c575829f25576c1f373c0e Mon Sep 17 00:00:00 2001 From: Nikaru Date: Sun, 22 Oct 2023 12:49:27 +0000 Subject: [PATCH 615/769] fix: fix cosmostation experimental chain issue --- wallets/core/src/wallet.ts | 79 +++++++++++++--------- wallets/provider-cosmostation/src/index.ts | 8 ++- 2 files changed, 53 insertions(+), 34 deletions(-) diff --git a/wallets/core/src/wallet.ts b/wallets/core/src/wallet.ts index 6377bb280b..bcec455d61 100644 --- a/wallets/core/src/wallet.ts +++ b/wallets/core/src/wallet.ts @@ -1,17 +1,11 @@ -import { - getBlockChainNameFromId, - Network, - Networks, - WalletType, -} from '@rango-dev/wallets-shared'; +import type { GetInstanceOptions, WalletActions, WalletConfig } from './types'; +import type { Network, WalletType } from '@rango-dev/wallets-shared'; +import type { BlockchainMeta } from 'rango-types'; + +import { getBlockChainNameFromId, Networks } from '@rango-dev/wallets-shared'; + import { accountAddressesWithNetwork, needsCheckInstallation } from './helpers'; -import { - Events, - GetInstanceOptions, - WalletActions, - WalletConfig, -} from './types'; -import { BlockchainMeta } from 'rango-types'; +import { Events } from './types'; export type EventHandler = ( type: WalletType, @@ -65,9 +59,11 @@ class Wallet { private async getConnectionFromState() { // Already connected, so we return provider that we have in memory. - // For switching network on Trust Wallet (WalletConnect), - // We only kill the session (and not restting the whole state) - // So we are relying on this.provider for achieving this functionality. + /* + * For switching network on Trust Wallet (WalletConnect), + * We only kill the session (and not restting the whole state) + * So we are relying on this.provider for achieving this functionality. + */ if (this.state.connected && !!this.provider) { return { accounts: this.state.accounts, @@ -86,9 +82,11 @@ class Wallet { const connectionFromState = await this.getConnectionFromState(); const currentNetwork = this.state.network; - // If a network hasn't been provided and also we have `lastNetwork` - // We will use lastNetwork to make sure we will not - // Ask the user to switch his network wrongly. + /* + * If a network hasn't been provided and also we have `lastNetwork` + * We will use lastNetwork to make sure we will not + * Ask the user to switch his network wrongly. + */ const requestedNetwork = network || currentNetwork || this.options.config.defaultNetwork; @@ -100,7 +98,17 @@ class Wallet { if (currentNetwork === requestedNetwork) { return connectionFromState; } - if (networkChanged && !!this.actions.switchNetwork) { + + let canSwitch = true; + if (this.actions.canSwitchNetworkTo) { + canSwitch = this.actions.canSwitchNetworkTo({ + provider: this.provider, + meta: this.meta, + network: requestedNetwork || '', + }); + } + + if (networkChanged && canSwitch && !!this.actions.switchNetwork) { await this.actions.switchNetwork({ instance: this.provider, meta: this.meta, @@ -173,7 +181,7 @@ class Wallet { return accountAddressesWithNetwork(blockchain.accounts, network); }); // Typescript can not detect we are filtering out null values:( - nextAccounts = accounts.filter(Boolean) as string[]; + nextAccounts = accounts.filter(Boolean); nextNetwork = requestedNetwork || this.options.config.defaultNetwork; } else { const chainId = connectResult.chainId || Networks.Unknown; @@ -231,9 +239,8 @@ class Wallet { if (eagerConnection) { // Connect to wallet as usual return this.connect(); - } else { - throw new Error(error_message); } + throw new Error(error_message); } else { throw new Error(error_message); } @@ -247,7 +254,9 @@ class Wallet { } canSwitchNetworkTo(network: Network, provider: any) { const switchTo = this.actions.canSwitchNetworkTo; - if (!switchTo) return false; + if (!switchTo) { + return false; + } return switchTo({ network, @@ -264,7 +273,9 @@ class Wallet { } } else if (needsCheckInstallation(this.options)) { this.actions.getInstance().then((data: any) => { - if (data) this.setInstalledAs(true); + if (data) { + this.setInstalledAs(true); + } }); } } @@ -309,8 +320,10 @@ class Wallet { return this.state; } updateState(states: Partial) { - // We will notify handler after updating all the states. - // Because when we call `handler` it will has latest states. + /* + * We will notify handler after updating all the states. + * Because when we call `handler` it will has latest states. + */ const updates: [Events, any][] = []; if (typeof states.connected !== 'undefined') { @@ -371,7 +384,9 @@ class Wallet { } private setInstalledAs(value: boolean) { - if (!needsCheckInstallation(this.options) && value === false) return; + if (!needsCheckInstallation(this.options) && value === false) { + return; + } this.updateState({ installed: value, @@ -385,9 +400,11 @@ class Wallet { force?: boolean; }) { let instance = null; - // For switching network on Trust Wallet (WalletConnect), - // We only kill the session (and not restting the whole state) - // So we are relying on this.provider for achieving this functionality. + /* + * For switching network on Trust Wallet (WalletConnect), + * We only kill the session (and not restting the whole state) + * So we are relying on this.provider for achieving this functionality. + */ this.setProvider(null); if (this.options.config.isAsyncInstance) { // Trying to connect diff --git a/wallets/provider-cosmostation/src/index.ts b/wallets/provider-cosmostation/src/index.ts index dc5e88d1b3..7f1439066c 100644 --- a/wallets/provider-cosmostation/src/index.ts +++ b/wallets/provider-cosmostation/src/index.ts @@ -34,11 +34,11 @@ const WALLET = WalletTypes.COSMOSTATION; export const config = { type: WALLET, - defaultNetwork: Networks.ETHEREUM, + defaultNetwork: Networks.COSMOS, }; export const getInstance = cosmostation_instance; -export const connect: Connect = async ({ instance, meta }) => { +export const connect: Connect = async ({ instance, meta, network }) => { const ethInstance = chooseInstance(instance, meta, Networks.ETHEREUM); const cosmosInstance = chooseInstance(instance, meta, Networks.COSMOS); @@ -51,10 +51,12 @@ export const connect: Connect = async ({ instance, meta }) => { if (cosmosInstance) { const cosmosBlockchainMeta = meta.filter(isCosmosBlockchain); + const requestedNetwork = network || Networks.COSMOS; + const comsmosResult = await getCosmosAccounts({ instance: cosmosInstance, meta: cosmosBlockchainMeta, - network: Networks.COSMOS, + network: requestedNetwork, }); if (Array.isArray(comsmosResult)) { results.push(...comsmosResult); From 9d2dd389a087b8e417da889b4c597a7720757bd4 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 25 Oct 2023 08:31:52 +0000 Subject: [PATCH 616/769] chore(release): publish - provider-cosmostation@0.17.1-next.0 - wallets-core@0.17.1-next.0 - provider-all@0.17.1-next.1 - wallets-react@0.3.1-next.0 - queue-manager-rango-preset@0.17.1-next.1 - ui@0.17.1-next.3 - queue-manager-demo@0.11.1-next.16 - wallets-adapter@0.14.1-next.4 - wallets-demo@0.11.1-next.33 - widget-embedded@0.14.1-next.6 - wallets-adapter-demo@0.12.1-next.32 - widget-playground@0.12.1-next.45 - widget-iframe@0.12.1-next.44 - widget-app@0.12.1-next.44 Affected packages: provider-cosmostation@0.17.1-next.0,wallets-core@0.17.1-next.0,provider-all@0.17.1-next.1,wallets-react@0.3.1-next.0,queue-manager-rango-preset@0.17.1-next.1,ui@0.17.1-next.3,queue-manager-demo@0.11.1-next.16,wallets-adapter@0.14.1-next.4,wallets-demo@0.11.1-next.33,widget-embedded@0.14.1-next.6,wallets-adapter-demo@0.12.1-next.32,widget-playground@0.12.1-next.45,widget-iframe@0.12.1-next.44,widget-app@0.12.1-next.44 --- examples/queue-manager-demo/package.json | 8 ++++---- examples/wallets-adapter-demo/package.json | 6 +++--- examples/wallets-demo/package.json | 8 ++++---- queue-manager/rango-preset/package.json | 2 +- wallets/core/package.json | 2 +- wallets/provider-all/package.json | 4 ++-- wallets/provider-cosmostation/package.json | 2 +- wallets/react/package.json | 4 ++-- wallets/wallets-adapter/package.json | 8 ++++---- widget/app/package.json | 4 ++-- widget/embedded/package.json | 10 +++++----- widget/iframe/package.json | 4 ++-- widget/playground/package.json | 10 +++++----- widget/ui/package.json | 2 +- 14 files changed, 37 insertions(+), 37 deletions(-) diff --git a/examples/queue-manager-demo/package.json b/examples/queue-manager-demo/package.json index 0187406170..de9b613755 100644 --- a/examples/queue-manager-demo/package.json +++ b/examples/queue-manager-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/queue-manager-demo", - "version": "0.11.1-next.15", + "version": "0.11.1-next.16", "license": "MIT", "private": true, "source": "public/index.html", @@ -15,10 +15,10 @@ "rango-sdk": "^0.1.35" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.1-next.0", - "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.0", + "@rango-dev/provider-all": "^0.17.1-next.1", + "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.1", "@rango-dev/queue-manager-react": "^0.17.0", - "@rango-dev/wallets-react": "^0.3.0", + "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "bignumber.js": "^9.1.1", "ethers": "^5.7.2", diff --git a/examples/wallets-adapter-demo/package.json b/examples/wallets-adapter-demo/package.json index 6d9f4068fe..275844c1ba 100644 --- a/examples/wallets-adapter-demo/package.json +++ b/examples/wallets-adapter-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter-demo", - "version": "0.12.1-next.31", + "version": "0.12.1-next.32", "license": "MIT", "private": true, "source": "public/index.html", @@ -11,8 +11,8 @@ "clean": "rimraf .parcel-cache && rimraf dist" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.1-next.0", - "@rango-dev/wallets-adapter": "^0.14.1-next.3", + "@rango-dev/provider-all": "^0.17.1-next.1", + "@rango-dev/wallets-adapter": "^0.14.1-next.4", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/wallets-demo/package.json b/examples/wallets-demo/package.json index 5104c4e246..baedd3b3d4 100644 --- a/examples/wallets-demo/package.json +++ b/examples/wallets-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-demo", - "version": "0.11.1-next.32", + "version": "0.11.1-next.33", "license": "MIT", "private": true, "source": "public/index.html", @@ -11,9 +11,9 @@ "clean": "rimraf .parcel-cache && rimraf dist" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.1-next.0", - "@rango-dev/ui": "^0.17.1-next.2", - "@rango-dev/wallets-react": "^0.3.0", + "@rango-dev/provider-all": "^0.17.1-next.1", + "@rango-dev/ui": "^0.17.1-next.3", + "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "rango-sdk": "^0.1.35", "react": "^18.2.0", diff --git a/queue-manager/rango-preset/package.json b/queue-manager/rango-preset/package.json index 1ba12d39b4..628ccc5c17 100644 --- a/queue-manager/rango-preset/package.json +++ b/queue-manager/rango-preset/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/queue-manager-rango-preset", - "version": "0.17.1-next.0", + "version": "0.17.1-next.1", "license": "MIT", "type": "module", "module": "./dist/index.js", diff --git a/wallets/core/package.json b/wallets/core/package.json index 0216068afe..124b089891 100644 --- a/wallets/core/package.json +++ b/wallets/core/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-core", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", diff --git a/wallets/provider-all/package.json b/wallets/provider-all/package.json index bdb6934c80..cee9f3c9b9 100644 --- a/wallets/provider-all/package.json +++ b/wallets/provider-all/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-all", - "version": "0.17.1-next.0", + "version": "0.17.1-next.1", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -27,7 +27,7 @@ "@rango-dev/provider-clover": "^0.17.0", "@rango-dev/provider-coin98": "^0.17.0", "@rango-dev/provider-coinbase": "^0.17.0", - "@rango-dev/provider-cosmostation": "^0.17.0", + "@rango-dev/provider-cosmostation": "^0.17.1-next.0", "@rango-dev/provider-enkrypt": "^0.17.0", "@rango-dev/provider-exodus": "^0.17.0", "@rango-dev/provider-frontier": "^0.17.0", diff --git a/wallets/provider-cosmostation/package.json b/wallets/provider-cosmostation/package.json index a0eb49e867..9207a53bd2 100644 --- a/wallets/provider-cosmostation/package.json +++ b/wallets/provider-cosmostation/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-cosmostation", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", diff --git a/wallets/react/package.json b/wallets/react/package.json index 5d238e2abe..48a0ce7904 100644 --- a/wallets/react/package.json +++ b/wallets/react/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-react", - "version": "0.3.0", + "version": "0.3.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -25,7 +25,7 @@ "react-dom": "^17.0.0 || ^18.0.0" }, "dependencies": { - "@rango-dev/wallets-core": "^0.17.0", + "@rango-dev/wallets-core": "^0.17.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "rango-types": "^0.1.46" }, diff --git a/wallets/wallets-adapter/package.json b/wallets/wallets-adapter/package.json index de245f6cfa..5defa02893 100644 --- a/wallets/wallets-adapter/package.json +++ b/wallets/wallets-adapter/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter", - "version": "0.14.1-next.3", + "version": "0.14.1-next.4", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -23,9 +23,9 @@ "react": ">=16" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.1-next.0", - "@rango-dev/ui": "^0.17.1-next.2", - "@rango-dev/wallets-react": "^0.3.0", + "@rango-dev/provider-all": "^0.17.1-next.1", + "@rango-dev/ui": "^0.17.1-next.3", + "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "rango-types": "^0.1.46" }, diff --git a/widget/app/package.json b/widget/app/package.json index 6b5a340433..6c34b4221f 100644 --- a/widget/app/package.json +++ b/widget/app/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-app", - "version": "0.12.1-next.43", + "version": "0.12.1-next.44", "license": "MIT", "private": true, "source": "public/index.html", @@ -14,7 +14,7 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.5", + "@rango-dev/widget-embedded": "^0.14.1-next.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0" diff --git a/widget/embedded/package.json b/widget/embedded/package.json index 5ff5ed90c5..67f9b2fd97 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.14.1-next.5", + "version": "0.14.1-next.6", "license": "MIT", "type": "module", "main": "dist/index.js", @@ -19,12 +19,12 @@ "dependencies": { "@lingui/core": "4.2.1", "@lingui/react": "4.2.1", - "@rango-dev/provider-all": "^0.17.1-next.0", + "@rango-dev/provider-all": "^0.17.1-next.1", "@rango-dev/queue-manager-core": "^0.17.0", - "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.0", + "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.1", "@rango-dev/queue-manager-react": "^0.17.0", - "@rango-dev/ui": "^0.17.1-next.2", - "@rango-dev/wallets-react": "^0.3.0", + "@rango-dev/ui": "^0.17.1-next.3", + "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "bignumber.js": "^9.1.1", "copy-to-clipboard": "^3.3.3", diff --git a/widget/iframe/package.json b/widget/iframe/package.json index f07a46a316..69d9ea0483 100644 --- a/widget/iframe/package.json +++ b/widget/iframe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-iframe", - "version": "0.12.1-next.43", + "version": "0.12.1-next.44", "license": "MIT", "private": true, "source": "src/index.ts", @@ -13,6 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.5" + "@rango-dev/widget-embedded": "^0.14.1-next.6" } } diff --git a/widget/playground/package.json b/widget/playground/package.json index 4b0f9891cb..3f029e1d5c 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-playground", - "version": "0.12.1-next.44", + "version": "0.12.1-next.45", "license": "MIT", "private": true, "source": "public/index.html", @@ -16,11 +16,11 @@ "@types/stringify-object": "^4.0.2" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.1-next.0", - "@rango-dev/ui": "^0.17.1-next.2", - "@rango-dev/wallets-react": "^0.3.0", + "@rango-dev/provider-all": "^0.17.1-next.1", + "@rango-dev/ui": "^0.17.1-next.3", + "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", - "@rango-dev/widget-embedded": "^0.14.1-next.5", + "@rango-dev/widget-embedded": "^0.14.1-next.6", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/widget/ui/package.json b/widget/ui/package.json index 67fc2778ad..53f91da476 100644 --- a/widget/ui/package.json +++ b/widget/ui/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/ui", - "version": "0.17.1-next.2", + "version": "0.17.1-next.3", "license": "MIT", "type": "module", "module": "./dist/index.js", From c32bf10ee0dded5a92a33305a06202435eb55b6b Mon Sep 17 00:00:00 2001 From: mikasackermn Date: Wed, 25 Oct 2023 13:24:15 +0000 Subject: [PATCH 617/769] feat: implement Themes section in Style for playground --- .../src/components/TokenList/TokenList.tsx | 2 +- widget/embedded/src/constants/fonts.ts | 1 + .../src/{constants.ts => constants/index.ts} | 0 widget/embedded/src/hooks/useTheme.ts | 62 +++++- widget/embedded/src/index.ts | 59 ++--- widget/embedded/src/types/config.ts | 14 +- widget/embedded/src/utils/colors.ts | 93 ++++++++ widget/embedded/src/utils/common.ts | 49 ----- .../OverlayPanel/OverlayPanel.styles.ts | 1 + widget/playground/src/constants.ts | 40 ---- widget/playground/src/constants/fonts.ts | 14 ++ widget/playground/src/constants/index.ts | 15 ++ widget/playground/src/constants/languages.ts | 12 + widget/playground/src/constants/presets.ts | 207 ++++++++++++++++++ widget/playground/src/constants/styles.ts | 2 + .../StyleLayout/StyleLayout.General.tsx | 1 + .../StyleLayout/StyleLayout.Preset.tsx | 157 +++++++++++++ .../StyleLayout/StyleLayout.Themes.tsx | 81 +++++++ .../StyleLayout/StyleLayout.styles.ts | 108 ++++++++- .../containers/StyleLayout/StyleLayout.tsx | 28 ++- .../StyleLayout/StyleLayout.types.ts | 16 ++ widget/playground/src/hook/useTheme.ts | 18 +- widget/playground/src/store/config.ts | 35 +-- widget/playground/src/utils/common.ts | 19 ++ widget/ui/src/icons/Colors.tsx | 33 +++ widget/ui/src/icons/CustomColors.tsx | 21 ++ widget/ui/src/icons/LogoWithText.tsx | 32 +-- widget/ui/src/icons/Style.tsx | 54 ++--- widget/ui/src/icons/index.ts | 2 + widget/ui/src/theme.ts | 51 +++-- widget/ui/svgs/configs/.svgrrc.default.cjs | 2 +- .../ui/svgs/resources/fill/Custom-Colors.svg | 3 + widget/ui/svgs/resources/fill/colors.svg | 5 + widget/ui/svgs/resources/fill/style.svg | 14 +- 34 files changed, 1003 insertions(+), 248 deletions(-) create mode 100644 widget/embedded/src/constants/fonts.ts rename widget/embedded/src/{constants.ts => constants/index.ts} (100%) create mode 100644 widget/embedded/src/utils/colors.ts delete mode 100644 widget/playground/src/constants.ts create mode 100644 widget/playground/src/constants/fonts.ts create mode 100644 widget/playground/src/constants/index.ts create mode 100644 widget/playground/src/constants/languages.ts create mode 100644 widget/playground/src/constants/presets.ts create mode 100644 widget/playground/src/constants/styles.ts create mode 100644 widget/playground/src/containers/StyleLayout/StyleLayout.Preset.tsx create mode 100644 widget/playground/src/containers/StyleLayout/StyleLayout.Themes.tsx create mode 100644 widget/playground/src/containers/StyleLayout/StyleLayout.types.ts create mode 100644 widget/playground/src/utils/common.ts create mode 100644 widget/ui/src/icons/Colors.tsx create mode 100644 widget/ui/src/icons/CustomColors.tsx create mode 100644 widget/ui/svgs/resources/fill/Custom-Colors.svg create mode 100644 widget/ui/svgs/resources/fill/colors.svg mode change 100755 => 100644 widget/ui/svgs/resources/fill/style.svg diff --git a/widget/embedded/src/components/TokenList/TokenList.tsx b/widget/embedded/src/components/TokenList/TokenList.tsx index 54f40e019d..841f228243 100644 --- a/widget/embedded/src/components/TokenList/TokenList.tsx +++ b/widget/embedded/src/components/TokenList/TokenList.tsx @@ -24,7 +24,7 @@ import React, { forwardRef, useEffect, useState } from 'react'; import { useAppStore } from '../../store/app'; import { useMetaStore } from '../../store/meta'; import { useWalletsStore } from '../../store/wallets'; -import { generateRangeColors } from '../../utils/common'; +import { generateRangeColors } from '../../utils/colors'; import { LoadingTokenList } from './LoadingTokenList'; import { diff --git a/widget/embedded/src/constants/fonts.ts b/widget/embedded/src/constants/fonts.ts new file mode 100644 index 0000000000..6829de5d6f --- /dev/null +++ b/widget/embedded/src/constants/fonts.ts @@ -0,0 +1 @@ +export const DEFAULT_FONT_FAMILY = 'Roboto'; diff --git a/widget/embedded/src/constants.ts b/widget/embedded/src/constants/index.ts similarity index 100% rename from widget/embedded/src/constants.ts rename to widget/embedded/src/constants/index.ts diff --git a/widget/embedded/src/hooks/useTheme.ts b/widget/embedded/src/hooks/useTheme.ts index 00b9142304..8ffc5ac15c 100644 --- a/widget/embedded/src/hooks/useTheme.ts +++ b/widget/embedded/src/hooks/useTheme.ts @@ -1,26 +1,36 @@ import type { WidgetTheme } from '../types'; -import { createTheme, darkTheme, lightTheme } from '@rango-dev/ui'; +import { + createTheme, + darkTheme, + lightTheme, + darkColors as mainDarkColors, + theme as mainTheme, +} from '@rango-dev/ui'; import { useEffect, useState } from 'react'; +import { DEFAULT_FONT_FAMILY } from '../constants/fonts'; import { useMetaStore } from '../store/meta'; import { useSettingsStore } from '../store/settings'; +import { generateColors } from '../utils/colors'; import { DEFAULT_PRIMARY_RADIUS, DEFAULT_SECONDARY_RADIUS, } from '../utils/configs'; -export function useTheme({ - // colors, - fontFamily = 'Roboto', - borderRadius = DEFAULT_PRIMARY_RADIUS, - secondaryBorderRadius = DEFAULT_SECONDARY_RADIUS, - mode = 'auto', -}: WidgetTheme) { +export function useTheme(props: WidgetTheme) { + const { + colors, + fontFamily = DEFAULT_FONT_FAMILY, + borderRadius = DEFAULT_PRIMARY_RADIUS, + secondaryBorderRadius = DEFAULT_SECONDARY_RADIUS, + mode = 'auto', + } = props; const theme = useSettingsStore.use.theme(); + const mainColors = mainTheme.colors; + const fetchMeta = useMetaStore.use.fetchMeta(); const setTheme = useSettingsStore.use.setTheme(); - const customTheme = createTheme({ radii: { primary: `${borderRadius}px`, @@ -31,8 +41,38 @@ export function useTheme({ }, }); - const lightClassName = `${customTheme.className} ${lightTheme.className}`; - const darkClassName = `${customTheme.className} ${darkTheme.className}`; + const darkColors = generateColors( + { + ...mainColors, + ...mainDarkColors, + }, + colors?.dark + ); + const lightColors = generateColors(mainColors, colors?.light); + const customLightTheme = Object.keys(lightColors).length + ? createTheme({ + colors: lightColors, + }) + : lightTheme; + const customDarkTheme = Object.keys(darkColors).length + ? createTheme({ + colors: { + ...darkColors, + neutral100: darkColors.neutral900, + neutral200: darkColors.neutral800, + neutral300: darkColors.neutral700, + neutral400: darkColors.neutral600, + neutral500: darkColors.neutral500, + neutral600: darkColors.neutral400, + neutral700: darkColors.neutral300, + neutral800: darkColors.neutral200, + neutral900: darkColors.neutral100, + }, + }) + : darkTheme; + + const lightClassName = `${customTheme.className} ${customLightTheme.className}`; + const darkClassName = `${customTheme.className} ${customDarkTheme.className}`; const [OSTheme, setOSTheme] = useState('light'); diff --git a/widget/embedded/src/index.ts b/widget/embedded/src/index.ts index a6ab9581e1..9e3cda7748 100644 --- a/widget/embedded/src/index.ts +++ b/widget/embedded/src/index.ts @@ -1,46 +1,53 @@ -import { - WidgetTheme, - WidgetConfig, - WidgetColors, +import type { BlockchainAndTokenConfig, + WidgetColors, + WidgetColorsKeys, + WidgetConfig, + WidgetTheme, } from './types'; -import { WidgetProps, Widget } from './Widget'; -import { WalletType } from '@rango-dev/wallets-shared'; -import { WidgetWallets } from './Wallets'; -import { - useWallets, - ProviderInterface, - EventHandler as HandleWalletsUpdate, -} from '@rango-dev/wallets-react'; -import { - useEvents as useWidgetEvents, - MainEvents, - RouteEvent, - StepEvent, +import type { WidgetProps } from './Widget'; +import type { Route, - Step, + RouteEvent, + RouteFailedEvent, RouteStartedEvent, RouteSucceededEvent, - RouteFailedEvent, - RouteEventType, + Step, + StepApprovalTxSucceededEvent, + StepCheckStatusEvent, + StepEvent, + StepFailedEvent, + StepOutputRevealedEvent, StepStartedEvent, StepSucceededEvent, - StepFailedEvent, - StepTxExecutionUpdatedEvent, StepTxExecutionBlockedEvent, - StepCheckStatusEvent, - StepApprovalTxSucceededEvent, - StepOutputRevealedEvent, + StepTxExecutionUpdatedEvent, +} from '@rango-dev/queue-manager-rango-preset'; +import type { + EventHandler as HandleWalletsUpdate, + ProviderInterface, +} from '@rango-dev/wallets-react'; +import type { WalletType } from '@rango-dev/wallets-shared'; + +import { + MainEvents, + RouteEventType, StepEventType, - StepExecutionEventStatus, StepExecutionBlockedEventStatus, + StepExecutionEventStatus, + useEvents as useWidgetEvents, } from '@rango-dev/queue-manager-rango-preset'; +import { useWallets } from '@rango-dev/wallets-react'; + +import { WidgetWallets } from './Wallets'; +import { Widget } from './Widget'; export type { WidgetConfig, WalletType, WidgetTheme, WidgetColors, + WidgetColorsKeys, ProviderInterface, BlockchainAndTokenConfig, WidgetProps, diff --git a/widget/embedded/src/types/config.ts b/widget/embedded/src/types/config.ts index 18d5508997..bbab5012d5 100644 --- a/widget/embedded/src/types/config.ts +++ b/widget/embedded/src/types/config.ts @@ -8,22 +8,16 @@ import type { Asset } from 'rango-sdk'; * @property {string} background * @property {string} foreground * @property {string} primary - * @property {string} success - * @property {string} error - * @property {string} warning - * @property {string} surface - * @property {string} neutral + * @property {string} secondary * */ +export type WidgetColorsKeys = keyof WidgetColors; export type WidgetColors = { background?: string; foreground?: string; - primary?: string; - success?: string; - error?: string; - warning?: string; - surface?: string; neutral?: string; + primary?: string; + secondary?: string; }; /** diff --git a/widget/embedded/src/utils/colors.ts b/widget/embedded/src/utils/colors.ts new file mode 100644 index 0000000000..7250a1e05d --- /dev/null +++ b/widget/embedded/src/utils/colors.ts @@ -0,0 +1,93 @@ +import type { WidgetColors, WidgetColorsKeys } from '../types'; + +export const colorShade = (col: string, amt: number) => { + const RANGE = 255; + const COL = 3; + const RADIX = 16; + + col = col.replace(/^#/, ''); + if (col.length === COL) { + col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2]; + } + let [r, g, b]: any = col.match(/.{2}/g); + [r, g, b] = [ + parseInt(r, RADIX) + amt, + parseInt(g, RADIX) + amt, + parseInt(b, RADIX) + amt, + ]; + + r = Math.max(Math.min(RANGE, r), 0).toString(RADIX); + g = Math.max(Math.min(RANGE, g), 0).toString(RADIX); + b = Math.max(Math.min(RANGE, b), 0).toString(RADIX); + + const rr = (r.length < 2 ? '0' : '') + r; + const gg = (g.length < 2 ? '0' : '') + g; + const bb = (b.length < 2 ? '0' : '') + b; + + return `#${rr}${gg}${bb}`; +}; + +export const generateRangeColors = (name: string, color: string) => { + const NUMBER_OF_COLORS = 10; + const HALF_NUMBER_OF_COLORS = 5; + const COLOR_SUFFIX = 100; + const AMT = 32; + + let colors = { [name]: color }; + for (let i = 1; i < NUMBER_OF_COLORS; i++) { + if (i < HALF_NUMBER_OF_COLORS) { + colors = { + ...colors, + [name + i * COLOR_SUFFIX]: colorShade( + color, + (HALF_NUMBER_OF_COLORS - i) * AMT + ), + }; + } + if (i === HALF_NUMBER_OF_COLORS) { + colors = { + ...colors, + [name + i * COLOR_SUFFIX]: color, + }; + } + if (i > HALF_NUMBER_OF_COLORS) { + colors = { + ...colors, + [name + i * COLOR_SUFFIX]: colorShade( + color, + -((i - HALF_NUMBER_OF_COLORS) * AMT) + ), + }; + } + } + return colors; +}; +export const generateColors = ( + mainColors: { [x: string]: string }, + colors?: WidgetColors +) => { + if (!colors || !Object.entries(colors).length) { + return {}; + } + let changeColors = false; + let listOfColors = { ...mainColors }; + for (const colorKey in colors) { + const color = colors[colorKey as WidgetColorsKeys]; + + if (!!color && color !== mainColors[colorKey]) { + changeColors = true; + if (colorKey === 'background' || colorKey === 'foreground') { + listOfColors = { + ...listOfColors, + [colorKey]: color, + }; + } else { + listOfColors = { + ...listOfColors, + ...generateRangeColors(colorKey, color), + }; + } + } + } + return changeColors ? listOfColors : {}; +}; diff --git a/widget/embedded/src/utils/common.ts b/widget/embedded/src/utils/common.ts index 638c66532b..4b0503fdb4 100644 --- a/widget/embedded/src/utils/common.ts +++ b/widget/embedded/src/utils/common.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-magic-numbers */ export function removeDuplicateFrom(array: T[]): T[] { return Array.from(new Set(array)); } @@ -31,53 +30,5 @@ export function containsText(text: string, searchText: string): boolean { return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1; } -export const colorShade = (col: string, amt: number) => { - col = col.replace(/^#/, ''); - if (col.length === 3) { - col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2]; - } - let [r, g, b]: any = col.match(/.{2}/g); - [r, g, b] = [ - parseInt(r, 16) + amt, - parseInt(g, 16) + amt, - parseInt(b, 16) + amt, - ]; - - r = Math.max(Math.min(255, r), 0).toString(16); - g = Math.max(Math.min(255, g), 0).toString(16); - b = Math.max(Math.min(255, b), 0).toString(16); - - const rr = (r.length < 2 ? '0' : '') + r; - const gg = (g.length < 2 ? '0' : '') + g; - const bb = (b.length < 2 ? '0' : '') + b; - - return `#${rr}${gg}${bb}`; -}; - -export const generateRangeColors = (name: string, color: string) => { - let colors = { [name]: color }; - for (let i = 1; i < 10; i++) { - if (i < 5) { - colors = { - ...colors, - [name + i * 100]: colorShade(color, (5 - i) * 32), - }; - } - if (i === 5) { - colors = { - ...colors, - [name + i * 100]: color, - }; - } - if (i > 5) { - colors = { - ...colors, - [name + i * 100]: colorShade(color, -((i - 5) * 32)), - }; - } - } - return colors; -}; - export const getContainer = () => document.getElementById('swap-box') as HTMLElement; diff --git a/widget/playground/src/components/OverlayPanel/OverlayPanel.styles.ts b/widget/playground/src/components/OverlayPanel/OverlayPanel.styles.ts index 45c15770c4..a2f38e40c4 100644 --- a/widget/playground/src/components/OverlayPanel/OverlayPanel.styles.ts +++ b/widget/playground/src/components/OverlayPanel/OverlayPanel.styles.ts @@ -22,6 +22,7 @@ export const Layout = styled('div', { height: '100%', flexDirection: 'column', position: 'absolute', + zIndex: 1, top: 0, left: 0, zIndex: '1', diff --git a/widget/playground/src/constants.ts b/widget/playground/src/constants.ts deleted file mode 100644 index b6543a7dc1..0000000000 --- a/widget/playground/src/constants.ts +++ /dev/null @@ -1,40 +0,0 @@ -export const LANGUAGES = [ - { - name: 'English (US)', - logo: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/800px-Flag_of_the_United_States.svg.png?20151118161041', - value: 'en', - }, - { - name: 'Turkish', - logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Flag_of_Turkey.svg/800px-Flag_of_Turkey.svg.png', - value: 'tr', - }, -]; - -export const FONTS = [ - { - name: 'Roboto', - value: 'Roboto', - }, - { - name: 'Times New Roman', - value: 'Times New Roman', - }, - { - name: 'Arial', - value: 'Arial', - }, -]; - -export enum SearchParams { - LAYOUT = 'layout', -} - -export enum SIDE_TABS_IDS { - FUNCTIONAL = 'functional', - STYLE = 'style', -} - -export const DEFAULT_PRIMARY_RADIUS = 20; -export const DEFAULT_SECONDARY_RADIUS = 25; -export const NOT_FOUND = -1; diff --git a/widget/playground/src/constants/fonts.ts b/widget/playground/src/constants/fonts.ts new file mode 100644 index 0000000000..7f5dd9c16d --- /dev/null +++ b/widget/playground/src/constants/fonts.ts @@ -0,0 +1,14 @@ +export const FONTS = [ + { + name: 'Roboto', + value: 'Roboto', + }, + { + name: 'Times New Roman', + value: 'Times New Roman', + }, + { + name: 'Arial', + value: 'Arial', + }, +]; diff --git a/widget/playground/src/constants/index.ts b/widget/playground/src/constants/index.ts new file mode 100644 index 0000000000..311ebfb544 --- /dev/null +++ b/widget/playground/src/constants/index.ts @@ -0,0 +1,15 @@ +export * from './fonts'; +export * from './languages'; +export * from './presets'; +export * from './styles'; + +export enum SearchParams { + LAYOUT = 'layout', +} + +export enum SIDE_TABS_IDS { + FUNCTIONAL = 'functional', + STYLE = 'style', +} + +export const NOT_FOUND = -1; diff --git a/widget/playground/src/constants/languages.ts b/widget/playground/src/constants/languages.ts new file mode 100644 index 0000000000..d9a5f7e518 --- /dev/null +++ b/widget/playground/src/constants/languages.ts @@ -0,0 +1,12 @@ +export const LANGUAGES = [ + { + name: 'English (US)', + logo: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/800px-Flag_of_the_United_States.svg.png?20151118161041', + value: 'en', + }, + { + name: 'Turkish', + logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Flag_of_Turkey.svg/800px-Flag_of_Turkey.svg.png', + value: 'tr', + }, +]; diff --git a/widget/playground/src/constants/presets.ts b/widget/playground/src/constants/presets.ts new file mode 100644 index 0000000000..82a8dd9e9e --- /dev/null +++ b/widget/playground/src/constants/presets.ts @@ -0,0 +1,207 @@ +import type { Mode } from '../store/config'; +import type { WidgetColors } from '@rango-dev/widget-embedded'; + +export const TABS: { id: Mode; title: string }[] = [ + { + id: 'light', + title: 'Light', + }, + + { + id: 'dark', + title: 'Dark', + }, + + { + id: 'auto', + title: 'System', + }, +]; + +export const PRESETS: { + id: number; + dark?: WidgetColors; + light?: WidgetColors; +}[] = [ + { + id: 1, + dark: { + primary: '#1C3CF1', + secondary: '#2284ED', + neutral: '#222222', + background: '#010101', + foreground: '#FDFDFD', + }, + light: { + primary: '#1C3CF1', + secondary: '#469BF5', + neutral: '#E6E6E6', + background: '#FDFDFD', + foreground: '#010101', + }, + }, + { + id: 2, + light: { + primary: '#1C3CF1', + secondary: '#469BF5', + neutral: '#E6E6E6', + background: '#FDFDFD', + foreground: '#010101', + }, + }, + { + id: 3, + dark: { + primary: '#1C3CF1', + secondary: '#2284ED', + neutral: '#222222', + background: '#010101', + foreground: '#FDFDFD', + }, + }, + + { + id: 4, + dark: { + primary: '#502f82ff', + secondary: '#9b6de2ff', + neutral: '#a4a0bd', + // info: '#000022', + foreground: '#fcfaffff', + background: '#120f29ff', + }, + light: { + primary: '#31007aff', + secondary: '#653ba3ff', + neutral: '#84809d', + // info: '#8e6abf', + foreground: '#120f29ff', + background: '#fcfaffff', + }, + }, + { + id: 5, + light: { + primary: '#31007aff', + secondary: '#653ba3ff', + neutral: '#84809d', + // info: '#8e6abf', + foreground: '#120f29ff', + background: '#fcfaffff', + }, + }, + { + id: 6, + dark: { + primary: '#502f82ff', + secondary: '#9b6de2ff', + neutral: '#a4a0bd', + // info: '#000022', + foreground: '#fcfaffff', + background: '#120f29ff', + }, + }, + { + id: 7, + dark: { + background: '#110114ff', + secondary: '#2d2a2dff', + primary: '#d400cbff', + }, + light: { + background: '#fffeffff', + primary: '#d400cbff', + foreground: '#2f0146ff', + secondary: '#f5f1f7ff', + neutral: '#eae5eaff', + }, + }, + { + id: 8, + + light: { + background: '#fffeffff', + primary: '#d400cbff', + foreground: '#2f0146ff', + secondary: '#f5f1f7ff', + neutral: '#eae5eaff', + }, + }, + { + id: 9, + dark: { + background: '#110114ff', + secondary: '#2d2a2dff', + primary: '#d400cbff', + }, + }, + + { + id: 10, + dark: { + primary: '#353038ff', + neutral: '#353038ff', + secondary: '#353038ff', + background: '#252028ff', + foreground: '#88818cff', + }, + }, + { + id: 11, + dark: { + foreground: '#fff', + background: '#171721ff', + secondary: '#1c1c28ff', + primary: '#7720e9ff', + neutral: '#1c1c28ff', + }, + light: { + background: '#fff', + foreground: '#171721ff', + neutral: '#f9fafbff', + secondary: '#f9fafbff', + primary: '#7f1fffff', + }, + }, + { + id: 12, + light: { + background: '#fff', + foreground: '#171721ff', + neutral: '#f9fafbff', + secondary: '#f9fafbff', + primary: '#7f1fffff', + }, + }, + { + id: 13, + dark: { + foreground: '#fff', + background: '#171721ff', + secondary: '#1c1c28ff', + primary: '#7720e9ff', + neutral: '#1c1c28ff', + }, + }, + { + id: 14, + dark: { + background: '#0c1536ff', + primary: '#6c5be0ff', + foreground: '#c4d1fdff', + secondary: '#13164eff', + neutral: '#181c63ff', + }, + }, + { + id: 15, + dark: { + background: '#0c0f12ff', + primary: '#e0c072ff', + foreground: '#e0c072ff', + secondary: '#12171cff', + neutral: '#202327ff', + }, + }, +]; diff --git a/widget/playground/src/constants/styles.ts b/widget/playground/src/constants/styles.ts new file mode 100644 index 0000000000..8c0cf9d90d --- /dev/null +++ b/widget/playground/src/constants/styles.ts @@ -0,0 +1,2 @@ +export const DEFAULT_PRIMARY_RADIUS = 20; +export const DEFAULT_SECONDARY_RADIUS = 25; diff --git a/widget/playground/src/containers/StyleLayout/StyleLayout.General.tsx b/widget/playground/src/containers/StyleLayout/StyleLayout.General.tsx index e008c830f7..a6e5f384f7 100644 --- a/widget/playground/src/containers/StyleLayout/StyleLayout.General.tsx +++ b/widget/playground/src/containers/StyleLayout/StyleLayout.General.tsx @@ -22,6 +22,7 @@ export function General() { const onChangeTheme = useConfigStore.use.onChangeTheme(); const borderRadius = useConfigStore.use.config().theme?.borderRadius; + const secondaryBorderRadius = useConfigStore.use.config().theme?.secondaryBorderRadius; const fontFamily = diff --git a/widget/playground/src/containers/StyleLayout/StyleLayout.Preset.tsx b/widget/playground/src/containers/StyleLayout/StyleLayout.Preset.tsx new file mode 100644 index 0000000000..9acecee31c --- /dev/null +++ b/widget/playground/src/containers/StyleLayout/StyleLayout.Preset.tsx @@ -0,0 +1,157 @@ +import type { ColorsTypes, PresetTypes } from './StyleLayout.types'; +import type { WidgetColors } from '@rango-dev/widget-embedded'; + +import { Button, Divider, Switch, Typography } from '@rango-dev/ui'; +import React, { useState } from 'react'; + +import { PRESETS } from '../../constants'; +import { useConfigStore } from '../../store/config'; +import { shallowEqual } from '../../utils/common'; + +import { + Collapse, + Color, + ColorsContent, + PresetContent, + PresetTheme, + Row, +} from './StyleLayout.styles'; + +const Colors = (props: ColorsTypes) => { + return ( + + + + + + ); +}; + +const EACH_COL_HEIGHT = 41; +const TWO_ROWS_NUMBER_OF_COLS = 4; +const ONE_ROW_NUMBER_OF_COLS = 2; +export function Preset(props: PresetTypes) { + const { tab } = props; + const [showMore, setShowMore] = useState({ + tab, + value: false, + }); + const isShowMore = showMore.value && tab === showMore.tab; + + const onChangeTheme = useConfigStore.use.onChangeTheme(); + const onSelectTheme = useConfigStore.use.onSelectTheme(); + const { theme } = useConfigStore.use.config(); + const isDarkTab = tab === 'dark'; + const isLightTab = tab === 'light'; + const isAutoTab = tab === 'auto'; + const PRESETS_FILTER = PRESETS.filter( + (preset) => + (isDarkTab && !!preset[tab] && !preset.light) || + (isLightTab && !!preset[tab] && !preset.dark) || + (isAutoTab && !!preset.dark && !!preset.light) + ); + const presetsSize = PRESETS_FILTER.length; + const more = + presetsSize - + (isAutoTab ? ONE_ROW_NUMBER_OF_COLS : TWO_ROWS_NUMBER_OF_COLS); + + const height = !isShowMore + ? EACH_COL_HEIGHT * 2 + : EACH_COL_HEIGHT * (isAutoTab ? presetsSize : Math.ceil(presetsSize / 2)); + + const onSelectPreset = (customTheme: { + dark: WidgetColors; + light: WidgetColors; + }) => { + onSelectTheme(customTheme); + onChangeTheme({ name: 'singleTheme', value: isAutoTab ? undefined : true }); + if (!isAutoTab) { + onChangeTheme({ name: 'mode', value: tab }); + } + }; + + return ( + <> + {isAutoTab && ( + <> + + + Show Widget in Dark Theme + + + onChangeTheme({ + name: 'mode', + value: checked ? 'dark' : 'light', + }) + } + /> + + + + )} + + + {PRESETS_FILTER.map((preset) => ( + + onSelectPreset({ + dark: preset.dark || {}, + light: preset.light || {}, + }) + }> + {!isAutoTab ? ( + + ) : ( + + + + + )} + + ))} + + + {more > 0 && ( + <> + + + + )} + + ); +} diff --git a/widget/playground/src/containers/StyleLayout/StyleLayout.Themes.tsx b/widget/playground/src/containers/StyleLayout/StyleLayout.Themes.tsx new file mode 100644 index 0000000000..6552a50789 --- /dev/null +++ b/widget/playground/src/containers/StyleLayout/StyleLayout.Themes.tsx @@ -0,0 +1,81 @@ +/* eslint-disable @typescript-eslint/no-magic-numbers */ +import type { Mode } from '../../store/config'; + +import { + ChevronDownIcon, + ColorsIcon, + CustomColorsIcon, + Divider, + Typography, +} from '@rango-dev/ui'; +import React, { useState } from 'react'; + +import { TABS } from '../../constants'; + +import { Preset } from './StyleLayout.Preset'; +import { + CustomColors, + Field, + FieldTitle, + GeneralContainer, + Line, + Tab, + Tabs, +} from './StyleLayout.styles'; + +export function Themes() { + const [tab, setTab] = useState('auto'); + + const onChangeMode = (mode: Mode) => { + setTab(mode); + }; + return ( + <> + + + + {TABS.map((item) => ( + onChangeMode(item.id)} + size="small" + variant={item.id === tab ? 'contained' : 'default'}> + {item.title} + + ))} + + + + + + + + Presets + + + + + + + + + + }> + + + + + Custom Colors + + + + + + + ); +} diff --git a/widget/playground/src/containers/StyleLayout/StyleLayout.styles.ts b/widget/playground/src/containers/StyleLayout/StyleLayout.styles.ts index 9c6b19f294..71f8ff1ff8 100644 --- a/widget/playground/src/containers/StyleLayout/StyleLayout.styles.ts +++ b/widget/playground/src/containers/StyleLayout/StyleLayout.styles.ts @@ -1,4 +1,4 @@ -import { styled } from '@rango-dev/ui'; +import { Button, styled } from '@rango-dev/ui'; export const Layout = styled('div', { borderRadius: '20px', @@ -26,3 +26,109 @@ export const Field = styled('div', { export const FieldTitle = styled('div', { display: 'flex', }); + +export const Tabs = styled('div', { + borderRadius: '$xm', + backgroundColor: '$neutral100', + display: 'flex', + border: '3px solid $neutral100', + flexDirection: 'row', +}); + +export const Tab = styled(Button, { + color: '$neutral900', + backgroundColor: 'transparent', + '&:hover': { + backgroundColor: '$info100', + color: '$secondary500', + }, +}); +export const CustomThemesContainer = styled('div', { + maxHeight: '0%', + transition: '0.5s', + overflow: 'hidden', + ',.more': { + maxHeight: '100%', + }, +}); +export const PresetContent = styled('div', { + display: 'grid', + gap: 5, +}); +export const PresetTheme = styled(Button, { + border: '1px solid', + borderRadius: '$sm', + padding: '$10 0', + height: '36px', + position: 'relative', + backgroundColor: 'transparent', + '._text': { + width: '100%', + }, + '&:hover': { + borderColor: '$info300', + }, + variants: { + isSelected: { + true: { + borderColor: '$secondary500', + }, + false: { + borderColor: '$neutral300', + }, + }, + }, +}); + +export const ColorsContent = styled('div', { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', +}); + +export const Color = styled('div', { + width: 20, + height: 20, + borderRadius: 10, + margin: 5, + boxShadow: '0 2px 6px 0 rgba(0, 0, 0, 0.1), 0 4px 10px 0 rgba(0, 0, 0, 0.16)', + variants: { + position: { + relative: { + position: 'relative', + }, + absolute: { + position: 'absolute', + }, + }, + }, +}); + +export const Row = styled('div', { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', +}); + +export const Line = styled('div', { + width: '100%', + borderTop: '1px solid $neutral300', +}); + +export const CustomColors = styled(Button, { + width: '100%', + borderRadius: 0, + display: 'flex', + justifyContent: 'space-between', + backgroundColor: 'transparent', + '&:hover': { + '.title': { + color: '$secondary500', + }, + }, +}); + +export const Collapse = styled('div', { + overflow: 'hidden', + transition: 'height .3s ease', +}); diff --git a/widget/playground/src/containers/StyleLayout/StyleLayout.tsx b/widget/playground/src/containers/StyleLayout/StyleLayout.tsx index 014ac87654..b148411025 100644 --- a/widget/playground/src/containers/StyleLayout/StyleLayout.tsx +++ b/widget/playground/src/containers/StyleLayout/StyleLayout.tsx @@ -1,21 +1,39 @@ +import { Divider } from '@rango-dev/ui'; import React, { useState } from 'react'; import { Collapse } from '../../components/Collapse'; import { General } from './StyleLayout.General'; import { Layout } from './StyleLayout.styles'; +import { Themes } from './StyleLayout.Themes'; +import { StyleCollapseState } from './StyleLayout.types'; export function StyleLayout() { - const [openCollapse, toggleCollapse] = useState(true); - + const [openCollapse, toggleCollapse] = useState( + StyleCollapseState.GENERAL + ); + const handleOpenCollapse = (name: StyleCollapseState) => () => { + if (openCollapse === name) { + toggleCollapse(null); + } else { + toggleCollapse(name); + } + }; return ( toggleCollapse((prev) => !prev)}> + title={StyleCollapseState.GENERAL} + open={openCollapse === StyleCollapseState.GENERAL} + toggle={handleOpenCollapse(StyleCollapseState.GENERAL)}> + + + + ); } diff --git a/widget/playground/src/containers/StyleLayout/StyleLayout.types.ts b/widget/playground/src/containers/StyleLayout/StyleLayout.types.ts new file mode 100644 index 0000000000..23e0a2a7ca --- /dev/null +++ b/widget/playground/src/containers/StyleLayout/StyleLayout.types.ts @@ -0,0 +1,16 @@ +import type { Mode } from '../../store/config'; + +export enum StyleCollapseState { + GENERAL = 'general', + THEMES = 'themes', +} + +export type PresetTypes = { + tab: Mode; +}; + +export type ColorsTypes = { + primary?: string; + secondary?: string; + background?: string; +}; diff --git a/widget/playground/src/hook/useTheme.ts b/widget/playground/src/hook/useTheme.ts index 212832559d..53993bee5c 100755 --- a/widget/playground/src/hook/useTheme.ts +++ b/widget/playground/src/hook/useTheme.ts @@ -7,30 +7,22 @@ import { useMetaStore } from '../store/meta'; export function useTheme() { const configTheme = useConfigStore.use.config().theme; - const configColors = configTheme?.colors; + // const configColors = configTheme?.colors; const mode = configTheme?.mode; const fetchMeta = useMetaStore.use.fetchMeta(); - const light = configColors?.light; - const dark = configColors?.dark; + /* + * const light = configColors?.light; + * const dark = configColors?.dark; + */ const colors = theme.colors; const customLightTheme = createTheme({ colors, - shadows: { - s: `0px 3px 5px 3px ${light?.neutral || '#f0f2f5'} ,0px 6px 10px 3px ${ - light?.neutral || '#f0f2f5' - }, 0px 1px 18px 3px ${light?.neutral || '#f0f2f5'}`, - }, }); const customDarkTheme = createTheme({ colors, - shadows: { - s: `0px 3px 5px 3px ${dark?.neutral || '#222'}, 0px 6px 10px 3px ${ - dark?.neutral || '#222' - }, 0px 1px 18px 3px ${dark?.neutral || '#222'}`, - }, }); const [OSTheme, setOSTheme] = useState('light'); diff --git a/widget/playground/src/store/config.ts b/widget/playground/src/store/config.ts index d0ad2518e5..bcb6a23a30 100644 --- a/widget/playground/src/store/config.ts +++ b/widget/playground/src/store/config.ts @@ -1,7 +1,11 @@ import type { Type } from '../types'; import type { ProviderInterface } from '@rango-dev/wallets-react'; import type { WalletType } from '@rango-dev/wallets-shared'; -import type { WidgetColors, WidgetConfig } from '@rango-dev/widget-embedded'; +import type { + WidgetColors, + WidgetColorsKeys, + WidgetConfig, +} from '@rango-dev/widget-embedded'; import type { Asset } from 'rango-sdk'; import { create } from 'zustand'; @@ -13,15 +17,6 @@ import { getConfig } from '../configs'; import createSelectors from './selectors'; export type Mode = 'dark' | 'light' | 'auto'; -export type COLORS = - | 'background' - | 'primary' - | 'success' - | 'error' - | 'warning' - | 'surface' - | 'neutral' - | 'foreground'; interface ConfigState { config: WidgetConfig; @@ -57,7 +52,7 @@ interface ConfigState { } ) => void; onChangeColors: ( - name: COLORS, + name: WidgetColorsKeys, mode: 'light' | 'dark', color?: string ) => void; @@ -98,24 +93,18 @@ export const initialConfig: WidgetConfig = { singleTheme: undefined, colors: { dark: { - background: undefined, primary: undefined, - foreground: undefined, - success: undefined, - error: undefined, - warning: undefined, - surface: undefined, + secondary: undefined, neutral: undefined, + background: undefined, + foreground: undefined, }, light: { - background: undefined, primary: undefined, - foreground: undefined, - success: undefined, - error: undefined, - warning: undefined, - surface: undefined, + secondary: undefined, neutral: undefined, + background: undefined, + foreground: undefined, }, }, }, diff --git a/widget/playground/src/utils/common.ts b/widget/playground/src/utils/common.ts new file mode 100644 index 0000000000..50d4d05aca --- /dev/null +++ b/widget/playground/src/utils/common.ts @@ -0,0 +1,19 @@ +export function shallowEqual( + object1: { [x: string]: T | undefined }, + object2: { [x: string]: T | undefined } +) { + const keys1 = Object.keys(object1); + const keys2 = Object.keys(object2); + + if (keys1.length !== keys2.length) { + return false; + } + + for (const key of keys1) { + if (object1[key] !== object2[key]) { + return false; + } + } + + return true; +} diff --git a/widget/ui/src/icons/Colors.tsx b/widget/ui/src/icons/Colors.tsx new file mode 100644 index 0000000000..307642d119 --- /dev/null +++ b/widget/ui/src/icons/Colors.tsx @@ -0,0 +1,33 @@ +import type { SvgIconPropsWithChildren } from '../components/SvgIcon'; + +import React, { createElement } from 'react'; + +import { SvgIcon } from '../components/SvgIcon'; + +function SvgColors(props: SvgIconPropsWithChildren) { + return createElement( + SvgIcon, + props, + + + + + + ); +} +export default SvgColors; diff --git a/widget/ui/src/icons/CustomColors.tsx b/widget/ui/src/icons/CustomColors.tsx new file mode 100644 index 0000000000..e5e3ee61ac --- /dev/null +++ b/widget/ui/src/icons/CustomColors.tsx @@ -0,0 +1,21 @@ +import type { SvgIconPropsWithChildren } from '../components/SvgIcon'; + +import React, { createElement } from 'react'; + +import { SvgIcon } from '../components/SvgIcon'; + +function SvgCustomColors(props: SvgIconPropsWithChildren) { + return createElement( + SvgIcon, + props, + + + + ); +} +export default SvgCustomColors; diff --git a/widget/ui/src/icons/LogoWithText.tsx b/widget/ui/src/icons/LogoWithText.tsx index 3f7beed81b..64fe552993 100644 --- a/widget/ui/src/icons/LogoWithText.tsx +++ b/widget/ui/src/icons/LogoWithText.tsx @@ -12,55 +12,55 @@ function SvgLogoWithText(props: SvgIconPropsWithChildren) { - + @@ -132,7 +132,7 @@ function SvgLogoWithText(props: SvgIconPropsWithChildren) { x2={44.7609} y2={22.498} gradientUnits="userSpaceOnUse"> - + @@ -143,7 +143,7 @@ function SvgLogoWithText(props: SvgIconPropsWithChildren) { x2={26.1301} y2={33.639} gradientUnits="userSpaceOnUse"> - + diff --git a/widget/ui/src/icons/Style.tsx b/widget/ui/src/icons/Style.tsx index b19a4463ce..e7ef48a964 100755 --- a/widget/ui/src/icons/Style.tsx +++ b/widget/ui/src/icons/Style.tsx @@ -8,31 +8,35 @@ function SvgStyle(props: SvgIconPropsWithChildren) { return createElement( SvgIcon, props, - - - - - + + + + + + + + + ); } diff --git a/widget/ui/src/icons/index.ts b/widget/ui/src/icons/index.ts index dea5cbbb15..bfd279ff81 100644 --- a/widget/ui/src/icons/index.ts +++ b/widget/ui/src/icons/index.ts @@ -7,6 +7,7 @@ export { default as ChevronUpIcon } from './ChevronUp'; export { default as CloseIcon } from './Close'; export { default as CompleteIcon } from './Complete'; export { default as CopyIcon } from './Copy'; +export { default as CustomColorsIcon } from './CustomColors'; export { default as DarkModeIcon } from './DarkMode'; export { default as DeleteIcon } from './Delete'; export { default as DesktopIcon } from './Desktop'; @@ -38,5 +39,6 @@ export { default as TransactionIcon } from './Transaction'; export { default as WalletIcon } from './Wallet'; export { default as WarningIcon } from './Warning'; export { default as ChainsIcon } from './Chains'; +export { default as ColorsIcon } from './Colors'; export { default as SettingsIcon } from './Settings'; export { default as StyleIcon } from './Style'; diff --git a/widget/ui/src/theme.ts b/widget/ui/src/theme.ts index 55e6e285c3..5f7dd01913 100644 --- a/widget/ui/src/theme.ts +++ b/widget/ui/src/theme.ts @@ -9,9 +9,11 @@ import { createStitches } from '@stitches/react'; export const theme = { colors: { + primary: '#1C3CF1', primary500: '#1C3CF1', primary600: '#0B27C5', + secondary: '#469BF5', secondary100: '#E9F4FF', secondary200: '#D6EAFF', secondary300: '#C8E3FF', @@ -22,6 +24,7 @@ export const theme = { secondary800: '#131C49', secondary900: '#0E1744', + neutral: '#E6E6E6', neutral100: '#F9F9F9', neutral200: '#F6F6F6', neutral300: '#F2F2F2', @@ -174,6 +177,31 @@ const utils = { }), }; +export const darkColors = { + secondary: '#2284ED', + secondary400: '#469BF5', + secondary500: '#2284ED', + secondary600: '#2B3462', + + neutral: '#222222', + neutral900: '#E9E9E9', + neutral800: '#B8B8B8', + neutral700: '#F2F2F2', + neutral600: '#EEEEEE', + neutral500: '#222222', + neutral400: '#1B1B1B', + neutral300: '#121212', + neutral200: '#111111', + neutral100: '#101010', + + error500: '#FF5050', + + warning500: '#FF8A20', + + background: '#010101', + foreground: '#FDFDFD', +}; + /* ----------------------- End of Values ----------------------- */ const typedCreateStiches = createStitches; @@ -188,28 +216,7 @@ export const { styled, css, createTheme, keyframes, globalCss, config } = export const lightTheme = createTheme({}); export const darkTheme = createTheme({ - colors: { - secondary400: '#469BF5', - secondary500: '#2284ED', - secondary600: '#2B3462', - - neutral900: '#E9E9E9', - neutral800: '#B8B8B8', - neutral700: '#F2F2F2', - neutral600: '#EEEEEE', - neutral500: '#222222', - neutral400: '#1B1B1B', - neutral300: '#121212', - neutral200: '#111111', - neutral100: '#101010', - - error500: '#FF5050', - - warning500: '#FF8A20', - - background: '#010101', - foreground: '#FDFDFD', - }, + colors: darkColors, shadows: { s: '0px 3px 5px 3px #222, 0px 6px 10px 3px #222, 0px 1px 18px 3px #222', }, diff --git a/widget/ui/svgs/configs/.svgrrc.default.cjs b/widget/ui/svgs/configs/.svgrrc.default.cjs index a3db7ee49a..c09faf5ae8 100755 --- a/widget/ui/svgs/configs/.svgrrc.default.cjs +++ b/widget/ui/svgs/configs/.svgrrc.default.cjs @@ -22,7 +22,7 @@ module.exports = { jsxRuntime: 'automatic', replaceAttrValues: { '#373737': 'currentColor', - '#469BF5': 'currentColor', + '#010101': 'currentColor', }, template: require('./template/react.cjs'), indexTemplate: require('./template/index.cjs'), diff --git a/widget/ui/svgs/resources/fill/Custom-Colors.svg b/widget/ui/svgs/resources/fill/Custom-Colors.svg new file mode 100644 index 0000000000..b56adbbfb7 --- /dev/null +++ b/widget/ui/svgs/resources/fill/Custom-Colors.svg @@ -0,0 +1,3 @@ + + + diff --git a/widget/ui/svgs/resources/fill/colors.svg b/widget/ui/svgs/resources/fill/colors.svg new file mode 100644 index 0000000000..19139d9b7b --- /dev/null +++ b/widget/ui/svgs/resources/fill/colors.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/widget/ui/svgs/resources/fill/style.svg b/widget/ui/svgs/resources/fill/style.svg old mode 100755 new mode 100644 index fd66cb6fda..fe645c68aa --- a/widget/ui/svgs/resources/fill/style.svg +++ b/widget/ui/svgs/resources/fill/style.svg @@ -1,6 +1,10 @@ - - - - - + + + + + + + + + From 911ebb8edc83aa2a18e8181545f1a8360f0fc4e9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 25 Oct 2023 13:38:25 +0000 Subject: [PATCH 618/769] chore(release): publish - ui@0.17.1-next.4 - wallets-adapter@0.14.1-next.5 - wallets-demo@0.11.1-next.34 - widget-embedded@0.14.1-next.7 - wallets-adapter-demo@0.12.1-next.33 - widget-playground@0.12.1-next.46 - widget-iframe@0.12.1-next.45 - widget-app@0.12.1-next.45 Affected packages: ui@0.17.1-next.4,wallets-adapter@0.14.1-next.5,wallets-demo@0.11.1-next.34,widget-embedded@0.14.1-next.7,wallets-adapter-demo@0.12.1-next.33,widget-playground@0.12.1-next.46,widget-iframe@0.12.1-next.45,widget-app@0.12.1-next.45 --- examples/wallets-adapter-demo/package.json | 4 ++-- examples/wallets-demo/package.json | 4 ++-- wallets/wallets-adapter/package.json | 4 ++-- widget/app/package.json | 4 ++-- widget/embedded/package.json | 4 ++-- widget/iframe/package.json | 4 ++-- widget/playground/package.json | 6 +++--- widget/ui/package.json | 2 +- 8 files changed, 16 insertions(+), 16 deletions(-) diff --git a/examples/wallets-adapter-demo/package.json b/examples/wallets-adapter-demo/package.json index 275844c1ba..840ce19caf 100644 --- a/examples/wallets-adapter-demo/package.json +++ b/examples/wallets-adapter-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter-demo", - "version": "0.12.1-next.32", + "version": "0.12.1-next.33", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/wallets-adapter": "^0.14.1-next.4", + "@rango-dev/wallets-adapter": "^0.14.1-next.5", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/wallets-demo/package.json b/examples/wallets-demo/package.json index baedd3b3d4..4d95dcf145 100644 --- a/examples/wallets-demo/package.json +++ b/examples/wallets-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-demo", - "version": "0.11.1-next.33", + "version": "0.11.1-next.34", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/ui": "^0.17.1-next.3", + "@rango-dev/ui": "^0.17.1-next.4", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "rango-sdk": "^0.1.35", diff --git a/wallets/wallets-adapter/package.json b/wallets/wallets-adapter/package.json index 5defa02893..9e71f35a5d 100644 --- a/wallets/wallets-adapter/package.json +++ b/wallets/wallets-adapter/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter", - "version": "0.14.1-next.4", + "version": "0.14.1-next.5", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -24,7 +24,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/ui": "^0.17.1-next.3", + "@rango-dev/ui": "^0.17.1-next.4", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "rango-types": "^0.1.46" diff --git a/widget/app/package.json b/widget/app/package.json index 6c34b4221f..39b6607cde 100644 --- a/widget/app/package.json +++ b/widget/app/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-app", - "version": "0.12.1-next.44", + "version": "0.12.1-next.45", "license": "MIT", "private": true, "source": "public/index.html", @@ -14,7 +14,7 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.6", + "@rango-dev/widget-embedded": "^0.14.1-next.7", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0" diff --git a/widget/embedded/package.json b/widget/embedded/package.json index 67f9b2fd97..bd988bbe2b 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.14.1-next.6", + "version": "0.14.1-next.7", "license": "MIT", "type": "module", "main": "dist/index.js", @@ -23,7 +23,7 @@ "@rango-dev/queue-manager-core": "^0.17.0", "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.1", "@rango-dev/queue-manager-react": "^0.17.0", - "@rango-dev/ui": "^0.17.1-next.3", + "@rango-dev/ui": "^0.17.1-next.4", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "bignumber.js": "^9.1.1", diff --git a/widget/iframe/package.json b/widget/iframe/package.json index 69d9ea0483..0c9dac6251 100644 --- a/widget/iframe/package.json +++ b/widget/iframe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-iframe", - "version": "0.12.1-next.44", + "version": "0.12.1-next.45", "license": "MIT", "private": true, "source": "src/index.ts", @@ -13,6 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.6" + "@rango-dev/widget-embedded": "^0.14.1-next.7" } } diff --git a/widget/playground/package.json b/widget/playground/package.json index 3f029e1d5c..551d082317 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-playground", - "version": "0.12.1-next.45", + "version": "0.12.1-next.46", "license": "MIT", "private": true, "source": "public/index.html", @@ -17,10 +17,10 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/ui": "^0.17.1-next.3", + "@rango-dev/ui": "^0.17.1-next.4", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", - "@rango-dev/widget-embedded": "^0.14.1-next.6", + "@rango-dev/widget-embedded": "^0.14.1-next.7", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/widget/ui/package.json b/widget/ui/package.json index 53f91da476..ca21e58779 100644 --- a/widget/ui/package.json +++ b/widget/ui/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/ui", - "version": "0.17.1-next.3", + "version": "0.17.1-next.4", "license": "MIT", "type": "module", "module": "./dist/index.js", From d808fbf362d5118167b1bcceca6b766e865f5346 Mon Sep 17 00:00:00 2001 From: RanGojo Date: Wed, 25 Oct 2023 20:23:05 +0000 Subject: [PATCH 619/769] chore: fix import errors --- widget/ui/src/components/BestRoute/BestRoute.styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/widget/ui/src/components/BestRoute/BestRoute.styles.ts b/widget/ui/src/components/BestRoute/BestRoute.styles.ts index aec7289ec1..123e4bd795 100644 --- a/widget/ui/src/components/BestRoute/BestRoute.styles.ts +++ b/widget/ui/src/components/BestRoute/BestRoute.styles.ts @@ -1,6 +1,7 @@ import * as Collapsible from '@radix-ui/react-collapsible'; import { darkTheme, styled } from '../../theme'; +import { Image } from '../common'; import { CollapsibleContent } from '../common/styles'; export const EXPANDABLE_ROUTES_TRANSITION_DURATION = 300; From 50297010c97d67bbb0ab637ef53ac2a3234828d8 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 25 Oct 2023 20:31:58 +0000 Subject: [PATCH 620/769] chore(release): publish - ui@0.17.1-next.5 - wallets-adapter@0.14.1-next.6 - wallets-demo@0.11.1-next.35 - widget-embedded@0.14.1-next.8 - wallets-adapter-demo@0.12.1-next.34 - widget-playground@0.12.1-next.47 - widget-iframe@0.12.1-next.46 - widget-app@0.12.1-next.46 Affected packages: ui@0.17.1-next.5,wallets-adapter@0.14.1-next.6,wallets-demo@0.11.1-next.35,widget-embedded@0.14.1-next.8,wallets-adapter-demo@0.12.1-next.34,widget-playground@0.12.1-next.47,widget-iframe@0.12.1-next.46,widget-app@0.12.1-next.46 --- examples/wallets-adapter-demo/package.json | 4 ++-- examples/wallets-demo/package.json | 4 ++-- wallets/wallets-adapter/package.json | 4 ++-- widget/app/package.json | 4 ++-- widget/embedded/package.json | 4 ++-- widget/iframe/package.json | 4 ++-- widget/playground/package.json | 6 +++--- widget/ui/package.json | 2 +- 8 files changed, 16 insertions(+), 16 deletions(-) diff --git a/examples/wallets-adapter-demo/package.json b/examples/wallets-adapter-demo/package.json index 840ce19caf..d93302c414 100644 --- a/examples/wallets-adapter-demo/package.json +++ b/examples/wallets-adapter-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter-demo", - "version": "0.12.1-next.33", + "version": "0.12.1-next.34", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/wallets-adapter": "^0.14.1-next.5", + "@rango-dev/wallets-adapter": "^0.14.1-next.6", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/wallets-demo/package.json b/examples/wallets-demo/package.json index 4d95dcf145..9f63402b7f 100644 --- a/examples/wallets-demo/package.json +++ b/examples/wallets-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-demo", - "version": "0.11.1-next.34", + "version": "0.11.1-next.35", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/ui": "^0.17.1-next.4", + "@rango-dev/ui": "^0.17.1-next.5", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "rango-sdk": "^0.1.35", diff --git a/wallets/wallets-adapter/package.json b/wallets/wallets-adapter/package.json index 9e71f35a5d..872ab9220f 100644 --- a/wallets/wallets-adapter/package.json +++ b/wallets/wallets-adapter/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter", - "version": "0.14.1-next.5", + "version": "0.14.1-next.6", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -24,7 +24,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/ui": "^0.17.1-next.4", + "@rango-dev/ui": "^0.17.1-next.5", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "rango-types": "^0.1.46" diff --git a/widget/app/package.json b/widget/app/package.json index 39b6607cde..713adaf9b2 100644 --- a/widget/app/package.json +++ b/widget/app/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-app", - "version": "0.12.1-next.45", + "version": "0.12.1-next.46", "license": "MIT", "private": true, "source": "public/index.html", @@ -14,7 +14,7 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.7", + "@rango-dev/widget-embedded": "^0.14.1-next.8", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0" diff --git a/widget/embedded/package.json b/widget/embedded/package.json index bd988bbe2b..ff05b22134 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.14.1-next.7", + "version": "0.14.1-next.8", "license": "MIT", "type": "module", "main": "dist/index.js", @@ -23,7 +23,7 @@ "@rango-dev/queue-manager-core": "^0.17.0", "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.1", "@rango-dev/queue-manager-react": "^0.17.0", - "@rango-dev/ui": "^0.17.1-next.4", + "@rango-dev/ui": "^0.17.1-next.5", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "bignumber.js": "^9.1.1", diff --git a/widget/iframe/package.json b/widget/iframe/package.json index 0c9dac6251..54e6360b87 100644 --- a/widget/iframe/package.json +++ b/widget/iframe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-iframe", - "version": "0.12.1-next.45", + "version": "0.12.1-next.46", "license": "MIT", "private": true, "source": "src/index.ts", @@ -13,6 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.7" + "@rango-dev/widget-embedded": "^0.14.1-next.8" } } diff --git a/widget/playground/package.json b/widget/playground/package.json index 551d082317..529fce5a4b 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-playground", - "version": "0.12.1-next.46", + "version": "0.12.1-next.47", "license": "MIT", "private": true, "source": "public/index.html", @@ -17,10 +17,10 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/ui": "^0.17.1-next.4", + "@rango-dev/ui": "^0.17.1-next.5", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", - "@rango-dev/widget-embedded": "^0.14.1-next.7", + "@rango-dev/widget-embedded": "^0.14.1-next.8", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/widget/ui/package.json b/widget/ui/package.json index ca21e58779..ea6cb45cb3 100644 --- a/widget/ui/package.json +++ b/widget/ui/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/ui", - "version": "0.17.1-next.4", + "version": "0.17.1-next.5", "license": "MIT", "type": "module", "module": "./dist/index.js", From 23761c410bf84c6c01e0a10e61ff4bf526c05b76 Mon Sep 17 00:00:00 2001 From: RanGojo Date: Fri, 27 Oct 2023 08:37:12 +0000 Subject: [PATCH 621/769] hotfix: move color picker deps to playground --- widget/playground/package.json | 6 ++- .../components/ColorPicker/ColorPicker.tsx | 8 ++-- .../src/components/ColorPicker/index.ts | 0 .../src/components/StylesConfig.tsx | 31 ++++++++++--- widget/playground/src/helpers.ts | 1 + widget/ui/package.json | 2 - .../ColorPicker/ColorPicker.stories.tsx | 46 ------------------- widget/ui/src/components/index.ts | 1 - 8 files changed, 34 insertions(+), 61 deletions(-) rename widget/{ui => playground}/src/components/ColorPicker/ColorPicker.tsx (95%) rename widget/{ui => playground}/src/components/ColorPicker/index.ts (100%) delete mode 100644 widget/ui/src/components/ColorPicker/ColorPicker.stories.tsx diff --git a/widget/playground/package.json b/widget/playground/package.json index 529fce5a4b..56f4b09544 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -13,7 +13,8 @@ "lint": "eslint \"**/*.{ts,tsx}\" --ignore-path ../../.eslintignore" }, "devDependencies": { - "@types/stringify-object": "^4.0.2" + "@types/stringify-object": "^4.0.2", + "@types/react-color": "^3.0.6" }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", @@ -28,7 +29,8 @@ "react-syntax-highlighter": "^15.5.0", "stringify-object": "^5.0.0", "subtract-object": "^1.1.0", - "zustand": "^4.3.2" + "zustand": "^4.3.2", + "react-color": "^2.19.3" }, "gitHead": "a4584c2a3341fe23e033a9ff2db0f201b0a6278c" } diff --git a/widget/ui/src/components/ColorPicker/ColorPicker.tsx b/widget/playground/src/components/ColorPicker/ColorPicker.tsx similarity index 95% rename from widget/ui/src/components/ColorPicker/ColorPicker.tsx rename to widget/playground/src/components/ColorPicker/ColorPicker.tsx index d28648470b..dd6050b08f 100644 --- a/widget/ui/src/components/ColorPicker/ColorPicker.tsx +++ b/widget/playground/src/components/ColorPicker/ColorPicker.tsx @@ -1,11 +1,8 @@ +import { Button, CloseIcon, styled } from '@rango-dev/ui'; import React, { useState } from 'react'; import { ChromePicker } from 'react-color'; import rgbHex from 'rgb-hex'; -import { styled } from '../../theme'; -import { Button } from '../Button'; -import { CloseIcon } from '../Icon'; - const Container = styled('div', { position: 'relative', }); @@ -16,6 +13,7 @@ const Color = styled('div', { width: '$32', height: '$32', }); + const Cover = styled('div', { position: 'fixed', top: '0px', @@ -23,6 +21,7 @@ const Cover = styled('div', { bottom: '0px', left: '0px', }); + const Popover = styled('div', { position: 'absolute', zIndex: '2', @@ -43,6 +42,7 @@ const Popover = styled('div', { }, }, }); + export interface PropTypes { color?: string; place: 'top' | 'bottom' | 'left' | 'right'; diff --git a/widget/ui/src/components/ColorPicker/index.ts b/widget/playground/src/components/ColorPicker/index.ts similarity index 100% rename from widget/ui/src/components/ColorPicker/index.ts rename to widget/playground/src/components/ColorPicker/index.ts diff --git a/widget/playground/src/components/StylesConfig.tsx b/widget/playground/src/components/StylesConfig.tsx index 3267cb416c..9693be41d3 100644 --- a/widget/playground/src/components/StylesConfig.tsx +++ b/widget/playground/src/components/StylesConfig.tsx @@ -1,7 +1,8 @@ +import type { Mode } from '../store/config'; + import { Button, Checkbox, - ColorPicker, Divider, styled, Switch, @@ -9,9 +10,12 @@ import { Typography, } from '@rango-dev/ui'; import React, { useState } from 'react'; + import { FONTS } from '../constants'; -import { COLORS, Mode, useConfigStore } from '../store/config'; +import { useConfigStore } from '../store/config'; + import { ConfigurationContainer } from './ChainsConfig'; +import { ColorPicker } from './ColorPicker'; import { Select } from './Select'; const COLORS = [ @@ -289,8 +293,13 @@ export function StylesConfig() { id={'auto'} label={'Auto'} onCheckedChange={(checked) => { - if (checked) onChangeTheme({ name: 'mode', value: 'auto' }); - else onChangeTheme({ name: 'mode', value: 'light' }); + if (checked) { + onChangeTheme({ name: 'mode', value: 'auto' }); + } else { + onChangeTheme({ name: 'mode', value: 'light' }); + } + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore setChekedTheme(checked); }} /> @@ -306,8 +315,11 @@ export function StylesConfig() { onChange={(checked) => { if (!checkedTheme && !singleTheme) { let theme; - if (checked) theme = 'dark'; - else theme = 'light'; + if (checked) { + theme = 'dark'; + } else { + theme = 'light'; + } onChangeTheme({ name: 'mode', value: theme as Mode }); } }} @@ -381,6 +393,8 @@ export function StylesConfig() { { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore onChangeTheme({ name: 'singleTheme', value: checked }); }} id="single_theme" @@ -422,6 +436,7 @@ export function StylesConfig() {
- { - console.log(color); - setColor(color)}} - /> -
- ); -}; diff --git a/widget/ui/src/components/index.ts b/widget/ui/src/components/index.ts index 559192c220..7ced4c7c50 100644 --- a/widget/ui/src/components/index.ts +++ b/widget/ui/src/components/index.ts @@ -10,7 +10,6 @@ export * from './ChangeSlippageButton'; export * from './Checkbox'; export * from './Chip'; export * from './common'; -export * from './ColorPicker'; export * from './Divider'; export * from './Drawer'; export * from './Header'; From 13481942d6bcbe0a5881f6ea3c65aea515bdfe2d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 27 Oct 2023 08:44:32 +0000 Subject: [PATCH 622/769] chore(release): publish - ui@0.17.1-next.6 - wallets-adapter@0.14.1-next.7 - wallets-demo@0.11.1-next.36 - widget-embedded@0.14.1-next.9 - wallets-adapter-demo@0.12.1-next.35 - widget-playground@0.12.1-next.48 - widget-iframe@0.12.1-next.47 - widget-app@0.12.1-next.47 Affected packages: ui@0.17.1-next.6,wallets-adapter@0.14.1-next.7,wallets-demo@0.11.1-next.36,widget-embedded@0.14.1-next.9,wallets-adapter-demo@0.12.1-next.35,widget-playground@0.12.1-next.48,widget-iframe@0.12.1-next.47,widget-app@0.12.1-next.47 --- examples/wallets-adapter-demo/package.json | 4 ++-- examples/wallets-demo/package.json | 4 ++-- wallets/wallets-adapter/package.json | 4 ++-- widget/app/package.json | 4 ++-- widget/embedded/package.json | 4 ++-- widget/iframe/package.json | 4 ++-- widget/playground/package.json | 14 +++++++------- widget/ui/package.json | 2 +- 8 files changed, 20 insertions(+), 20 deletions(-) diff --git a/examples/wallets-adapter-demo/package.json b/examples/wallets-adapter-demo/package.json index d93302c414..2de1aac711 100644 --- a/examples/wallets-adapter-demo/package.json +++ b/examples/wallets-adapter-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter-demo", - "version": "0.12.1-next.34", + "version": "0.12.1-next.35", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/wallets-adapter": "^0.14.1-next.6", + "@rango-dev/wallets-adapter": "^0.14.1-next.7", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/wallets-demo/package.json b/examples/wallets-demo/package.json index 9f63402b7f..664f4910f5 100644 --- a/examples/wallets-demo/package.json +++ b/examples/wallets-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-demo", - "version": "0.11.1-next.35", + "version": "0.11.1-next.36", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/ui": "^0.17.1-next.5", + "@rango-dev/ui": "^0.17.1-next.6", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "rango-sdk": "^0.1.35", diff --git a/wallets/wallets-adapter/package.json b/wallets/wallets-adapter/package.json index 872ab9220f..95b4f0c827 100644 --- a/wallets/wallets-adapter/package.json +++ b/wallets/wallets-adapter/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter", - "version": "0.14.1-next.6", + "version": "0.14.1-next.7", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -24,7 +24,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/ui": "^0.17.1-next.5", + "@rango-dev/ui": "^0.17.1-next.6", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "rango-types": "^0.1.46" diff --git a/widget/app/package.json b/widget/app/package.json index 713adaf9b2..3d923197c4 100644 --- a/widget/app/package.json +++ b/widget/app/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-app", - "version": "0.12.1-next.46", + "version": "0.12.1-next.47", "license": "MIT", "private": true, "source": "public/index.html", @@ -14,7 +14,7 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.8", + "@rango-dev/widget-embedded": "^0.14.1-next.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0" diff --git a/widget/embedded/package.json b/widget/embedded/package.json index ff05b22134..12c728ae71 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.14.1-next.8", + "version": "0.14.1-next.9", "license": "MIT", "type": "module", "main": "dist/index.js", @@ -23,7 +23,7 @@ "@rango-dev/queue-manager-core": "^0.17.0", "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.1", "@rango-dev/queue-manager-react": "^0.17.0", - "@rango-dev/ui": "^0.17.1-next.5", + "@rango-dev/ui": "^0.17.1-next.6", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "bignumber.js": "^9.1.1", diff --git a/widget/iframe/package.json b/widget/iframe/package.json index 54e6360b87..8d833823ca 100644 --- a/widget/iframe/package.json +++ b/widget/iframe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-iframe", - "version": "0.12.1-next.46", + "version": "0.12.1-next.47", "license": "MIT", "private": true, "source": "src/index.ts", @@ -13,6 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.8" + "@rango-dev/widget-embedded": "^0.14.1-next.9" } } diff --git a/widget/playground/package.json b/widget/playground/package.json index 56f4b09544..8f5e4dbb03 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-playground", - "version": "0.12.1-next.47", + "version": "0.12.1-next.48", "license": "MIT", "private": true, "source": "public/index.html", @@ -13,24 +13,24 @@ "lint": "eslint \"**/*.{ts,tsx}\" --ignore-path ../../.eslintignore" }, "devDependencies": { - "@types/stringify-object": "^4.0.2", - "@types/react-color": "^3.0.6" + "@types/react-color": "^3.0.6", + "@types/stringify-object": "^4.0.2" }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/ui": "^0.17.1-next.5", + "@rango-dev/ui": "^0.17.1-next.6", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", - "@rango-dev/widget-embedded": "^0.14.1-next.8", + "@rango-dev/widget-embedded": "^0.14.1-next.9", "rango-sdk": "^0.1.35", "react": "^18.2.0", + "react-color": "^2.19.3", "react-dom": "^18.2.0", "react-router-dom": "^6.10.0", "react-syntax-highlighter": "^15.5.0", "stringify-object": "^5.0.0", "subtract-object": "^1.1.0", - "zustand": "^4.3.2", - "react-color": "^2.19.3" + "zustand": "^4.3.2" }, "gitHead": "a4584c2a3341fe23e033a9ff2db0f201b0a6278c" } diff --git a/widget/ui/package.json b/widget/ui/package.json index ab015fb57d..aa76075975 100644 --- a/widget/ui/package.json +++ b/widget/ui/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/ui", - "version": "0.17.1-next.5", + "version": "0.17.1-next.6", "license": "MIT", "type": "module", "module": "./dist/index.js", From c7d75dff53f02d6df0a399bb0e58462af707a73e Mon Sep 17 00:00:00 2001 From: mikasackermn Date: Mon, 30 Oct 2023 10:03:57 +0000 Subject: [PATCH 623/769] fix: add presets from v1 --- widget/embedded/src/Widget.tsx | 5 +- widget/embedded/src/hooks/useTheme.ts | 90 ++++++--------- widget/embedded/src/types/config.ts | 1 + widget/embedded/src/utils/configs.ts | 3 + widget/embedded/src/utils/hash.ts | 27 +++++ widget/embedded/src/utils/ui.ts | 79 +++++++++++++ widget/playground/src/App.tsx | 9 +- .../ExportConfigModal/ExportConfigModal.tsx | 2 +- widget/playground/src/constants/presets.ts | 107 ++++++++++-------- .../src/{hook => hooks}/useTheme.ts | 23 +--- widget/ui/src/theme.ts | 5 +- 11 files changed, 225 insertions(+), 126 deletions(-) create mode 100644 widget/embedded/src/utils/hash.ts create mode 100644 widget/embedded/src/utils/ui.ts rename widget/playground/src/{hook => hooks}/useTheme.ts (77%) diff --git a/widget/embedded/src/Widget.tsx b/widget/embedded/src/Widget.tsx index 6222c3c593..753b282fb7 100644 --- a/widget/embedded/src/Widget.tsx +++ b/widget/embedded/src/Widget.tsx @@ -12,6 +12,7 @@ import { globalFont } from './globalStyles'; import { useTheme } from './hooks/useTheme'; import QueueManager from './QueueManager'; import { useAppStore } from './store/app'; +import { useMetaStore } from './store/meta'; import { useNotificationStore } from './store/notification'; import { useSettingsStore } from './store/settings'; import { initConfig } from './utils/configs'; @@ -47,6 +48,7 @@ export function Main(props: PropsWithChildren) { useState(''); const [disconnectedWallet, setDisconnectedWallet] = useState(); const widgetContext = useContext(WidgetContext); + const fetchMeta = useMetaStore.use.fetchMeta(); useMemo(() => { if (config?.apiKey) { @@ -57,6 +59,7 @@ export function Main(props: PropsWithChildren) { }, [config]); useEffect(() => { + void fetchMeta(); void useSettingsStore.persist.rehydrate(); void useNotificationStore.persist.rehydrate(); widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork); @@ -64,7 +67,7 @@ export function Main(props: PropsWithChildren) { return ( - + { - const fetchData = async () => { - await fetchMeta(); - }; - void fetchData(); - - const switchTheme = (event: MediaQueryListEvent) => { + const switchThemeListener = (event: MediaQueryListEvent) => { if (event.matches) { setOSTheme('dark'); } else { @@ -99,13 +74,14 @@ export function useTheme(props: WidgetTheme) { window .matchMedia('(prefers-color-scheme: dark)') - .addEventListener('change', switchTheme); + .addEventListener('change', switchThemeListener); return () => { window .matchMedia('(prefers-color-scheme: dark)') - .removeEventListener('change', switchTheme); + .removeEventListener('change', switchThemeListener); }; }, []); + useEffect(() => { if (mode !== 'auto') { setTheme(mode); @@ -113,11 +89,13 @@ export function useTheme(props: WidgetTheme) { }, [mode]); const getActiveTheme = () => { + const lightClassNames = lightThemeClasses.join(' '); + const darkClassNames = darkThemeClasses.join(' '); if (theme === 'auto') { - return OSTheme === 'dark' ? darkClassName : lightClassName; + return OSTheme === 'dark' ? darkClassNames : lightClassNames; } - return theme === 'dark' ? darkClassName : lightClassName; + return theme === 'dark' ? darkClassNames : lightClassNames; }; - return { activeTheme: getActiveTheme() }; + return { activeTheme: getActiveTheme }; } diff --git a/widget/embedded/src/types/config.ts b/widget/embedded/src/types/config.ts index bbab5012d5..e56dbe0a0c 100644 --- a/widget/embedded/src/types/config.ts +++ b/widget/embedded/src/types/config.ts @@ -18,6 +18,7 @@ export type WidgetColors = { neutral?: string; primary?: string; secondary?: string; + info?: string; }; /** diff --git a/widget/embedded/src/utils/configs.ts b/widget/embedded/src/utils/configs.ts index 01c896efae..1b094101f7 100644 --- a/widget/embedded/src/utils/configs.ts +++ b/widget/embedded/src/utils/configs.ts @@ -34,3 +34,6 @@ export function initConfig(nextConfigs: Configs) { export const DEFAULT_PRIMARY_RADIUS = 20; export const DEFAULT_SECONDARY_RADIUS = 25; +export const DEFAULT_FONT_FAMILY = 'Roboto'; + +export const THEME_CLASS_NAME_PREFIX = `theme-widget`; diff --git a/widget/embedded/src/utils/hash.ts b/widget/embedded/src/utils/hash.ts new file mode 100644 index 0000000000..29d2fb3f28 --- /dev/null +++ b/widget/embedded/src/utils/hash.ts @@ -0,0 +1,27 @@ +/* eslint-disable @typescript-eslint/no-magic-numbers */ +// Original Code: https://github.com/stitchesjs/stitches/blob/canary/packages/core/src/convert/toHash.js + +const toAlphabeticChar = (code: number) => + String.fromCharCode(code + (code > 25 ? 39 : 97)); + +const toAlphabeticName = (code: number) => { + let name = ''; + let x; + + for (x = Math.abs(code); x > 52; x = (x / 52) | 0) { + name = toAlphabeticChar(x % 52) + name; + } + + return toAlphabeticChar(x % 52) + name; +}; + +const toPhash = (h: number, x: string) => { + let i = x.length; + while (i) { + h = (h * 33) ^ x.charCodeAt(--i); + } + return h; +}; + +export const toHash = (value: object) => + toAlphabeticName(toPhash(5381, JSON.stringify(value)) >>> 0); diff --git a/widget/embedded/src/utils/ui.ts b/widget/embedded/src/utils/ui.ts new file mode 100644 index 0000000000..6ebd0ddca8 --- /dev/null +++ b/widget/embedded/src/utils/ui.ts @@ -0,0 +1,79 @@ +/* eslint-disable @typescript-eslint/no-magic-numbers */ +import type { WidgetTheme } from '../types'; +import type { createTheme } from '@rango-dev/ui'; + +import { + theme as baseThemeTokens, + darkColors as defaultDarkColors, +} from '@rango-dev/ui'; + +import { generateColors } from '../utils/colors'; +import { toHash } from '../utils/hash'; + +import { THEME_CLASS_NAME_PREFIX } from './configs'; + +interface CustomizedThemeValues { + id: string; + tokens: Parameters[0]; +} + +interface CustomizedTheme { + light: undefined | CustomizedThemeValues; + dark: undefined | CustomizedThemeValues; +} + +export function customizedThemeTokens( + colors: WidgetTheme['colors'] +): CustomizedTheme { + const baseColors = baseThemeTokens.colors; + + const darkColorsWithDefaults = generateColors( + { + ...baseColors, + ...defaultDarkColors, + }, + colors?.dark + ); + const lightColorsWithDefaults = generateColors(baseColors, colors?.light); + const hasDefaultDarkColors = Object.keys(darkColorsWithDefaults).length > 0; + const hasDefaultLightColors = Object.keys(lightColorsWithDefaults).length > 0; + + let light: CustomizedTheme['light'] = undefined; + let dark: CustomizedTheme['dark'] = undefined; + + if (hasDefaultLightColors) { + const tokens = { colors: lightColorsWithDefaults }; + const id = `${THEME_CLASS_NAME_PREFIX}-light-${toHash(tokens)}`; + light = { + id, + tokens, + }; + } + if (hasDefaultDarkColors) { + const tokens = { + colors: { + ...darkColorsWithDefaults, + // Reverse the neutrals shade + neutral100: darkColorsWithDefaults.neutral900, + neutral200: darkColorsWithDefaults.neutral800, + neutral300: darkColorsWithDefaults.neutral700, + neutral400: darkColorsWithDefaults.neutral600, + neutral500: darkColorsWithDefaults.neutral500, + neutral600: darkColorsWithDefaults.neutral400, + neutral700: darkColorsWithDefaults.neutral300, + neutral800: darkColorsWithDefaults.neutral200, + neutral900: darkColorsWithDefaults.neutral100, + }, + }; + const id = `${THEME_CLASS_NAME_PREFIX}-dark-${toHash(tokens)}`; + dark = { + id, + tokens, + }; + } + + return { + light, + dark, + }; +} diff --git a/widget/playground/src/App.tsx b/widget/playground/src/App.tsx index 66e06bfcc3..73ddc9f260 100644 --- a/widget/playground/src/App.tsx +++ b/widget/playground/src/App.tsx @@ -1,17 +1,22 @@ import { Widget, WidgetWallets } from '@rango-dev/widget-embedded'; -import React from 'react'; +import React, { useEffect } from 'react'; import { Route, Routes } from 'react-router-dom'; import { RANGO_PUBLIC_API_KEY, WC_PROJECT_ID } from './configs'; import { ConfigContainer } from './containers/configContainer'; -import { useTheme } from './hook/useTheme'; +import { useTheme } from './hooks/useTheme'; import { useConfigStore } from './store/config'; +import { useMetaStore } from './store/meta'; export function App() { const { activeStyle } = useTheme(); + const fetchMeta = useMetaStore.use.fetchMeta(); const config = useConfigStore.use.config(); const overridedConfig = { ...config, apiKey: RANGO_PUBLIC_API_KEY }; + useEffect(() => { + void fetchMeta(); + }, []); return (
diff --git a/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx b/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx index 7074ae2f62..2c609a85ba 100644 --- a/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx +++ b/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx @@ -19,7 +19,7 @@ import { } from 'react-syntax-highlighter/dist/esm/styles/prism'; import { filterConfig, formatConfig } from '../../helpers'; -import { useTheme } from '../../hook/useTheme'; +import { useTheme } from '../../hooks/useTheme'; import { initialConfig, useConfigStore } from '../../store/config'; import { CodeBlock } from './CodeBlock'; diff --git a/widget/playground/src/constants/presets.ts b/widget/playground/src/constants/presets.ts index 82a8dd9e9e..91dad0e274 100644 --- a/widget/playground/src/constants/presets.ts +++ b/widget/playground/src/constants/presets.ts @@ -31,6 +31,7 @@ export const PRESETS: { neutral: '#222222', background: '#010101', foreground: '#FDFDFD', + info: '#5BABFF', }, light: { primary: '#1C3CF1', @@ -58,24 +59,25 @@ export const PRESETS: { neutral: '#222222', background: '#010101', foreground: '#FDFDFD', + info: '#5BABFF', }, }, { id: 4, dark: { - primary: '#502f82ff', - secondary: '#9b6de2ff', - neutral: '#a4a0bd', - // info: '#000022', + primary: '#4c228a', + secondary: '#815dba', + neutral: '#423e61', + info: '#9d6ee3', foreground: '#fcfaffff', background: '#120f29ff', }, light: { - primary: '#31007aff', + primary: '#4c228a', secondary: '#653ba3ff', - neutral: '#84809d', - // info: '#8e6abf', + neutral: '#a29ec1', + info: '#9d6ee3', foreground: '#120f29ff', background: '#fcfaffff', }, @@ -83,10 +85,10 @@ export const PRESETS: { { id: 5, light: { - primary: '#31007aff', + primary: '#4c228a', secondary: '#653ba3ff', - neutral: '#84809d', - // info: '#8e6abf', + neutral: '#a29ec1', + info: '#9d6ee3', foreground: '#120f29ff', background: '#fcfaffff', }, @@ -94,10 +96,10 @@ export const PRESETS: { { id: 6, dark: { - primary: '#502f82ff', - secondary: '#9b6de2ff', - neutral: '#a4a0bd', - // info: '#000022', + primary: '#4c228a', + secondary: '#815dba', + neutral: '#423e61', + info: '#9d6ee3', foreground: '#fcfaffff', background: '#120f29ff', }, @@ -105,46 +107,53 @@ export const PRESETS: { { id: 7, dark: { + foreground: '#fffeffff', background: '#110114ff', - secondary: '#2d2a2dff', - primary: '#d400cbff', + primary: '#bb00b2', + secondary: '#93398f', + neutral: '#585358', + info: '#df72df', }, light: { background: '#fffeffff', - primary: '#d400cbff', foreground: '#2f0146ff', - secondary: '#f5f1f7ff', - neutral: '#eae5eaff', + primary: '#bb00b2', + secondary: '#7c1ca4', + neutral: '#787378', + info: '#df72df', }, }, { id: 8, - light: { background: '#fffeffff', - primary: '#d400cbff', foreground: '#2f0146ff', - secondary: '#f5f1f7ff', - neutral: '#eae5eaff', + primary: '#bb00b2', + secondary: '#7c1ca4', + neutral: '#787378', + info: '#df72df', }, }, { id: 9, dark: { + foreground: '#fffeffff', background: '#110114ff', - secondary: '#2d2a2dff', - primary: '#d400cbff', + primary: '#bb00b2', + secondary: '#93398f', + neutral: '#585358', + info: '#df72df', }, }, { id: 10, dark: { - primary: '#353038ff', - neutral: '#353038ff', - secondary: '#353038ff', + primary: '#4e4951', + neutral: '#757078', + secondary: '#a002b0', background: '#252028ff', - foreground: '#88818cff', + foreground: '#cdc8d0', }, }, { @@ -152,16 +161,18 @@ export const PRESETS: { dark: { foreground: '#fff', background: '#171721ff', - secondary: '#1c1c28ff', - primary: '#7720e9ff', - neutral: '#1c1c28ff', + secondary: '#885ac4', + primary: '#6606e6', + neutral: '#5c5c68', + info: '#7d5ea6', }, light: { background: '#fff', foreground: '#171721ff', - neutral: '#f9fafbff', - secondary: '#f9fafbff', - primary: '#7f1fffff', + neutral: '#757677', + secondary: '#6606e6', + primary: '#6606e6', + info: '#7d5ea6', }, }, { @@ -169,9 +180,10 @@ export const PRESETS: { light: { background: '#fff', foreground: '#171721ff', - neutral: '#f9fafbff', - secondary: '#f9fafbff', - primary: '#7f1fffff', + neutral: '#757677', + secondary: '#6606e6', + primary: '#6606e6', + info: '#7d5ea6', }, }, { @@ -179,19 +191,20 @@ export const PRESETS: { dark: { foreground: '#fff', background: '#171721ff', - secondary: '#1c1c28ff', - primary: '#7720e9ff', - neutral: '#1c1c28ff', + secondary: '#885ac4', + primary: '#6606e6', + neutral: '#5c5c68', + info: '#7d5ea6', }, }, { id: 14, dark: { background: '#0c1536ff', - primary: '#6c5be0ff', + primary: '#8574f9', foreground: '#c4d1fdff', - secondary: '#13164eff', - neutral: '#181c63ff', + secondary: '#3929df', + neutral: '#43478e', }, }, { @@ -199,9 +212,9 @@ export const PRESETS: { dark: { background: '#0c0f12ff', primary: '#e0c072ff', - foreground: '#e0c072ff', - secondary: '#12171cff', - neutral: '#202327ff', + foreground: '#f2e8d0', + secondary: '#b0a385', + neutral: '#5c5f64', }, }, ]; diff --git a/widget/playground/src/hook/useTheme.ts b/widget/playground/src/hooks/useTheme.ts similarity index 77% rename from widget/playground/src/hook/useTheme.ts rename to widget/playground/src/hooks/useTheme.ts index 53993bee5c..ab75409f5d 100755 --- a/widget/playground/src/hook/useTheme.ts +++ b/widget/playground/src/hooks/useTheme.ts @@ -3,36 +3,25 @@ import { useEffect, useLayoutEffect, useState } from 'react'; import { NOT_FOUND } from '../constants'; import { useConfigStore } from '../store/config'; -import { useMetaStore } from '../store/meta'; export function useTheme() { const configTheme = useConfigStore.use.config().theme; - // const configColors = configTheme?.colors; const mode = configTheme?.mode; - const fetchMeta = useMetaStore.use.fetchMeta(); - /* - * const light = configColors?.light; - * const dark = configColors?.dark; - */ const colors = theme.colors; - const customLightTheme = createTheme({ + const customLightTheme = createTheme('light-theme-playground', { colors, }); - const customDarkTheme = createTheme({ + const customDarkTheme = createTheme('dark-theme-playground', { colors, }); + const [OSTheme, setOSTheme] = useState('light'); useEffect(() => { - const fetchData = async () => { - await fetchMeta(); - }; - void fetchData(); - - const switchTheme = (event: MediaQueryListEvent) => { + const switchThemeListener = (event: MediaQueryListEvent) => { if (event.matches) { setOSTheme('dark'); } else { @@ -49,11 +38,11 @@ export function useTheme() { window .matchMedia('(prefers-color-scheme: dark)') - .addEventListener('change', switchTheme); + .addEventListener('change', switchThemeListener); return () => { window .matchMedia('(prefers-color-scheme: dark)') - .removeEventListener('change', switchTheme); + .removeEventListener('change', switchThemeListener); }; }, []); diff --git a/widget/ui/src/theme.ts b/widget/ui/src/theme.ts index 5f7dd01913..7ca11b84f6 100644 --- a/widget/ui/src/theme.ts +++ b/widget/ui/src/theme.ts @@ -47,6 +47,7 @@ export const theme = { warning600: '#38271F', warning700: '#1A1412', + info: '#5BABFF', info100: '#E9F3FF', info300: '#C8E2FF', info500: '#5BABFF', @@ -213,9 +214,9 @@ export const { styled, css, createTheme, keyframes, globalCss, config } = utils, }); -export const lightTheme = createTheme({}); +export const lightTheme = createTheme('light-theme-ui', {}); -export const darkTheme = createTheme({ +export const darkTheme = createTheme('dark-theme-ui', { colors: darkColors, shadows: { s: '0px 3px 5px 3px #222, 0px 6px 10px 3px #222, 0px 1px 18px 3px #222', From 06bb1d5e52cea173c44938ff0d7d519d8c4db7b1 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 30 Oct 2023 10:13:16 +0000 Subject: [PATCH 624/769] chore(release): publish - ui@0.17.1-next.7 - wallets-adapter@0.14.1-next.8 - wallets-demo@0.11.1-next.37 - widget-embedded@0.14.1-next.10 - wallets-adapter-demo@0.12.1-next.36 - widget-playground@0.12.1-next.49 - widget-iframe@0.12.1-next.48 - widget-app@0.12.1-next.48 Affected packages: ui@0.17.1-next.7,wallets-adapter@0.14.1-next.8,wallets-demo@0.11.1-next.37,widget-embedded@0.14.1-next.10,wallets-adapter-demo@0.12.1-next.36,widget-playground@0.12.1-next.49,widget-iframe@0.12.1-next.48,widget-app@0.12.1-next.48 --- examples/wallets-adapter-demo/package.json | 4 ++-- examples/wallets-demo/package.json | 4 ++-- wallets/wallets-adapter/package.json | 4 ++-- widget/app/package.json | 4 ++-- widget/embedded/package.json | 4 ++-- widget/iframe/package.json | 4 ++-- widget/playground/package.json | 6 +++--- widget/ui/package.json | 2 +- 8 files changed, 16 insertions(+), 16 deletions(-) diff --git a/examples/wallets-adapter-demo/package.json b/examples/wallets-adapter-demo/package.json index 2de1aac711..11d7ceec66 100644 --- a/examples/wallets-adapter-demo/package.json +++ b/examples/wallets-adapter-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter-demo", - "version": "0.12.1-next.35", + "version": "0.12.1-next.36", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/wallets-adapter": "^0.14.1-next.7", + "@rango-dev/wallets-adapter": "^0.14.1-next.8", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/wallets-demo/package.json b/examples/wallets-demo/package.json index 664f4910f5..f142cb1d56 100644 --- a/examples/wallets-demo/package.json +++ b/examples/wallets-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-demo", - "version": "0.11.1-next.36", + "version": "0.11.1-next.37", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/ui": "^0.17.1-next.6", + "@rango-dev/ui": "^0.17.1-next.7", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "rango-sdk": "^0.1.35", diff --git a/wallets/wallets-adapter/package.json b/wallets/wallets-adapter/package.json index 95b4f0c827..17ae2c15d7 100644 --- a/wallets/wallets-adapter/package.json +++ b/wallets/wallets-adapter/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter", - "version": "0.14.1-next.7", + "version": "0.14.1-next.8", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -24,7 +24,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/ui": "^0.17.1-next.6", + "@rango-dev/ui": "^0.17.1-next.7", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "rango-types": "^0.1.46" diff --git a/widget/app/package.json b/widget/app/package.json index 3d923197c4..33f77fe207 100644 --- a/widget/app/package.json +++ b/widget/app/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-app", - "version": "0.12.1-next.47", + "version": "0.12.1-next.48", "license": "MIT", "private": true, "source": "public/index.html", @@ -14,7 +14,7 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.9", + "@rango-dev/widget-embedded": "^0.14.1-next.10", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0" diff --git a/widget/embedded/package.json b/widget/embedded/package.json index 12c728ae71..c3217651e8 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.14.1-next.9", + "version": "0.14.1-next.10", "license": "MIT", "type": "module", "main": "dist/index.js", @@ -23,7 +23,7 @@ "@rango-dev/queue-manager-core": "^0.17.0", "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.1", "@rango-dev/queue-manager-react": "^0.17.0", - "@rango-dev/ui": "^0.17.1-next.6", + "@rango-dev/ui": "^0.17.1-next.7", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", "bignumber.js": "^9.1.1", diff --git a/widget/iframe/package.json b/widget/iframe/package.json index 8d833823ca..e073ed2efa 100644 --- a/widget/iframe/package.json +++ b/widget/iframe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-iframe", - "version": "0.12.1-next.47", + "version": "0.12.1-next.48", "license": "MIT", "private": true, "source": "src/index.ts", @@ -13,6 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.9" + "@rango-dev/widget-embedded": "^0.14.1-next.10" } } diff --git a/widget/playground/package.json b/widget/playground/package.json index 8f5e4dbb03..6927e5c84f 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-playground", - "version": "0.12.1-next.48", + "version": "0.12.1-next.49", "license": "MIT", "private": true, "source": "public/index.html", @@ -18,10 +18,10 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/ui": "^0.17.1-next.6", + "@rango-dev/ui": "^0.17.1-next.7", "@rango-dev/wallets-react": "^0.3.1-next.0", "@rango-dev/wallets-shared": "^0.17.0", - "@rango-dev/widget-embedded": "^0.14.1-next.9", + "@rango-dev/widget-embedded": "^0.14.1-next.10", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-color": "^2.19.3", diff --git a/widget/ui/package.json b/widget/ui/package.json index aa76075975..7c33477836 100644 --- a/widget/ui/package.json +++ b/widget/ui/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/ui", - "version": "0.17.1-next.6", + "version": "0.17.1-next.7", "license": "MIT", "type": "module", "module": "./dist/index.js", From 3e324208d9dcc8d11267a37bf6df84547975c1bf Mon Sep 17 00:00:00 2001 From: RanGojo Date: Mon, 30 Oct 2023 16:35:26 +0000 Subject: [PATCH 625/769] feat: don't show safe when not injected --- wallets/provider-all/package.json | 1 + wallets/provider-all/src/index.ts | 2 ++ wallets/provider-safe/package.json | 2 +- wallets/provider-safe/src/index.ts | 1 + wallets/shared/src/rango.ts | 1 + widget/embedded/src/utils/wallets.ts | 29 ++++------------------------ 6 files changed, 10 insertions(+), 26 deletions(-) diff --git a/wallets/provider-all/package.json b/wallets/provider-all/package.json index cee9f3c9b9..dac0bd0093 100644 --- a/wallets/provider-all/package.json +++ b/wallets/provider-all/package.json @@ -38,6 +38,7 @@ "@rango-dev/provider-metamask": "^0.17.0", "@rango-dev/provider-okx": "^0.17.0", "@rango-dev/provider-phantom": "^0.17.0", + "@rango-dev/provider-safe": "^0.10.0", "@rango-dev/provider-safepal": "^0.17.0", "@rango-dev/provider-taho": "^0.17.0", "@rango-dev/provider-tokenpocket": "^0.17.0", diff --git a/wallets/provider-all/src/index.ts b/wallets/provider-all/src/index.ts index 3728a28b13..448419e0cf 100644 --- a/wallets/provider-all/src/index.ts +++ b/wallets/provider-all/src/index.ts @@ -16,6 +16,7 @@ import * as mathwallet from '@rango-dev/provider-math-wallet'; import * as metamask from '@rango-dev/provider-metamask'; import * as okx from '@rango-dev/provider-okx'; import * as phantom from '@rango-dev/provider-phantom'; +import * as safe from '@rango-dev/provider-safe'; import * as safepal from '@rango-dev/provider-safepal'; import * as taho from '@rango-dev/provider-taho'; import * as tokenpocket from '@rango-dev/provider-tokenpocket'; @@ -30,6 +31,7 @@ export const allProviders = (enviroments?: Enviroments) => { walletconnect2.init(enviroments?.walletconnect2 || {}); return [ + safe, metamask, walletconnect2, keplr, diff --git a/wallets/provider-safe/package.json b/wallets/provider-safe/package.json index 4e7f1cc73f..d37e716b8e 100644 --- a/wallets/provider-safe/package.json +++ b/wallets/provider-safe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-safe", - "version": "0.8.1-next.6", + "version": "0.10.0", "license": "MIT", "type": "module", "module": "./dist/index.js", diff --git a/wallets/provider-safe/src/index.ts b/wallets/provider-safe/src/index.ts index cdc280ff2d..959ae9e645 100644 --- a/wallets/provider-safe/src/index.ts +++ b/wallets/provider-safe/src/index.ts @@ -84,5 +84,6 @@ export const getWalletInfo: (allBlockChains: BlockchainMeta[]) => WalletInfo = ( }, color: '#ffffff', supportedChains: evms, + hideWhenNotInstalled: true, }; }; diff --git a/wallets/shared/src/rango.ts b/wallets/shared/src/rango.ts index 7bc364cf6a..c31c4b55e5 100644 --- a/wallets/shared/src/rango.ts +++ b/wallets/shared/src/rango.ts @@ -278,6 +278,7 @@ export type WalletInfo = { color: string; supportedChains: BlockchainMeta[]; showOnMobile?: boolean; + hideWhenNotInstalled?: boolean; mobileWallet?: boolean; }; diff --git a/widget/embedded/src/utils/wallets.ts b/widget/embedded/src/utils/wallets.ts index 9f99ce1733..ec6aa923f9 100644 --- a/widget/embedded/src/utils/wallets.ts +++ b/widget/embedded/src/utils/wallets.ts @@ -55,8 +55,11 @@ export function mapWalletTypesToWalletInfo( return list .filter((wallet) => !EXCLUDED_WALLETS.includes(wallet as WalletTypes)) .filter((wallet) => { + const { supportedChains, hideWhenNotInstalled } = getWalletInfo(wallet); + if (hideWhenNotInstalled && !getState(wallet).installed) { + return false; + } if (chain) { - const { supportedChains } = getWalletInfo(wallet); return !!supportedChains.find( (supportedChain) => supportedChain.name === chain ); @@ -203,30 +206,6 @@ export function getRequiredChains(route: BestRouteResponse | null) { type Blockchain = { name: string; accounts: ConnectedWallet[] }; -export function getSelectableWallets( - connectedWallets: ConnectedWallet[], - getWalletInfo: (type: WalletType) => WalletInfo, - destinationChain?: string -): Wallet[] { - const selectableWallets = connectedWallets.map( - (connectedWallet: ConnectedWallet) => { - return { - address: connectedWallet.address, - walletType: connectedWallet.walletType, - chain: connectedWallet.chain, - image: getWalletInfo(connectedWallet.walletType).img, - name: getWalletInfo(connectedWallet.walletType).name, - selected: - destinationChain === connectedWallet.chain - ? false - : connectedWallet.selected, - }; - } - ); - - return selectableWallets; -} - export function getBalanceFromWallet( connectedWallets: ConnectedWallet[], chain: string, From 6df2c1e7a386ff5bd607075daa49c18a99441bd5 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 31 Oct 2023 08:24:36 +0000 Subject: [PATCH 626/769] chore(release): publish - wallets-shared@0.17.1-next.0 - provider-binance-chain-wallet@0.17.1-next.0 - provider-walletconnect@0.17.1-next.0 - provider-argentx@0.17.1-next.0 - provider-bitget@0.13.1-next.0 - provider-braavos@0.10.1-next.0 - provider-brave@0.17.1-next.0 - provider-clover@0.17.1-next.0 - provider-coin98@0.17.1-next.0 - provider-coinbase@0.17.1-next.0 - provider-cosmostation@0.17.1-next.1 - provider-enkrypt@0.17.1-next.0 - provider-exodus@0.17.1-next.0 - provider-frontier@0.17.1-next.0 - provider-halo@0.17.1-next.0 - provider-keplr@0.17.1-next.0 - provider-leap-cosmos@0.17.1-next.0 - provider-math-wallet@0.17.1-next.0 - provider-metamask@0.17.1-next.0 - provider-okx@0.17.1-next.0 - provider-phantom@0.17.1-next.0 - provider-safe@0.10.1-next.0 - provider-safepal@0.17.1-next.0 - provider-taho@0.17.1-next.0 - provider-tokenpocket@0.17.1-next.0 - provider-tron-link@0.17.1-next.0 - provider-trustwallet@0.17.1-next.0 - provider-walletconnect-2@0.10.1-next.0 - provider-xdefi@0.17.1-next.0 - wallets-core@0.17.1-next.1 - provider-mytonwallet@0.3.1-next.0 - provider-station@0.17.1-next.0 - provider-all@0.17.1-next.2 - wallets-react@0.3.1-next.1 - queue-manager-rango-preset@0.17.1-next.2 - ui@0.17.1-next.8 - queue-manager-demo@0.11.1-next.17 - wallets-adapter@0.14.1-next.9 - wallets-demo@0.11.1-next.38 - widget-embedded@0.14.1-next.11 - wallets-adapter-demo@0.12.1-next.37 - widget-playground@0.12.1-next.50 - widget-iframe@0.12.1-next.49 - widget-app@0.12.1-next.49 Affected packages: wallets-shared@0.17.1-next.0,provider-binance-chain-wallet@0.17.1-next.0,provider-walletconnect@0.17.1-next.0,provider-argentx@0.17.1-next.0,provider-bitget@0.13.1-next.0,provider-braavos@0.10.1-next.0,provider-brave@0.17.1-next.0,provider-clover@0.17.1-next.0,provider-coin98@0.17.1-next.0,provider-coinbase@0.17.1-next.0,provider-cosmostation@0.17.1-next.1,provider-enkrypt@0.17.1-next.0,provider-exodus@0.17.1-next.0,provider-frontier@0.17.1-next.0,provider-halo@0.17.1-next.0,provider-keplr@0.17.1-next.0,provider-leap-cosmos@0.17.1-next.0,provider-math-wallet@0.17.1-next.0,provider-metamask@0.17.1-next.0,provider-okx@0.17.1-next.0,provider-phantom@0.17.1-next.0,provider-safe@0.10.1-next.0,provider-safepal@0.17.1-next.0,provider-taho@0.17.1-next.0,provider-tokenpocket@0.17.1-next.0,provider-tron-link@0.17.1-next.0,provider-trustwallet@0.17.1-next.0,provider-walletconnect-2@0.10.1-next.0,provider-xdefi@0.17.1-next.0,wallets-core@0.17.1-next.1,provider-mytonwallet@0.3.1-next.0,provider-station@0.17.1-next.0,provider-all@0.17.1-next.2,wallets-react@0.3.1-next.1,queue-manager-rango-preset@0.17.1-next.2,ui@0.17.1-next.8,queue-manager-demo@0.11.1-next.17,wallets-adapter@0.14.1-next.9,wallets-demo@0.11.1-next.38,widget-embedded@0.14.1-next.11,wallets-adapter-demo@0.12.1-next.37,widget-playground@0.12.1-next.50,widget-iframe@0.12.1-next.49,widget-app@0.12.1-next.49 --- examples/queue-manager-demo/package.json | 10 ++-- examples/wallets-adapter-demo/package.json | 6 +-- examples/wallets-demo/package.json | 10 ++-- queue-manager/rango-preset/package.json | 2 +- wallets/core/package.json | 4 +- wallets/provider-all/package.json | 54 +++++++++---------- wallets/provider-argentx/package.json | 4 +- .../package.json | 4 +- wallets/provider-bitget/package.json | 4 +- wallets/provider-braavos/package.json | 4 +- wallets/provider-brave/package.json | 4 +- wallets/provider-clover/package.json | 4 +- wallets/provider-coin98/package.json | 4 +- wallets/provider-coinbase/package.json | 4 +- wallets/provider-cosmostation/package.json | 4 +- wallets/provider-enkrypt/package.json | 4 +- wallets/provider-exodus/package.json | 4 +- wallets/provider-frontier/package.json | 4 +- wallets/provider-halo/package.json | 4 +- wallets/provider-keplr/package.json | 4 +- wallets/provider-leap-cosmos/package.json | 4 +- wallets/provider-math-wallet/package.json | 4 +- wallets/provider-metamask/package.json | 4 +- wallets/provider-mytonwallet/package.json | 4 +- wallets/provider-okx/package.json | 4 +- wallets/provider-phantom/package.json | 4 +- wallets/provider-safe/package.json | 4 +- wallets/provider-safepal/package.json | 4 +- wallets/provider-station/package.json | 4 +- wallets/provider-taho/package.json | 4 +- wallets/provider-tokenpocket/package.json | 4 +- wallets/provider-tron-link/package.json | 4 +- wallets/provider-trustwallet/package.json | 4 +- wallets/provider-walletconnect-2/package.json | 4 +- wallets/provider-walletconnect/package.json | 4 +- wallets/provider-xdefi/package.json | 4 +- wallets/react/package.json | 6 +-- wallets/shared/package.json | 2 +- wallets/wallets-adapter/package.json | 10 ++-- widget/app/package.json | 4 +- widget/embedded/package.json | 12 ++--- widget/iframe/package.json | 4 +- widget/playground/package.json | 12 ++--- widget/ui/package.json | 4 +- 44 files changed, 130 insertions(+), 130 deletions(-) diff --git a/examples/queue-manager-demo/package.json b/examples/queue-manager-demo/package.json index de9b613755..ce9951cad9 100644 --- a/examples/queue-manager-demo/package.json +++ b/examples/queue-manager-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/queue-manager-demo", - "version": "0.11.1-next.16", + "version": "0.11.1-next.17", "license": "MIT", "private": true, "source": "public/index.html", @@ -15,11 +15,11 @@ "rango-sdk": "^0.1.35" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.1", + "@rango-dev/provider-all": "^0.17.1-next.2", + "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.2", "@rango-dev/queue-manager-react": "^0.17.0", - "@rango-dev/wallets-react": "^0.3.1-next.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-react": "^0.3.1-next.1", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "bignumber.js": "^9.1.1", "ethers": "^5.7.2", "rango-sdk-basic": "^0.1.34", diff --git a/examples/wallets-adapter-demo/package.json b/examples/wallets-adapter-demo/package.json index 11d7ceec66..11a99b6323 100644 --- a/examples/wallets-adapter-demo/package.json +++ b/examples/wallets-adapter-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter-demo", - "version": "0.12.1-next.36", + "version": "0.12.1-next.37", "license": "MIT", "private": true, "source": "public/index.html", @@ -11,8 +11,8 @@ "clean": "rimraf .parcel-cache && rimraf dist" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/wallets-adapter": "^0.14.1-next.8", + "@rango-dev/provider-all": "^0.17.1-next.2", + "@rango-dev/wallets-adapter": "^0.14.1-next.9", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/wallets-demo/package.json b/examples/wallets-demo/package.json index f142cb1d56..649e98b4fb 100644 --- a/examples/wallets-demo/package.json +++ b/examples/wallets-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-demo", - "version": "0.11.1-next.37", + "version": "0.11.1-next.38", "license": "MIT", "private": true, "source": "public/index.html", @@ -11,10 +11,10 @@ "clean": "rimraf .parcel-cache && rimraf dist" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/ui": "^0.17.1-next.7", - "@rango-dev/wallets-react": "^0.3.1-next.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/provider-all": "^0.17.1-next.2", + "@rango-dev/ui": "^0.17.1-next.8", + "@rango-dev/wallets-react": "^0.3.1-next.1", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/queue-manager/rango-preset/package.json b/queue-manager/rango-preset/package.json index 628ccc5c17..ef4fc4fa9e 100644 --- a/queue-manager/rango-preset/package.json +++ b/queue-manager/rango-preset/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/queue-manager-rango-preset", - "version": "0.17.1-next.1", + "version": "0.17.1-next.2", "license": "MIT", "type": "module", "module": "./dist/index.js", diff --git a/wallets/core/package.json b/wallets/core/package.json index 124b089891..3c8e0ca3a2 100644 --- a/wallets/core/package.json +++ b/wallets/core/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-core", - "version": "0.17.1-next.0", + "version": "0.17.1-next.1", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -25,7 +25,7 @@ "react-dom": "^17.0.0 || ^18.0.0" }, "dependencies": { - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-all/package.json b/wallets/provider-all/package.json index dac0bd0093..01ca0e87c7 100644 --- a/wallets/provider-all/package.json +++ b/wallets/provider-all/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-all", - "version": "0.17.1-next.1", + "version": "0.17.1-next.2", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -20,32 +20,32 @@ "lint": "eslint \"**/*.{ts,tsx}\" --ignore-path ../../.eslintignore" }, "dependencies": { - "@rango-dev/provider-argentx": "^0.17.0", - "@rango-dev/provider-bitget": "^0.13.0", - "@rango-dev/provider-braavos": "^0.10.0", - "@rango-dev/provider-brave": "^0.17.0", - "@rango-dev/provider-clover": "^0.17.0", - "@rango-dev/provider-coin98": "^0.17.0", - "@rango-dev/provider-coinbase": "^0.17.0", - "@rango-dev/provider-cosmostation": "^0.17.1-next.0", - "@rango-dev/provider-enkrypt": "^0.17.0", - "@rango-dev/provider-exodus": "^0.17.0", - "@rango-dev/provider-frontier": "^0.17.0", - "@rango-dev/provider-halo": "^0.17.0", - "@rango-dev/provider-keplr": "^0.17.0", - "@rango-dev/provider-leap-cosmos": "^0.17.0", - "@rango-dev/provider-math-wallet": "^0.17.0", - "@rango-dev/provider-metamask": "^0.17.0", - "@rango-dev/provider-okx": "^0.17.0", - "@rango-dev/provider-phantom": "^0.17.0", - "@rango-dev/provider-safe": "^0.10.0", - "@rango-dev/provider-safepal": "^0.17.0", - "@rango-dev/provider-taho": "^0.17.0", - "@rango-dev/provider-tokenpocket": "^0.17.0", - "@rango-dev/provider-tron-link": "^0.17.0", - "@rango-dev/provider-trustwallet": "^0.17.0", - "@rango-dev/provider-walletconnect-2": "^0.10.0", - "@rango-dev/provider-xdefi": "^0.17.0" + "@rango-dev/provider-argentx": "^0.17.1-next.0", + "@rango-dev/provider-bitget": "^0.13.1-next.0", + "@rango-dev/provider-braavos": "^0.10.1-next.0", + "@rango-dev/provider-brave": "^0.17.1-next.0", + "@rango-dev/provider-clover": "^0.17.1-next.0", + "@rango-dev/provider-coin98": "^0.17.1-next.0", + "@rango-dev/provider-coinbase": "^0.17.1-next.0", + "@rango-dev/provider-cosmostation": "^0.17.1-next.1", + "@rango-dev/provider-enkrypt": "^0.17.1-next.0", + "@rango-dev/provider-exodus": "^0.17.1-next.0", + "@rango-dev/provider-frontier": "^0.17.1-next.0", + "@rango-dev/provider-halo": "^0.17.1-next.0", + "@rango-dev/provider-keplr": "^0.17.1-next.0", + "@rango-dev/provider-leap-cosmos": "^0.17.1-next.0", + "@rango-dev/provider-math-wallet": "^0.17.1-next.0", + "@rango-dev/provider-metamask": "^0.17.1-next.0", + "@rango-dev/provider-okx": "^0.17.1-next.0", + "@rango-dev/provider-phantom": "^0.17.1-next.0", + "@rango-dev/provider-safe": "^0.10.1-next.0", + "@rango-dev/provider-safepal": "^0.17.1-next.0", + "@rango-dev/provider-taho": "^0.17.1-next.0", + "@rango-dev/provider-tokenpocket": "^0.17.1-next.0", + "@rango-dev/provider-tron-link": "^0.17.1-next.0", + "@rango-dev/provider-trustwallet": "^0.17.1-next.0", + "@rango-dev/provider-walletconnect-2": "^0.10.1-next.0", + "@rango-dev/provider-xdefi": "^0.17.1-next.0" }, "publishConfig": { "access": "public" diff --git a/wallets/provider-argentx/package.json b/wallets/provider-argentx/package.json index 04dee7fbaf..733afb8c8d 100644 --- a/wallets/provider-argentx/package.json +++ b/wallets/provider-argentx/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-argentx", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -21,7 +21,7 @@ }, "dependencies": { "@rango-dev/signer-starknet": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-binance-chain-wallet/package.json b/wallets/provider-binance-chain-wallet/package.json index fad0a8261c..2e794a895b 100644 --- a/wallets/provider-binance-chain-wallet/package.json +++ b/wallets/provider-binance-chain-wallet/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-binance-chain-wallet", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@binance-chain/javascript-sdk": "^4.1.1", "@rango-dev/signer-evm": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-bitget/package.json b/wallets/provider-bitget/package.json index 951e51fc15..c5592ba344 100644 --- a/wallets/provider-bitget/package.json +++ b/wallets/provider-bitget/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-bitget", - "version": "0.13.0", + "version": "0.13.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@rango-dev/signer-evm": "^0.17.0", "@rango-dev/signer-tron": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-braavos/package.json b/wallets/provider-braavos/package.json index a97ba7aa3b..fafc37b0f8 100644 --- a/wallets/provider-braavos/package.json +++ b/wallets/provider-braavos/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-braavos", - "version": "0.10.0", + "version": "0.10.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -21,7 +21,7 @@ }, "dependencies": { "@rango-dev/signer-starknet": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.45" }, "publishConfig": { diff --git a/wallets/provider-brave/package.json b/wallets/provider-brave/package.json index 1967977434..904e706eb2 100644 --- a/wallets/provider-brave/package.json +++ b/wallets/provider-brave/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-brave", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@rango-dev/signer-evm": "^0.17.0", "@rango-dev/signer-solana": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-clover/package.json b/wallets/provider-clover/package.json index 29ebf08423..2c93ce32b8 100644 --- a/wallets/provider-clover/package.json +++ b/wallets/provider-clover/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-clover", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@rango-dev/signer-evm": "^0.17.0", "@rango-dev/signer-solana": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-coin98/package.json b/wallets/provider-coin98/package.json index 8d76b05669..3ef7914775 100644 --- a/wallets/provider-coin98/package.json +++ b/wallets/provider-coin98/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-coin98", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@rango-dev/signer-evm": "^0.17.0", "@rango-dev/signer-solana": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "@solana/web3.js": "^1.67.2", "bs58": "^5.0.0", "rango-types": "^0.1.46" diff --git a/wallets/provider-coinbase/package.json b/wallets/provider-coinbase/package.json index 089c8855ba..fd6b1d652b 100644 --- a/wallets/provider-coinbase/package.json +++ b/wallets/provider-coinbase/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-coinbase", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@rango-dev/signer-evm": "^0.17.0", "@rango-dev/signer-solana": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-cosmostation/package.json b/wallets/provider-cosmostation/package.json index 9207a53bd2..8248801529 100644 --- a/wallets/provider-cosmostation/package.json +++ b/wallets/provider-cosmostation/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-cosmostation", - "version": "0.17.1-next.0", + "version": "0.17.1-next.1", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@rango-dev/signer-cosmos": "^0.17.0", "@rango-dev/signer-evm": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-enkrypt/package.json b/wallets/provider-enkrypt/package.json index 85d6a04856..617f87b7d3 100644 --- a/wallets/provider-enkrypt/package.json +++ b/wallets/provider-enkrypt/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-enkrypt", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -21,7 +21,7 @@ }, "dependencies": { "@rango-dev/signer-evm": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-exodus/package.json b/wallets/provider-exodus/package.json index f6ab6b564e..abf5a98e4e 100644 --- a/wallets/provider-exodus/package.json +++ b/wallets/provider-exodus/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-exodus", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@rango-dev/signer-evm": "^0.17.0", "@rango-dev/signer-solana": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-frontier/package.json b/wallets/provider-frontier/package.json index ae18d63bbe..960b61aefe 100644 --- a/wallets/provider-frontier/package.json +++ b/wallets/provider-frontier/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-frontier", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@rango-dev/signer-evm": "^0.17.0", "@rango-dev/signer-solana": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-halo/package.json b/wallets/provider-halo/package.json index e29e098521..6e5de93414 100644 --- a/wallets/provider-halo/package.json +++ b/wallets/provider-halo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-halo", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -21,7 +21,7 @@ }, "dependencies": { "@rango-dev/signer-evm": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-keplr/package.json b/wallets/provider-keplr/package.json index 98b77d07e7..49eac716e0 100644 --- a/wallets/provider-keplr/package.json +++ b/wallets/provider-keplr/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-keplr", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -21,7 +21,7 @@ }, "dependencies": { "@rango-dev/signer-cosmos": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "devDependencies": { diff --git a/wallets/provider-leap-cosmos/package.json b/wallets/provider-leap-cosmos/package.json index 2cb6b69926..d4652ab91a 100644 --- a/wallets/provider-leap-cosmos/package.json +++ b/wallets/provider-leap-cosmos/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-leap-cosmos", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -21,7 +21,7 @@ }, "dependencies": { "@rango-dev/signer-cosmos": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-math-wallet/package.json b/wallets/provider-math-wallet/package.json index 1097c24564..fac7bda6ff 100644 --- a/wallets/provider-math-wallet/package.json +++ b/wallets/provider-math-wallet/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-math-wallet", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@rango-dev/signer-evm": "^0.17.0", "@rango-dev/signer-solana": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-metamask/package.json b/wallets/provider-metamask/package.json index fcec12a9c1..3ec3affa8f 100644 --- a/wallets/provider-metamask/package.json +++ b/wallets/provider-metamask/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-metamask", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -21,7 +21,7 @@ }, "dependencies": { "@rango-dev/signer-evm": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-mytonwallet/package.json b/wallets/provider-mytonwallet/package.json index b99c4a88bc..29a1ff86c8 100644 --- a/wallets/provider-mytonwallet/package.json +++ b/wallets/provider-mytonwallet/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-mytonwallet", - "version": "0.1.1-next.5", + "version": "0.3.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -21,7 +21,7 @@ }, "dependencies": { "@rango-dev/signer-ton": "^0.3.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "@tonconnect/sdk": "^2.1.0", "rango-types": "^0.1.45" }, diff --git a/wallets/provider-okx/package.json b/wallets/provider-okx/package.json index 3b0af0a71e..7835accf91 100644 --- a/wallets/provider-okx/package.json +++ b/wallets/provider-okx/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-okx", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@rango-dev/signer-evm": "^0.17.0", "@rango-dev/signer-solana": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-phantom/package.json b/wallets/provider-phantom/package.json index 2feaebe48b..f0e4374436 100644 --- a/wallets/provider-phantom/package.json +++ b/wallets/provider-phantom/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-phantom", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -21,7 +21,7 @@ }, "dependencies": { "@rango-dev/signer-solana": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-safe/package.json b/wallets/provider-safe/package.json index d37e716b8e..449f79aedb 100644 --- a/wallets/provider-safe/package.json +++ b/wallets/provider-safe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-safe", - "version": "0.10.0", + "version": "0.10.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@ethersproject/abstract-provider": "^5.7.0", "@rango-dev/signer-evm": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "@safe-global/safe-apps-provider": "^0.17.0", "@safe-global/safe-apps-sdk": "^7.11.0", "rango-types": "^0.1.46" diff --git a/wallets/provider-safepal/package.json b/wallets/provider-safepal/package.json index fd845792fc..103fb91115 100644 --- a/wallets/provider-safepal/package.json +++ b/wallets/provider-safepal/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-safepal", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@rango-dev/signer-evm": "^0.17.0", "@rango-dev/signer-solana": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-station/package.json b/wallets/provider-station/package.json index 9ad02c72f6..c094884195 100644 --- a/wallets/provider-station/package.json +++ b/wallets/provider-station/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-station", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -24,7 +24,7 @@ }, "dependencies": { "@rango-dev/signer-terra": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "@terra-money/wallet-controller": "^3.11.2", "rango-types": "^0.1.46" }, diff --git a/wallets/provider-taho/package.json b/wallets/provider-taho/package.json index 8f48effcff..57284e82bc 100644 --- a/wallets/provider-taho/package.json +++ b/wallets/provider-taho/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-taho", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -21,7 +21,7 @@ }, "dependencies": { "@rango-dev/signer-evm": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-tokenpocket/package.json b/wallets/provider-tokenpocket/package.json index 272ec7c899..b0748b6712 100644 --- a/wallets/provider-tokenpocket/package.json +++ b/wallets/provider-tokenpocket/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-tokenpocket", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -21,7 +21,7 @@ }, "dependencies": { "@rango-dev/signer-evm": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-tron-link/package.json b/wallets/provider-tron-link/package.json index 931421e6a9..c928039080 100644 --- a/wallets/provider-tron-link/package.json +++ b/wallets/provider-tron-link/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-tron-link", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -21,7 +21,7 @@ }, "dependencies": { "@rango-dev/signer-tron": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-trustwallet/package.json b/wallets/provider-trustwallet/package.json index d11b80fcda..30e6bcd44e 100644 --- a/wallets/provider-trustwallet/package.json +++ b/wallets/provider-trustwallet/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-trustwallet", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -21,7 +21,7 @@ }, "dependencies": { "@rango-dev/signer-evm": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/provider-walletconnect-2/package.json b/wallets/provider-walletconnect-2/package.json index 706107d223..30f2604ee0 100644 --- a/wallets/provider-walletconnect-2/package.json +++ b/wallets/provider-walletconnect-2/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-walletconnect-2", - "version": "0.10.0", + "version": "0.10.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -26,7 +26,7 @@ "@rango-dev/signer-cosmos": "^0.17.0", "@rango-dev/signer-evm": "^0.17.0", "@rango-dev/signer-solana": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "@solana/web3.js": "^1.67.2", "@walletconnect/encoding": "^1.0.2", "@walletconnect/modal": "^2.6.1", diff --git a/wallets/provider-walletconnect/package.json b/wallets/provider-walletconnect/package.json index bed10f7862..f2d04c7b1a 100644 --- a/wallets/provider-walletconnect/package.json +++ b/wallets/provider-walletconnect/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-walletconnect", - "version": "0.15.1-next.6", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -21,7 +21,7 @@ }, "dependencies": { "@rango-dev/signer-evm": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "@walletconnect/client": "^1.8.0", "@walletconnect/jsonrpc-utils": "^1.0.8", "@walletconnect/qrcode-modal": "^1.8.0", diff --git a/wallets/provider-xdefi/package.json b/wallets/provider-xdefi/package.json index c03899d430..f4003adfed 100644 --- a/wallets/provider-xdefi/package.json +++ b/wallets/provider-xdefi/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-xdefi", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@rango-dev/signer-evm": "^0.17.0", "@rango-dev/signer-solana": "^0.17.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/react/package.json b/wallets/react/package.json index 48a0ce7904..2121294a86 100644 --- a/wallets/react/package.json +++ b/wallets/react/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-react", - "version": "0.3.1-next.0", + "version": "0.3.1-next.1", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -25,8 +25,8 @@ "react-dom": "^17.0.0 || ^18.0.0" }, "dependencies": { - "@rango-dev/wallets-core": "^0.17.1-next.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-core": "^0.17.1-next.1", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/wallets/shared/package.json b/wallets/shared/package.json index bcf0df0f95..f36446f0a1 100644 --- a/wallets/shared/package.json +++ b/wallets/shared/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-shared", - "version": "0.17.0", + "version": "0.17.1-next.0", "license": "MIT", "type": "module", "module": "./dist/index.js", diff --git a/wallets/wallets-adapter/package.json b/wallets/wallets-adapter/package.json index 17ae2c15d7..075b3e22c9 100644 --- a/wallets/wallets-adapter/package.json +++ b/wallets/wallets-adapter/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter", - "version": "0.14.1-next.8", + "version": "0.14.1-next.9", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -23,10 +23,10 @@ "react": ">=16" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/ui": "^0.17.1-next.7", - "@rango-dev/wallets-react": "^0.3.1-next.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/provider-all": "^0.17.1-next.2", + "@rango-dev/ui": "^0.17.1-next.8", + "@rango-dev/wallets-react": "^0.3.1-next.1", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" }, "publishConfig": { diff --git a/widget/app/package.json b/widget/app/package.json index 33f77fe207..50c16498b8 100644 --- a/widget/app/package.json +++ b/widget/app/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-app", - "version": "0.12.1-next.48", + "version": "0.12.1-next.49", "license": "MIT", "private": true, "source": "public/index.html", @@ -14,7 +14,7 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.10", + "@rango-dev/widget-embedded": "^0.14.1-next.11", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0" diff --git a/widget/embedded/package.json b/widget/embedded/package.json index c3217651e8..507384f302 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.14.1-next.10", + "version": "0.14.1-next.11", "license": "MIT", "type": "module", "main": "dist/index.js", @@ -19,13 +19,13 @@ "dependencies": { "@lingui/core": "4.2.1", "@lingui/react": "4.2.1", - "@rango-dev/provider-all": "^0.17.1-next.1", + "@rango-dev/provider-all": "^0.17.1-next.2", "@rango-dev/queue-manager-core": "^0.17.0", - "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.1", + "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.2", "@rango-dev/queue-manager-react": "^0.17.0", - "@rango-dev/ui": "^0.17.1-next.7", - "@rango-dev/wallets-react": "^0.3.1-next.0", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/ui": "^0.17.1-next.8", + "@rango-dev/wallets-react": "^0.3.1-next.1", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "bignumber.js": "^9.1.1", "copy-to-clipboard": "^3.3.3", "dayjs": "^1.11.7", diff --git a/widget/iframe/package.json b/widget/iframe/package.json index e073ed2efa..c1a8944dd7 100644 --- a/widget/iframe/package.json +++ b/widget/iframe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-iframe", - "version": "0.12.1-next.48", + "version": "0.12.1-next.49", "license": "MIT", "private": true, "source": "src/index.ts", @@ -13,6 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.10" + "@rango-dev/widget-embedded": "^0.14.1-next.11" } } diff --git a/widget/playground/package.json b/widget/playground/package.json index 6927e5c84f..2059448e07 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-playground", - "version": "0.12.1-next.49", + "version": "0.12.1-next.50", "license": "MIT", "private": true, "source": "public/index.html", @@ -17,11 +17,11 @@ "@types/stringify-object": "^4.0.2" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.1-next.1", - "@rango-dev/ui": "^0.17.1-next.7", - "@rango-dev/wallets-react": "^0.3.1-next.0", - "@rango-dev/wallets-shared": "^0.17.0", - "@rango-dev/widget-embedded": "^0.14.1-next.10", + "@rango-dev/provider-all": "^0.17.1-next.2", + "@rango-dev/ui": "^0.17.1-next.8", + "@rango-dev/wallets-react": "^0.3.1-next.1", + "@rango-dev/wallets-shared": "^0.17.1-next.0", + "@rango-dev/widget-embedded": "^0.14.1-next.11", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-color": "^2.19.3", diff --git a/widget/ui/package.json b/widget/ui/package.json index 7c33477836..a18d9a4716 100644 --- a/widget/ui/package.json +++ b/widget/ui/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/ui", - "version": "0.17.1-next.7", + "version": "0.17.1-next.8", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -63,7 +63,7 @@ "@radix-ui/react-radio-group": "^1.1.1", "@radix-ui/react-switch": "^1.0.1", "@radix-ui/react-tooltip": "^1.0.2", - "@rango-dev/wallets-shared": "^0.17.0", + "@rango-dev/wallets-shared": "^0.17.1-next.0", "@stitches/react": "^1.2.8", "rango-sdk": "^0.1.35", "react-virtualized-auto-sizer": "^1.0.7", From d51811016d5cdca126a59ea7783402e2850ea8c6 Mon Sep 17 00:00:00 2001 From: RanGojo Date: Tue, 31 Oct 2023 07:31:20 +0000 Subject: [PATCH 627/769] fix: fix tronlink connect --- wallets/provider-tron-link/src/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/wallets/provider-tron-link/src/index.ts b/wallets/provider-tron-link/src/index.ts index db3dcd0b63..91e33ae857 100644 --- a/wallets/provider-tron-link/src/index.ts +++ b/wallets/provider-tron-link/src/index.ts @@ -27,12 +27,13 @@ export const getInstance = tronLink_instance; export const connect: Connect = async ({ instance }) => { let r = undefined; + const SUCCESS_CODE = 200; if (!!instance && !instance.ready) { r = await instance.request({ method: 'tron_requestAccounts' }); if (!r) { throw new Error('Please unlock your TronLink extension first.'); } - if (!!r?.code && !!r.message) { + if (r?.code !== SUCCESS_CODE && !!r.message) { throw new Error(r.message); } } From 1d16238d790e9ae708a98bb27132eef4734a6e48 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 31 Oct 2023 10:03:52 +0000 Subject: [PATCH 628/769] chore(release): publish - provider-tron-link@0.17.1-next.1 - provider-all@0.17.1-next.3 - wallets-adapter@0.14.1-next.10 - queue-manager-demo@0.11.1-next.18 - wallets-demo@0.11.1-next.39 - widget-embedded@0.14.1-next.12 - wallets-adapter-demo@0.12.1-next.38 - widget-playground@0.12.1-next.51 - widget-iframe@0.12.1-next.50 - widget-app@0.12.1-next.50 Affected packages: provider-tron-link@0.17.1-next.1,provider-all@0.17.1-next.3,wallets-adapter@0.14.1-next.10,queue-manager-demo@0.11.1-next.18,wallets-demo@0.11.1-next.39,widget-embedded@0.14.1-next.12,wallets-adapter-demo@0.12.1-next.38,widget-playground@0.12.1-next.51,widget-iframe@0.12.1-next.50,widget-app@0.12.1-next.50 --- examples/queue-manager-demo/package.json | 4 ++-- examples/wallets-adapter-demo/package.json | 6 +++--- examples/wallets-demo/package.json | 4 ++-- wallets/provider-all/package.json | 4 ++-- wallets/provider-tron-link/package.json | 2 +- wallets/wallets-adapter/package.json | 4 ++-- widget/app/package.json | 4 ++-- widget/embedded/package.json | 4 ++-- widget/iframe/package.json | 4 ++-- widget/playground/package.json | 6 +++--- 10 files changed, 21 insertions(+), 21 deletions(-) diff --git a/examples/queue-manager-demo/package.json b/examples/queue-manager-demo/package.json index ce9951cad9..fb29cfdf42 100644 --- a/examples/queue-manager-demo/package.json +++ b/examples/queue-manager-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/queue-manager-demo", - "version": "0.11.1-next.17", + "version": "0.11.1-next.18", "license": "MIT", "private": true, "source": "public/index.html", @@ -15,7 +15,7 @@ "rango-sdk": "^0.1.35" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.1-next.2", + "@rango-dev/provider-all": "^0.17.1-next.3", "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.2", "@rango-dev/queue-manager-react": "^0.17.0", "@rango-dev/wallets-react": "^0.3.1-next.1", diff --git a/examples/wallets-adapter-demo/package.json b/examples/wallets-adapter-demo/package.json index 11a99b6323..3dee9c229a 100644 --- a/examples/wallets-adapter-demo/package.json +++ b/examples/wallets-adapter-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter-demo", - "version": "0.12.1-next.37", + "version": "0.12.1-next.38", "license": "MIT", "private": true, "source": "public/index.html", @@ -11,8 +11,8 @@ "clean": "rimraf .parcel-cache && rimraf dist" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.1-next.2", - "@rango-dev/wallets-adapter": "^0.14.1-next.9", + "@rango-dev/provider-all": "^0.17.1-next.3", + "@rango-dev/wallets-adapter": "^0.14.1-next.10", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/wallets-demo/package.json b/examples/wallets-demo/package.json index 649e98b4fb..01047e27c3 100644 --- a/examples/wallets-demo/package.json +++ b/examples/wallets-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-demo", - "version": "0.11.1-next.38", + "version": "0.11.1-next.39", "license": "MIT", "private": true, "source": "public/index.html", @@ -11,7 +11,7 @@ "clean": "rimraf .parcel-cache && rimraf dist" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.1-next.2", + "@rango-dev/provider-all": "^0.17.1-next.3", "@rango-dev/ui": "^0.17.1-next.8", "@rango-dev/wallets-react": "^0.3.1-next.1", "@rango-dev/wallets-shared": "^0.17.1-next.0", diff --git a/wallets/provider-all/package.json b/wallets/provider-all/package.json index 01ca0e87c7..0164f35384 100644 --- a/wallets/provider-all/package.json +++ b/wallets/provider-all/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-all", - "version": "0.17.1-next.2", + "version": "0.17.1-next.3", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -42,7 +42,7 @@ "@rango-dev/provider-safepal": "^0.17.1-next.0", "@rango-dev/provider-taho": "^0.17.1-next.0", "@rango-dev/provider-tokenpocket": "^0.17.1-next.0", - "@rango-dev/provider-tron-link": "^0.17.1-next.0", + "@rango-dev/provider-tron-link": "^0.17.1-next.1", "@rango-dev/provider-trustwallet": "^0.17.1-next.0", "@rango-dev/provider-walletconnect-2": "^0.10.1-next.0", "@rango-dev/provider-xdefi": "^0.17.1-next.0" diff --git a/wallets/provider-tron-link/package.json b/wallets/provider-tron-link/package.json index c928039080..0a7cf60a3c 100644 --- a/wallets/provider-tron-link/package.json +++ b/wallets/provider-tron-link/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/provider-tron-link", - "version": "0.17.1-next.0", + "version": "0.17.1-next.1", "license": "MIT", "type": "module", "module": "./dist/index.js", diff --git a/wallets/wallets-adapter/package.json b/wallets/wallets-adapter/package.json index 075b3e22c9..c0b402f258 100644 --- a/wallets/wallets-adapter/package.json +++ b/wallets/wallets-adapter/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter", - "version": "0.14.1-next.9", + "version": "0.14.1-next.10", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -23,7 +23,7 @@ "react": ">=16" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.1-next.2", + "@rango-dev/provider-all": "^0.17.1-next.3", "@rango-dev/ui": "^0.17.1-next.8", "@rango-dev/wallets-react": "^0.3.1-next.1", "@rango-dev/wallets-shared": "^0.17.1-next.0", diff --git a/widget/app/package.json b/widget/app/package.json index 50c16498b8..cf0eec717f 100644 --- a/widget/app/package.json +++ b/widget/app/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-app", - "version": "0.12.1-next.49", + "version": "0.12.1-next.50", "license": "MIT", "private": true, "source": "public/index.html", @@ -14,7 +14,7 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.11", + "@rango-dev/widget-embedded": "^0.14.1-next.12", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0" diff --git a/widget/embedded/package.json b/widget/embedded/package.json index 507384f302..98d26d2148 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.14.1-next.11", + "version": "0.14.1-next.12", "license": "MIT", "type": "module", "main": "dist/index.js", @@ -19,7 +19,7 @@ "dependencies": { "@lingui/core": "4.2.1", "@lingui/react": "4.2.1", - "@rango-dev/provider-all": "^0.17.1-next.2", + "@rango-dev/provider-all": "^0.17.1-next.3", "@rango-dev/queue-manager-core": "^0.17.0", "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.2", "@rango-dev/queue-manager-react": "^0.17.0", diff --git a/widget/iframe/package.json b/widget/iframe/package.json index c1a8944dd7..29c892b6c5 100644 --- a/widget/iframe/package.json +++ b/widget/iframe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-iframe", - "version": "0.12.1-next.49", + "version": "0.12.1-next.50", "license": "MIT", "private": true, "source": "src/index.ts", @@ -13,6 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.11" + "@rango-dev/widget-embedded": "^0.14.1-next.12" } } diff --git a/widget/playground/package.json b/widget/playground/package.json index 2059448e07..ee55c6fe6b 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-playground", - "version": "0.12.1-next.50", + "version": "0.12.1-next.51", "license": "MIT", "private": true, "source": "public/index.html", @@ -17,11 +17,11 @@ "@types/stringify-object": "^4.0.2" }, "dependencies": { - "@rango-dev/provider-all": "^0.17.1-next.2", + "@rango-dev/provider-all": "^0.17.1-next.3", "@rango-dev/ui": "^0.17.1-next.8", "@rango-dev/wallets-react": "^0.3.1-next.1", "@rango-dev/wallets-shared": "^0.17.1-next.0", - "@rango-dev/widget-embedded": "^0.14.1-next.11", + "@rango-dev/widget-embedded": "^0.14.1-next.12", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-color": "^2.19.3", From 52681624732e542f9841f5963d61e7f9778c78cd Mon Sep 17 00:00:00 2001 From: mikasackermn Date: Tue, 31 Oct 2023 15:03:49 +0000 Subject: [PATCH 629/769] feat: custom colors for presets (style sidebar) --- .../ConfirmWalletsModal.tsx | 2 +- .../src/components/Layout/Layout.styles.ts | 9 +- .../LoadingSwapDetails.styles.ts | 2 +- .../src/components/NoRoutes/NoRoutes.tsx | 2 +- .../NotificationContent.tsx | 2 +- .../NotificationNotFound.tsx | 2 +- .../RouteErrors/RouteErrorsModalItem.tsx | 2 +- .../Slippage/SlippageTooltipContent.tsx | 2 +- .../SwapDetails/SwapDetails.Placeholder.tsx | 8 +- .../components/SwapDetails/SwapDetails.tsx | 8 +- .../SwapDetailsCompleteModal.tsx | 2 +- .../src/components/SwapsGroup/SwapsGroup.tsx | 4 +- .../components/TokenList/TokenList.styles.ts | 2 +- .../src/components/TokenList/TokenList.tsx | 2 +- widget/embedded/src/pages/ConfirmSwapPage.tsx | 2 +- widget/embedded/src/pages/Home.tsx | 6 +- widget/embedded/src/pages/SettingsPage.tsx | 2 +- widget/embedded/src/types/config.ts | 4 +- widget/embedded/src/utils/colors.ts | 16 ++ widget/embedded/src/utils/ui.ts | 21 +- widget/playground/package.json | 1 + .../components/Collapse/Collapse.styles.ts | 4 +- .../ColorPicker/ColorPicker.styles.ts | 32 +++ .../components/ColorPicker/ColorPicker.tsx | 133 ++++-------- .../ColorPicker/ColorPicker.types.ts | 8 + .../ColorPicker/ColorPickerstyles.ts | 30 +++ .../src/components/ColorPicker/index.ts | 2 +- .../ExportConfigModal.styles.tsx | 4 +- .../ExportConfigModal/ExportConfigModal.tsx | 4 +- .../ItemPicker/ItemPicker.styles.ts | 2 +- .../src/components/ItemPicker/ItemPicker.tsx | 2 +- .../src/components/MultiList/MultiList.tsx | 2 +- .../src/components/MultiSelect/Container.tsx | 2 +- .../components/OverlayPanel/OverlayPanel.tsx | 2 +- .../SideNavigation/SideNavigation.Icon.tsx | 2 +- .../src/components/Slider/Slider.tsx | 4 +- .../src/components/StylesConfig.tsx | 4 +- .../WalletsConfig/ExternalWallet.tsx | 25 ++- widget/playground/src/constants/presets.ts | 32 ++- widget/playground/src/containers/Config.tsx | 2 +- .../FunctionalLayout.Wallets.tsx | 4 +- .../StyleLayout/StyleLayout.CustomColors.tsx | 195 ++++++++++++++++++ .../StyleLayout/StyleLayout.Preset.tsx | 41 +++- .../StyleLayout/StyleLayout.Themes.tsx | 26 +-- .../StyleLayout/StyleLayout.styles.ts | 32 ++- .../StyleLayout/StyleLayout.types.ts | 9 + .../configContainer/ConfigContainer.tsx | 2 +- widget/playground/src/globalStyles.ts | 15 -- widget/playground/src/store/config.ts | 16 +- widget/playground/src/utils/colors.ts | 32 +++ .../ui/src/components/Alert/Alert.styles.ts | 4 +- .../ui/src/components/BestRoute/BestRoute.tsx | 2 +- .../BestRoute/BestRouteSkeleton.styles.ts | 2 +- .../src/components/BottomLogo/BottomLogo.tsx | 4 +- .../src/components/Button/Button.styles.tsx | 12 +- .../components/Checkbox/Checkbox.styles.ts | 2 +- widget/ui/src/components/Chip/Chip.tsx | 2 +- .../LiquiditySourceList.tsx | 4 +- .../ui/src/components/ListItem/ListItem.tsx | 2 +- .../MessageBox/DefaultMessageBox.tsx | 2 +- .../ui/src/components/NotFound/NotFound.tsx | 2 +- .../components/PriceImpact/PriceImpact.tsx | 4 +- .../ui/src/components/Radio/Radio.styles.tsx | 2 +- .../RoutesOverview/RoutesOverview.tsx | 2 +- .../src/components/StepDetail/StepDetail.tsx | 11 +- .../components/StepDetails/StepDetails.tsx | 4 +- .../src/components/SvgIcon/SvgIcon.style.ts | 8 +- .../components/SwapListItem/SwapListItem.tsx | 2 +- .../src/components/SwapListItem/SwapToken.tsx | 6 +- .../src/components/Switch/Switch.styles.tsx | 4 +- .../components/TextField/TextField.styles.ts | 2 +- .../components/TokenAmount/TokenAmount.tsx | 4 +- .../ui/src/components/TokenList/TokenItem.tsx | 2 +- .../components/TokenPreview/TokenPreview.tsx | 4 +- widget/ui/src/components/Wallet/Content.tsx | 8 +- .../components/Wallet/SelectableWallet.tsx | 2 +- .../src/components/Wallet/Wallet.helpers.ts | 4 +- .../containers/SwapHistory/SwapHistory.tsx | 8 +- .../ui/src/containers/SwapInput/SwapInput.tsx | 6 +- .../SwapInput/TokenSection.styles.ts | 4 +- .../src/containers/SwapInput/TokenSection.tsx | 2 +- .../ui/src/containers/TokenInfo/TokenInfo.tsx | 8 +- .../src/containers/Warnings/BalanceErrors.tsx | 2 +- widget/ui/src/theme.ts | 16 +- 84 files changed, 614 insertions(+), 308 deletions(-) create mode 100644 widget/playground/src/components/ColorPicker/ColorPicker.styles.ts create mode 100644 widget/playground/src/components/ColorPicker/ColorPicker.types.ts create mode 100644 widget/playground/src/components/ColorPicker/ColorPickerstyles.ts create mode 100644 widget/playground/src/containers/StyleLayout/StyleLayout.CustomColors.tsx create mode 100644 widget/playground/src/utils/colors.ts diff --git a/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx b/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx index d8c5d12cb5..624263c21f 100644 --- a/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx +++ b/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx @@ -371,7 +371,7 @@ export function ConfirmWalletsModal(props: PropTypes) { {i18n.t({ id: 'needConnect', diff --git a/widget/embedded/src/components/Layout/Layout.styles.ts b/widget/embedded/src/components/Layout/Layout.styles.ts index d6160f74a4..7cd44614a2 100644 --- a/widget/embedded/src/components/Layout/Layout.styles.ts +++ b/widget/embedded/src/components/Layout/Layout.styles.ts @@ -1,4 +1,4 @@ -import { styled } from '@rango-dev/ui'; +import { darkTheme, styled } from '@rango-dev/ui'; export const Container = styled('div', { position: 'relative', @@ -10,7 +10,11 @@ export const Container = styled('div', { width: '95vw', maxWidth: '390px', maxHeight: '700px', - backgroundColor: '$neutral100', + $$color: '$colors$neutral100', + [`.${darkTheme} &`]: { + $$color: '$colors$neutral300', + }, + backgroundColor: '$$color', variants: { fixedHeight: { true: { @@ -22,6 +26,7 @@ export const Container = styled('div', { }, }, }); + export const Content = styled('div', { borderTopLeftRadius: '20px', borderTopRightRadius: '20px', diff --git a/widget/embedded/src/components/LoadingSwapDetails/LoadingSwapDetails.styles.ts b/widget/embedded/src/components/LoadingSwapDetails/LoadingSwapDetails.styles.ts index cc7cc5db4f..0899542101 100644 --- a/widget/embedded/src/components/LoadingSwapDetails/LoadingSwapDetails.styles.ts +++ b/widget/embedded/src/components/LoadingSwapDetails/LoadingSwapDetails.styles.ts @@ -73,6 +73,6 @@ export const StepContainer = styled('div', { export const StepSeparator = styled('div', { width: '0px', height: '$20', - borderLeft: '1px dashed $neutral900', + borderLeft: '1px dashed $neutral700', marginLeft: '25px', }); diff --git a/widget/embedded/src/components/NoRoutes/NoRoutes.tsx b/widget/embedded/src/components/NoRoutes/NoRoutes.tsx index 5bc0e748df..212e0f9bfe 100644 --- a/widget/embedded/src/components/NoRoutes/NoRoutes.tsx +++ b/widget/embedded/src/components/NoRoutes/NoRoutes.tsx @@ -47,7 +47,7 @@ export function NoRoutes(props: PropTypes) { variant="body" size="small" align="center" - color="neutral900"> + color="neutral700"> {info.description} )} diff --git a/widget/embedded/src/components/NotificationContent/NotificationContent.tsx b/widget/embedded/src/components/NotificationContent/NotificationContent.tsx index 24daec66ca..17bc2a49ab 100644 --- a/widget/embedded/src/components/NotificationContent/NotificationContent.tsx +++ b/widget/embedded/src/components/NotificationContent/NotificationContent.tsx @@ -72,7 +72,7 @@ export function NotificationContent() { key={notificationItem.requestId} onClick={() => handleOnClick(notificationItem.requestId)} title={ - + {i18n.t(notificationItem.event.message)} } diff --git a/widget/embedded/src/components/NotificationContent/NotificationNotFound.tsx b/widget/embedded/src/components/NotificationContent/NotificationNotFound.tsx index 502c63e61c..2bef3764bc 100644 --- a/widget/embedded/src/components/NotificationContent/NotificationNotFound.tsx +++ b/widget/embedded/src/components/NotificationContent/NotificationNotFound.tsx @@ -9,7 +9,7 @@ export function NotificationNotFound() { - + {i18n.t('You have no notification')} diff --git a/widget/embedded/src/components/RouteErrors/RouteErrorsModalItem.tsx b/widget/embedded/src/components/RouteErrors/RouteErrorsModalItem.tsx index 0fefe0f873..950c01ad01 100644 --- a/widget/embedded/src/components/RouteErrors/RouteErrorsModalItem.tsx +++ b/widget/embedded/src/components/RouteErrors/RouteErrorsModalItem.tsx @@ -10,7 +10,7 @@ export function RouteErrorsModalItem(props: ModalContentData) { return ( - + {title} - + {i18n.t( 'Your transaction will be reverted if the price changes unfavorably by more than this percentage' )} diff --git a/widget/embedded/src/components/SwapDetails/SwapDetails.Placeholder.tsx b/widget/embedded/src/components/SwapDetails/SwapDetails.Placeholder.tsx index 76af8c8e07..e0d3e3b561 100644 --- a/widget/embedded/src/components/SwapDetails/SwapDetails.Placeholder.tsx +++ b/widget/embedded/src/components/SwapDetails/SwapDetails.Placeholder.tsx @@ -38,11 +38,11 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
- + {`${i18n.t('Request ID')}:`}
- + @@ -51,10 +51,10 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
- + {`${i18n.t('Created at')}:`} - +
diff --git a/widget/embedded/src/components/SwapDetails/SwapDetails.tsx b/widget/embedded/src/components/SwapDetails/SwapDetails.tsx index 221a7b66e3..2533a8ef5e 100644 --- a/widget/embedded/src/components/SwapDetails/SwapDetails.tsx +++ b/widget/embedded/src/components/SwapDetails/SwapDetails.tsx @@ -281,11 +281,11 @@ export function SwapDetails(props: SwapDetailsProps) {
- + {`${i18n.t('Request ID')}:`}
- + {requestId}
- + {`${i18n.t('Created at')}:`} - + {swapDate}
diff --git a/widget/embedded/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx b/widget/embedded/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx index 1afbc03af2..736efbc296 100644 --- a/widget/embedded/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx +++ b/widget/embedded/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx @@ -52,7 +52,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) { {description} diff --git a/widget/embedded/src/components/SwapsGroup/SwapsGroup.tsx b/widget/embedded/src/components/SwapsGroup/SwapsGroup.tsx index b8c9724106..ceafa5c476 100644 --- a/widget/embedded/src/components/SwapsGroup/SwapsGroup.tsx +++ b/widget/embedded/src/components/SwapsGroup/SwapsGroup.tsx @@ -34,7 +34,7 @@ export function SwapsGroup(props: PropTypes) { {i18n.t(group.title)} @@ -68,7 +68,7 @@ export function SwapsGroup(props: PropTypes) { {i18n.t(group.title)} diff --git a/widget/embedded/src/components/TokenList/TokenList.styles.ts b/widget/embedded/src/components/TokenList/TokenList.styles.ts index e299f71fa8..599b1ddb6e 100644 --- a/widget/embedded/src/components/TokenList/TokenList.styles.ts +++ b/widget/embedded/src/components/TokenList/TokenList.styles.ts @@ -40,7 +40,7 @@ export const List = styled('ul', { '& a': { fontSize: '$12', lineHeight: '$16', - color: '$neutral800', + color: '$neutral600', textDecoration: 'none', }, }, diff --git a/widget/embedded/src/components/TokenList/TokenList.tsx b/widget/embedded/src/components/TokenList/TokenList.tsx index 841f228243..e8ec89fff5 100644 --- a/widget/embedded/src/components/TokenList/TokenList.tsx +++ b/widget/embedded/src/components/TokenList/TokenList.tsx @@ -239,7 +239,7 @@ export function TokenList(props: PropTypes) { {token.balance?.usdValue && ( {`$${token.balance?.usdValue}`} diff --git a/widget/embedded/src/pages/ConfirmSwapPage.tsx b/widget/embedded/src/pages/ConfirmSwapPage.tsx index c492177186..8a05471eb2 100644 --- a/widget/embedded/src/pages/ConfirmSwapPage.tsx +++ b/widget/embedded/src/pages/ConfirmSwapPage.tsx @@ -363,7 +363,7 @@ export function ConfirmSwapPage(props: PropTypes) { size="small" variant="ghost" onClick={() => navigate('/' + navigationRoutes.settings)}> - + {i18n.t('Change settings')} diff --git a/widget/embedded/src/pages/Home.tsx b/widget/embedded/src/pages/Home.tsx index 3153674a55..033bd45f02 100644 --- a/widget/embedded/src/pages/Home.tsx +++ b/widget/embedded/src/pages/Home.tsx @@ -245,15 +245,15 @@ export function Home() { title={recommendation} footer={ - + {fromAmountRangeError} - + | - + {i18n.t({ id: 'yourSymbol', message: 'Yours: {amount} {symbol}', diff --git a/widget/embedded/src/pages/SettingsPage.tsx b/widget/embedded/src/pages/SettingsPage.tsx index b877eef73c..12c2db8184 100644 --- a/widget/embedded/src/pages/SettingsPage.tsx +++ b/widget/embedded/src/pages/SettingsPage.tsx @@ -147,7 +147,7 @@ export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) { container={getContainer()} content={ - + {i18n.t( "Enabling the 'Infinite Approval' mode grants unrestricted access to smart contracts of DEXes/Bridges, allowing them to utilize the approved token amount without limitations." )} diff --git a/widget/embedded/src/types/config.ts b/widget/embedded/src/types/config.ts index e56dbe0a0c..a49a6b2cff 100644 --- a/widget/embedded/src/types/config.ts +++ b/widget/embedded/src/types/config.ts @@ -27,7 +27,7 @@ export type WidgetColors = { * @property {'auto' | 'light' | 'dark'} mode - The mode property is used to specify the default theme for * the widget. * @property {string} fontFamily - The font family to be used in the widget. - * @property {Colors} colors - The `colors` property is a sub-property of the `WidgetTheme` object that + * @property {{ light?: WidgetColors; dark?: WidgetColors }} colors - The `colors` property is a sub-property of the `WidgetTheme` object that * defines the color scheme for the widget. It is of type `Colors`, which is likely another object that * contains specific color values for various parts of the widget (e.g. background color, text color, * border color @@ -42,7 +42,7 @@ export type WidgetColors = { export type WidgetTheme = { mode?: 'auto' | 'light' | 'dark'; fontFamily?: string; - colors?: { light: WidgetColors; dark: WidgetColors }; + colors?: { light?: WidgetColors; dark?: WidgetColors }; borderRadius?: number; secondaryBorderRadius?: number; width?: number; diff --git a/widget/embedded/src/utils/colors.ts b/widget/embedded/src/utils/colors.ts index 7250a1e05d..dc144cfa75 100644 --- a/widget/embedded/src/utils/colors.ts +++ b/widget/embedded/src/utils/colors.ts @@ -64,6 +64,7 @@ export const generateRangeColors = (name: string, color: string) => { }; export const generateColors = ( mainColors: { [x: string]: string }, + reverseNeutralRange: boolean, colors?: WidgetColors ) => { if (!colors || !Object.entries(colors).length) { @@ -81,6 +82,21 @@ export const generateColors = ( ...listOfColors, [colorKey]: color, }; + } else if (colorKey === 'neutral' && reverseNeutralRange) { + const range = generateRangeColors(colorKey, color); + listOfColors = { + ...listOfColors, + // Reverse the neutral shade + [`${colorKey}100`]: range[`${colorKey}900`], + [`${colorKey}200`]: range[`${colorKey}800`], + [`${colorKey}300`]: range[`${colorKey}700`], + [`${colorKey}400`]: range[`${colorKey}600`], + [`${colorKey}500`]: range[`${colorKey}500`], + [`${colorKey}600`]: range[`${colorKey}400`], + [`${colorKey}700`]: range[`${colorKey}300`], + [`${colorKey}800`]: range[`${colorKey}200`], + [`${colorKey}900`]: range[`${colorKey}100`], + }; } else { listOfColors = { ...listOfColors, diff --git a/widget/embedded/src/utils/ui.ts b/widget/embedded/src/utils/ui.ts index 6ebd0ddca8..167210f799 100644 --- a/widget/embedded/src/utils/ui.ts +++ b/widget/embedded/src/utils/ui.ts @@ -32,9 +32,14 @@ export function customizedThemeTokens( ...baseColors, ...defaultDarkColors, }, + true, colors?.dark ); - const lightColorsWithDefaults = generateColors(baseColors, colors?.light); + const lightColorsWithDefaults = generateColors( + baseColors, + false, + colors?.light + ); const hasDefaultDarkColors = Object.keys(darkColorsWithDefaults).length > 0; const hasDefaultLightColors = Object.keys(lightColorsWithDefaults).length > 0; @@ -51,19 +56,7 @@ export function customizedThemeTokens( } if (hasDefaultDarkColors) { const tokens = { - colors: { - ...darkColorsWithDefaults, - // Reverse the neutrals shade - neutral100: darkColorsWithDefaults.neutral900, - neutral200: darkColorsWithDefaults.neutral800, - neutral300: darkColorsWithDefaults.neutral700, - neutral400: darkColorsWithDefaults.neutral600, - neutral500: darkColorsWithDefaults.neutral500, - neutral600: darkColorsWithDefaults.neutral400, - neutral700: darkColorsWithDefaults.neutral300, - neutral800: darkColorsWithDefaults.neutral200, - neutral900: darkColorsWithDefaults.neutral100, - }, + colors: darkColorsWithDefaults, }; const id = `${THEME_CLASS_NAME_PREFIX}-dark-${toHash(tokens)}`; dark = { diff --git a/widget/playground/package.json b/widget/playground/package.json index ee55c6fe6b..4748d1f987 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -26,6 +26,7 @@ "react": "^18.2.0", "react-color": "^2.19.3", "react-dom": "^18.2.0", + "react-color": "^2.19.3", "react-router-dom": "^6.10.0", "react-syntax-highlighter": "^15.5.0", "stringify-object": "^5.0.0", diff --git a/widget/playground/src/components/Collapse/Collapse.styles.ts b/widget/playground/src/components/Collapse/Collapse.styles.ts index f0850ede92..5d80efc107 100644 --- a/widget/playground/src/components/Collapse/Collapse.styles.ts +++ b/widget/playground/src/components/Collapse/Collapse.styles.ts @@ -15,10 +15,10 @@ export const CollapseHeader = styled('div', { alignItems: 'center', width: '100%', cursor: 'pointer', - padding: '$20 $20', + padding: '$20 $15', textTransform: 'capitalize', }); export const CollapseContent = styled('div', { - padding: '0 $20 $20', + padding: '0 $15 $20', }); diff --git a/widget/playground/src/components/ColorPicker/ColorPicker.styles.ts b/widget/playground/src/components/ColorPicker/ColorPicker.styles.ts new file mode 100644 index 0000000000..cd8a761502 --- /dev/null +++ b/widget/playground/src/components/ColorPicker/ColorPicker.styles.ts @@ -0,0 +1,32 @@ +import { Button, styled } from '@rango-dev/ui'; + +export const Container = styled('div', { + position: 'relative', +}); + +export const Color = styled('div', { + border: '1px solid $neutral300', + borderRadius: '$xs', + width: '$20', + height: '$20', +}); +export const Cover = styled('div', { + position: 'fixed', + top: '0px', + right: '0px', + bottom: '0px', + left: '0px', +}); + +export const ColorButton = styled(Button, { + border: '1px solid $neutral300', + backgroundColor: 'transparent', + borderRadius: '$xs', +}); + +export const Label = styled('label', { + display: 'inline-block', + fontSize: '$14', + marginBottom: '$4', + color: '$foreground', +}); diff --git a/widget/playground/src/components/ColorPicker/ColorPicker.tsx b/widget/playground/src/components/ColorPicker/ColorPicker.tsx index dd6050b08f..12f0ae2cc3 100644 --- a/widget/playground/src/components/ColorPicker/ColorPicker.tsx +++ b/widget/playground/src/components/ColorPicker/ColorPicker.tsx @@ -1,107 +1,46 @@ -import { Button, CloseIcon, styled } from '@rango-dev/ui'; -import React, { useState } from 'react'; -import { ChromePicker } from 'react-color'; -import rgbHex from 'rgb-hex'; - -const Container = styled('div', { - position: 'relative', -}); - -const Color = styled('div', { - border: '1px solid $background', - borderRadius: '$xs', - width: '$32', - height: '$32', -}); - -const Cover = styled('div', { - position: 'fixed', - top: '0px', - right: '0px', - bottom: '0px', - left: '0px', -}); - -const Popover = styled('div', { - position: 'absolute', - zIndex: '2', - variants: { - place: { - top: { - top: '-241px', - }, - bottom: {}, - left: { - top: '-50%', - left: '-225px', - }, - right: { - top: '-50%', - right: '-225px', - }, - }, - }, -}); +import type { PropTypes } from './ColorPicker.types'; +import type { ColorResult } from 'react-color'; -export interface PropTypes { - color?: string; - place: 'top' | 'bottom' | 'left' | 'right'; - onChangeColor: (color?: string) => void; - label?: string; - placeholder?: string; -} - -const Label = styled('label', { - display: 'inline-block', - fontSize: '$14', - marginBottom: '$4', - color: '$foreground', -}); +import { Button, Popover, Typography } from '@rango-dev/ui'; +import React from 'react'; +import { ChromePicker } from 'react-color'; -export function ColorPicker({ - color, - onChangeColor, - label, - place, - placeholder, -}: PropTypes) { - const [displayColorPicker, setDisplayColorPicker] = useState(false); +import { ColorButton, ColorDiv, Container } from './ColorPickerstyles'; +function ColorPicker(props: PropTypes) { + const { label, placeholder, color, onChangeColor, onReset, resetDisable } = + props; + const onChange = (c: ColorResult) => { + onChangeColor(c.hex); + }; return ( - + + {label} + + }> + }> + + {color || placeholder} + + + - - {displayColorPicker && ( - - setDisplayColorPicker(false)} /> - { - const color = '#' + rgbHex(c.rgb.r, c.rgb.g, c.rgb.b, c.rgb.a); - onChangeColor(color); - }} - /> - - )} ); } + +export default React.memo(ColorPicker); diff --git a/widget/playground/src/components/ColorPicker/ColorPicker.types.ts b/widget/playground/src/components/ColorPicker/ColorPicker.types.ts new file mode 100644 index 0000000000..835a39db52 --- /dev/null +++ b/widget/playground/src/components/ColorPicker/ColorPicker.types.ts @@ -0,0 +1,8 @@ +export interface PropTypes { + onReset: () => void; + label: string; + placeholder?: string; + color?: string; + onChangeColor: (color?: string) => void; + resetDisable?: boolean; +} diff --git a/widget/playground/src/components/ColorPicker/ColorPickerstyles.ts b/widget/playground/src/components/ColorPicker/ColorPickerstyles.ts new file mode 100644 index 0000000000..313d87b74a --- /dev/null +++ b/widget/playground/src/components/ColorPicker/ColorPickerstyles.ts @@ -0,0 +1,30 @@ +import { Button, styled } from '@rango-dev/ui'; + +export const Container = styled('div', { + display: 'flex', + justifyContent: 'space-around', + alignItems: 'center', + position: 'relative', +}); + +export const ColorDiv = styled('div', { + border: '1px solid $neutral300', + borderRadius: '$xs', + width: '$20', + height: '$20', +}); +export const Cover = styled('div', { + position: 'fixed', + top: '0px', + right: '0px', + bottom: '0px', + left: '0px', +}); + +export const ColorButton = styled(Button, { + border: '1px solid $neutral300', + backgroundColor: 'transparent', + borderRadius: '$xs', + width: 93, + justifyContent: 'normal', +}); diff --git a/widget/playground/src/components/ColorPicker/index.ts b/widget/playground/src/components/ColorPicker/index.ts index 9fad6294d9..8cc1bd3c1c 100644 --- a/widget/playground/src/components/ColorPicker/index.ts +++ b/widget/playground/src/components/ColorPicker/index.ts @@ -1 +1 @@ -export { ColorPicker } from './ColorPicker'; +export { default as ColorPicker } from './ColorPicker'; diff --git a/widget/playground/src/components/ExportConfigModal/ExportConfigModal.styles.tsx b/widget/playground/src/components/ExportConfigModal/ExportConfigModal.styles.tsx index d04af5dd7c..fc45cbde9e 100644 --- a/widget/playground/src/components/ExportConfigModal/ExportConfigModal.styles.tsx +++ b/widget/playground/src/components/ExportConfigModal/ExportConfigModal.styles.tsx @@ -1,7 +1,7 @@ import { Button, IconButton, styled } from '@rango-dev/ui'; export const Link = styled('a', { - color: '$neutral900', + color: '$neutral700', padding: 4, textDecoration: 'none', '&:hover': { @@ -34,7 +34,7 @@ export const StyledButton = styled(Button, { variants: { variant: { contained: { - color: '$neutral800', + color: '$neutral600', backgroundColor: '$neutral300', '&:hover, &:focus': { color: '$secondary500', diff --git a/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx b/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx index 2c609a85ba..d7eb936ae9 100644 --- a/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx +++ b/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx @@ -93,7 +93,7 @@ export function ExportConfigModal(props: ExportConfigModalProps) { - + @@ -105,7 +105,7 @@ export function ExportConfigModal(props: ExportConfigModalProps) { - + diff --git a/widget/playground/src/components/ItemPicker/ItemPicker.styles.ts b/widget/playground/src/components/ItemPicker/ItemPicker.styles.ts index 45c1016999..1c56fe548a 100644 --- a/widget/playground/src/components/ItemPicker/ItemPicker.styles.ts +++ b/widget/playground/src/components/ItemPicker/ItemPicker.styles.ts @@ -22,7 +22,7 @@ export const InputContainer = styled('div', { '&:hover': { borderColor: '$neutral300', '& svg': { - color: '$neutral900', + color: '$neutral700', }, }, }, diff --git a/widget/playground/src/components/ItemPicker/ItemPicker.tsx b/widget/playground/src/components/ItemPicker/ItemPicker.tsx index 35ec3ccbd4..66aab60dba 100644 --- a/widget/playground/src/components/ItemPicker/ItemPicker.tsx +++ b/widget/playground/src/components/ItemPicker/ItemPicker.tsx @@ -41,7 +41,7 @@ function ItemPicker(props: PropTypes) { )} - + {label || placeholder} diff --git a/widget/playground/src/components/MultiList/MultiList.tsx b/widget/playground/src/components/MultiList/MultiList.tsx index 8f78fa9e29..4e4111c91d 100644 --- a/widget/playground/src/components/MultiList/MultiList.tsx +++ b/widget/playground/src/components/MultiList/MultiList.tsx @@ -160,7 +160,7 @@ export function MultiList(props: MultiListPropTypes) { ? handleAllSelectedClick('deselect') : handleAllSelectedClick('select') }> - + {isAllCategorySelected ? 'Deselect all' : 'Select all'} diff --git a/widget/playground/src/components/MultiSelect/Container.tsx b/widget/playground/src/components/MultiSelect/Container.tsx index 223e26869a..b5e73388ad 100644 --- a/widget/playground/src/components/MultiSelect/Container.tsx +++ b/widget/playground/src/components/MultiSelect/Container.tsx @@ -36,7 +36,7 @@ export function Container({ return ( <> - + {label} diff --git a/widget/playground/src/components/OverlayPanel/OverlayPanel.tsx b/widget/playground/src/components/OverlayPanel/OverlayPanel.tsx index e29af98953..707ac0519b 100644 --- a/widget/playground/src/components/OverlayPanel/OverlayPanel.tsx +++ b/widget/playground/src/components/OverlayPanel/OverlayPanel.tsx @@ -14,7 +14,7 @@ export function OverlayPanel(props: PropsWithChildren) {
- + back
diff --git a/widget/playground/src/components/SideNavigation/SideNavigation.Icon.tsx b/widget/playground/src/components/SideNavigation/SideNavigation.Icon.tsx index fcee09f8a8..e53f38b334 100644 --- a/widget/playground/src/components/SideNavigation/SideNavigation.Icon.tsx +++ b/widget/playground/src/components/SideNavigation/SideNavigation.Icon.tsx @@ -15,7 +15,7 @@ export function IconLink(props: IconLinkPropTypes) { variant="label" size="medium" align="center" - color={disabled ? 'neutral800' : 'foreground'}> + color={disabled ? 'neutral600' : 'foreground'}> {label} diff --git a/widget/playground/src/components/Slider/Slider.tsx b/widget/playground/src/components/Slider/Slider.tsx index 397d4ad1ff..e46c30ab32 100644 --- a/widget/playground/src/components/Slider/Slider.tsx +++ b/widget/playground/src/components/Slider/Slider.tsx @@ -24,7 +24,7 @@ function Slider(props: PropTypes) { return ( {title && ( - + {title} )} @@ -45,7 +45,7 @@ function Slider(props: PropTypes) { size="small" variant="body" align="center" - color="neutral800"> + color="neutral600"> {value || 0} diff --git a/widget/playground/src/components/StylesConfig.tsx b/widget/playground/src/components/StylesConfig.tsx index 9693be41d3..01614d2e5c 100644 --- a/widget/playground/src/components/StylesConfig.tsx +++ b/widget/playground/src/components/StylesConfig.tsx @@ -174,7 +174,7 @@ const ModeContainer = styled('div', { alignItems: 'center', }); const ThemeContainer = styled('div', { - borderColor: '$neutral600', + borderColor: '$neutral800', color: '$neutral500', border: '1px solid', height: '$48', @@ -212,7 +212,7 @@ const Circle = styled('div', { }); const FieldName = styled(Typography, { - color: '$neutral700', + color: '$neutral900', }); const defaultColors = { diff --git a/widget/playground/src/components/WalletsConfig/ExternalWallet.tsx b/widget/playground/src/components/WalletsConfig/ExternalWallet.tsx index 31f270bd34..3b7c7b7234 100644 --- a/widget/playground/src/components/WalletsConfig/ExternalWallet.tsx +++ b/widget/playground/src/components/WalletsConfig/ExternalWallet.tsx @@ -1,9 +1,12 @@ +import type { ProviderInterface } from '@rango-dev/wallets-react'; +import type { WalletType } from '@rango-dev/wallets-shared'; + +import { Button, Divider, styled, Switch, Typography } from '@rango-dev/ui'; +import { WalletTypes } from '@rango-dev/wallets-shared'; +import { useWallets } from '@rango-dev/widget-embedded'; import React, { useEffect } from 'react'; -import { Button, Divider, Switch, Typography, styled } from '@rango-dev/ui'; -import { WalletType, WalletTypes } from '@rango-dev/wallets-shared'; -import { ProviderInterface } from '@rango-dev/wallets-react'; + import { useConfigStore } from '../../store/config'; -import { useWallets } from '@rango-dev/widget-embedded'; const Head = styled('div', { display: 'flex', @@ -32,10 +35,14 @@ export function ExternalWallet() { const index = selectedWallets.findIndex( (wallet) => wallet === WalletTypes.META_MASK ); - if (index !== -1) selectedWallets.splice(index, 1); + if (index !== -1) { + selectedWallets.splice(index, 1); + } selectedWallets = [...selectedWallets, WalletTypes.META_MASK]; } else { - if (state('metamask').connected) disconnect(WalletTypes.META_MASK); + if (state('metamask').connected) { + void disconnect(WalletTypes.META_MASK); + } if (selectedWallets.length === 1) { selectedWallets = []; } @@ -58,7 +65,7 @@ export function ExternalWallet() { return ( <> - + External Wallets @@ -80,9 +87,9 @@ export function ExternalWallet() { disabled={!externalWallets} onClick={() => { if (state('metamask').connected) { - disconnect('metamask'); + void disconnect('metamask'); } else { - connect('metamask'); + void connect('metamask'); } }}> {externalWallets && state('metamask').connected diff --git a/widget/playground/src/constants/presets.ts b/widget/playground/src/constants/presets.ts index 91dad0e274..aa9647d639 100644 --- a/widget/playground/src/constants/presets.ts +++ b/widget/playground/src/constants/presets.ts @@ -1,5 +1,8 @@ import type { Mode } from '../store/config'; -import type { WidgetColors } from '@rango-dev/widget-embedded'; +import type { + WidgetColors, + WidgetColorsKeys, +} from '@rango-dev/widget-embedded'; export const TABS: { id: Mode; title: string }[] = [ { @@ -218,3 +221,30 @@ export const PRESETS: { }, }, ]; + +export const WIDGET_COLORS: { key: WidgetColorsKeys; label: string }[] = [ + { + key: 'primary', + label: 'Primary', + }, + { + key: 'secondary', + label: 'Secondary', + }, + { + key: 'neutral', + label: 'Neutral', + }, + { + key: 'info', + label: 'Info', + }, + { + key: 'background', + label: 'Background', + }, + { + key: 'foreground', + label: 'Foreground', + }, +]; diff --git a/widget/playground/src/containers/Config.tsx b/widget/playground/src/containers/Config.tsx index 423c52e05a..e50f9aa48d 100644 --- a/widget/playground/src/containers/Config.tsx +++ b/widget/playground/src/containers/Config.tsx @@ -96,7 +96,7 @@ export function Config(props: PropsWithChildren) { Customize your widget - + You can customize the theme and config how your widget should works diff --git a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx index ef0dbbe374..83afe8a051 100644 --- a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx +++ b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx @@ -99,7 +99,7 @@ export function WalletSection() { }} size="small" variant="body" - color="neutral900"> + color="neutral700"> Enable Multi Wallets Simultaneously } @@ -116,7 +116,7 @@ export function WalletSection() { /> - + It's a sample using metamask, You can use your own wallet or what we already implemented, check it out here. diff --git a/widget/playground/src/containers/StyleLayout/StyleLayout.CustomColors.tsx b/widget/playground/src/containers/StyleLayout/StyleLayout.CustomColors.tsx new file mode 100644 index 0000000000..3d6b82790f --- /dev/null +++ b/widget/playground/src/containers/StyleLayout/StyleLayout.CustomColors.tsx @@ -0,0 +1,195 @@ +import type { CustomColorsTypes } from './StyleLayout.types'; +import type { Mode } from '../../store/config'; +import type { WidgetColorsKeys } from '@rango-dev/widget-embedded'; + +import { + ChevronDownIcon, + ChevronUpIcon, + Collapsible, + CustomColorsIcon, + Divider, + Typography, +} from '@rango-dev/ui'; +import React, { useEffect, useState } from 'react'; + +import { ColorPicker } from '../../components/ColorPicker'; +import { WIDGET_COLORS } from '../../constants'; +import { useConfigStore } from '../../store/config'; +import { getMainColor } from '../../utils/colors'; + +import { + ColoredCircle, + ColorsContent, + CustomColorCollapsible, + CustomColors, + FieldTitle, + Row, +} from './StyleLayout.styles'; + +const Colors = (props: { mainColor?: string; secondColor?: string }) => { + return ( + + + {props.secondColor !== undefined && ( + + )} + + ); +}; + +export function CustomColorsSection(props: CustomColorsTypes) { + const { tab, selectedPresets } = props; + + const [openCustomColors, toggleCustomColors] = useState<{ + tab: Mode; + value: boolean; + }>({ tab, value: false }); + const [openCustomColor, setOpenCustomColor] = useState(null); + const onChangeColors = useConfigStore.use.onChangeColors(); + const isAutoTab = tab === 'auto'; + + const { theme } = useConfigStore.use.config(); + + const isOpenCustomColors = + tab === openCustomColors.tab && openCustomColors.value; + + const handleOpenCollapse = (key: string) => { + if (openCustomColor === key) { + setOpenCustomColor(null); + } else { + setOpenCustomColor(key); + } + }; + useEffect(() => { + setOpenCustomColor(null); + }, [tab]); + + const onResetColor = (name: WidgetColorsKeys, mode: 'light' | 'dark') => { + const color = !!selectedPresets ? selectedPresets[mode][name] : undefined; + onChangeColors(name, mode, color); + }; + return ( + + toggleCustomColors((prev) => ({ + tab, + value: tab === prev.tab ? !prev.value : true, + })) + } + trigger={ + + ) : ( + + ) + }> + + + + + Custom Colors + + + + }> + + {WIDGET_COLORS.map((widgetColor) => ( +
+ handleOpenCollapse(widgetColor.key)} + trigger={ + + + + + + {widgetColor.label} + + + {openCustomColor === widgetColor.key ? ( + + ) : ( + + )} + + }> + + + {isAutoTab ? ( + <> + + onChangeColors(widgetColor.key, 'light', color) + } + onReset={() => onResetColor(widgetColor.key, 'light')} + resetDisable={ + (!!selectedPresets && + getMainColor(widgetColor.key, tab, theme, 'light') === + selectedPresets.light[widgetColor.key]) || + !selectedPresets + } + /> + + + onChangeColors(widgetColor.key, 'dark', color) + } + resetDisable={ + (!!selectedPresets && + getMainColor(widgetColor.key, tab, theme, 'dark') === + selectedPresets.dark[widgetColor.key]) || + !selectedPresets + } + onReset={() => onResetColor(widgetColor.key, 'dark')} + /> + + ) : ( + + onChangeColors(widgetColor.key, tab, color) + } + onReset={() => onResetColor(widgetColor.key, tab)} + resetDisable={ + (!!selectedPresets && + getMainColor(widgetColor.key, tab, theme) === + selectedPresets[tab][widgetColor.key]) || + !selectedPresets + } + /> + )} + + +
+ ))} + + ); +} diff --git a/widget/playground/src/containers/StyleLayout/StyleLayout.Preset.tsx b/widget/playground/src/containers/StyleLayout/StyleLayout.Preset.tsx index 9acecee31c..c267eae128 100644 --- a/widget/playground/src/containers/StyleLayout/StyleLayout.Preset.tsx +++ b/widget/playground/src/containers/StyleLayout/StyleLayout.Preset.tsx @@ -8,10 +8,12 @@ import { PRESETS } from '../../constants'; import { useConfigStore } from '../../store/config'; import { shallowEqual } from '../../utils/common'; +import { CustomColorsSection } from './StyleLayout.CustomColors'; import { Collapse, - Color, + ColoredCircle, ColorsContent, + Line, PresetContent, PresetTheme, Row, @@ -20,9 +22,12 @@ import { const Colors = (props: ColorsTypes) => { return ( - - - + + @@ -34,16 +39,24 @@ const EACH_COL_HEIGHT = 41; const TWO_ROWS_NUMBER_OF_COLS = 4; const ONE_ROW_NUMBER_OF_COLS = 2; export function Preset(props: PresetTypes) { + const { theme } = useConfigStore.use.config(); const { tab } = props; const [showMore, setShowMore] = useState({ tab, value: false, }); + const [selectedPresets, setSelectPresets] = useState< + | { + light?: WidgetColors; + dark?: WidgetColors; + } + | undefined + >(theme?.colors); + const isShowMore = showMore.value && tab === showMore.tab; const onChangeTheme = useConfigStore.use.onChangeTheme(); const onSelectTheme = useConfigStore.use.onSelectTheme(); - const { theme } = useConfigStore.use.config(); const isDarkTab = tab === 'dark'; const isLightTab = tab === 'light'; const isAutoTab = tab === 'auto'; @@ -71,6 +84,7 @@ export function Preset(props: PresetTypes) { if (!isAutoTab) { onChangeTheme({ name: 'mode', value: tab }); } + setSelectPresets(customTheme); }; return ( @@ -78,7 +92,7 @@ export function Preset(props: PresetTypes) { {isAutoTab && ( <> - + Show Widget in Dark Theme @@ -152,6 +166,17 @@ export function Preset(props: PresetTypes) { )} + + + + + ); } diff --git a/widget/playground/src/containers/StyleLayout/StyleLayout.Themes.tsx b/widget/playground/src/containers/StyleLayout/StyleLayout.Themes.tsx index 6552a50789..34e3089731 100644 --- a/widget/playground/src/containers/StyleLayout/StyleLayout.Themes.tsx +++ b/widget/playground/src/containers/StyleLayout/StyleLayout.Themes.tsx @@ -1,24 +1,16 @@ /* eslint-disable @typescript-eslint/no-magic-numbers */ import type { Mode } from '../../store/config'; -import { - ChevronDownIcon, - ColorsIcon, - CustomColorsIcon, - Divider, - Typography, -} from '@rango-dev/ui'; +import { ColorsIcon, Divider, Typography } from '@rango-dev/ui'; import React, { useState } from 'react'; import { TABS } from '../../constants'; import { Preset } from './StyleLayout.Preset'; import { - CustomColors, Field, FieldTitle, GeneralContainer, - Line, Tab, Tabs, } from './StyleLayout.styles'; @@ -58,22 +50,6 @@ export function Themes() { - - - - - }> - - - - - Custom Colors - - - diff --git a/widget/playground/src/containers/StyleLayout/StyleLayout.styles.ts b/widget/playground/src/containers/StyleLayout/StyleLayout.styles.ts index 71f8ff1ff8..fcf37c95de 100644 --- a/widget/playground/src/containers/StyleLayout/StyleLayout.styles.ts +++ b/widget/playground/src/containers/StyleLayout/StyleLayout.styles.ts @@ -1,9 +1,10 @@ -import { Button, styled } from '@rango-dev/ui'; +import { Button, Collapsible, styled } from '@rango-dev/ui'; export const Layout = styled('div', { borderRadius: '20px', display: 'flex', padding: '$15', + overflowY: 'auto', backgroundColor: '$background', width: '338px', height: '100%', @@ -36,7 +37,7 @@ export const Tabs = styled('div', { }); export const Tab = styled(Button, { - color: '$neutral900', + color: '$neutral700', backgroundColor: 'transparent', '&:hover': { backgroundColor: '$info100', @@ -84,13 +85,14 @@ export const ColorsContent = styled('div', { display: 'flex', justifyContent: 'center', alignItems: 'center', + position: 'relative', }); -export const Color = styled('div', { - width: 20, - height: 20, - borderRadius: 10, - margin: 5, +export const ColoredCircle = styled('div', { + width: '$20', + height: '$20', + borderRadius: '$sm', + margin: '$5', boxShadow: '0 2px 6px 0 rgba(0, 0, 0, 0.1), 0 4px 10px 0 rgba(0, 0, 0, 0.16)', variants: { position: { @@ -125,6 +127,9 @@ export const CustomColors = styled(Button, { '.title': { color: '$secondary500', }, + '& svg': { + color: '$secondary500', + }, }, }); @@ -132,3 +137,16 @@ export const Collapse = styled('div', { overflow: 'hidden', transition: 'height .3s ease', }); + +export const CustomColorCollapsible = styled(Collapsible, { + border: '1px solid $neutral300', + borderRadius: '$xm', + padding: '$4 $15', + cursor: 'pointer', + '&:hover': { + borderColor: '$info300', + '& svg': { + color: '$secondary500', + }, + }, +}); diff --git a/widget/playground/src/containers/StyleLayout/StyleLayout.types.ts b/widget/playground/src/containers/StyleLayout/StyleLayout.types.ts index 23e0a2a7ca..d75b083d33 100644 --- a/widget/playground/src/containers/StyleLayout/StyleLayout.types.ts +++ b/widget/playground/src/containers/StyleLayout/StyleLayout.types.ts @@ -1,4 +1,5 @@ import type { Mode } from '../../store/config'; +import type { WidgetColors } from '@rango-dev/widget-embedded'; export enum StyleCollapseState { GENERAL = 'general', @@ -14,3 +15,11 @@ export type ColorsTypes = { secondary?: string; background?: string; }; + +export type CustomColorsTypes = { + tab: Mode; + selectedPresets?: { + light: WidgetColors; + dark: WidgetColors; + }; +}; diff --git a/widget/playground/src/containers/configContainer/ConfigContainer.tsx b/widget/playground/src/containers/configContainer/ConfigContainer.tsx index 2589b9dcbb..b15e83bc87 100644 --- a/widget/playground/src/containers/configContainer/ConfigContainer.tsx +++ b/widget/playground/src/containers/configContainer/ConfigContainer.tsx @@ -63,7 +63,7 @@ export function ConfigContainer(props: PropsWithChildren) { size="medium" variant="body" align="center" - color="neutral900"> + color="neutral700"> To use the Playground page, You must use the Desktop version diff --git a/widget/playground/src/globalStyles.ts b/widget/playground/src/globalStyles.ts index 9f15022a14..4ebc02b787 100644 --- a/widget/playground/src/globalStyles.ts +++ b/widget/playground/src/globalStyles.ts @@ -4,19 +4,4 @@ export const globalStyles = globalCss({ body: { fontFamily: '$primary', }, - '*': { - '&::-webkit-scrollbar': { width: '$8', height: '$8' }, - '&::-webkit-scrollbar-thumb': { - backgroundColor: '$neutral400', - }, - '&::-webkit-scrollbar-thumb:hover': { - backgroundColor: '$neutral500', - }, - '&::-webkit-scrollbar-track': { - backgroundColor: '$background', - }, - '&::-webkit-scrollbar-corner': { - backgroundColor: '$neutral200', - }, - }, }); diff --git a/widget/playground/src/store/config.ts b/widget/playground/src/store/config.ts index bcb6a23a30..217040fe61 100644 --- a/widget/playground/src/store/config.ts +++ b/widget/playground/src/store/config.ts @@ -208,12 +208,16 @@ export const useConfigStore = createSelectors( }), onChangeColors: (name, mode, color) => set((state) => { - if ( - state.config?.theme?.colors && - state.config.theme.colors[mode] && - state.config.theme.colors[mode][name] - ) { - state.config.theme.colors[mode][name] = color; + console.log({ color }); + + if (state?.config?.theme?.colors) { + state.config.theme.colors = { + ...state.config.theme.colors, + [mode]: { + ...state?.config?.theme.colors[mode], + [name]: color, + }, + }; } }), onSelectTheme: (colors) => diff --git a/widget/playground/src/utils/colors.ts b/widget/playground/src/utils/colors.ts new file mode 100644 index 0000000000..479bc9b37f --- /dev/null +++ b/widget/playground/src/utils/colors.ts @@ -0,0 +1,32 @@ +import type { Mode } from '../store/config'; +import type { WidgetColorsKeys, WidgetTheme } from '@rango-dev/widget-embedded'; + +export const getMainColor = ( + key: WidgetColorsKeys, + tab: Mode, + theme?: WidgetTheme, + mode?: 'light' | 'dark' +): string | undefined => { + const isDarkTab = tab === 'dark'; + const isLightTab = tab === 'light'; + const isAutoTab = tab === 'auto'; + if (!!theme?.colors) { + const lengthOfDarkThemes = Object.keys(theme?.colors?.dark).length; + const lengthOfLightThemes = Object.keys(theme?.colors?.light).length; + + const isDarkColorsOnly = !!lengthOfDarkThemes && !lengthOfLightThemes; + const isLightColorsOnly = !!lengthOfLightThemes && !lengthOfDarkThemes; + const isLightAndDarkColors = !!lengthOfLightThemes && !!lengthOfDarkThemes; + + if (isAutoTab && isLightAndDarkColors) { + return theme?.colors[mode || 'light'][key]; + } + if (isDarkTab && isDarkColorsOnly) { + return theme?.colors?.dark[key]; + } + if (isLightTab && isLightColorsOnly) { + return theme?.colors?.light[key]; + } + } + return undefined; +}; diff --git a/widget/ui/src/components/Alert/Alert.styles.ts b/widget/ui/src/components/Alert/Alert.styles.ts index 3d72f4eca1..3dad47b546 100644 --- a/widget/ui/src/components/Alert/Alert.styles.ts +++ b/widget/ui/src/components/Alert/Alert.styles.ts @@ -20,9 +20,9 @@ export const Container = styled('div', { paddingLeft: '$24', }, '.description': { - $$color: '$colors$neutral900', + $$color: '$colors$neutral700', [`.${darkTheme} &`]: { - $$color: '$colors$neutral800', + $$color: '$colors$neutral600', }, color: '$$color', fontSize: '$10', diff --git a/widget/ui/src/components/BestRoute/BestRoute.tsx b/widget/ui/src/components/BestRoute/BestRoute.tsx index b40739ea9b..ea7ada02ef 100644 --- a/widget/ui/src/components/BestRoute/BestRoute.tsx +++ b/widget/ui/src/components/BestRoute/BestRoute.tsx @@ -71,7 +71,7 @@ export function BestRoute(props: BestRouteProps) { } ${steps[steps.length - 1].to.token.displayName}`} diff --git a/widget/ui/src/components/BestRoute/BestRouteSkeleton.styles.ts b/widget/ui/src/components/BestRoute/BestRouteSkeleton.styles.ts index eebc3848ba..96990be4eb 100644 --- a/widget/ui/src/components/BestRoute/BestRouteSkeleton.styles.ts +++ b/widget/ui/src/components/BestRoute/BestRouteSkeleton.styles.ts @@ -47,7 +47,7 @@ export const Container = styled('div', { '& .route-summary__separator': { height: '$28', marginLeft: '13px', - borderLeft: '1px solid $neutral900', + borderLeft: '1px solid $neutral700', }, '& .token-amount': { display: 'flex', diff --git a/widget/ui/src/components/BottomLogo/BottomLogo.tsx b/widget/ui/src/components/BottomLogo/BottomLogo.tsx index d9db785c6e..a43fc1b03f 100644 --- a/widget/ui/src/components/BottomLogo/BottomLogo.tsx +++ b/widget/ui/src/components/BottomLogo/BottomLogo.tsx @@ -10,7 +10,7 @@ import { Container, StyledAnchor } from './BottomLogo.styles'; export function BottomLogo() { return ( - + {i18n.t('Powered By')} @@ -18,7 +18,7 @@ export function BottomLogo() { - + RANGO diff --git a/widget/ui/src/components/Button/Button.styles.tsx b/widget/ui/src/components/Button/Button.styles.tsx index 0a6ea0ab7e..09fd55e80a 100644 --- a/widget/ui/src/components/Button/Button.styles.tsx +++ b/widget/ui/src/components/Button/Button.styles.tsx @@ -61,7 +61,7 @@ export const ButtonBase = styled('button', { [`.${darkTheme} &`]: { $$color: '$colors$foreground', }, - backgroundColor: '$neutral800', + backgroundColor: '$neutral600', color: '$$color', pointerEvents: 'none', }, @@ -80,16 +80,16 @@ export const ButtonBase = styled('button', { outline: 0, }, '&:disabled': { - borderColor: '$neutral800', - color: '$neutral800', + borderColor: '$neutral600', + color: '$neutral600', pointerEvents: 'none', }, }, ghost: { backgroundColor: 'transparent', - color: '$neutral900', + color: '$neutral700', '&:disabled': { - color: '$neutral800', + color: '$neutral600', pointerEvents: 'none', }, '&:focus-visible': { @@ -140,7 +140,7 @@ export const ButtonBase = styled('button', { [`.${darkTheme} &`]: { $$color: '$colors$foreground', }, - background: '$neutral800', + background: '$neutral600', color: '$$color', pointerEvents: 'none', }, diff --git a/widget/ui/src/components/Checkbox/Checkbox.styles.ts b/widget/ui/src/components/Checkbox/Checkbox.styles.ts index f0471cc8e9..c533cca486 100644 --- a/widget/ui/src/components/Checkbox/Checkbox.styles.ts +++ b/widget/ui/src/components/Checkbox/Checkbox.styles.ts @@ -13,7 +13,7 @@ export const CheckboxRoot = styled(RadixCheckbox.Root, { width: '1rem', height: '1rem', padding: 0, - border: '1px solid $neutral800', + border: '1px solid $neutral600', backgroundColor: 'transparent', cursor: 'pointer', '&[data-state="checked"]': { diff --git a/widget/ui/src/components/Chip/Chip.tsx b/widget/ui/src/components/Chip/Chip.tsx index 27e3693b42..580a7df114 100644 --- a/widget/ui/src/components/Chip/Chip.tsx +++ b/widget/ui/src/components/Chip/Chip.tsx @@ -12,7 +12,7 @@ export function Chip(props: PropTypes) { {prefix || null} {label} diff --git a/widget/ui/src/components/LiquiditySourceList/LiquiditySourceList.tsx b/widget/ui/src/components/LiquiditySourceList/LiquiditySourceList.tsx index a9853f8f3c..53a31e9e2f 100644 --- a/widget/ui/src/components/LiquiditySourceList/LiquiditySourceList.tsx +++ b/widget/ui/src/components/LiquiditySourceList/LiquiditySourceList.tsx @@ -111,7 +111,7 @@ export function LiquiditySourceList(props: PropTypes) { {i18n.t('Bridges')} - + {totalSelectedBridges === totalBridges ? totalBridges : `${totalSelectedBridges} / ${totalBridges}`} @@ -150,7 +150,7 @@ export function LiquiditySourceList(props: PropTypes) { {i18n.t('Exchanges')} - + {totalSelectedExchanges === totalExchanges ? totalExchanges : `${totalSelectedExchanges} / ${totalExchanges}`} diff --git a/widget/ui/src/components/ListItem/ListItem.tsx b/widget/ui/src/components/ListItem/ListItem.tsx index d5ac565a47..ecaa0c914f 100644 --- a/widget/ui/src/components/ListItem/ListItem.tsx +++ b/widget/ui/src/components/ListItem/ListItem.tsx @@ -16,7 +16,7 @@ function ListItem(props: ListItemProps) {
{title &&
{title}
} {description && ( - + {description} )} diff --git a/widget/ui/src/components/MessageBox/DefaultMessageBox.tsx b/widget/ui/src/components/MessageBox/DefaultMessageBox.tsx index ada715f8ca..30a5261d43 100644 --- a/widget/ui/src/components/MessageBox/DefaultMessageBox.tsx +++ b/widget/ui/src/components/MessageBox/DefaultMessageBox.tsx @@ -27,7 +27,7 @@ export function MessageBox(props: PropsWithChildren) { {typeof description === 'string' ? ( - + {description} ) : ( diff --git a/widget/ui/src/components/NotFound/NotFound.tsx b/widget/ui/src/components/NotFound/NotFound.tsx index 5efc0d355e..e63ba03e45 100644 --- a/widget/ui/src/components/NotFound/NotFound.tsx +++ b/widget/ui/src/components/NotFound/NotFound.tsx @@ -16,7 +16,7 @@ export function NotFound(props: PropTypes) { {props.title} - + {props.description} diff --git a/widget/ui/src/components/PriceImpact/PriceImpact.tsx b/widget/ui/src/components/PriceImpact/PriceImpact.tsx index d643588422..8a5084d3dc 100644 --- a/widget/ui/src/components/PriceImpact/PriceImpact.tsx +++ b/widget/ui/src/components/PriceImpact/PriceImpact.tsx @@ -9,7 +9,7 @@ import { Container } from './PriceImpact.styles'; export function PriceImpact(props: PriceImpactProps) { const { size, outputUsdValue, percentageChange, warningLevel, error } = props; - let percentageChangeColor = '$neutral900'; + let percentageChangeColor = '$neutral700'; if (!outputUsdValue || warningLevel === 'low') { percentageChangeColor = '$warning500'; } else if (warningLevel === 'high') { @@ -22,7 +22,7 @@ export function PriceImpact(props: PriceImpactProps) { + color={size !== 'small' ? '$neutral600' : '$neutral700'}> {`~$${outputUsdValue}`} )} diff --git a/widget/ui/src/components/Radio/Radio.styles.tsx b/widget/ui/src/components/Radio/Radio.styles.tsx index 60314c6a0d..10116cf8b3 100644 --- a/widget/ui/src/components/Radio/Radio.styles.tsx +++ b/widget/ui/src/components/Radio/Radio.styles.tsx @@ -9,7 +9,7 @@ export const StyledItem = styled(Radio.Item, { borderRadius: '100%', cursor: 'pointer', backgroundColor: 'transparent', - border: '1px solid $neutral800', + border: '1px solid $neutral600', '&[data-state="checked"]': { $$color: '$colors$secondary500', diff --git a/widget/ui/src/components/RoutesOverview/RoutesOverview.tsx b/widget/ui/src/components/RoutesOverview/RoutesOverview.tsx index 058e52d589..ad250cd5b2 100644 --- a/widget/ui/src/components/RoutesOverview/RoutesOverview.tsx +++ b/widget/ui/src/components/RoutesOverview/RoutesOverview.tsx @@ -13,7 +13,7 @@ export const Container = styled('div', { padding: '$8', borderRadius: '$xs', backgroundColor: '$background', - color: '$neutral800', + color: '$neutral600', fontSize: '$12', '.routes': { diff --git a/widget/ui/src/components/StepDetail/StepDetail.tsx b/widget/ui/src/components/StepDetail/StepDetail.tsx index 51757b8cde..9077715d1d 100644 --- a/widget/ui/src/components/StepDetail/StepDetail.tsx +++ b/widget/ui/src/components/StepDetail/StepDetail.tsx @@ -1,4 +1,7 @@ -import React, { PropsWithChildren } from 'react'; +import type { PropsWithChildren } from 'react'; + +import React from 'react'; + import { styled } from '../../theme'; import { Typography } from '../Typography'; @@ -74,7 +77,7 @@ const Detail = styled('div', { }, }); const SubTitle = styled(Typography, { - color: '$neutral600', + color: '$neutral800', display: 'block', paddingLeft: '$8', }); @@ -122,7 +125,7 @@ export function StepDetail(props: PropsWithChildren) { noWrap variant={direction === 'vertical' ? 'body' : 'title'} size="medium" - color={'$neutral600'}> + color={'$neutral800'}> {estimatedAmount} )} @@ -133,7 +136,7 @@ export function StepDetail(props: PropsWithChildren) { noWrap> {symbol} - + on {blockchain} diff --git a/widget/ui/src/components/StepDetails/StepDetails.tsx b/widget/ui/src/components/StepDetails/StepDetails.tsx index 4cd9a6da8c..da5e6fb7e4 100644 --- a/widget/ui/src/components/StepDetails/StepDetails.tsx +++ b/widget/ui/src/components/StepDetails/StepDetails.tsx @@ -74,7 +74,7 @@ const StepDetailsComponent = forwardRef( ml={4} mr={4} size="small" - color="$neutral900" + color="$neutral700" variant="body">{`${step.from.price.value} ${step.from.token.displayName}`} @@ -86,7 +86,7 @@ const StepDetailsComponent = forwardRef( {`${isCompleted ? '' : '~'}${ step.to.price.value } ${step.to.token.displayName}`} diff --git a/widget/ui/src/components/SvgIcon/SvgIcon.style.ts b/widget/ui/src/components/SvgIcon/SvgIcon.style.ts index a89a2109f4..91de4118eb 100644 --- a/widget/ui/src/components/SvgIcon/SvgIcon.style.ts +++ b/widget/ui/src/components/SvgIcon/SvgIcon.style.ts @@ -1,4 +1,4 @@ -import { darkTheme, styled } from '../../theme'; +import { styled } from '../../theme'; export const SvgWithColor = styled('svg', { variants: { @@ -28,11 +28,7 @@ export const SvgWithColor = styled('svg', { color: '$info500', }, gray: { - $$color: '$colors$neutral900', - [`.${darkTheme} &`]: { - $$color: '$colors$neutral800', - }, - color: '$$color', + color: '$neutral600', }, }, }, diff --git a/widget/ui/src/components/SwapListItem/SwapListItem.tsx b/widget/ui/src/components/SwapListItem/SwapListItem.tsx index a7eeee531a..9b511924cf 100644 --- a/widget/ui/src/components/SwapListItem/SwapListItem.tsx +++ b/widget/ui/src/components/SwapListItem/SwapListItem.tsx @@ -46,7 +46,7 @@ export function SwapListItem(props: PropsWithChildren) {
- + {formattedDateAndTime(creationTime, onlyShowTime)} diff --git a/widget/ui/src/components/SwapListItem/SwapToken.tsx b/widget/ui/src/components/SwapListItem/SwapToken.tsx index 8eea1cb6c6..6c8dbc22dd 100644 --- a/widget/ui/src/components/SwapListItem/SwapToken.tsx +++ b/widget/ui/src/components/SwapListItem/SwapToken.tsx @@ -114,7 +114,7 @@ export function SwapToken(props: PropTypes) { {toToken.displayName} - + {i18n.t('Waiting for bridge transaction')} @@ -125,7 +125,7 @@ export function SwapToken(props: PropTypes) { {fromToken.displayName} {!!fromAmount && ( - + {fromAmount} )} @@ -138,7 +138,7 @@ export function SwapToken(props: PropTypes) { {toToken.displayName} - + {toAmount || estimatedAmount} diff --git a/widget/ui/src/components/Switch/Switch.styles.tsx b/widget/ui/src/components/Switch/Switch.styles.tsx index 8c3dbbd1de..8a3b9d2a6a 100644 --- a/widget/ui/src/components/Switch/Switch.styles.tsx +++ b/widget/ui/src/components/Switch/Switch.styles.tsx @@ -8,8 +8,8 @@ export const StyledSwitchRoot = styled(RadixSwitch.Root, { borderStyle: 'solid', width: '24px', height: '16px', - backgroundColor: '$neutral800', - borderColor: '$neutral800', + backgroundColor: '$neutral600', + borderColor: '$neutral600', borderRadius: '99999px', position: 'relative', padding: '0', diff --git a/widget/ui/src/components/TextField/TextField.styles.ts b/widget/ui/src/components/TextField/TextField.styles.ts index 2cff7d4710..d5aac961d0 100644 --- a/widget/ui/src/components/TextField/TextField.styles.ts +++ b/widget/ui/src/components/TextField/TextField.styles.ts @@ -111,7 +111,7 @@ export const Input = styled('input', { }, '&::placeholder, &::-webkit-input-placeholder': { - color: '$neutral900', + color: '$neutral700', }, '&:focus-visible': { outline: 'none', diff --git a/widget/ui/src/components/TokenAmount/TokenAmount.tsx b/widget/ui/src/components/TokenAmount/TokenAmount.tsx index db8c957947..d342bddf1a 100644 --- a/widget/ui/src/components/TokenAmount/TokenAmount.tsx +++ b/widget/ui/src/components/TokenAmount/TokenAmount.tsx @@ -19,7 +19,7 @@ export function TokenAmount(props: PropTypes) { />
{props.label && ( - + {props.label} )} @@ -43,7 +43,7 @@ export function TokenAmount(props: PropTypes) {
{props.type === 'input' && ( - + {`~$${props.price.usdValue}`} )} diff --git a/widget/ui/src/components/TokenList/TokenItem.tsx b/widget/ui/src/components/TokenList/TokenItem.tsx index 4540f27b20..fb710922b2 100644 --- a/widget/ui/src/components/TokenList/TokenItem.tsx +++ b/widget/ui/src/components/TokenList/TokenItem.tsx @@ -70,7 +70,7 @@ export function TokenItem(props: PropTypes) { {token.symbol} - + {token.name} diff --git a/widget/ui/src/components/TokenPreview/TokenPreview.tsx b/widget/ui/src/components/TokenPreview/TokenPreview.tsx index c2e5db75cb..cf815636aa 100644 --- a/widget/ui/src/components/TokenPreview/TokenPreview.tsx +++ b/widget/ui/src/components/TokenPreview/TokenPreview.tsx @@ -117,7 +117,7 @@ export function TokenPreview(props: PropTypes) {
- + {props.label}
@@ -126,7 +126,7 @@ export function TokenPreview(props: PropTypes) { {`$${props.usdValue}`} )}
diff --git a/widget/ui/src/components/Wallet/Content.tsx b/widget/ui/src/components/Wallet/Content.tsx index 8433f4e26d..e992ae54cc 100644 --- a/widget/ui/src/components/Wallet/Content.tsx +++ b/widget/ui/src/components/Wallet/Content.tsx @@ -1,12 +1,14 @@ +import type { ContentProps } from './Wallet.types'; + import React from 'react'; -import { ContentProps } from './Wallet.types'; -import { Typography } from '../Typography'; import { Image } from '../common'; +import { Typography } from '../Typography'; + import { Text, WalletImageContainer } from './Wallet.styles'; function Content(props: ContentProps) { - const { image, title, description, descriptionColor = 'neutral600' } = props; + const { image, title, description, descriptionColor = 'neutral800' } = props; return ( <> diff --git a/widget/ui/src/components/Wallet/SelectableWallet.tsx b/widget/ui/src/components/Wallet/SelectableWallet.tsx index 30695933f1..1dfda6d0ab 100644 --- a/widget/ui/src/components/Wallet/SelectableWallet.tsx +++ b/widget/ui/src/components/Wallet/SelectableWallet.tsx @@ -40,7 +40,7 @@ export function SelectableWallet(props: SelectablePropTypes) { variant="body" size="xsmall" noWrap={false} - color={state === WalletState.CONNECTED ? 'neutral900' : info.color}> + color={state === WalletState.CONNECTED ? 'neutral700' : info.color}> {description || info.description} diff --git a/widget/ui/src/components/Wallet/Wallet.helpers.ts b/widget/ui/src/components/Wallet/Wallet.helpers.ts index c14ff59bb4..ec2d184b63 100644 --- a/widget/ui/src/components/Wallet/Wallet.helpers.ts +++ b/widget/ui/src/components/Wallet/Wallet.helpers.ts @@ -20,13 +20,13 @@ export function makeInfo(state: WalletState): Info { }; case WalletState.CONNECTING: return { - color: 'neutral800', + color: 'neutral600', description: i18n.t('Connecting...'), tooltipText: i18n.t('Connecting'), }; case WalletState.DISCONNECTED: return { - color: 'neutral800', + color: 'neutral600', description: i18n.t('Disconnected'), tooltipText: i18n.t('Connect'), }; diff --git a/widget/ui/src/containers/SwapHistory/SwapHistory.tsx b/widget/ui/src/containers/SwapHistory/SwapHistory.tsx index 31a35c9a88..b57f9a22ec 100644 --- a/widget/ui/src/containers/SwapHistory/SwapHistory.tsx +++ b/widget/ui/src/containers/SwapHistory/SwapHistory.tsx @@ -66,7 +66,7 @@ export const ErrorMsg = styled(Typography, { export const FeeContainer = styled('div', { paddingLeft: '$16', - color: '$neutral800', + color: '$neutral600', }); export const Fee = styled('div', { @@ -150,12 +150,12 @@ const Row = styled('div', { padding: '$8 0', '.name': { - color: '$neutral600', + color: '$neutral800', }, '.value': { display: 'flex', alignItems: 'center', - color: '$neutral800', + color: '$neutral600', justifyContent: 'flex-end', }, '.status': { @@ -182,7 +182,7 @@ const RequestId = styled('div', { const ExtraDetails = styled('div', { padding: '0', - color: '$neutral600', + color: '$neutral800', fontSize: '$10', }); diff --git a/widget/ui/src/containers/SwapInput/SwapInput.tsx b/widget/ui/src/containers/SwapInput/SwapInput.tsx index 39aef025c7..19814f671b 100644 --- a/widget/ui/src/containers/SwapInput/SwapInput.tsx +++ b/widget/ui/src/containers/SwapInput/SwapInput.tsx @@ -13,13 +13,13 @@ export function SwapInput(props: SwapInputProps) {
- + {props.label} {'balance' in props && !props.loading && (
@@ -87,7 +87,7 @@ export function SwapInput(props: SwapInputProps) { - + {error || (!loading && !chain) ? i18n.t('Chain') : chain} diff --git a/widget/ui/src/containers/TokenInfo/TokenInfo.tsx b/widget/ui/src/containers/TokenInfo/TokenInfo.tsx index 2f642acd31..c42203ebfd 100644 --- a/widget/ui/src/containers/TokenInfo/TokenInfo.tsx +++ b/widget/ui/src/containers/TokenInfo/TokenInfo.tsx @@ -174,7 +174,7 @@ export function TokenInfo(props: PropTypes) {
- + {type === 'From' ? ( ) : ( @@ -190,7 +190,7 @@ export function TokenInfo(props: PropTypes) { setInputAmount(tokenBalanceReal.split(',').join('')); } }}> - + {i18n.t('Balance')}: {tokenBalance} {fromToken?.symbol || ''} @@ -209,7 +209,7 @@ export function TokenInfo(props: PropTypes) { {`$${props.outputUsdValue}`} + color="neutral800">{`$${props.outputUsdValue}`}
)} @@ -280,7 +280,7 @@ export function TokenInfo(props: PropTypes) { {`$${inputUsdValue}`} + color="neutral600">{`$${inputUsdValue}`} } value={inputAmount || ''} diff --git a/widget/ui/src/containers/Warnings/BalanceErrors.tsx b/widget/ui/src/containers/Warnings/BalanceErrors.tsx index c3ce15c365..dff1adb635 100644 --- a/widget/ui/src/containers/Warnings/BalanceErrors.tsx +++ b/widget/ui/src/containers/Warnings/BalanceErrors.tsx @@ -28,7 +28,7 @@ export function BalanceErrors({ messages }: PropTypes) { const key = index + warning; return ( - + {warning} diff --git a/widget/ui/src/theme.ts b/widget/ui/src/theme.ts index 7ca11b84f6..2e55065b24 100644 --- a/widget/ui/src/theme.ts +++ b/widget/ui/src/theme.ts @@ -30,10 +30,10 @@ export const theme = { neutral300: '#F2F2F2', neutral400: '#EEEEEE', neutral500: '#E6E6E6', - neutral600: '#1B1B1B', - neutral700: '#121212', - neutral800: '#A2A2A2', - neutral900: '#727272', + neutral600: '#A2A2A2', + neutral700: '#727272', + neutral800: '#1B1B1B', + neutral900: '#121212', error100: '#FDF3F3', error300: '#FFD7D7', @@ -185,10 +185,10 @@ export const darkColors = { secondary600: '#2B3462', neutral: '#222222', - neutral900: '#E9E9E9', - neutral800: '#B8B8B8', - neutral700: '#F2F2F2', - neutral600: '#EEEEEE', + neutral900: '#F2F2F2', + neutral800: '#EEEEEE', + neutral700: '#E9E9E9', + neutral600: '#B8B8B8', neutral500: '#222222', neutral400: '#1B1B1B', neutral300: '#121212', From 2785eecd64a7a48b76dacf42e0d5454bb0e6cd31 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 31 Oct 2023 15:22:08 +0000 Subject: [PATCH 630/769] chore(release): publish - ui@0.17.1-next.9 - wallets-adapter@0.14.1-next.11 - wallets-demo@0.11.1-next.40 - widget-embedded@0.14.1-next.13 - wallets-adapter-demo@0.12.1-next.39 - widget-playground@0.12.1-next.52 - widget-iframe@0.12.1-next.51 - widget-app@0.12.1-next.51 Affected packages: ui@0.17.1-next.9,wallets-adapter@0.14.1-next.11,wallets-demo@0.11.1-next.40,widget-embedded@0.14.1-next.13,wallets-adapter-demo@0.12.1-next.39,widget-playground@0.12.1-next.52,widget-iframe@0.12.1-next.51,widget-app@0.12.1-next.51 --- examples/wallets-adapter-demo/package.json | 4 ++-- examples/wallets-demo/package.json | 4 ++-- wallets/wallets-adapter/package.json | 4 ++-- widget/app/package.json | 4 ++-- widget/embedded/package.json | 4 ++-- widget/iframe/package.json | 4 ++-- widget/playground/package.json | 7 +++---- widget/ui/package.json | 2 +- 8 files changed, 16 insertions(+), 17 deletions(-) diff --git a/examples/wallets-adapter-demo/package.json b/examples/wallets-adapter-demo/package.json index 3dee9c229a..9be536ef7b 100644 --- a/examples/wallets-adapter-demo/package.json +++ b/examples/wallets-adapter-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter-demo", - "version": "0.12.1-next.38", + "version": "0.12.1-next.39", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.3", - "@rango-dev/wallets-adapter": "^0.14.1-next.10", + "@rango-dev/wallets-adapter": "^0.14.1-next.11", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/wallets-demo/package.json b/examples/wallets-demo/package.json index 01047e27c3..341ab22b99 100644 --- a/examples/wallets-demo/package.json +++ b/examples/wallets-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-demo", - "version": "0.11.1-next.39", + "version": "0.11.1-next.40", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.3", - "@rango-dev/ui": "^0.17.1-next.8", + "@rango-dev/ui": "^0.17.1-next.9", "@rango-dev/wallets-react": "^0.3.1-next.1", "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-sdk": "^0.1.35", diff --git a/wallets/wallets-adapter/package.json b/wallets/wallets-adapter/package.json index c0b402f258..04b7608dc2 100644 --- a/wallets/wallets-adapter/package.json +++ b/wallets/wallets-adapter/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter", - "version": "0.14.1-next.10", + "version": "0.14.1-next.11", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -24,7 +24,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.3", - "@rango-dev/ui": "^0.17.1-next.8", + "@rango-dev/ui": "^0.17.1-next.9", "@rango-dev/wallets-react": "^0.3.1-next.1", "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" diff --git a/widget/app/package.json b/widget/app/package.json index cf0eec717f..62d4235294 100644 --- a/widget/app/package.json +++ b/widget/app/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-app", - "version": "0.12.1-next.50", + "version": "0.12.1-next.51", "license": "MIT", "private": true, "source": "public/index.html", @@ -14,7 +14,7 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.12", + "@rango-dev/widget-embedded": "^0.14.1-next.13", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0" diff --git a/widget/embedded/package.json b/widget/embedded/package.json index 98d26d2148..740adaa86c 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.14.1-next.12", + "version": "0.14.1-next.13", "license": "MIT", "type": "module", "main": "dist/index.js", @@ -23,7 +23,7 @@ "@rango-dev/queue-manager-core": "^0.17.0", "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.2", "@rango-dev/queue-manager-react": "^0.17.0", - "@rango-dev/ui": "^0.17.1-next.8", + "@rango-dev/ui": "^0.17.1-next.9", "@rango-dev/wallets-react": "^0.3.1-next.1", "@rango-dev/wallets-shared": "^0.17.1-next.0", "bignumber.js": "^9.1.1", diff --git a/widget/iframe/package.json b/widget/iframe/package.json index 29c892b6c5..9ee5413809 100644 --- a/widget/iframe/package.json +++ b/widget/iframe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-iframe", - "version": "0.12.1-next.50", + "version": "0.12.1-next.51", "license": "MIT", "private": true, "source": "src/index.ts", @@ -13,6 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.12" + "@rango-dev/widget-embedded": "^0.14.1-next.13" } } diff --git a/widget/playground/package.json b/widget/playground/package.json index 4748d1f987..82dadb6b15 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-playground", - "version": "0.12.1-next.51", + "version": "0.12.1-next.52", "license": "MIT", "private": true, "source": "public/index.html", @@ -18,15 +18,14 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.3", - "@rango-dev/ui": "^0.17.1-next.8", + "@rango-dev/ui": "^0.17.1-next.9", "@rango-dev/wallets-react": "^0.3.1-next.1", "@rango-dev/wallets-shared": "^0.17.1-next.0", - "@rango-dev/widget-embedded": "^0.14.1-next.12", + "@rango-dev/widget-embedded": "^0.14.1-next.13", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-color": "^2.19.3", "react-dom": "^18.2.0", - "react-color": "^2.19.3", "react-router-dom": "^6.10.0", "react-syntax-highlighter": "^15.5.0", "stringify-object": "^5.0.0", diff --git a/widget/ui/package.json b/widget/ui/package.json index a18d9a4716..444e5ac179 100644 --- a/widget/ui/package.json +++ b/widget/ui/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/ui", - "version": "0.17.1-next.8", + "version": "0.17.1-next.9", "license": "MIT", "type": "module", "module": "./dist/index.js", From 84ed7f05369b2e7bdc85b8c81b7ffa62a6d49a39 Mon Sep 17 00:00:00 2001 From: samobasquiat Date: Sat, 4 Nov 2023 11:56:30 +0000 Subject: [PATCH 631/769] feat: implement liquidity sources for playground --- widget/embedded/src/types/config.ts | 3 + widget/embedded/src/utils/settings.ts | 2 +- widget/playground/src/App.tsx | 2 +- .../ExportConfigModal/ExportConfigModal.tsx | 2 +- .../ExportConfigModal.types.tsx | 2 +- .../src/components/MultiList/MultiList.tsx | 44 +-- .../components/MultiList/MultiList.types.ts | 16 +- .../components/MultiSelect/MultiSelect.tsx | 5 +- .../MultiSelect/MultiSelect.types.ts | 2 +- .../src/components/WalletsConfig/index.tsx | 13 +- .../DefaultChainAndToken.tsx | 2 +- .../FunctionalLayout.Liquidities.tsx | 149 +++++++++++ .../FunctionalLayout.Wallets.tsx | 3 +- .../FunctionalLayout.helpers.ts | 24 ++ .../FunctionalLayout.styles.ts | 4 + .../FunctionalLayout/FunctionalLayout.tsx | 10 + .../FunctionalLayout.types.ts | 3 + .../SupportedBlockchains.tsx | 2 +- widget/playground/src/helpers.ts | 251 ------------------ widget/playground/src/services/httpService.ts | 7 +- widget/playground/src/store/config.ts | 9 +- widget/playground/src/utils/blockchains.ts | 27 ++ widget/playground/src/utils/common.ts | 79 ++++++ widget/playground/src/{ => utils}/configs.ts | 0 widget/playground/src/utils/export.ts | 124 +++++++++ 25 files changed, 487 insertions(+), 298 deletions(-) create mode 100644 widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Liquidities.tsx create mode 100644 widget/playground/src/containers/FunctionalLayout/FunctionalLayout.helpers.ts delete mode 100755 widget/playground/src/helpers.ts create mode 100644 widget/playground/src/utils/blockchains.ts rename widget/playground/src/{ => utils}/configs.ts (100%) create mode 100755 widget/playground/src/utils/export.ts diff --git a/widget/embedded/src/types/config.ts b/widget/embedded/src/types/config.ts index a49a6b2cff..7457611c09 100644 --- a/widget/embedded/src/types/config.ts +++ b/widget/embedded/src/types/config.ts @@ -121,6 +121,8 @@ export type BlockchainAndTokenConfig = { * If `externalWallets` is `true`, you should add `WidgetWallets` to your app. * @property {Asset} pinnedTokens - The `pinnedTokens` property is an optional array of `Asset` objects that * you could use to pin tokens of your choice to the top of the token list. + * @property {boolean} includeNewLiquiditySources - The `includeNewLiquiditySources` property is a boolean value that when you + * set it to true, whenever a new liquidity source is added, it will be added to your list as well. */ export type WidgetConfig = { apiKey: string; @@ -137,4 +139,5 @@ export type WidgetConfig = { theme?: WidgetTheme; externalWallets?: boolean; pinnedTokens?: Asset[]; + includeNewLiquiditySources?: boolean; }; diff --git a/widget/embedded/src/utils/settings.ts b/widget/embedded/src/utils/settings.ts index 20f496f423..9f5437fa79 100644 --- a/widget/embedded/src/utils/settings.ts +++ b/widget/embedded/src/utils/settings.ts @@ -33,7 +33,7 @@ export function getUniqueSwappersGroups( let isSupportedSwapper = true; if (supportedSwappers) { isSupportedSwapper = supportedSwappers.some( - (supportedItem) => supportedItem === swapperItem.title + (supportedItem) => supportedItem === swapperItem.swapperGroup ); } diff --git a/widget/playground/src/App.tsx b/widget/playground/src/App.tsx index 73ddc9f260..1fc6399cac 100644 --- a/widget/playground/src/App.tsx +++ b/widget/playground/src/App.tsx @@ -2,11 +2,11 @@ import { Widget, WidgetWallets } from '@rango-dev/widget-embedded'; import React, { useEffect } from 'react'; import { Route, Routes } from 'react-router-dom'; -import { RANGO_PUBLIC_API_KEY, WC_PROJECT_ID } from './configs'; import { ConfigContainer } from './containers/configContainer'; import { useTheme } from './hooks/useTheme'; import { useConfigStore } from './store/config'; import { useMetaStore } from './store/meta'; +import { RANGO_PUBLIC_API_KEY, WC_PROJECT_ID } from './utils/configs'; export function App() { const { activeStyle } = useTheme(); diff --git a/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx b/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx index d7eb936ae9..219a358db7 100644 --- a/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx +++ b/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx @@ -18,9 +18,9 @@ import { prism, } from 'react-syntax-highlighter/dist/esm/styles/prism'; -import { filterConfig, formatConfig } from '../../helpers'; import { useTheme } from '../../hooks/useTheme'; import { initialConfig, useConfigStore } from '../../store/config'; +import { filterConfig, formatConfig } from '../../utils/export'; import { CodeBlock } from './CodeBlock'; import { diff --git a/widget/playground/src/components/ExportConfigModal/ExportConfigModal.types.tsx b/widget/playground/src/components/ExportConfigModal/ExportConfigModal.types.tsx index ee3b058ac2..bbbbc103ec 100644 --- a/widget/playground/src/components/ExportConfigModal/ExportConfigModal.types.tsx +++ b/widget/playground/src/components/ExportConfigModal/ExportConfigModal.types.tsx @@ -1,6 +1,6 @@ import type { WidgetConfig } from '@rango-dev/widget-embedded'; -import { getEmbeddedCode, getIframeCode } from '../../helpers'; +import { getEmbeddedCode, getIframeCode } from '../../utils/export'; export type ExportType = 'embedded' | 'iframe' | 'config'; export type Language = 'jsx' | 'javascript'; diff --git a/widget/playground/src/components/MultiList/MultiList.tsx b/widget/playground/src/components/MultiList/MultiList.tsx index 4e4111c91d..0f634e94f5 100644 --- a/widget/playground/src/components/MultiList/MultiList.tsx +++ b/widget/playground/src/components/MultiList/MultiList.tsx @@ -28,7 +28,15 @@ import { } from './MultiList.styles'; export function MultiList(props: MultiListPropTypes) { - const { defaultSelectedItems, list, icon, label, type, onChange } = props; + const { + defaultSelectedItems, + list, + icon, + label, + type, + onChange, + showCategory, + } = props; const [category, setCategory] = useState('ALL'); const [searchValue, setSearchValue] = useState(''); const [selectedItems, setSelectedItems] = useState( @@ -44,10 +52,10 @@ export function MultiList(props: MultiListPropTypes) { : list; // Filter the list based on selected category - const cotegoryList = - category === 'ALL' + const categoryList = + category === 'ALL' || !showCategory ? filteredList - : filteredList.filter((item) => item.networks.includes(category)); + : filteredList.filter((item) => item.networks?.includes(category)); // Handle item selection/unselection const handleChangeList = (item: string) => { @@ -60,15 +68,15 @@ export function MultiList(props: MultiListPropTypes) { // Select or deselect all items in the category list const handleAllSelectedClick = (type: 'select' | 'deselect') => () => { - const cotegoryListTypes = cotegoryList.map((c) => c.name); + const categoryListTypes = categoryList.map((c) => c.name); if (type === 'select') { const newSelectedItems = Array.from( - new Set([...selectedItems, ...cotegoryListTypes]) + new Set([...selectedItems, ...categoryListTypes]) ); setSelectedItems(newSelectedItems); } else { const filteredCategories = selectedItems.filter( - (item) => !cotegoryListTypes.includes(item) + (item) => !categoryListTypes.includes(item) ); setSelectedItems(filteredCategories); } @@ -79,7 +87,7 @@ export function MultiList(props: MultiListPropTypes) { }; // Mapping the items to their respective components - const items = cotegoryList.map((item) => { + const items = categoryList.map((item) => { const { logo, title, name } = item; return { start: , @@ -96,8 +104,8 @@ export function MultiList(props: MultiListPropTypes) { const resultsNotFound = !items.length && !!searchValue; const isAllCategorySelected = React.useMemo( - () => selectDeselectHandler(selectedItems, cotegoryList), - [selectedItems, cotegoryList] + () => selectDeselectHandler(selectedItems, categoryList), + [selectedItems, categoryList] ); return ( <> @@ -114,12 +122,16 @@ export function MultiList(props: MultiListPropTypes) { - - + {showCategory && ( + <> + + + + )} setSearchValue(e.target.value)} value={searchValue} diff --git a/widget/playground/src/components/MultiList/MultiList.types.ts b/widget/playground/src/components/MultiList/MultiList.types.ts index 48411d0569..83fb451b46 100644 --- a/widget/playground/src/components/MultiList/MultiList.types.ts +++ b/widget/playground/src/components/MultiList/MultiList.types.ts @@ -1,24 +1,16 @@ -interface WalletProps { - type: 'Wallets'; -} - -interface BlockchainProps { - type: 'Blockchains'; -} - -interface CommonProps { +export interface MultiListPropTypes { + type: 'Bridges' | 'DEXs' | 'Blockchains' | 'Wallets'; label: string; icon: React.ReactNode; onChange: (items?: string[]) => void; defaultSelectedItems: string[]; + showCategory?: boolean; list: MapSupportedList[]; } -export type MultiListPropTypes = CommonProps & (BlockchainProps | WalletProps); - export type MapSupportedList = { title: string; logo: string; name: string; - networks: string[]; + networks?: string[]; }; diff --git a/widget/playground/src/components/MultiSelect/MultiSelect.tsx b/widget/playground/src/components/MultiSelect/MultiSelect.tsx index b4a10538c0..a3778ae4fc 100644 --- a/widget/playground/src/components/MultiSelect/MultiSelect.tsx +++ b/widget/playground/src/components/MultiSelect/MultiSelect.tsx @@ -71,15 +71,16 @@ export function MultiSelect(props: PropTypes) { defaultSelectedItems={defaultSelectedItems} type={type} list={list} + showCategory={type === 'Wallets' || type === 'Blockchains'} icon={ - type === 'Blockchains' ? ( + type !== 'Wallets' ? ( ) : ( ) } onChange={handleListChange} - label={`Supported ${type}`} + label={label} /> )} diff --git a/widget/playground/src/components/MultiSelect/MultiSelect.types.ts b/widget/playground/src/components/MultiSelect/MultiSelect.types.ts index 84360f1222..fc861c6398 100644 --- a/widget/playground/src/components/MultiSelect/MultiSelect.types.ts +++ b/widget/playground/src/components/MultiSelect/MultiSelect.types.ts @@ -1,6 +1,6 @@ import type { MultiListPropTypes } from '../MultiList/MultiList.types'; -export type PropTypes = MultiListPropTypes & { +export type PropTypes = Omit & { value?: string[]; }; diff --git a/widget/playground/src/components/WalletsConfig/index.tsx b/widget/playground/src/components/WalletsConfig/index.tsx index f25f9cc90f..e713d77b2b 100644 --- a/widget/playground/src/components/WalletsConfig/index.tsx +++ b/widget/playground/src/components/WalletsConfig/index.tsx @@ -1,13 +1,16 @@ -import React from 'react'; +import type { WalletType } from '@rango-dev/wallets-shared'; + +import { allProviders } from '@rango-dev/provider-all'; import { Checkbox, Divider, Typography } from '@rango-dev/ui'; import { Provider } from '@rango-dev/wallets-react'; +import React from 'react'; + +import { useConfigStore } from '../../store/config'; +import { WC_PROJECT_ID } from '../../utils/configs'; import { ConfigurationContainer } from '../ChainsConfig'; + import { ExternalWallet } from './ExternalWallet'; -import { allProviders } from '@rango-dev/provider-all'; -import { useConfigStore } from '../../store/config'; import { InternalWallets } from './InternalWallets'; -import { WalletType } from '@rango-dev/wallets-shared'; -import { WC_PROJECT_ID } from '../../configs'; const providers = allProviders({ walletconnect2: { diff --git a/widget/playground/src/containers/DefaultChainAndToken/DefaultChainAndToken.tsx b/widget/playground/src/containers/DefaultChainAndToken/DefaultChainAndToken.tsx index e62b7529de..6988826ea4 100644 --- a/widget/playground/src/containers/DefaultChainAndToken/DefaultChainAndToken.tsx +++ b/widget/playground/src/containers/DefaultChainAndToken/DefaultChainAndToken.tsx @@ -6,9 +6,9 @@ import React, { useState } from 'react'; import { ItemPicker } from '../../components/ItemPicker'; import { OverlayPanel } from '../../components/OverlayPanel'; import { SingleList } from '../../components/SingleList'; -import { tokensAreEqual, tokenToString } from '../../helpers'; import { useConfigStore } from '../../store/config'; import { useMetaStore } from '../../store/meta'; +import { tokensAreEqual, tokenToString } from '../../utils/common'; import { ModalState } from '../FunctionalLayout/FunctionalLayout.types'; export function DefaultChainAndToken({ type }: { type: Type }) { diff --git a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Liquidities.tsx b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Liquidities.tsx new file mode 100644 index 0000000000..2365643c74 --- /dev/null +++ b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Liquidities.tsx @@ -0,0 +1,149 @@ +import type { LiquidityType } from './FunctionalLayout.types'; + +import { ChainsIcon, Checkbox, Divider, Typography } from '@rango-dev/ui'; +import React from 'react'; + +import { MultiSelect } from '../../components/MultiSelect/MultiSelect'; +import { useConfigStore } from '../../store/config'; +import { useMetaStore } from '../../store/meta'; +import { removeDuplicates } from '../../utils/common'; + +import { filterByType, getLiquidityValue } from './FunctionalLayout.helpers'; +import { IncludeSourceText } from './FunctionalLayout.styles'; + +export function LiquiditiesSection() { + const { + onChangeSources, + onChangeBooleansConfig, + config: { liquiditySources, includeNewLiquiditySources }, + } = useConfigStore(); + + const { + meta: { swappers }, + } = useMetaStore(); + + const excludedMode = includeNewLiquiditySources ?? true; + const uniqueSwappersGroup = removeDuplicates(swappers, 'swapperGroup'); + + const defaultSelectedItems = (type: LiquidityType) => + liquiditySources?.filter((l) => + uniqueSwappersGroup.find( + (swapper) => swapper.swapperGroup === l && filterByType(type, swapper) + ) + ); + + const liquiditiesList = (type: LiquidityType) => + uniqueSwappersGroup + .filter((swapper) => filterByType(type, swapper)) + .map(({ title, logo, swapperGroup }) => ({ + logo, + title, + name: swapperGroup, + })); + + const selectedDexs = defaultSelectedItems('DEX'); + const selectedBridges = defaultSelectedItems('BRIDGE'); + const allDexs = liquiditiesList('DEX'); + const allBridges = liquiditiesList('BRIDGE'); + const allDexsNames = allDexs.map((dex) => dex.name); + const allBridgeNames = allBridges.map((bridge) => bridge.name); + const isAllSelected = !liquiditySources; + + const isJustAllBridgeSelected = + !isAllSelected && selectedBridges?.length === allBridges.length; + const isJustAllDexSelected = + !isAllSelected && selectedDexs?.length === allDexs.length; + + const handleChange = ( + categories: string[], + otherCategoryList: string[], + currentSelection?: string[], + previousSelection?: string[] + ) => { + const currentConfig = removeDuplicates([ + ...(liquiditySources || (excludedMode ? [] : otherCategoryList)), + ...categories, + ]); + + let sources; + if (currentSelection) { + sources = removeDuplicates([ + ...(previousSelection || (excludedMode ? [] : otherCategoryList)), + ...currentSelection, + ]); + } else if (currentConfig.length === uniqueSwappersGroup.length) { + sources = excludedMode + ? removeDuplicates([...categories, ...currentConfig]) + : undefined; + } else { + sources = currentConfig; + } + + onChangeSources(sources); + }; + + const handleCheckChange = (checked: boolean) => { + onChangeBooleansConfig('includeNewLiquiditySources', checked); + onChangeSources(undefined); + }; + + return ( + <> + } + type="DEXs" + value={getLiquidityValue( + isAllSelected, + excludedMode, + isJustAllDexSelected, + selectedDexs + )} + defaultSelectedItems={ + selectedDexs || (excludedMode ? [] : allDexsNames) + } + list={allDexs} + onChange={(items) => + handleChange(allDexsNames, allBridgeNames, items, selectedBridges) + } + /> + + } + type="Bridges" + value={getLiquidityValue( + isAllSelected, + excludedMode, + isJustAllBridgeSelected, + selectedBridges + )} + defaultSelectedItems={ + selectedBridges || (excludedMode ? [] : allBridgeNames) + } + list={allBridges} + onChange={(items) => + handleChange(allBridgeNames, allDexsNames, items, selectedDexs) + } + /> + + + Include New Sources + + } + /> + + + + If we add a new liquidity source, it will be added to your list as + well. + + + + ); +} diff --git a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx index 83afe8a051..4840dea4a6 100644 --- a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx +++ b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.Wallets.tsx @@ -14,8 +14,9 @@ import React from 'react'; import { MultiSelect } from '../../components/MultiSelect/MultiSelect'; import { NOT_FOUND } from '../../constants'; -import { excludedWallets, getCategoryNetworks } from '../../helpers'; import { useConfigStore } from '../../store/config'; +import { getCategoryNetworks } from '../../utils/blockchains'; +import { excludedWallets } from '../../utils/common'; import { ExternalSection, diff --git a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.helpers.ts b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.helpers.ts new file mode 100644 index 0000000000..b887c39450 --- /dev/null +++ b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.helpers.ts @@ -0,0 +1,24 @@ +import type { LiquidityType } from './FunctionalLayout.types'; +import type { SwapperMeta } from 'rango-sdk'; + +export const filterByType = (type: LiquidityType, swapper: SwapperMeta) => { + return ( + (type === 'DEX' && swapper.types.includes('DEX')) || + (type === 'BRIDGE' && !swapper.types.includes('DEX')) + ); +}; + +export const getLiquidityValue = ( + isAllSelected: boolean, + excludedMode: boolean, + isAllSelectedInCategory: boolean, + selectedList?: string[] +) => { + return isAllSelected + ? excludedMode + ? [] + : undefined + : isAllSelectedInCategory + ? undefined + : selectedList; +}; diff --git a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.styles.ts b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.styles.ts index cb78ee70e1..b3e1f4fb96 100644 --- a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.styles.ts +++ b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.styles.ts @@ -54,3 +54,7 @@ export const FromAmount = styled('div', { borderColor: '$info300', }, }); + +export const IncludeSourceText = styled('div', { + paddingLeft: '$24', +}); diff --git a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.tsx b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.tsx index e0db42da80..bd611c929e 100644 --- a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.tsx +++ b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.tsx @@ -4,6 +4,7 @@ import React, { useState } from 'react'; import { Collapse } from '../../components/Collapse'; import { FromSection } from './FunctionalLayout.From'; +// import { LiquiditiesSection } from './FunctionalLayout.Liquidities'; import { Layout } from './FunctionalLayout.styles'; import { ToSection } from './FunctionalLayout.To'; import { FunctionalCollapseState } from './FunctionalLayout.types'; @@ -44,6 +45,15 @@ export function FunctionalLayout() { toggle={handleOpenCollapse(FunctionalCollapseState.WALLET)}> + {/* + // TODO: uncomment when liquidity source in widget is ready + + + + */} ); diff --git a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.types.ts b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.types.ts index c5cbeb6a25..64380f1ad8 100644 --- a/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.types.ts +++ b/widget/playground/src/containers/FunctionalLayout/FunctionalLayout.types.ts @@ -1,6 +1,7 @@ export enum FunctionalCollapseState { FROM = 'from', WALLET = 'wallet', + LIQUIDITY_SOURCE = 'liquidity source', TO = 'to', } @@ -8,3 +9,5 @@ export enum ModalState { DEFAULT_BLOCKCHAIN = 'blockchain', DEFAULT_TOKEN = 'token', } + +export type LiquidityType = 'DEX' | 'BRIDGE'; diff --git a/widget/playground/src/containers/SupportedBlockchains/SupportedBlockchains.tsx b/widget/playground/src/containers/SupportedBlockchains/SupportedBlockchains.tsx index 6772bc75cf..022412d727 100644 --- a/widget/playground/src/containers/SupportedBlockchains/SupportedBlockchains.tsx +++ b/widget/playground/src/containers/SupportedBlockchains/SupportedBlockchains.tsx @@ -4,9 +4,9 @@ import { ChainsIcon } from '@rango-dev/ui'; import React from 'react'; import { MultiSelect } from '../../components/MultiSelect/MultiSelect'; -import { getCategoryNetworks } from '../../helpers'; import { useConfigStore } from '../../store/config'; import { useMetaStore } from '../../store/meta'; +import { getCategoryNetworks } from '../../utils/blockchains'; export function SupportedBlockchains({ type }: { type: Type }) { const { diff --git a/widget/playground/src/helpers.ts b/widget/playground/src/helpers.ts deleted file mode 100755 index 9f831d4443..0000000000 --- a/widget/playground/src/helpers.ts +++ /dev/null @@ -1,251 +0,0 @@ -import type { WidgetConfig } from '@rango-dev/widget-embedded'; -import type { Asset, BlockchainMeta, Token } from 'rango-sdk'; - -import { BlockchainCategories, WalletState } from '@rango-dev/ui'; -import { WalletTypes } from '@rango-dev/wallets-shared'; -import { TransactionType } from 'rango-sdk'; -import stringifyObject from 'stringify-object'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import subtractObject from 'subtract-object'; - -import { NOT_FOUND } from './constants'; - -export const excludedWallets = [ - WalletTypes.STATION, - WalletTypes.LEAP, - WalletTypes.SAFE, - WalletTypes.MY_TON_WALLET, - WalletTypes.WALLET_CONNECT_2, - WalletTypes.BINANCE_CHAIN, -]; - -export const onChangeMultiSelects = ( - value: string, - values: any[] | undefined, - list: any[], - findIndex: (item: string) => boolean -): string[] | undefined => { - if (value === 'empty') { - return []; - } else if (value === 'all') { - return undefined; - } - if (!values) { - values = [...list]; - const index = list.findIndex(findIndex); - values.splice(index, 1); - return values; - } - values = [...values]; - const index = values.findIndex(findIndex); - if (index !== NOT_FOUND) { - values.splice(index, 1); - } else { - values.push(value); - } - if (values.length === list.length) { - return undefined; - } - return values; -}; - -export function tokensAreEqual(tokenA?: Asset, tokenB?: Asset) { - return ( - tokenA?.blockchain === tokenB?.blockchain && - tokenA?.symbol === tokenB?.symbol && - tokenA?.address === tokenB?.address - ); -} - -export const containsText = (text: string, searchText: string) => - text.toLowerCase().indexOf(searchText.toLowerCase()) > NOT_FOUND; - -export const filterTokens = (list: Token[], searchedFor: string) => - list.filter( - (token) => - containsText(token.symbol, searchedFor) || - containsText(token.address || '', searchedFor) || - containsText(token.name || '', searchedFor) - ); - -export const syntaxHighlight = (json: string) => { - json.replace(/&/g, '&').replace(//g, '>'); - return json.replace( - /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\\-]?\d+)?)/g, - function (match: string) { - let cls = 'string'; - if (/^"/.test(match)) { - if (/:$/.test(match)) { - cls = 'key'; - } - } - return `${match}`; - } - ); -}; - -export function clearEmpties>(obj: T): T { - for (const key in obj) { - if (!obj[key] || typeof obj[key] !== 'object') { - continue; - } - clearEmpties(obj[key]); - if (Object.keys(obj[key]).length === 0 && !Array.isArray(obj[key])) { - delete obj[key]; - } - } - return obj; -} - -export function filterConfig( - WidgetConfig: WidgetConfig, - initialConfig: WidgetConfig -) { - const config = { - ...WidgetConfig, - wallets: WidgetConfig.wallets?.filter( - (wallet) => typeof wallet === 'string' - ), - }; - - const userSelectedConfig = clearEmpties( - subtractObject( - JSON.parse(JSON.stringify(initialConfig)) as WidgetConfig, - JSON.parse(JSON.stringify(config)) - ) as WidgetConfig - ); - - const filteredConfigForExport = Object.assign({}, userSelectedConfig); - - if (!filteredConfigForExport.apiKey) { - filteredConfigForExport.apiKey = config.apiKey; - } - - if (!filteredConfigForExport.walletConnectProjectId) { - filteredConfigForExport.walletConnectProjectId = - config.walletConnectProjectId; - } - - return { userSelectedConfig, filteredConfigForExport }; -} - -export function getIframeCode(config: string) { - //TODO: update iframe script source address - return `
- - -`; -} - -export function getEmbeddedCode(config: string) { - return `import { Widget, WidgetConfig } from "@rango-dev/widget-embedded"; - -export default function App() { - - const config = ${insertAt(config, ' ', config.lastIndexOf('}'))} - - return ( -
- -
- ); -} -`; -} - -export function capitalizeTheFirstLetter(str: string): string { - return str.charAt(0).toUpperCase() + str.slice(1); -} - -export function insertAt( - originalString: string, - insertedString: string, - index: number -): string { - return originalString - .slice(0, index) - .concat(insertedString) - .concat(originalString.slice(index)); -} - -export function formatConfig(config: WidgetConfig) { - const indentation = ' '; - let formatedConfig: string = stringifyObject(config, { - indent: indentation, - }); - - formatedConfig = insertAt( - formatedConfig, - `// This API key is only for test purpose. Don't use it in production. - `, - formatedConfig.indexOf('apiKey') - ); - - formatedConfig = insertAt( - formatedConfig, - `// This project id is only for test purpose. Don't use it in production. - // Get your Wallet Connect project id from https://cloud.walletconnect.com/ - `, - formatedConfig.indexOf('walletConnectProjectId') - ); - - if (!!config.wallets) { - formatedConfig = insertAt( - formatedConfig, - `// You can add your external wallet to wallets - `, - formatedConfig.indexOf('wallets') - ); - } - - return formatedConfig; -} - -export const getStateWallet = (state: { - connected: boolean; - connecting: boolean; - installed: boolean; -}): WalletState => { - switch (true) { - case state.connected: - return WalletState.CONNECTED; - case state.connecting: - return WalletState.CONNECTING; - case !state.installed: - return WalletState.NOT_INSTALLED; - default: - return WalletState.DISCONNECTED; - } -}; - -export function getCategoryNetworks(chains: BlockchainMeta[]) { - const supportedNetworks: Set = new Set(); - - chains.forEach((chain) => { - switch (chain.type) { - case TransactionType.EVM: - supportedNetworks.add(BlockchainCategories.EVM); - break; - case TransactionType.COSMOS: - supportedNetworks.add(BlockchainCategories.COSMOS); - break; - case TransactionType.TRANSFER: - supportedNetworks.add(BlockchainCategories.UTXO); - break; - default: - supportedNetworks.add(BlockchainCategories.OTHER); - break; - } - }); - - return Array.from(supportedNetworks); -} - -export const tokenToString = (token: Asset) => - `${token.symbol}-${token.blockchain}-${token.address ?? ''}`; diff --git a/widget/playground/src/services/httpService.ts b/widget/playground/src/services/httpService.ts index edb890fd08..e7d3473bef 100644 --- a/widget/playground/src/services/httpService.ts +++ b/widget/playground/src/services/httpService.ts @@ -1,10 +1,13 @@ import { RangoClient } from 'rango-sdk'; -import { getConfig } from '../configs'; + +import { getConfig } from '../utils/configs'; let rangoClient: RangoClient | undefined = undefined; export const rango = () => { - if (rangoClient) return rangoClient; + if (rangoClient) { + return rangoClient; + } rangoClient = new RangoClient(getConfig('API_KEY')); return rangoClient; }; diff --git a/widget/playground/src/store/config.ts b/widget/playground/src/store/config.ts index 217040fe61..7b8d784aa1 100644 --- a/widget/playground/src/store/config.ts +++ b/widget/playground/src/store/config.ts @@ -12,7 +12,7 @@ import { create } from 'zustand'; import { persist } from 'zustand/middleware'; import { immer } from 'zustand/middleware/immer'; -import { getConfig } from '../configs'; +import { getConfig } from '../utils/configs'; import createSelectors from './selectors'; @@ -26,7 +26,11 @@ interface ConfigState { onChangeBlockChains: (chains?: string[], type?: Type) => void; onChangeTokens: (tokens?: Asset[], type?: Type) => void; onChangeBooleansConfig: ( - name: 'multiWallets' | 'customDestination' | 'externalWallets', + name: + | 'multiWallets' + | 'customDestination' + | 'externalWallets' + | 'includeNewLiquiditySources', value: boolean ) => void; onChangeBlockChain: (chain?: string, type?: Type) => void; @@ -83,6 +87,7 @@ export const initialConfig: WidgetConfig = { multiWallets: undefined, customDestination: undefined, language: undefined, + includeNewLiquiditySources: undefined, theme: { mode: 'auto', fontFamily: undefined, diff --git a/widget/playground/src/utils/blockchains.ts b/widget/playground/src/utils/blockchains.ts new file mode 100644 index 0000000000..6383e5e6ee --- /dev/null +++ b/widget/playground/src/utils/blockchains.ts @@ -0,0 +1,27 @@ +import type { BlockchainMeta } from 'rango-sdk'; + +import { BlockchainCategories } from '@rango-dev/ui'; +import { TransactionType } from 'rango-sdk'; + +export function getCategoryNetworks(chains: BlockchainMeta[]) { + const supportedNetworks: Set = new Set(); + + chains.forEach((chain) => { + switch (chain.type) { + case TransactionType.EVM: + supportedNetworks.add(BlockchainCategories.EVM); + break; + case TransactionType.COSMOS: + supportedNetworks.add(BlockchainCategories.COSMOS); + break; + case TransactionType.TRANSFER: + supportedNetworks.add(BlockchainCategories.UTXO); + break; + default: + supportedNetworks.add(BlockchainCategories.OTHER); + break; + } + }); + + return Array.from(supportedNetworks); +} diff --git a/widget/playground/src/utils/common.ts b/widget/playground/src/utils/common.ts index 50d4d05aca..4905c1ef2a 100644 --- a/widget/playground/src/utils/common.ts +++ b/widget/playground/src/utils/common.ts @@ -1,3 +1,9 @@ +import type { Asset, Token } from 'rango-sdk'; + +import { WalletTypes } from '@rango-dev/wallets-shared'; + +import { NOT_FOUND } from '../constants'; + export function shallowEqual( object1: { [x: string]: T | undefined }, object2: { [x: string]: T | undefined } @@ -17,3 +23,76 @@ export function shallowEqual( return true; } + +export const tokenToString = (token: Asset) => + `${token.symbol}-${token.blockchain}-${token.address ?? ''}`; + +export function removeDuplicates(arr: T[], key?: keyof T): T[] { + const seen = new Set(); + + return arr.filter( + (item) => + !key || + (typeof item[key] !== 'undefined' && + !seen.has(item[key]) && + seen.add(item[key])) + ); +} + +export function tokensAreEqual(tokenA?: Asset, tokenB?: Asset) { + return ( + tokenA?.blockchain === tokenB?.blockchain && + tokenA?.symbol === tokenB?.symbol && + tokenA?.address === tokenB?.address + ); +} + +export const containsText = (text: string, searchText: string) => + text.toLowerCase().indexOf(searchText.toLowerCase()) > NOT_FOUND; + +export const filterTokens = (list: Token[], searchedFor: string) => + list.filter( + (token) => + containsText(token.symbol, searchedFor) || + containsText(token.address || '', searchedFor) || + containsText(token.name || '', searchedFor) + ); + +export const excludedWallets = [ + WalletTypes.STATION, + WalletTypes.LEAP, + WalletTypes.SAFE, + WalletTypes.MY_TON_WALLET, + WalletTypes.WALLET_CONNECT_2, + WalletTypes.BINANCE_CHAIN, +]; + +export const onChangeMultiSelects = ( + value: string, + values: any[] | undefined, + list: any[], + findIndex: (item: string) => boolean +): string[] | undefined => { + if (value === 'empty') { + return []; + } else if (value === 'all') { + return undefined; + } + if (!values) { + values = [...list]; + const index = list.findIndex(findIndex); + values.splice(index, 1); + return values; + } + values = [...values]; + const index = values.findIndex(findIndex); + if (index !== NOT_FOUND) { + values.splice(index, 1); + } else { + values.push(value); + } + if (values.length === list.length) { + return undefined; + } + return values; +}; diff --git a/widget/playground/src/configs.ts b/widget/playground/src/utils/configs.ts similarity index 100% rename from widget/playground/src/configs.ts rename to widget/playground/src/utils/configs.ts diff --git a/widget/playground/src/utils/export.ts b/widget/playground/src/utils/export.ts new file mode 100755 index 0000000000..a20a3847e5 --- /dev/null +++ b/widget/playground/src/utils/export.ts @@ -0,0 +1,124 @@ +import type { WidgetConfig } from '@rango-dev/widget-embedded'; + +import stringifyObject from 'stringify-object'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +import subtractObject from 'subtract-object'; + +export function clearEmpties>(obj: T): T { + for (const key in obj) { + if (!obj[key] || typeof obj[key] !== 'object') { + continue; + } + clearEmpties(obj[key]); + if (Object.keys(obj[key]).length === 0 && !Array.isArray(obj[key])) { + delete obj[key]; + } + } + return obj; +} + +export function filterConfig( + WidgetConfig: WidgetConfig, + initialConfig: WidgetConfig +) { + const config = { + ...WidgetConfig, + wallets: WidgetConfig.wallets?.filter( + (wallet) => typeof wallet === 'string' + ), + }; + + const userSelectedConfig = clearEmpties( + subtractObject( + JSON.parse(JSON.stringify(initialConfig)) as WidgetConfig, + JSON.parse(JSON.stringify(config)) + ) as WidgetConfig + ); + + const filteredConfigForExport = Object.assign({}, userSelectedConfig); + + if (!filteredConfigForExport.apiKey) { + filteredConfigForExport.apiKey = config.apiKey; + } + + if (!filteredConfigForExport.walletConnectProjectId) { + filteredConfigForExport.walletConnectProjectId = + config.walletConnectProjectId; + } + + return { userSelectedConfig, filteredConfigForExport }; +} + +export function getIframeCode(config: string) { + //TODO: update iframe script source address + return `
+ + +`; +} + +export function getEmbeddedCode(config: string) { + return `import { Widget, WidgetConfig } from "@rango-dev/widget-embedded"; + +export default function App() { + + const config = ${insertAt(config, ' ', config.lastIndexOf('}'))} + + return ( +
+ +
+ ); +} +`; +} + +export function insertAt( + originalString: string, + insertedString: string, + index: number +): string { + return originalString + .slice(0, index) + .concat(insertedString) + .concat(originalString.slice(index)); +} + +export function formatConfig(config: WidgetConfig) { + const indentation = ' '; + let formatedConfig: string = stringifyObject(config, { + indent: indentation, + }); + + formatedConfig = insertAt( + formatedConfig, + `// This API key is only for test purpose. Don't use it in production. + `, + formatedConfig.indexOf('apiKey') + ); + + formatedConfig = insertAt( + formatedConfig, + `// This project id is only for test purpose. Don't use it in production. + // Get your Wallet Connect project id from https://cloud.walletconnect.com/ + `, + formatedConfig.indexOf('walletConnectProjectId') + ); + + if (!!config.wallets) { + formatedConfig = insertAt( + formatedConfig, + `// You can add your external wallet to wallets + `, + formatedConfig.indexOf('wallets') + ); + } + + return formatedConfig; +} From f77764aa2a77b3a00541a9cb8ed3ae72494fcaa7 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sat, 4 Nov 2023 12:26:11 +0000 Subject: [PATCH 632/769] chore(release): publish - widget-embedded@0.14.1-next.14 - widget-playground@0.12.1-next.53 - widget-iframe@0.12.1-next.52 - widget-app@0.12.1-next.52 Affected packages: widget-embedded@0.14.1-next.14,widget-playground@0.12.1-next.53,widget-iframe@0.12.1-next.52,widget-app@0.12.1-next.52 --- widget/app/package.json | 4 ++-- widget/embedded/package.json | 2 +- widget/iframe/package.json | 4 ++-- widget/playground/package.json | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/widget/app/package.json b/widget/app/package.json index 62d4235294..319e3c5320 100644 --- a/widget/app/package.json +++ b/widget/app/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-app", - "version": "0.12.1-next.51", + "version": "0.12.1-next.52", "license": "MIT", "private": true, "source": "public/index.html", @@ -14,7 +14,7 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.13", + "@rango-dev/widget-embedded": "^0.14.1-next.14", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0" diff --git a/widget/embedded/package.json b/widget/embedded/package.json index 740adaa86c..7fa7732fd8 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.14.1-next.13", + "version": "0.14.1-next.14", "license": "MIT", "type": "module", "main": "dist/index.js", diff --git a/widget/iframe/package.json b/widget/iframe/package.json index 9ee5413809..b474d88d23 100644 --- a/widget/iframe/package.json +++ b/widget/iframe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-iframe", - "version": "0.12.1-next.51", + "version": "0.12.1-next.52", "license": "MIT", "private": true, "source": "src/index.ts", @@ -13,6 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.13" + "@rango-dev/widget-embedded": "^0.14.1-next.14" } } diff --git a/widget/playground/package.json b/widget/playground/package.json index 82dadb6b15..32120202ee 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-playground", - "version": "0.12.1-next.52", + "version": "0.12.1-next.53", "license": "MIT", "private": true, "source": "public/index.html", @@ -21,7 +21,7 @@ "@rango-dev/ui": "^0.17.1-next.9", "@rango-dev/wallets-react": "^0.3.1-next.1", "@rango-dev/wallets-shared": "^0.17.1-next.0", - "@rango-dev/widget-embedded": "^0.14.1-next.13", + "@rango-dev/widget-embedded": "^0.14.1-next.14", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-color": "^2.19.3", From 551e8ef93786a92a950bd54a2b8af24bad0259a1 Mon Sep 17 00:00:00 2001 From: Nikaru Date: Sat, 4 Nov 2023 12:27:42 +0000 Subject: [PATCH 633/769] feat: support multi languages --- translations/en.po | 32 +++---- translations/es.po | 43 ++++++---- translations/fr.po | 32 +++---- translations/jp.po | 32 +++---- widget/embedded/src/Widget.tsx | 11 ++- .../components/NoRoutes/NoRoutes.helper.ts | 8 +- .../src/components/NoRoutes/NoRoutes.tsx | 2 +- .../components/RouteErrors/RouteErrors.tsx | 4 +- .../RouteErrors/RouteErrorsModal.tsx | 12 +-- widget/embedded/src/constants/errors.ts | 84 +++++++++--------- widget/embedded/src/constants/languages.ts | 19 +++++ widget/embedded/src/constants/messages.ts | 12 +-- widget/embedded/src/hooks/useConfirmSwap.ts | 2 +- widget/embedded/src/hooks/useLanguage.ts | 27 ++++++ widget/embedded/src/pages/Home.tsx | 4 +- widget/embedded/src/pages/LanguagePage.tsx | 55 ++++-------- widget/embedded/src/store/settings.ts | 15 +++- widget/embedded/src/utils/swap.ts | 20 ++--- widget/ui/package.json | 10 ++- widget/ui/src/components/Flags/English.tsx | 35 ++++++++ .../src/components/Flags/Flags.constants.ts | 1 + widget/ui/src/components/Flags/Flags.types.ts | 3 + widget/ui/src/components/Flags/French.tsx | 26 ++++++ widget/ui/src/components/Flags/Japanese.tsx | 25 ++++++ widget/ui/src/components/Flags/Spanish.tsx | 85 +++++++++++++++++++ widget/ui/src/components/Flags/index.ts | 8 ++ .../components/I18nManager/I18nManager.tsx | 23 +++-- widget/ui/src/components/index.ts | 1 + 28 files changed, 440 insertions(+), 191 deletions(-) create mode 100644 widget/embedded/src/constants/languages.ts create mode 100644 widget/embedded/src/hooks/useLanguage.ts create mode 100644 widget/ui/src/components/Flags/English.tsx create mode 100644 widget/ui/src/components/Flags/Flags.constants.ts create mode 100644 widget/ui/src/components/Flags/Flags.types.ts create mode 100644 widget/ui/src/components/Flags/French.tsx create mode 100644 widget/ui/src/components/Flags/Japanese.tsx create mode 100644 widget/ui/src/components/Flags/Spanish.tsx create mode 100644 widget/ui/src/components/Flags/index.ts diff --git a/translations/en.po b/translations/en.po index 8e71d94965..b6c6026cd9 100644 --- a/translations/en.po +++ b/translations/en.po @@ -630,28 +630,13 @@ msgstr "Max" #~ msgid "To" #~ msgstr "To" -#. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:31 -#~ msgid "English" -#~ msgstr "English" - #. js-lingui-explicit-id #: widget/embedded/src/pages/LanguagePage.tsx:42 -#~ msgid "French" -#~ msgstr "French" - -#. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:53 -#~ msgid "Spanish" -#~ msgstr "Spanish" - -#. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:65 #~ msgid "Language" #~ msgstr "Language" #. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:72 +#: widget/embedded/src/pages/LanguagePage.tsx:49 #~ msgid "language" #~ msgstr "language" @@ -822,6 +807,21 @@ msgstr "Max" #~ msgid "second" #~ msgstr "second" +#. js-lingui-explicit-id +#: widget/embedded/src/pages/LanguagePage.tsx:31 +#~ msgid "English" +#~ msgstr "English" + +#. js-lingui-explicit-id +#: widget/embedded/src/pages/LanguagePage.tsx:42 +#~ msgid "French" +#~ msgstr "French" + +#. js-lingui-explicit-id +#: widget/embedded/src/pages/LanguagePage.tsx:53 +#~ msgid "Spanish" +#~ msgstr "Spanish" + #. js-lingui-explicit-id #: widget/embedded/src/pages/LiquiditySourcePage.tsx:126 #~ msgid "Swap {sourceType}" diff --git a/translations/es.po b/translations/es.po index 838ddb48ba..9b5f46698c 100644 --- a/translations/es.po +++ b/translations/es.po @@ -630,28 +630,13 @@ msgstr "" #~ msgid "To" #~ msgstr "" -#. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:31 -#~ msgid "English" -#~ msgstr "" - #. js-lingui-explicit-id #: widget/embedded/src/pages/LanguagePage.tsx:42 -#~ msgid "French" -#~ msgstr "" - -#. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:53 -#~ msgid "Spanish" -#~ msgstr "" - -#. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:65 #~ msgid "Language" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:72 +#: widget/embedded/src/pages/LanguagePage.tsx:49 #~ msgid "language" #~ msgstr "" @@ -822,9 +807,29 @@ msgstr "" #~ msgid "second" #~ msgstr "" +#. js-lingui-explicit-id +#: widget/embedded/src/pages/LanguagePage.tsx:31 +#~ msgid "English" +#~ msgstr "" + +#. js-lingui-explicit-id +#: widget/embedded/src/pages/LanguagePage.tsx:42 +#~ msgid "French" +#~ msgstr "" + +#. js-lingui-explicit-id +#: widget/embedded/src/pages/LanguagePage.tsx:53 +#~ msgid "Spanish" +#~ msgstr "" + #. js-lingui-explicit-id #: widget/embedded/src/pages/LiquiditySourcePage.tsx:126 -#~ msgid "Swap {sourceType}" +#~ msgid "Swap {sourceType}=======" +#~ msgstr "" + +#. js-lingui-explicit-id +#: widget/embedded/src/pages/LanguagePage.tsx:53 +#~ msgid "Spanish>>>>>>> 97bcc73b (feat: support multi languages)" #~ msgstr "" #. js-lingui-explicit-id @@ -1020,6 +1025,10 @@ msgstr "" #~ msgid "Choose a wallet to connect." #~ msgstr "" +#: widget/embedded/src/pages/LanguagePage.tsx:31 +#~ msgid "English" +#~ msgstr "" + #. js-lingui-explicit-id #: widget/ui/src/containers/TokenInfo/TokenInfo.tsx:179 msgid "swap from" diff --git a/translations/fr.po b/translations/fr.po index cc5b93207a..1144e9b6f7 100644 --- a/translations/fr.po +++ b/translations/fr.po @@ -630,28 +630,13 @@ msgstr "" #~ msgid "To" #~ msgstr "" -#. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:31 -#~ msgid "English" -#~ msgstr "" - #. js-lingui-explicit-id #: widget/embedded/src/pages/LanguagePage.tsx:42 -#~ msgid "French" -#~ msgstr "" - -#. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:53 -#~ msgid "Spanish" -#~ msgstr "" - -#. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:65 #~ msgid "Language" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:72 +#: widget/embedded/src/pages/LanguagePage.tsx:49 #~ msgid "language" #~ msgstr "" @@ -822,6 +807,21 @@ msgstr "" #~ msgid "second" #~ msgstr "" +#. js-lingui-explicit-id +#: widget/embedded/src/pages/LanguagePage.tsx:31 +#~ msgid "English" +#~ msgstr "" + +#. js-lingui-explicit-id +#: widget/embedded/src/pages/LanguagePage.tsx:42 +#~ msgid "French" +#~ msgstr "" + +#. js-lingui-explicit-id +#: widget/embedded/src/pages/LanguagePage.tsx:53 +#~ msgid "Spanish" +#~ msgstr "" + #. js-lingui-explicit-id #: widget/embedded/src/pages/LiquiditySourcePage.tsx:126 #~ msgid "Swap {sourceType}" diff --git a/translations/jp.po b/translations/jp.po index 8ad171676d..655356a8b2 100644 --- a/translations/jp.po +++ b/translations/jp.po @@ -630,28 +630,13 @@ msgstr "" #~ msgid "To" #~ msgstr "" -#. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:31 -#~ msgid "English" -#~ msgstr "" - #. js-lingui-explicit-id #: widget/embedded/src/pages/LanguagePage.tsx:42 -#~ msgid "French" -#~ msgstr "" - -#. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:53 -#~ msgid "Spanish" -#~ msgstr "" - -#. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:65 #~ msgid "Language" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/pages/LanguagePage.tsx:72 +#: widget/embedded/src/pages/LanguagePage.tsx:49 #~ msgid "language" #~ msgstr "" @@ -822,6 +807,21 @@ msgstr "" #~ msgid "second" #~ msgstr "" +#. js-lingui-explicit-id +#: widget/embedded/src/pages/LanguagePage.tsx:31 +#~ msgid "English" +#~ msgstr "" + +#. js-lingui-explicit-id +#: widget/embedded/src/pages/LanguagePage.tsx:42 +#~ msgid "French" +#~ msgstr "" + +#. js-lingui-explicit-id +#: widget/embedded/src/pages/LanguagePage.tsx:53 +#~ msgid "Spanish" +#~ msgstr "" + #. js-lingui-explicit-id #: widget/embedded/src/pages/LiquiditySourcePage.tsx:126 #~ msgid "Swap {sourceType}" diff --git a/widget/embedded/src/Widget.tsx b/widget/embedded/src/Widget.tsx index 753b282fb7..27e52138e1 100644 --- a/widget/embedded/src/Widget.tsx +++ b/widget/embedded/src/Widget.tsx @@ -9,6 +9,7 @@ import { AppRouter } from './components/AppRouter'; import { AppRoutes } from './components/AppRoutes'; import { WidgetEvents } from './components/WidgetEvents'; import { globalFont } from './globalStyles'; +import { useLanguage } from './hooks/useLanguage'; import { useTheme } from './hooks/useTheme'; import QueueManager from './QueueManager'; import { useAppStore } from './store/app'; @@ -44,6 +45,8 @@ export function Main(props: PropsWithChildren) { globalFont(); const { activeTheme } = useTheme(config?.theme || {}); + const { activeLanguage, changeLanguage } = useLanguage(); + const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] = useState(''); const [disconnectedWallet, setDisconnectedWallet] = useState(); @@ -65,8 +68,14 @@ export function Main(props: PropsWithChildren) { widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork); }, []); + useEffect(() => { + if (config?.language) { + changeLanguage(config.language); + } + }, [config?.language]); + return ( - + diff --git a/widget/embedded/src/components/NoRoutes/NoRoutes.helper.ts b/widget/embedded/src/components/NoRoutes/NoRoutes.helper.ts index 9fc720bb90..e3bec41c2f 100644 --- a/widget/embedded/src/components/NoRoutes/NoRoutes.helper.ts +++ b/widget/embedded/src/components/NoRoutes/NoRoutes.helper.ts @@ -15,7 +15,7 @@ export function makeInfo( return { alert: { type: 'warning', - text: errorMessages.genericServerError, + text: errorMessages().genericServerError, action: { onClick: refetchBestRoute, title: i18n.t('Retry'), @@ -36,17 +36,17 @@ export function makeInfo( return { alert: { type: 'warning', - text: errorMessages.liquiditySourcesError.title, + text: errorMessages().liquiditySourcesError.title, action: { onClick: () => toggleAllLiquiditySources(true), title: i18n.t('Reset'), }, }, - description: errorMessages.liquiditySourcesError.description, + description: errorMessages().liquiditySourcesError.description, }; } return { alert: null, - description: errorMessages.noRoutesError.description, + description: errorMessages().noRoutesError.description, }; } diff --git a/widget/embedded/src/components/NoRoutes/NoRoutes.tsx b/widget/embedded/src/components/NoRoutes/NoRoutes.tsx index 212e0f9bfe..d160d5d2d7 100644 --- a/widget/embedded/src/components/NoRoutes/NoRoutes.tsx +++ b/widget/embedded/src/components/NoRoutes/NoRoutes.tsx @@ -40,7 +40,7 @@ export function NoRoutes(props: PropTypes) { - {errorMessages.noRoutesError.title} + {errorMessages().noRoutesError.title} {!!info.description && ( ) : ( )} {highValueLoss && ( @@ -121,8 +121,8 @@ export function RouteErrorsModal(props: ModalPropTypes) { navigate(navigationRoutes.confirmSwap); }}> {highValueLoss - ? errorMessages.highValueLossError.confirmMessage - : errorMessages.unknownPriceError.confirmMessage} + ? errorMessages().highValueLossError.confirmMessage + : errorMessages().unknownPriceError.confirmMessage} ); diff --git a/widget/embedded/src/constants/errors.ts b/widget/embedded/src/constants/errors.ts index fc74e99433..12789a06bf 100644 --- a/widget/embedded/src/constants/errors.ts +++ b/widget/embedded/src/constants/errors.ts @@ -4,54 +4,56 @@ import { i18n } from '@lingui/core'; import { ConfirmSwapErrorTypes } from '../types'; -export const errorMessages = { - genericServerError: i18n.t('Failed Network, Please retry your swap.'), - liquiditySourcesError: { - title: i18n.t('Please reset your liquidity sources.'), - description: i18n.t( - 'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources' - ), - }, - noRoutesError: { - title: i18n.t('No Routes Found'), - description: - "Reasons why Rango couldn't find a route: low liquidity on token, very low input amount or no routes available for the selected input/output token combination.", - }, - bridgeLimitErrors: { - increaseAmount: i18n.t('Bridge Limit Error: Please increase your amount'), - decreaseAmount: i18n.t('Bridge Limit Error: Please decrease your amount'), - }, - highValueLossError: { - impactTitle: i18n.t('High Price Impact'), - title: i18n.t('Price impact is too high!'), - description: i18n.t( - 'The price impact is significantly higher than the allowed amount. If you are sure, continue, otherwise, change the swap.' - ), - confirmMessage: i18n.t('Confirm High price impact'), - }, - routeUpdatedWithHighValueLoss: { - title: i18n.t( - 'Route updated and price impact is too high, try again later!' - ), - }, - unknownPriceError: { - impactTitle: i18n.t('USD Price Unknown'), - title: i18n.t('USD Price Unknown, Cannot calculate Price Impact.'), - description: i18n.t( - 'USD Price Unknown, Cannot calculate Price Impact. The price impact may be higher than usual. Are you sure to continue the Swap?' - ), - confirmMessage: i18n.t('Confirm USD Price Unknown'), - }, +export const errorMessages = () => { + return { + genericServerError: i18n.t('Failed Network, Please retry your swap.'), + liquiditySourcesError: { + title: i18n.t('Please reset your liquidity sources.'), + description: i18n.t( + 'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources' + ), + }, + noRoutesError: { + title: i18n.t('No Routes Found'), + description: + "Reasons why Rango couldn't find a route: low liquidity on token, very low input amount or no routes available for the selected input/output token combination.", + }, + bridgeLimitErrors: { + increaseAmount: i18n.t('Bridge Limit Error: Please increase your amount'), + decreaseAmount: i18n.t('Bridge Limit Error: Please decrease your amount'), + }, + highValueLossError: { + impactTitle: i18n.t('High Price Impact'), + title: i18n.t('Price impact is too high!'), + description: i18n.t( + 'The price impact is significantly higher than the allowed amount. If you are sure, continue, otherwise, change the swap.' + ), + confirmMessage: i18n.t('Confirm High price impact'), + }, + routeUpdatedWithHighValueLoss: { + title: i18n.t( + 'Route updated and price impact is too high, try again later!' + ), + }, + unknownPriceError: { + impactTitle: i18n.t('USD Price Unknown'), + title: i18n.t('USD Price Unknown, Cannot calculate Price Impact.'), + description: i18n.t( + 'USD Price Unknown, Cannot calculate Price Impact. The price impact may be higher than usual. Are you sure to continue the Swap?' + ), + confirmMessage: i18n.t('Confirm USD Price Unknown'), + }, + }; }; export function getConfirmSwapErrorMessage(error: ConfirmSwapError) { switch (error.type) { case ConfirmSwapErrorTypes.NO_ROUTE: - return error.diagnosisMessage ?? errorMessages.noRoutesError.title; + return error.diagnosisMessage ?? errorMessages().noRoutesError.title; case ConfirmSwapErrorTypes.REQUEST_FAILED: - return errorMessages.genericServerError; + return errorMessages().genericServerError; case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS: - return errorMessages.routeUpdatedWithHighValueLoss.title; + return errorMessages().routeUpdatedWithHighValueLoss.title; default: return ''; } diff --git a/widget/embedded/src/constants/languages.ts b/widget/embedded/src/constants/languages.ts new file mode 100644 index 0000000000..eb26b7f37a --- /dev/null +++ b/widget/embedded/src/constants/languages.ts @@ -0,0 +1,19 @@ +import type { FlagPropTypes, Language } from '@rango-dev/ui'; + +import { English, French, Japanese, Spanish } from '@rango-dev/ui'; + +export type LanguageItem = { + title: string; + label: string; + local: Language; + SVGFlag: React.ComponentType; +}; + +export const LANGUAGES: LanguageItem[] = [ + { title: 'English', label: 'English', local: 'en', SVGFlag: English }, + { title: 'Spanish', label: 'Español', local: 'es', SVGFlag: Spanish }, + { title: 'French', label: 'Français', local: 'fr', SVGFlag: French }, + { title: 'Japanese', label: '日本語', local: 'jp', SVGFlag: Japanese }, +]; + +export const DEFAULT_LANGUAGE = 'en'; diff --git a/widget/embedded/src/constants/messages.ts b/widget/embedded/src/constants/messages.ts index 399f950db0..f3bbfa8375 100644 --- a/widget/embedded/src/constants/messages.ts +++ b/widget/embedded/src/constants/messages.ts @@ -1,8 +1,10 @@ import { i18n } from '@lingui/core'; -export const swapButtonTitles = { - connectWallet: i18n.t('Connect Wallet'), - swap: i18n.t('Swap'), - swapAnyway: i18n.t('Swap anyway'), - ethRouteWarning: i18n.t('The route goes through Ethereum. Continue?'), +export const swapButtonTitles = () => { + return { + connectWallet: i18n.t('Connect Wallet'), + swap: i18n.t('Swap'), + swapAnyway: i18n.t('Swap anyway'), + ethRouteWarning: i18n.t('The route goes through Ethereum. Continue?'), + }; }; diff --git a/widget/embedded/src/hooks/useConfirmSwap.ts b/widget/embedded/src/hooks/useConfirmSwap.ts index f606299b4e..0db231b001 100644 --- a/widget/embedded/src/hooks/useConfirmSwap.ts +++ b/widget/embedded/src/hooks/useConfirmSwap.ts @@ -70,7 +70,7 @@ function throwErrorIfResponseIsNotValid( params: { inputUsdValue: BigNumber | null; outputUsdValue: number | null } ) { if (!response.result) { - throw new Error(errorMessages.noRoutesError.title, { + throw new Error(errorMessages().noRoutesError.title, { cause: { type: ConfirmSwapErrorTypes.NO_ROUTE, diagnosisMessage: response.diagnosisMessages?.[0], diff --git a/widget/embedded/src/hooks/useLanguage.ts b/widget/embedded/src/hooks/useLanguage.ts new file mode 100644 index 0000000000..8d1ec4f41a --- /dev/null +++ b/widget/embedded/src/hooks/useLanguage.ts @@ -0,0 +1,27 @@ +import type { LanguageItem } from '../constants/languages'; + +import { type Language } from '@rango-dev/ui'; + +import { DEFAULT_LANGUAGE, LANGUAGES } from '../constants/languages'; +import { useSettingsStore } from '../store/settings'; + +interface UseLanguage { + languages: LanguageItem[]; + defaultLanguage: Language; + activeLanguage: Language; + changeLanguage: (language: Language) => void; +} + +export function useLanguage(): UseLanguage { + const language = useSettingsStore.use.language(); + const setLanguage = useSettingsStore.use.setLanguage(); + const languages = LANGUAGES; + const defaultLanguage = DEFAULT_LANGUAGE; + + return { + activeLanguage: language, + languages, + defaultLanguage, + changeLanguage: setLanguage, + }; +} diff --git a/widget/embedded/src/pages/Home.tsx b/widget/embedded/src/pages/Home.tsx index 033bd45f02..7cc64ad3c1 100644 --- a/widget/embedded/src/pages/Home.tsx +++ b/widget/embedded/src/pages/Home.tsx @@ -347,7 +347,7 @@ export function Home() { USD_VALUE_MAX_DECIMALS ), error: priceImpactInputCanNotBeComputed - ? errorMessages.unknownPriceError.impactTitle + ? errorMessages().unknownPriceError.impactTitle : undefined, }} disabled={loadingMetaStatus === 'failed'} @@ -398,7 +398,7 @@ export function Home() { USD_VALUE_MAX_DECIMALS ), error: priceImpactOutputCanNotBeComputed - ? errorMessages.unknownPriceError.impactTitle + ? errorMessages().unknownPriceError.impactTitle : undefined, }} onClickToken={() => navigate('to-swap')} diff --git a/widget/embedded/src/pages/LanguagePage.tsx b/widget/embedded/src/pages/LanguagePage.tsx index f514240268..875c8d934b 100644 --- a/widget/embedded/src/pages/LanguagePage.tsx +++ b/widget/embedded/src/pages/LanguagePage.tsx @@ -6,57 +6,34 @@ import { RadioRoot, Typography, } from '@rango-dev/ui'; -import React, { useState } from 'react'; +import React from 'react'; import { Layout } from '../components/Layout'; import { SettingsContainer } from '../components/SettingsContainer'; import { navigationRoutes } from '../constants/navigationRoutes'; +import { useLanguage } from '../hooks/useLanguage'; import { useNavigateBack } from '../hooks/useNavigateBack'; -enum Languages { - ENGLISH = 'english', - FRENCH = 'french', - SPANISH = 'spanish', -} export function LanguagePage() { const { navigateBackFrom } = useNavigateBack(); - const [language, setLanguage] = useState(Languages.ENGLISH); - const languageList = [ - { - id: Languages.ENGLISH, - value: Languages.ENGLISH, - title: ( - - {i18n.t('English')} - - ), - onClick: () => setLanguage(Languages.ENGLISH), - end: , - }, - { - id: Languages.FRENCH, - value: Languages.FRENCH, - title: ( - - {i18n.t('French')} - - ), - onClick: () => setLanguage(Languages.FRENCH), - end: , - }, - { - id: Languages.SPANISH, - value: Languages.SPANISH, + const { activeLanguage, changeLanguage, languages } = useLanguage(); + + const languageList = languages.map((languageItem) => { + const { local, label, SVGFlag } = languageItem; + return { + id: local, + value: local, title: ( - {i18n.t('Spanish')} + {label} ), - onClick: () => setLanguage(Languages.SPANISH), - end: , - }, - ]; + onClick: () => changeLanguage(languageItem.local), + end: , + start: , + }; + }); return ( - + void; toggleInfiniteApprove: () => void; toggleLiquiditySource: (name: string) => void; - setTheme: (theme: Theme) => void; + setTheme: (theme: ThemeMode) => void; + setLanguage: (language: Language) => void; toggleAllLiquiditySources: (shouldReset?: boolean) => void; setAffiliateRef: (affiliateRef: string | null) => void; setAffiliatePercent: (affiliatePercent: number | null) => void; @@ -43,6 +47,7 @@ export const useSettingsStore = createSelectors( affiliateWallets: null, disabledLiquiditySources: [], theme: 'auto', + language: DEFAULT_LANGUAGE, setSlippage: (slippage) => set(() => ({ slippage: slippage, @@ -106,6 +111,10 @@ export const useSettingsStore = createSelectors( set(() => ({ theme, })), + setLanguage: (language) => + set(() => ({ + language, + })), })), { name: 'user-settings', diff --git a/widget/embedded/src/utils/swap.ts b/widget/embedded/src/utils/swap.ts index 84c639f5f7..b7b27f0846 100644 --- a/widget/embedded/src/utils/swap.ts +++ b/widget/embedded/src/utils/swap.ts @@ -131,7 +131,7 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): { symbol: swap.from.symbol, }, }); - recommendation = errorMessages.bridgeLimitErrors.increaseAmount; + recommendation = errorMessages().bridgeLimitErrors.increaseAmount; } else if (isExclusive && !!minimum && minimum.gte(swap.fromAmount)) { fromAmountRangeError = i18n.t({ id: 'requiredMin', @@ -145,7 +145,7 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): { symbol: swap.from.symbol, }, }); - recommendation = errorMessages.bridgeLimitErrors.increaseAmount; + recommendation = errorMessages().bridgeLimitErrors.increaseAmount; } if (!isExclusive && !!maximum && maximum.lt(swap.fromAmount)) { @@ -161,7 +161,7 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): { symbol: swap.from.symbol, }, }); - recommendation = errorMessages.bridgeLimitErrors.decreaseAmount; + recommendation = errorMessages().bridgeLimitErrors.decreaseAmount; } else if (isExclusive && !!maximum && maximum.lte(swap.fromAmount)) { fromAmountRangeError = i18n.t({ id: 'requiredMax', @@ -175,7 +175,7 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): { symbol: swap.from.symbol, }, }); - recommendation = errorMessages.bridgeLimitErrors.decreaseAmount; + recommendation = errorMessages().bridgeLimitErrors.decreaseAmount; } return { swap, fromAmountRangeError, recommendation }; @@ -194,14 +194,14 @@ export function getSwapButtonState( ): SwapButtonState { if (loadingMetaStatus !== 'success') { return { - title: swapButtonTitles.connectWallet, + title: swapButtonTitles().connectWallet, state: ButtonState.WAITFORCONNECTING, disabled: true, }; } if (connectedWallets.length == 0) { return { - title: swapButtonTitles.connectWallet, + title: swapButtonTitles().connectWallet, state: ButtonState.WAITFORCONNECTING, disabled: false, }; @@ -215,27 +215,27 @@ export function getSwapButtonState( inputAmount === '0' ) { return { - title: swapButtonTitles.swap, + title: swapButtonTitles().swap, disabled: true, state: ButtonState.SWAP, }; } else if (highValueLoss || priceImpactCanNotBeComputed) { return { - title: swapButtonTitles.swapAnyway, + title: swapButtonTitles().swapAnyway, disabled: false, hasWarning: true, state: ButtonState.NEEDTOCONFIRM, }; } else if (needsToWarnEthOnPath) { return { - title: swapButtonTitles.ethRouteWarning, + title: swapButtonTitles().ethRouteWarning, disabled: false, hasWarning: true, state: ButtonState.WARNING, }; } return { - title: swapButtonTitles.swap, + title: swapButtonTitles().swap, disabled: false, state: ButtonState.SWAP, }; diff --git a/widget/ui/package.json b/widget/ui/package.json index 444e5ac179..49965b2acc 100644 --- a/widget/ui/package.json +++ b/widget/ui/package.json @@ -24,7 +24,9 @@ }, "peerDependencies": { "@rango-dev/queue-manager-rango-preset": "*", - "react": ">=16" + "react": ">=16", + "@lingui/core": "4.2.1", + "@lingui/react": "4.2.1" }, "devDependencies": { "@babel/core": "^7.20.2", @@ -52,11 +54,11 @@ "storybook": "^7.1.1", "tsdx": "^0.14.1", "tslib": "^2.4.1", - "typescript": "^4.8.4" + "typescript": "^4.8.4", + "@lingui/core": "4.2.1", + "@lingui/react": "4.2.1" }, "dependencies": { - "@lingui/core": "4.2.1", - "@lingui/react": "4.2.1", "@radix-ui/react-checkbox": "^1.0.1", "@radix-ui/react-collapsible": "^1.0.3", "@radix-ui/react-popover": "^1.0.6", diff --git a/widget/ui/src/components/Flags/English.tsx b/widget/ui/src/components/Flags/English.tsx new file mode 100644 index 0000000000..a38c3a4a7b --- /dev/null +++ b/widget/ui/src/components/Flags/English.tsx @@ -0,0 +1,35 @@ +import type { FlagPropTypes } from './Flags.types'; + +import React from 'react'; + +import { DEFAULT_SIZE } from './Flags.constants'; + +export default function English(props: FlagPropTypes) { + const { size = DEFAULT_SIZE } = props; + + return ( + + + + + + + + + + + ); +} diff --git a/widget/ui/src/components/Flags/Flags.constants.ts b/widget/ui/src/components/Flags/Flags.constants.ts new file mode 100644 index 0000000000..eb52995038 --- /dev/null +++ b/widget/ui/src/components/Flags/Flags.constants.ts @@ -0,0 +1 @@ +export const DEFAULT_SIZE = '1em'; diff --git a/widget/ui/src/components/Flags/Flags.types.ts b/widget/ui/src/components/Flags/Flags.types.ts new file mode 100644 index 0000000000..538f5e4926 --- /dev/null +++ b/widget/ui/src/components/Flags/Flags.types.ts @@ -0,0 +1,3 @@ +export type FlagPropTypes = { + size?: number; +}; diff --git a/widget/ui/src/components/Flags/French.tsx b/widget/ui/src/components/Flags/French.tsx new file mode 100644 index 0000000000..4c7d596703 --- /dev/null +++ b/widget/ui/src/components/Flags/French.tsx @@ -0,0 +1,26 @@ +import type { FlagPropTypes } from './Flags.types'; + +import React from 'react'; + +import { DEFAULT_SIZE } from './Flags.constants'; + +export default function French(props: FlagPropTypes) { + const { size = DEFAULT_SIZE } = props; + + return ( + + + + + + + + + + + ); +} diff --git a/widget/ui/src/components/Flags/Japanese.tsx b/widget/ui/src/components/Flags/Japanese.tsx new file mode 100644 index 0000000000..fe3d60a6bc --- /dev/null +++ b/widget/ui/src/components/Flags/Japanese.tsx @@ -0,0 +1,25 @@ +import type { FlagPropTypes } from './Flags.types'; + +import React from 'react'; + +import { DEFAULT_SIZE } from './Flags.constants'; + +export default function Japanese(props: FlagPropTypes) { + const { size = DEFAULT_SIZE } = props; + + return ( + + + + + + + + + + ); +} diff --git a/widget/ui/src/components/Flags/Spanish.tsx b/widget/ui/src/components/Flags/Spanish.tsx new file mode 100644 index 0000000000..e34648b9c7 --- /dev/null +++ b/widget/ui/src/components/Flags/Spanish.tsx @@ -0,0 +1,85 @@ +import type { FlagPropTypes } from './Flags.types'; + +import React from 'react'; + +import { DEFAULT_SIZE } from './Flags.constants'; + +export default function Spanish(props: FlagPropTypes) { + const { size = DEFAULT_SIZE } = props; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/widget/ui/src/components/Flags/index.ts b/widget/ui/src/components/Flags/index.ts new file mode 100644 index 0000000000..1c963cfbf6 --- /dev/null +++ b/widget/ui/src/components/Flags/index.ts @@ -0,0 +1,8 @@ +import English from './English'; +import French from './French'; +import Japanese from './Japanese'; +import Spanish from './Spanish'; + +export type { FlagPropTypes } from './Flags.types'; + +export { English, Spanish, Japanese, French }; diff --git a/widget/ui/src/components/I18nManager/I18nManager.tsx b/widget/ui/src/components/I18nManager/I18nManager.tsx index 1cdf0b43ff..4cb50c0722 100644 --- a/widget/ui/src/components/I18nManager/I18nManager.tsx +++ b/widget/ui/src/components/I18nManager/I18nManager.tsx @@ -2,7 +2,7 @@ import type { PropsWithChildren } from 'react'; import { i18n } from '@lingui/core'; import { I18nProvider } from '@lingui/react'; -import React, { useEffect } from 'react'; +import React, { useEffect, useReducer } from 'react'; /* *Note: esbuild doesn't work properly with paths yet, so I couldn't use `paths` to make this path shorter. @@ -16,7 +16,6 @@ import { messages as esMessages } from '../../../../../translations/es'; import { messages as frMessages } from '../../../../../translations/fr'; import { messages as jpMessages } from '../../../../../translations/jp'; -const DEFAULT_LANGUAGE = 'en'; const messages = { en: enMessages, es: esMessages, @@ -28,15 +27,25 @@ i18n.load(messages); export type Language = keyof typeof messages; interface PropTypes { - language?: Language; + language: Language; } function I18nManager(props: PropsWithChildren) { + const [count, forceUpdate] = useReducer((x) => x + 1, 0); useEffect(() => { - i18n.activate(props?.language || DEFAULT_LANGUAGE); - }, [props?.language]); - - return {props.children}; + i18n.on('change', () => { + forceUpdate(); + }); + }, [i18n]); + useEffect(() => { + i18n.activate(props.language); + }, [props.language]); + + return ( + + {props.children} + + ); } export { I18nManager }; diff --git a/widget/ui/src/components/index.ts b/widget/ui/src/components/index.ts index 7ced4c7c50..d8ef18bdc9 100644 --- a/widget/ui/src/components/index.ts +++ b/widget/ui/src/components/index.ts @@ -49,3 +49,4 @@ export * from './RouteCost'; export * from './TokenAmount'; export * from './StepDetails'; export * from './Popover'; +export * from './Flags'; From 9a5578ea0779f6151a345b32caf6b1d0af4daffc Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sat, 4 Nov 2023 12:40:50 +0000 Subject: [PATCH 634/769] chore(release): publish - ui@0.17.1-next.10 - wallets-adapter@0.14.1-next.12 - wallets-demo@0.11.1-next.41 - widget-embedded@0.14.1-next.15 - wallets-adapter-demo@0.12.1-next.40 - widget-playground@0.12.1-next.54 - widget-iframe@0.12.1-next.53 - widget-app@0.12.1-next.53 Affected packages: ui@0.17.1-next.10,wallets-adapter@0.14.1-next.12,wallets-demo@0.11.1-next.41,widget-embedded@0.14.1-next.15,wallets-adapter-demo@0.12.1-next.40,widget-playground@0.12.1-next.54,widget-iframe@0.12.1-next.53,widget-app@0.12.1-next.53 --- examples/wallets-adapter-demo/package.json | 4 +-- examples/wallets-demo/package.json | 4 +-- translations/en.po | 38 +++++++++++----------- translations/es.po | 38 +++++++++++----------- translations/fr.po | 38 +++++++++++----------- translations/jp.po | 38 +++++++++++----------- wallets/wallets-adapter/package.json | 4 +-- widget/app/package.json | 4 +-- widget/embedded/package.json | 4 +-- widget/iframe/package.json | 4 +-- widget/playground/package.json | 6 ++-- widget/ui/package.json | 14 ++++---- 12 files changed, 98 insertions(+), 98 deletions(-) diff --git a/examples/wallets-adapter-demo/package.json b/examples/wallets-adapter-demo/package.json index 9be536ef7b..36d2b4949b 100644 --- a/examples/wallets-adapter-demo/package.json +++ b/examples/wallets-adapter-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter-demo", - "version": "0.12.1-next.39", + "version": "0.12.1-next.40", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.3", - "@rango-dev/wallets-adapter": "^0.14.1-next.11", + "@rango-dev/wallets-adapter": "^0.14.1-next.12", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/wallets-demo/package.json b/examples/wallets-demo/package.json index 341ab22b99..87b8d85015 100644 --- a/examples/wallets-demo/package.json +++ b/examples/wallets-demo/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-demo", - "version": "0.11.1-next.40", + "version": "0.11.1-next.41", "license": "MIT", "private": true, "source": "public/index.html", @@ -12,7 +12,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.3", - "@rango-dev/ui": "^0.17.1-next.9", + "@rango-dev/ui": "^0.17.1-next.10", "@rango-dev/wallets-react": "^0.3.1-next.1", "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-sdk": "^0.1.35", diff --git a/translations/en.po b/translations/en.po index b6c6026cd9..69432b7bd8 100644 --- a/translations/en.po +++ b/translations/en.po @@ -231,7 +231,7 @@ msgstr "Max" #. js-lingui-explicit-id #: widget/embedded/src/components/HeaderButtons/WalletButton.tsx:14 #: widget/embedded/src/components/SwapDetailsModal/SwapDetailsModal.helpers.tsx:16 -#: widget/embedded/src/constants/messages.ts:4 +#: widget/embedded/src/constants/messages.ts:5 #~ msgid "Connect Wallet" #~ msgstr "Connect Wallet" @@ -465,93 +465,93 @@ msgstr "Max" #~ msgstr "Click connect in your wallet popup." #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:8 +#: widget/embedded/src/constants/errors.ts:9 #~ msgid "Failed Network, Please retry your swap." #~ msgstr "Failed Network, Please retry your swap." #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:10 +#: widget/embedded/src/constants/errors.ts:11 #~ msgid "Please reset your liquidity sources." #~ msgstr "Please reset your liquidity sources." #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:11 +#: widget/embedded/src/constants/errors.ts:12 #~ msgid "You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources" #~ msgstr "You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:16 +#: widget/embedded/src/constants/errors.ts:17 #~ msgid "No Routes Found" #~ msgstr "No Routes Found" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:21 +#: widget/embedded/src/constants/errors.ts:22 #~ msgid "Bridge Limit Error: Please increase your amount" #~ msgstr "Bridge Limit Error: Please increase your amount" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:22 +#: widget/embedded/src/constants/errors.ts:23 #~ msgid "Bridge Limit Error: Please decrease your amount" #~ msgstr "Bridge Limit Error: Please decrease your amount" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:25 +#: widget/embedded/src/constants/errors.ts:26 #~ msgid "High Price Impact" #~ msgstr "High Price Impact" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:26 +#: widget/embedded/src/constants/errors.ts:27 #~ msgid "Price impact is too high!" #~ msgstr "Price impact is too high!" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:27 +#: widget/embedded/src/constants/errors.ts:28 #~ msgid "The price impact is significantly higher than the allowed amount. If you are sure, continue, otherwise, change the swap." #~ msgstr "The price impact is significantly higher than the allowed amount. If you are sure, continue, otherwise, change the swap." #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:30 +#: widget/embedded/src/constants/errors.ts:31 #~ msgid "Confirm High price impact" #~ msgstr "Confirm High price impact" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:33 +#: widget/embedded/src/constants/errors.ts:34 #~ msgid "Route updated and price impact is too high, try again later!" #~ msgstr "Route updated and price impact is too high, try again later!" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:38 +#: widget/embedded/src/constants/errors.ts:39 #~ msgid "USD Price Unknown" #~ msgstr "USD Price Unknown" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:39 +#: widget/embedded/src/constants/errors.ts:40 #~ msgid "USD Price Unknown, Cannot calculate Price Impact." #~ msgstr "USD Price Unknown, Cannot calculate Price Impact." #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:40 +#: widget/embedded/src/constants/errors.ts:41 #~ msgid "USD Price Unknown, Cannot calculate Price Impact. The price impact may be higher than usual. Are you sure to continue the Swap?" #~ msgstr "USD Price Unknown, Cannot calculate Price Impact. The price impact may be higher than usual. Are you sure to continue the Swap?" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:43 +#: widget/embedded/src/constants/errors.ts:44 #~ msgid "Confirm USD Price Unknown" #~ msgstr "Confirm USD Price Unknown" #. js-lingui-explicit-id -#: widget/embedded/src/constants/messages.ts:5 +#: widget/embedded/src/constants/messages.ts:6 #: widget/embedded/src/pages/Home.tsx:311 #~ msgid "Swap" #~ msgstr "Swap" #. js-lingui-explicit-id -#: widget/embedded/src/constants/messages.ts:6 +#: widget/embedded/src/constants/messages.ts:7 #~ msgid "Swap anyway" #~ msgstr "Swap anyway" #. js-lingui-explicit-id -#: widget/embedded/src/constants/messages.ts:7 +#: widget/embedded/src/constants/messages.ts:8 #~ msgid "The route goes through Ethereum. Continue?" #~ msgstr "The route goes through Ethereum. Continue?" diff --git a/translations/es.po b/translations/es.po index 9b5f46698c..c04a6f080b 100644 --- a/translations/es.po +++ b/translations/es.po @@ -231,7 +231,7 @@ msgstr "" #. js-lingui-explicit-id #: widget/embedded/src/components/HeaderButtons/WalletButton.tsx:14 #: widget/embedded/src/components/SwapDetailsModal/SwapDetailsModal.helpers.tsx:16 -#: widget/embedded/src/constants/messages.ts:4 +#: widget/embedded/src/constants/messages.ts:5 #~ msgid "Connect Wallet" #~ msgstr "" @@ -465,93 +465,93 @@ msgstr "" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:8 +#: widget/embedded/src/constants/errors.ts:9 #~ msgid "Failed Network, Please retry your swap." #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:10 +#: widget/embedded/src/constants/errors.ts:11 #~ msgid "Please reset your liquidity sources." #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:11 +#: widget/embedded/src/constants/errors.ts:12 #~ msgid "You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:16 +#: widget/embedded/src/constants/errors.ts:17 #~ msgid "No Routes Found" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:21 +#: widget/embedded/src/constants/errors.ts:22 #~ msgid "Bridge Limit Error: Please increase your amount" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:22 +#: widget/embedded/src/constants/errors.ts:23 #~ msgid "Bridge Limit Error: Please decrease your amount" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:25 +#: widget/embedded/src/constants/errors.ts:26 #~ msgid "High Price Impact" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:26 +#: widget/embedded/src/constants/errors.ts:27 #~ msgid "Price impact is too high!" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:27 +#: widget/embedded/src/constants/errors.ts:28 #~ msgid "The price impact is significantly higher than the allowed amount. If you are sure, continue, otherwise, change the swap." #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:30 +#: widget/embedded/src/constants/errors.ts:31 #~ msgid "Confirm High price impact" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:33 +#: widget/embedded/src/constants/errors.ts:34 #~ msgid "Route updated and price impact is too high, try again later!" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:38 +#: widget/embedded/src/constants/errors.ts:39 #~ msgid "USD Price Unknown" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:39 +#: widget/embedded/src/constants/errors.ts:40 #~ msgid "USD Price Unknown, Cannot calculate Price Impact." #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:40 +#: widget/embedded/src/constants/errors.ts:41 #~ msgid "USD Price Unknown, Cannot calculate Price Impact. The price impact may be higher than usual. Are you sure to continue the Swap?" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:43 +#: widget/embedded/src/constants/errors.ts:44 #~ msgid "Confirm USD Price Unknown" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/messages.ts:5 +#: widget/embedded/src/constants/messages.ts:6 #: widget/embedded/src/pages/Home.tsx:311 #~ msgid "Swap" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/messages.ts:6 +#: widget/embedded/src/constants/messages.ts:7 #~ msgid "Swap anyway" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/messages.ts:7 +#: widget/embedded/src/constants/messages.ts:8 #~ msgid "The route goes through Ethereum. Continue?" #~ msgstr "" diff --git a/translations/fr.po b/translations/fr.po index 1144e9b6f7..a18a1a9e4f 100644 --- a/translations/fr.po +++ b/translations/fr.po @@ -231,7 +231,7 @@ msgstr "" #. js-lingui-explicit-id #: widget/embedded/src/components/HeaderButtons/WalletButton.tsx:14 #: widget/embedded/src/components/SwapDetailsModal/SwapDetailsModal.helpers.tsx:16 -#: widget/embedded/src/constants/messages.ts:4 +#: widget/embedded/src/constants/messages.ts:5 #~ msgid "Connect Wallet" #~ msgstr "" @@ -465,93 +465,93 @@ msgstr "" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:8 +#: widget/embedded/src/constants/errors.ts:9 #~ msgid "Failed Network, Please retry your swap." #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:10 +#: widget/embedded/src/constants/errors.ts:11 #~ msgid "Please reset your liquidity sources." #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:11 +#: widget/embedded/src/constants/errors.ts:12 #~ msgid "You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:16 +#: widget/embedded/src/constants/errors.ts:17 #~ msgid "No Routes Found" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:21 +#: widget/embedded/src/constants/errors.ts:22 #~ msgid "Bridge Limit Error: Please increase your amount" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:22 +#: widget/embedded/src/constants/errors.ts:23 #~ msgid "Bridge Limit Error: Please decrease your amount" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:25 +#: widget/embedded/src/constants/errors.ts:26 #~ msgid "High Price Impact" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:26 +#: widget/embedded/src/constants/errors.ts:27 #~ msgid "Price impact is too high!" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:27 +#: widget/embedded/src/constants/errors.ts:28 #~ msgid "The price impact is significantly higher than the allowed amount. If you are sure, continue, otherwise, change the swap." #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:30 +#: widget/embedded/src/constants/errors.ts:31 #~ msgid "Confirm High price impact" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:33 +#: widget/embedded/src/constants/errors.ts:34 #~ msgid "Route updated and price impact is too high, try again later!" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:38 +#: widget/embedded/src/constants/errors.ts:39 #~ msgid "USD Price Unknown" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:39 +#: widget/embedded/src/constants/errors.ts:40 #~ msgid "USD Price Unknown, Cannot calculate Price Impact." #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:40 +#: widget/embedded/src/constants/errors.ts:41 #~ msgid "USD Price Unknown, Cannot calculate Price Impact. The price impact may be higher than usual. Are you sure to continue the Swap?" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:43 +#: widget/embedded/src/constants/errors.ts:44 #~ msgid "Confirm USD Price Unknown" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/messages.ts:5 +#: widget/embedded/src/constants/messages.ts:6 #: widget/embedded/src/pages/Home.tsx:311 #~ msgid "Swap" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/messages.ts:6 +#: widget/embedded/src/constants/messages.ts:7 #~ msgid "Swap anyway" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/messages.ts:7 +#: widget/embedded/src/constants/messages.ts:8 #~ msgid "The route goes through Ethereum. Continue?" #~ msgstr "" diff --git a/translations/jp.po b/translations/jp.po index 655356a8b2..c1541d6999 100644 --- a/translations/jp.po +++ b/translations/jp.po @@ -231,7 +231,7 @@ msgstr "" #. js-lingui-explicit-id #: widget/embedded/src/components/HeaderButtons/WalletButton.tsx:14 #: widget/embedded/src/components/SwapDetailsModal/SwapDetailsModal.helpers.tsx:16 -#: widget/embedded/src/constants/messages.ts:4 +#: widget/embedded/src/constants/messages.ts:5 #~ msgid "Connect Wallet" #~ msgstr "" @@ -465,93 +465,93 @@ msgstr "" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:8 +#: widget/embedded/src/constants/errors.ts:9 #~ msgid "Failed Network, Please retry your swap." #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:10 +#: widget/embedded/src/constants/errors.ts:11 #~ msgid "Please reset your liquidity sources." #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:11 +#: widget/embedded/src/constants/errors.ts:12 #~ msgid "You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:16 +#: widget/embedded/src/constants/errors.ts:17 #~ msgid "No Routes Found" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:21 +#: widget/embedded/src/constants/errors.ts:22 #~ msgid "Bridge Limit Error: Please increase your amount" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:22 +#: widget/embedded/src/constants/errors.ts:23 #~ msgid "Bridge Limit Error: Please decrease your amount" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:25 +#: widget/embedded/src/constants/errors.ts:26 #~ msgid "High Price Impact" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:26 +#: widget/embedded/src/constants/errors.ts:27 #~ msgid "Price impact is too high!" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:27 +#: widget/embedded/src/constants/errors.ts:28 #~ msgid "The price impact is significantly higher than the allowed amount. If you are sure, continue, otherwise, change the swap." #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:30 +#: widget/embedded/src/constants/errors.ts:31 #~ msgid "Confirm High price impact" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:33 +#: widget/embedded/src/constants/errors.ts:34 #~ msgid "Route updated and price impact is too high, try again later!" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:38 +#: widget/embedded/src/constants/errors.ts:39 #~ msgid "USD Price Unknown" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:39 +#: widget/embedded/src/constants/errors.ts:40 #~ msgid "USD Price Unknown, Cannot calculate Price Impact." #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:40 +#: widget/embedded/src/constants/errors.ts:41 #~ msgid "USD Price Unknown, Cannot calculate Price Impact. The price impact may be higher than usual. Are you sure to continue the Swap?" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/errors.ts:43 +#: widget/embedded/src/constants/errors.ts:44 #~ msgid "Confirm USD Price Unknown" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/messages.ts:5 +#: widget/embedded/src/constants/messages.ts:6 #: widget/embedded/src/pages/Home.tsx:311 #~ msgid "Swap" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/messages.ts:6 +#: widget/embedded/src/constants/messages.ts:7 #~ msgid "Swap anyway" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/constants/messages.ts:7 +#: widget/embedded/src/constants/messages.ts:8 #~ msgid "The route goes through Ethereum. Continue?" #~ msgstr "" diff --git a/wallets/wallets-adapter/package.json b/wallets/wallets-adapter/package.json index 04b7608dc2..5de72c893c 100644 --- a/wallets/wallets-adapter/package.json +++ b/wallets/wallets-adapter/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/wallets-adapter", - "version": "0.14.1-next.11", + "version": "0.14.1-next.12", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -24,7 +24,7 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.3", - "@rango-dev/ui": "^0.17.1-next.9", + "@rango-dev/ui": "^0.17.1-next.10", "@rango-dev/wallets-react": "^0.3.1-next.1", "@rango-dev/wallets-shared": "^0.17.1-next.0", "rango-types": "^0.1.46" diff --git a/widget/app/package.json b/widget/app/package.json index 319e3c5320..bf6224e1d1 100644 --- a/widget/app/package.json +++ b/widget/app/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-app", - "version": "0.12.1-next.52", + "version": "0.12.1-next.53", "license": "MIT", "private": true, "source": "public/index.html", @@ -14,7 +14,7 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.14", + "@rango-dev/widget-embedded": "^0.14.1-next.15", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0" diff --git a/widget/embedded/package.json b/widget/embedded/package.json index 7fa7732fd8..aa999ff960 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.14.1-next.14", + "version": "0.14.1-next.15", "license": "MIT", "type": "module", "main": "dist/index.js", @@ -23,7 +23,7 @@ "@rango-dev/queue-manager-core": "^0.17.0", "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.2", "@rango-dev/queue-manager-react": "^0.17.0", - "@rango-dev/ui": "^0.17.1-next.9", + "@rango-dev/ui": "^0.17.1-next.10", "@rango-dev/wallets-react": "^0.3.1-next.1", "@rango-dev/wallets-shared": "^0.17.1-next.0", "bignumber.js": "^9.1.1", diff --git a/widget/iframe/package.json b/widget/iframe/package.json index b474d88d23..d9aac0e452 100644 --- a/widget/iframe/package.json +++ b/widget/iframe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-iframe", - "version": "0.12.1-next.52", + "version": "0.12.1-next.53", "license": "MIT", "private": true, "source": "src/index.ts", @@ -13,6 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.14" + "@rango-dev/widget-embedded": "^0.14.1-next.15" } } diff --git a/widget/playground/package.json b/widget/playground/package.json index 32120202ee..393f420830 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-playground", - "version": "0.12.1-next.53", + "version": "0.12.1-next.54", "license": "MIT", "private": true, "source": "public/index.html", @@ -18,10 +18,10 @@ }, "dependencies": { "@rango-dev/provider-all": "^0.17.1-next.3", - "@rango-dev/ui": "^0.17.1-next.9", + "@rango-dev/ui": "^0.17.1-next.10", "@rango-dev/wallets-react": "^0.3.1-next.1", "@rango-dev/wallets-shared": "^0.17.1-next.0", - "@rango-dev/widget-embedded": "^0.14.1-next.14", + "@rango-dev/widget-embedded": "^0.14.1-next.15", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-color": "^2.19.3", diff --git a/widget/ui/package.json b/widget/ui/package.json index 49965b2acc..43a1c77a1a 100644 --- a/widget/ui/package.json +++ b/widget/ui/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/ui", - "version": "0.17.1-next.9", + "version": "0.17.1-next.10", "license": "MIT", "type": "module", "module": "./dist/index.js", @@ -23,16 +23,18 @@ "lint": "eslint \"**/*.{ts,tsx}\" --ignore-path ../../.eslintignore" }, "peerDependencies": { - "@rango-dev/queue-manager-rango-preset": "*", - "react": ">=16", "@lingui/core": "4.2.1", - "@lingui/react": "4.2.1" + "@lingui/react": "4.2.1", + "@rango-dev/queue-manager-rango-preset": "*", + "react": ">=16" }, "devDependencies": { "@babel/core": "^7.20.2", "@babel/preset-env": "^7.21.4", "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.21.4", + "@lingui/core": "4.2.1", + "@lingui/react": "4.2.1", "@storybook/addon-essentials": "^7.1.1", "@storybook/addon-info": "^5.3.21", "@storybook/addon-links": "^7.1.1", @@ -54,9 +56,7 @@ "storybook": "^7.1.1", "tsdx": "^0.14.1", "tslib": "^2.4.1", - "typescript": "^4.8.4", - "@lingui/core": "4.2.1", - "@lingui/react": "4.2.1" + "typescript": "^4.8.4" }, "dependencies": { "@radix-ui/react-checkbox": "^1.0.1", From c27a06d76734c9c0e2b97c62ce83464f9b684547 Mon Sep 17 00:00:00 2001 From: yeager-eren Date: Sun, 5 Nov 2023 03:11:21 +0000 Subject: [PATCH 635/769] feat: keep user history for selected chains --- .vscode/launch.json | 19 + .../BlockchainsSection/BlockchainsSection.tsx | 27 +- widget/embedded/src/constants/configs.ts | 1 + .../src/hooks/usePrepareBlockchainList.ts | 125 - .../hooks/usePrepareBlockchainList/index.ts | 1 + .../usePrepareBlockchainList.constants.ts | 1 + .../usePrepareBlockchainList.helpers.ts | 108 + .../usePrepareBlockchainList.mock.ts | 3101 +++++++++++++++++ .../usePrepareBlockchainList.test.ts | 273 ++ .../usePrepareBlockchainList.ts | 38 + .../usePrepareBlockchainList.types.ts | 12 + widget/embedded/src/store/settings.ts | 35 +- 12 files changed, 3609 insertions(+), 132 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 widget/embedded/src/constants/configs.ts delete mode 100644 widget/embedded/src/hooks/usePrepareBlockchainList.ts create mode 100644 widget/embedded/src/hooks/usePrepareBlockchainList/index.ts create mode 100644 widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.constants.ts create mode 100644 widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.helpers.ts create mode 100644 widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.mock.ts create mode 100644 widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.test.ts create mode 100644 widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.ts create mode 100644 widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.types.ts diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000000..0dabfda416 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,19 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Debug Current Test File", + "autoAttachChildProcesses": true, + "skipFiles": ["/**", "**/node_modules/**"], + "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs", + "args": ["run", "${relativeFile}"], + "smartStep": true, + "console": "integratedTerminal" + } + ] +} diff --git a/widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx b/widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx index cb512ff1b5..569673c90a 100644 --- a/widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx +++ b/widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx @@ -11,28 +11,31 @@ import { } from '@rango-dev/ui'; import React from 'react'; +import { BLOCKCHAIN_LIST_SIZE } from '../../constants/configs'; import { usePrepareBlockchainList } from '../../hooks/usePrepareBlockchainList'; import { useBestRouteStore } from '../../store/bestRoute'; import { useMetaStore } from '../../store/meta'; import { Container } from './BlockchainsSection.styles'; -const LIST_SIZE = 10; -const MAX_ITEMS = LIST_SIZE + 1; const NUMBER_OF_LOADING = 12; export function BlockchainsSection(props: PropTypes) { const { blockchains, type, blockchain, onChange, onMoreClick } = props; const blockchainsList = usePrepareBlockchainList(blockchains, { - limit: blockchains.length === MAX_ITEMS ? MAX_ITEMS : LIST_SIZE, + limit: BLOCKCHAIN_LIST_SIZE, selected: blockchain?.name, }); const loadingStatus = useMetaStore.use.loadingStatus(); const resetToBlockchain = useBestRouteStore.use.resetToBlockchain(); const resetFromBlockchain = useBestRouteStore.use.resetFromBlockchain(); - const showMoreButton = - blockchains.length !== MAX_ITEMS && blockchainsList.more.length; + const hasMoreItemsInList = blockchainsList.more.length > 0; + /** + * When only one item is left on list, we will not show the `More` button and will show the item itself instead. + */ + const onlyOneItemInList = blockchainsList.more.length === 1; + const showMoreButton = !onlyOneItemInList && hasMoreItemsInList; return (
@@ -70,8 +73,20 @@ export function BlockchainsSection(props: PropTypes) { ))} + {onlyOneItemInList ? ( + onChange(blockchainsList.more[0])}> + + + ) : null} + {showMoreButton ? ( - + {i18n._('More +{count}', { count: blockchainsList.more.length, diff --git a/widget/embedded/src/constants/configs.ts b/widget/embedded/src/constants/configs.ts new file mode 100644 index 0000000000..7abaa89a39 --- /dev/null +++ b/widget/embedded/src/constants/configs.ts @@ -0,0 +1 @@ +export const BLOCKCHAIN_LIST_SIZE = 10; diff --git a/widget/embedded/src/hooks/usePrepareBlockchainList.ts b/widget/embedded/src/hooks/usePrepareBlockchainList.ts deleted file mode 100644 index 899390e79f..0000000000 --- a/widget/embedded/src/hooks/usePrepareBlockchainList.ts +++ /dev/null @@ -1,125 +0,0 @@ -import type { BlockchainMeta } from 'rango-sdk'; - -import { useMemo, useRef } from 'react'; - -interface PrepareListOptions { - limit?: number; - selected?: string; -} - -interface PrepareListOutput { - list: BlockchainMeta[]; - more: BlockchainMeta[]; -} - -/** - * - * UI needs some specific logics like limiting the list and sorting, - * this function is getting the raw blockchains list and return a list for showing in UI. - * - */ -export function usePrepareBlockchainList( - blockchains: BlockchainMeta[], - options?: PrepareListOptions -): PrepareListOutput { - const prevSelectedBlockchain = useRef({ index: -1, name: '' }); - - blockchains.sort(sortByMostUsedBlockchains); - - const blockchainsHash = blockchains - .map((blockchain) => blockchain.name) - .join('-'); - - return useMemo(() => { - const list: BlockchainMeta[] = blockchains; - let more: BlockchainMeta[] = []; - - // Checking `limit` has set and it should be more than of the list items. - if (options?.limit && blockchains.length > options.limit) { - const start = options.limit; - /** Try find the blockchain and returns the index. */ - const selectedIndex = options.selected - ? blockchains.findIndex( - (blockchains) => blockchains.name === options.selected - ) - : -1; - - const prevSelectedBlockchainWasInMoreSection = - prevSelectedBlockchain.current.index > options.limit - 1 && - !!blockchains.find( - (blockchains) => - blockchains.name === prevSelectedBlockchain.current.name - ); - - /* - * If the selected blockchain is in `more` section, we should move it to front of the list - */ - if ( - options.selected && - ((prevSelectedBlockchainWasInMoreSection && - selectedIndex < options.limit - 1) || - selectedIndex > options.limit - 1) - ) { - blockchains.sort( - generateSortBySelectedFor( - prevSelectedBlockchainWasInMoreSection - ? prevSelectedBlockchain.current.name - : options.selected - ) - ); - } - - /* - * Splice will modify the original list and returns the deleted items - * We use the deleted items as `more` - */ - more = list.splice(start); - prevSelectedBlockchain.current = { - index: selectedIndex, - name: options.selected ?? '', - }; - } - - return { - list, - more, - }; - }, [blockchainsHash]); -} - -function generateSortBySelectedFor(selected: string) { - /** Move `selected` blockchain to the front of list. */ - return function sortBySelected(a: BlockchainMeta, b: BlockchainMeta) { - if (a.name === selected) { - return -1; - } - if (b.name === selected) { - return 1; - } - - return 0; - }; -} - -/** There is a hardcoded list of blockchains that we want to show them first in the list. */ -function sortByMostUsedBlockchains(a: BlockchainMeta, b: BlockchainMeta) { - const mostUsed = ['ETH', 'COSMOS', 'OSMOSIS']; - const aIndexInMostUsed = mostUsed.findIndex((token) => token === a.name); - const bIndexInMostUsed = mostUsed.findIndex((token) => token === b.name); - const aIsMostUsed = aIndexInMostUsed > -1; - const bIsMostUsed = bIndexInMostUsed > -1; - - if (aIsMostUsed && bIsMostUsed) { - return aIndexInMostUsed > bIndexInMostUsed ? 1 : -1; - } - - if (aIsMostUsed) { - return -1; - } - - if (bIsMostUsed) { - return 1; - } - - return 0; -} diff --git a/widget/embedded/src/hooks/usePrepareBlockchainList/index.ts b/widget/embedded/src/hooks/usePrepareBlockchainList/index.ts new file mode 100644 index 0000000000..3fe71300f0 --- /dev/null +++ b/widget/embedded/src/hooks/usePrepareBlockchainList/index.ts @@ -0,0 +1 @@ +export { usePrepareBlockchainList } from './usePrepareBlockchainList'; diff --git a/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.constants.ts b/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.constants.ts new file mode 100644 index 0000000000..6c03e39027 --- /dev/null +++ b/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.constants.ts @@ -0,0 +1 @@ +export const MOST_USED_BLOCKChAINS = ['ETH', 'COSMOS', 'OSMOSIS']; diff --git a/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.helpers.ts b/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.helpers.ts new file mode 100644 index 0000000000..98472b8a53 --- /dev/null +++ b/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.helpers.ts @@ -0,0 +1,108 @@ +import type { PrepareListOptions } from './usePrepareBlockchainList.types'; +import type { BlockchainMeta } from 'rango-sdk'; + +import { MOST_USED_BLOCKChAINS } from './usePrepareBlockchainList.constants'; + +export function prepare( + blockchains: BlockchainMeta[], + preferredBlockchains: string[], + options?: PrepareListOptions +) { + /* + * TODO: + * We copying the `blockchains` which can causes performance penalties but we should because we are mutating the original object. + * A better way to solve the problem maybe is using new JS features like Use toSpliced() but + * we can not use it right now because we need to upgrade our toolings first. + */ + const list: BlockchainMeta[] = JSON.parse(JSON.stringify(blockchains)); + let more: BlockchainMeta[] = []; + + list.sort(sortByMostUsedBlockchains); + + // Checking `limit` has set and it should be more than of the list items. + if (!!options?.limit && blockchains.length > options.limit) { + const start = options.limit; + let preferredBlockchainsWithoutMainList = preferredBlockchains; + + if (preferredBlockchains.length <= options.limit) { + /* + * For first X (limit) numbers, we need to remove them from preferred if exists. + */ + for (let i = 0; i < options.limit; i++) { + const blockchain = list[i]; + preferredBlockchainsWithoutMainList = + preferredBlockchainsWithoutMainList.filter((preferredBlockchain) => { + return blockchain.name !== preferredBlockchain; + }); + } + } + list.sort( + generateSortByPreferredBlockchainsFor(preferredBlockchainsWithoutMainList) + ); + + /* + * Splice will modify the original list and returns the deleted items + * We use the deleted items as `more` + */ + more = list.splice(start); + } + return { + list, + more, + }; +} + +/** There is a hardcoded list of blockchains that we want to show them first in the list. */ +export function sortByMostUsedBlockchains( + a: BlockchainMeta, + b: BlockchainMeta +) { + const mostUsed = MOST_USED_BLOCKChAINS; + const aIndexInMostUsed = mostUsed.findIndex((token) => token === a.name); + const bIndexInMostUsed = mostUsed.findIndex((token) => token === b.name); + const aIsMostUsed = aIndexInMostUsed > -1; + const bIsMostUsed = bIndexInMostUsed > -1; + + if (aIsMostUsed && bIsMostUsed) { + return aIndexInMostUsed > bIndexInMostUsed ? 1 : -1; + } + + if (aIsMostUsed) { + return -1; + } + + if (bIsMostUsed) { + return 1; + } + + return 0; +} + +export function generateSortByPreferredBlockchainsFor( + preferredBlockchains: string[] +) { + return function sortByPreferred(a: BlockchainMeta, b: BlockchainMeta) { + const aIndexInPreferred = preferredBlockchains.findIndex( + (blockchain) => blockchain === a.name + ); + const bIndexInPreferred = preferredBlockchains.findIndex( + (blockchain) => blockchain === b.name + ); + + const aIsPreferred = aIndexInPreferred > -1; + const bIsPreferred = bIndexInPreferred > -1; + + if (aIsPreferred && bIsPreferred) { + return aIndexInPreferred > bIndexInPreferred ? 1 : -1; + } + + if (preferredBlockchains.includes(a.name)) { + return -1; + } + if (preferredBlockchains.includes(b.name)) { + return 1; + } + + return 0; + }; +} diff --git a/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.mock.ts b/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.mock.ts new file mode 100644 index 0000000000..3f2d0baad8 --- /dev/null +++ b/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.mock.ts @@ -0,0 +1,3101 @@ +import type { BlockchainMeta } from 'rango-sdk'; + +import { TransactionType } from 'rango-sdk'; + +export const sampleBlockchains: BlockchainMeta[] = [ + { + name: 'ETH', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'ETH', + symbol: 'ETH', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/ethereum.svg', + displayName: 'Ethereum', + shortName: 'ETH', + sort: 0, + color: '#ecf0f1', + enabled: true, + type: TransactionType.EVM, + chainId: '0x1', + info: { + infoType: 'EvmMetaInfo', + chainName: 'Ethereum Mainnet', + nativeCurrency: { + name: 'ETH', + symbol: 'ETH', + decimals: 18, + }, + rpcUrls: ['https://rpc.ankr.com/eth'], + blockExplorerUrls: ['https://etherscan.io'], + addressUrl: 'https://etherscan.io/address/{wallet}', + transactionUrl: 'https://etherscan.io/tx/{txHash}', + }, + }, + { + name: 'BSC', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'BSC', + symbol: 'BNB', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/bsc.svg', + displayName: 'BNB Smart Chain', + shortName: 'BSC', + sort: 1, + color: '#F3BA2F', + enabled: true, + type: TransactionType.EVM, + chainId: '0x38', + info: { + infoType: 'EvmMetaInfo', + chainName: 'Binance Smart Chain Mainnet', + nativeCurrency: { + name: 'BNB', + symbol: 'BNB', + decimals: 18, + }, + rpcUrls: ['https://bsc-dataseed1.ninicoin.io'], + blockExplorerUrls: ['https://bscscan.com'], + addressUrl: 'https://bscscan.com/address/{wallet}', + transactionUrl: 'https://bscscan.com/tx/{txHash}', + }, + }, + { + name: 'ARBITRUM', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'ARBITRUM', + symbol: 'ETH', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/arbitrum.svg', + displayName: 'Arbitrum', + shortName: 'Arbitrum', + sort: 2, + color: '#28a0f0', + enabled: true, + type: TransactionType.EVM, + chainId: '0xa4b1', + info: { + infoType: 'EvmMetaInfo', + chainName: 'Arbitrum One', + nativeCurrency: { + name: 'ETH', + symbol: 'ETH', + decimals: 18, + }, + rpcUrls: ['https://arb1.arbitrum.io/rpc'], + blockExplorerUrls: ['https://arbiscan.io'], + addressUrl: 'https://arbiscan.io/address/{wallet}', + transactionUrl: 'https://arbiscan.io/tx/{txHash}', + }, + }, + { + name: 'POLYGON', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'POLYGON', + symbol: 'MATIC', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/polygon.svg', + displayName: 'Polygon', + shortName: 'Polygon', + sort: 3, + color: '#8247E5', + enabled: true, + type: TransactionType.EVM, + chainId: '0x89', + info: { + infoType: 'EvmMetaInfo', + chainName: 'Polygon Mainnet', + nativeCurrency: { + name: 'MATIC', + symbol: 'MATIC', + decimals: 18, + }, + rpcUrls: ['https://polygon-rpc.com'], + blockExplorerUrls: ['https://polygonscan.com'], + addressUrl: 'https://polygonscan.com/address/{wallet}', + transactionUrl: 'https://polygonscan.com/tx/{txHash}', + }, + }, + { + name: 'ZKSYNC', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'ZKSYNC', + symbol: 'ETH', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/zksync.png', + displayName: 'zkSync era', + shortName: 'zkSync', + sort: 4, + color: '#2D2925', + enabled: true, + type: TransactionType.EVM, + chainId: '0x144', + info: { + infoType: 'EvmMetaInfo', + chainName: 'zkSync', + nativeCurrency: { + name: 'ETH', + symbol: 'ETH', + decimals: 18, + }, + rpcUrls: ['https://mainnet.era.zksync.io'], + blockExplorerUrls: ['https://explorer.zksync.io'], + addressUrl: 'https://explorer.zksync.io/address/{wallet}', + transactionUrl: 'https://explorer.zksync.io/tx/{txHash}', + }, + }, + { + name: 'STARKNET', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{32,64}$'], + feeAssets: [ + { + blockchain: 'STARKNET', + symbol: 'ETH', + address: + '0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7', + }, + ], + logo: 'https://api.rango.exchange/blockchains/starknet.svg', + displayName: 'StarkNet', + shortName: 'StarkNet', + sort: 5, + color: '#708DD2', + enabled: true, + type: TransactionType.STARKNET, + chainId: '0x534e5f4d41494e', + info: { + infoType: 'StarkNetMetaInfo', + chainName: 'StarkNet Mainnet', + nativeCurrency: { + name: 'ETH', + symbol: 'ETH', + decimals: 18, + }, + blockExplorerUrls: ['https://starkscan.co'], + addressUrl: 'https://starkscan.co/contract/{wallet}', + transactionUrl: 'https://starkscan.co/tx/{txHash}', + }, + }, + { + name: 'OPTIMISM', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'OPTIMISM', + symbol: 'ETH', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/optimism.svg', + displayName: 'Optimism', + shortName: 'Optimism', + sort: 6, + color: '#FF0420', + enabled: true, + type: TransactionType.EVM, + chainId: '0xa', + info: { + infoType: 'EvmMetaInfo', + chainName: 'Optimism', + nativeCurrency: { + name: 'ETH', + symbol: 'ETH', + decimals: 18, + }, + rpcUrls: ['https://mainnet.optimism.io'], + blockExplorerUrls: ['https://optimistic.etherscan.io'], + addressUrl: 'https://optimistic.etherscan.io/address/{wallet}', + transactionUrl: 'https://optimistic.etherscan.io/tx/{txHash}', + }, + }, + { + name: 'AVAX_CCHAIN', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'AVAX_CCHAIN', + symbol: 'AVAX', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/avax_cchain.svg', + displayName: 'Avalanche', + shortName: 'Avax', + sort: 7, + color: '#e84142', + enabled: true, + type: TransactionType.EVM, + chainId: '0xa86a', + info: { + infoType: 'EvmMetaInfo', + chainName: 'Avalanche C-Chain', + nativeCurrency: { + name: 'AVAX', + symbol: 'AVAX', + decimals: 18, + }, + rpcUrls: ['https://api.avax.network/ext/bc/C/rpc'], + blockExplorerUrls: ['https://snowtrace.io'], + addressUrl: 'https://snowtrace.io/address/{wallet}', + transactionUrl: 'https://snowtrace.io/tx/{txHash}', + }, + }, + { + name: 'POLYGONZK', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'POLYGONZK', + symbol: 'ETH', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/zkevmpolygon.png', + displayName: 'polygon zkEVM', + shortName: 'Polygon zkEVM', + sort: 8, + color: '#8247e5', + enabled: true, + type: TransactionType.EVM, + chainId: '0x44d', + info: { + infoType: 'EvmMetaInfo', + chainName: 'Polygon zkEVM Mainnet', + nativeCurrency: { + name: 'ETH', + symbol: 'ETH', + decimals: 18, + }, + rpcUrls: ['https://zkevm-rpc.com'], + blockExplorerUrls: ['https://zkevm.polygonscan.com'], + addressUrl: 'https://zkevm.polygonscan.com/address/{wallet}', + transactionUrl: 'https://zkevm.polygonscan.com/tx/{txHash}', + }, + }, + { + name: 'LINEA', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'LINEA', + symbol: 'ETH', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/linea.svg', + displayName: 'Linea', + shortName: 'Linea', + sort: 9, + color: '#121212', + enabled: true, + type: TransactionType.EVM, + chainId: '0xe708', + info: { + infoType: 'EvmMetaInfo', + chainName: 'Linea Mainnet', + nativeCurrency: { + name: 'ETH', + symbol: 'ETH', + decimals: 18, + }, + rpcUrls: ['https://rpc.linea.build'], + blockExplorerUrls: ['https://explorer.linea.build'], + addressUrl: 'https://explorer.linea.build/address/{wallet}', + transactionUrl: 'https://explorer.linea.build/tx/{txHash}', + }, + }, + { + name: 'TRON', + defaultDecimals: 18, + addressPatterns: ['^T[1-9A-HJ-NP-Za-km-z]{33}$'], + feeAssets: [ + { + blockchain: 'TRON', + symbol: 'TRX', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/tron.svg', + displayName: 'Tron', + shortName: 'Tron', + sort: 10, + color: '#FF060A', + enabled: true, + type: TransactionType.EVM, + chainId: '0x2b6653dc', + info: { + infoType: 'EvmMetaInfo', + chainName: 'TRON Mainnet', + nativeCurrency: { + name: 'TRX', + symbol: 'TRX', + decimals: 6, + }, + rpcUrls: ['https://api.trongrid.io/jsonrpc'], + blockExplorerUrls: ['https://tronscan.org/#'], + addressUrl: 'https://tronscan.org/#/address/{wallet}', + transactionUrl: 'https://tronscan.org/#/tx/{txHash}', + }, + }, + { + name: 'BTC', + defaultDecimals: 8, + addressPatterns: [ + '^[13][a-km-zA-HJ-NP-Z1-9]{25,34}$|^(bc1)[0-9A-Za-z]{39,59}$', + ], + feeAssets: [ + { + blockchain: 'BTC', + symbol: 'BTC', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/btc.svg', + displayName: 'Bitcoin', + shortName: 'BTC', + sort: 11, + color: '#F7931A', + enabled: true, + type: TransactionType.TRANSFER, + chainId: null, + info: null, + }, + { + name: 'COSMOS', + defaultDecimals: 6, + addressPatterns: ['^(cosmos1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'COSMOS', + symbol: 'ATOM', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/cosmos.svg', + displayName: 'Cosmos', + shortName: 'Cosmos', + sort: 12, + color: '#2E3148', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'cosmoshub-4', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://cosmos-rpc.polkachu.com', + rest: 'https://lcd-cosmoshub.blockapsis.com', + cosmostationLcdUrl: 'https://lcd-cosmoshub.blockapsis.com', + cosmostationApiUrl: 'https://cosmos-rpc.polkachu.com', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'cosmos', + chainName: 'Cosmos', + stakeCurrency: { + coinDenom: 'ATOM', + coinMinimalDenom: 'uatom', + coinDecimals: 6, + coinGeckoId: 'cosmos', + coinImageUrl: '/tokens/blockchain/cosmos.svg', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'cosmos', + bech32PrefixAccPub: 'cosmospub', + bech32PrefixValAddr: 'cosmosvaloper', + bech32PrefixValPub: 'cosmosvaloperpub', + bech32PrefixConsAddr: 'cosmosvalcons', + bech32PrefixConsPub: 'cosmosvalconspub', + }, + currencies: [ + { + coinDenom: 'ATOM', + coinMinimalDenom: 'uatom', + coinDecimals: 6, + coinGeckoId: 'cosmos', + coinImageUrl: '/tokens/blockchain/cosmos.svg', + }, + ], + feeCurrencies: [ + { + coinDenom: 'ATOM', + coinMinimalDenom: 'uatom', + coinDecimals: 6, + coinGeckoId: 'cosmos', + coinImageUrl: '/tokens/blockchain/cosmos.svg', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/cosmos/txs/{txHash}', + gasPriceStep: { + low: 0.01, + average: 0.025, + high: 0.04, + }, + }, + }, + { + name: 'OSMOSIS', + defaultDecimals: 6, + addressPatterns: ['^(osmo1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'OSMOSIS', + symbol: 'OSMO', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/osmosis.svg', + displayName: 'Osmosis', + shortName: 'Osmosis', + sort: 13, + color: '#7901B4', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'osmosis-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://osmosis-rpc.polkachu.com', + rest: 'https://lcd.osmosis.zone', + cosmostationLcdUrl: 'https://lcd.osmosis.zone', + cosmostationApiUrl: 'https://rpc.osmosis.zone', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'osmosis', + chainName: 'Osmosis', + stakeCurrency: { + coinDenom: 'OSMO', + coinMinimalDenom: 'uosmo', + coinDecimals: 6, + coinGeckoId: 'pool:uosmo', + coinImageUrl: '/tokens/blockchain/osmosis.svg', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'osmo', + bech32PrefixAccPub: 'osmopub', + bech32PrefixValAddr: 'osmovaloper', + bech32PrefixValPub: 'osmovaloperpub', + bech32PrefixConsAddr: 'osmovalcons', + bech32PrefixConsPub: 'osmovalconspub', + }, + currencies: [ + { + coinDenom: 'OSMO', + coinMinimalDenom: 'uosmo', + coinDecimals: 6, + coinGeckoId: 'pool:uosmo', + coinImageUrl: '/tokens/blockchain/osmosis.svg', + }, + { + coinDenom: 'ION', + coinMinimalDenom: 'uion', + coinDecimals: 6, + coinGeckoId: 'pool:uion', + coinImageUrl: '/tokens/blockchain/ion.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'OSMO', + coinMinimalDenom: 'uosmo', + coinDecimals: 6, + coinGeckoId: 'pool:uosmo', + coinImageUrl: '/tokens/blockchain/osmosis.svg', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/osmosis/txs/{txHash}', + gasPriceStep: { + low: 0, + average: 0.025, + high: 0.04, + }, + }, + }, + { + name: 'NEUTRON', + defaultDecimals: 6, + addressPatterns: ['^(neutron1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'NEUTRON', + symbol: 'NTRN', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/neutron.svg', + displayName: 'Neutron', + shortName: 'Neutron', + sort: 14, + color: '#141414', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'neutron-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://rpc-kralum.neutron-1.neutron.org', + rest: 'https://rest-kralum.neutron-1.neutron.org', + cosmostationLcdUrl: 'https://lcd-neutron.whispernode.com', + cosmostationApiUrl: 'https://neutron-rpc.polkachu.com', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'neutron', + chainName: 'Neutron', + stakeCurrency: { + coinDenom: 'NTRN', + coinMinimalDenom: 'untrn', + coinDecimals: 6, + coinGeckoId: 'neutron', + coinImageUrl: '/tokens/blockchain/neutron.jpg', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'neutron', + bech32PrefixAccPub: 'neutronpub', + bech32PrefixValAddr: 'neutronvaloper', + bech32PrefixValPub: 'neutronvaloperpub', + bech32PrefixConsAddr: 'neutronvalcons', + bech32PrefixConsPub: 'neutronvalconspub', + }, + currencies: [ + { + coinDenom: 'NTRN', + coinMinimalDenom: 'untrn', + coinDecimals: 6, + coinGeckoId: 'neutron', + coinImageUrl: '/tokens/blockchain/neutron.jpg', + }, + ], + feeCurrencies: [ + { + coinDenom: 'NTRN', + coinMinimalDenom: 'untrn', + coinDecimals: 6, + coinGeckoId: 'neutron', + coinImageUrl: '/tokens/blockchain/neutron.jpg', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/neutron/txs/{txHash}', + gasPriceStep: { + low: 0.01, + average: 0.025, + high: 0.05, + }, + }, + }, + { + name: 'NOBLE', + defaultDecimals: 6, + addressPatterns: ['^(noble1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'NOBLE', + symbol: 'STAKE', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/noble.svg', + displayName: 'Noble', + shortName: 'Noble', + sort: 15, + color: '#141414', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'noble-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://noble-rpc.polkachu.com', + rest: 'https://noble-api.polkachu.com', + cosmostationLcdUrl: 'https://noble-api.polkachu.com', + cosmostationApiUrl: 'https://noble-rpc.polkachu.com', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'noble', + chainName: 'Noble', + stakeCurrency: { + coinDenom: 'STAKE', + coinMinimalDenom: 'ustake', + coinDecimals: 6, + coinGeckoId: 'noble', + coinImageUrl: '/tokens/blockchain/noble.svg', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'noble', + bech32PrefixAccPub: 'noblepub', + bech32PrefixValAddr: 'noblevaloper', + bech32PrefixValPub: 'noblevaloperpub', + bech32PrefixConsAddr: 'noblevalcons', + bech32PrefixConsPub: 'noblevalconspub', + }, + currencies: [ + { + coinDenom: 'STAKE', + coinMinimalDenom: 'ustake', + coinDecimals: 6, + coinGeckoId: 'noble', + coinImageUrl: '/tokens/blockchain/noble.svg', + }, + ], + feeCurrencies: [ + { + coinDenom: 'STAKE', + coinMinimalDenom: 'ustake', + coinDecimals: 6, + coinGeckoId: 'noble', + coinImageUrl: '/tokens/blockchain/noble.svg', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/noble/txs/{txHash}', + gasPriceStep: { + low: 0.01, + average: 0.025, + high: 0.03, + }, + }, + }, + { + name: 'SOLANA', + defaultDecimals: 9, + addressPatterns: ['^[1-9A-HJ-NP-Za-km-z]{32,44}$'], + feeAssets: [ + { + blockchain: 'SOLANA', + symbol: 'SOL', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/solana.svg', + displayName: 'Solana', + shortName: 'Solana', + sort: 16, + color: '#708DD2', + enabled: true, + type: TransactionType.SOLANA, + chainId: 'mainnet-beta', + info: null, + }, + { + name: 'CRONOS', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'CRONOS', + symbol: 'CRO', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/cronos.svg', + displayName: 'Cronos', + shortName: 'Cronos', + sort: 17, + color: '#1a90ff', + enabled: true, + type: TransactionType.EVM, + chainId: '0x19', + info: { + infoType: 'EvmMetaInfo', + chainName: 'Cronos Mainnet Beta', + nativeCurrency: { + name: 'CRO', + symbol: 'CRO', + decimals: 18, + }, + rpcUrls: ['https://evm.cronos.org'], + blockExplorerUrls: ['https://cronoscan.com'], + addressUrl: 'https://cronoscan.com/address/{wallet}', + transactionUrl: 'https://cronoscan.com/tx/{txHash}', + }, + }, + { + name: 'BNB', + defaultDecimals: 8, + addressPatterns: ['^(bnb1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'BNB', + symbol: 'BNB', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/bnb.svg', + displayName: 'Binance Chain', + shortName: 'BNB', + sort: 18, + color: '#F3BA2F', + enabled: true, + type: TransactionType.COSMOS, + chainId: null, + info: null, + }, + { + name: 'AURORA', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'AURORA', + symbol: 'ETH', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/aurora.svg', + displayName: 'Aurora', + shortName: 'Aurora', + sort: 20, + color: '#78d64b', + enabled: true, + type: TransactionType.EVM, + chainId: '0x4e454152', + info: { + infoType: 'EvmMetaInfo', + chainName: 'Aurora Mainnet', + nativeCurrency: { + name: 'ETH', + symbol: 'ETH', + decimals: 18, + }, + rpcUrls: ['https://mainnet.aurora.dev'], + blockExplorerUrls: ['https://explorer.mainnet.aurora.dev'], + addressUrl: 'https://explorer.mainnet.aurora.dev/address/{wallet}', + transactionUrl: 'https://explorer.mainnet.aurora.dev/tx/{txHash}', + }, + }, + { + name: 'MAYA', + defaultDecimals: 8, + addressPatterns: ['^(maya1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'MAYA', + symbol: 'CACAO', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/maya.svg', + displayName: 'MayaChain', + shortName: 'MayaChain', + sort: 21, + color: '#1ae6e6', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'mayachain-mainnet-v1', + info: null, + }, + { + name: 'THOR', + defaultDecimals: 8, + addressPatterns: ['^(thor1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'THOR', + symbol: 'RUNE', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/thorchain.svg', + displayName: 'Thorchain', + shortName: 'Thorchain', + sort: 22, + color: '#1AE6CB', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'thorchain-mainnet-v1', + info: null, + }, + { + name: 'BOBA', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'BOBA', + symbol: 'ETH', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/boba.png', + displayName: 'Boba', + shortName: 'Boba', + sort: 23, + color: '#ccff00', + enabled: true, + type: TransactionType.EVM, + chainId: '0x120', + info: { + infoType: 'EvmMetaInfo', + chainName: 'Boba Network', + nativeCurrency: { + name: 'ETH', + symbol: 'ETH', + decimals: 18, + }, + rpcUrls: ['https://mainnet.boba.network'], + blockExplorerUrls: ['https://bobascan.com/'], + addressUrl: 'https://bobascan.com//address/{wallet}', + transactionUrl: 'https://bobascan.com//tx/{txHash}', + }, + }, + { + name: 'MOONBEAM', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'MOONBEAM', + symbol: 'GLMR', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/moonbeam.png', + displayName: 'MoonBeam', + shortName: 'MoonBeam', + sort: 24, + color: '#B3206B', + enabled: true, + type: TransactionType.EVM, + chainId: '0x504', + info: { + infoType: 'EvmMetaInfo', + chainName: 'MoonBeam', + nativeCurrency: { + name: 'GLMR', + symbol: 'GLMR', + decimals: 18, + }, + rpcUrls: ['https://rpc.api.moonbeam.network'], + blockExplorerUrls: ['https://moonbeam.moonscan.io'], + addressUrl: 'https://moonbeam.moonscan.io/address/{wallet}', + transactionUrl: 'https://moonbeam.moonscan.io/tx/{txHash}', + }, + }, + { + name: 'MOONRIVER', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'MOONRIVER', + symbol: 'MOVR', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/moonriver.svg', + displayName: 'MoonRiver', + shortName: 'MoonRiver', + sort: 25, + color: '#F3B404', + enabled: true, + type: TransactionType.EVM, + chainId: '0x505', + info: { + infoType: 'EvmMetaInfo', + chainName: 'MoonRiver', + nativeCurrency: { + name: 'MOVR', + symbol: 'MOVR', + decimals: 18, + }, + rpcUrls: ['https://rpc.moonriver.moonbeam.network'], + blockExplorerUrls: ['https://moonriver.moonscan.io'], + addressUrl: 'https://moonriver.moonscan.io/address/{wallet}', + transactionUrl: 'https://moonriver.moonscan.io/tx/{txHash}', + }, + }, + { + name: 'OKC', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'OKC', + symbol: 'OKT', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/okx.png', + displayName: 'OKX Chain (OKC)', + shortName: 'Okx', + sort: 26, + color: '#29a0f0', + enabled: true, + type: TransactionType.EVM, + chainId: '0x42', + info: { + infoType: 'EvmMetaInfo', + chainName: 'OKX Chain', + nativeCurrency: { + name: 'OKT', + symbol: 'OKT', + decimals: 18, + }, + rpcUrls: ['https://exchainrpc.okex.org'], + blockExplorerUrls: ['https://www.oklink.com/en/okc'], + addressUrl: 'https://www.oklink.com/en/okc/address/{wallet}', + transactionUrl: 'https://www.oklink.com/en/okc/tx/{txHash}', + }, + }, + { + name: 'BOBA_AVALANCHE', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'BOBA_AVALANCHE', + symbol: 'BOBA', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/boba.png', + displayName: 'Boba Avalanche', + shortName: 'Boba Avalanche', + sort: 28, + color: '#ccff00', + enabled: true, + type: TransactionType.EVM, + chainId: '0xa918', + info: { + infoType: 'EvmMetaInfo', + chainName: 'Boba Avalanche Network', + nativeCurrency: { + name: 'BOBA', + symbol: 'BOBA', + decimals: 18, + }, + rpcUrls: ['https://avax.boba.network'], + blockExplorerUrls: ['https://blockexplorer.avax.boba.network'], + addressUrl: 'https://blockexplorer.avax.boba.network/address/{wallet}', + transactionUrl: 'https://blockexplorer.avax.boba.network/tx/{txHash}', + }, + }, + { + name: 'LTC', + defaultDecimals: 8, + addressPatterns: ['^(L|M|3)[A-Za-z0-9]{33}$|^(ltc1)[0-9A-Za-z]{39}$'], + feeAssets: [ + { + blockchain: 'LTC', + symbol: 'LTC', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/ltc.svg', + displayName: 'LiteCoin', + shortName: 'LTC', + sort: 29, + color: '#345D9D', + enabled: true, + type: TransactionType.TRANSFER, + chainId: null, + info: null, + }, + { + name: 'BCH', + defaultDecimals: 8, + addressPatterns: ['^[13][a-km-zA-HJ-NP-Z1-9]{25,34}$|^[0-9A-Za-z]{42,42}$'], + feeAssets: [ + { + blockchain: 'BCH', + symbol: 'BCH', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/bch.svg', + displayName: 'Bitcoin Cash', + shortName: 'BCH', + sort: 30, + color: '#0AC18E', + enabled: true, + type: TransactionType.TRANSFER, + chainId: null, + info: null, + }, + { + name: 'HECO', + defaultDecimals: 18, + addressPatterns: ['^(0x)[0-9A-Fa-f]{40}$'], + feeAssets: [ + { + blockchain: 'HECO', + symbol: 'HT', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/heco.png', + displayName: 'Heco', + shortName: 'Heco', + sort: 33, + color: '#4CA852', + enabled: true, + type: TransactionType.EVM, + chainId: '0x80', + info: { + infoType: 'EvmMetaInfo', + chainName: 'Huobi ECO Chain Mainnet', + nativeCurrency: { + name: 'HT', + symbol: 'HT', + decimals: 18, + }, + rpcUrls: ['https://http-mainnet.hecochain.com'], + blockExplorerUrls: ['https://hecoinfo.com'], + addressUrl: 'https://hecoinfo.com/address/{wallet}', + transactionUrl: 'https://hecoinfo.com/tx/{txHash}', + }, + }, + { + name: 'STARGAZE', + defaultDecimals: 6, + addressPatterns: ['^(stars1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'STARGAZE', + symbol: 'STARS', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/stargaze.png', + displayName: 'Stargaze', + shortName: 'Stargaze', + sort: 36, + color: '#231B60', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'stargaze-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://rpc.stargaze-apis.com', + rest: 'https://rest.stargaze-apis.com', + cosmostationLcdUrl: 'https://rpc.stargaze-apis.com', + cosmostationApiUrl: 'https://rest.stargaze-apis.com', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'stargaze', + chainName: 'Stargaze', + stakeCurrency: { + coinDenom: 'STARS', + coinMinimalDenom: 'ustars', + coinDecimals: 6, + coinGeckoId: 'pool:ustars', + coinImageUrl: '/tokens/blockchain/STARS.png', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'stars', + bech32PrefixAccPub: 'starspub', + bech32PrefixValAddr: 'starsvaloper', + bech32PrefixValPub: 'starsvaloperpub', + bech32PrefixConsAddr: 'starsvalcons', + bech32PrefixConsPub: 'starsvalconspub', + }, + currencies: [ + { + coinDenom: 'STARS', + coinMinimalDenom: 'ustars', + coinDecimals: 6, + coinGeckoId: 'pool:ustars', + coinImageUrl: '/tokens/blockchain/STARS.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'STARS', + coinMinimalDenom: 'ustars', + coinDecimals: 6, + coinGeckoId: 'pool:ustars', + coinImageUrl: '/tokens/blockchain/STARS.png', + }, + ], + features: ['stargate', 'ibc-transfer', 'no-legacy-stdTx'], + explorerUrlToTx: 'https://www.mintscan.io/stargaze/txs/{txHash}', + gasPriceStep: { + low: 1, + average: 1, + high: 1, + }, + }, + }, + { + name: 'CRYPTO_ORG', + defaultDecimals: 8, + addressPatterns: ['^(cro1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'CRYPTO_ORG', + symbol: 'CRO', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/crypto_org.png', + displayName: 'Crypto.org', + shortName: 'Crypto.org', + sort: 38, + color: '#103F68', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'crypto-org-chain-mainnet-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://rpc.mainnet.crypto.org', + rest: 'https://rest.mainnet.crypto.org', + cosmostationLcdUrl: 'https://rest.mainnet.crypto.org', + cosmostationApiUrl: 'https://rpc.mainnet.crypto.org', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'crypto-org', + chainName: 'Crypto.org', + stakeCurrency: { + coinDenom: 'CRO', + coinMinimalDenom: 'basecro', + coinDecimals: 8, + coinGeckoId: 'crypto-com-chain', + coinImageUrl: '/tokens/blockchain/cro.png', + }, + bip44: { + coinType: 394, + }, + bech32Config: { + bech32PrefixAccAddr: 'cro', + bech32PrefixAccPub: 'cropub', + bech32PrefixValAddr: 'crovaloper', + bech32PrefixValPub: 'crovaloperpub', + bech32PrefixConsAddr: 'crovalcons', + bech32PrefixConsPub: 'crovalconspub', + }, + currencies: [ + { + coinDenom: 'CRO', + coinMinimalDenom: 'basecro', + coinDecimals: 8, + coinGeckoId: 'crypto-com-chain', + coinImageUrl: '/tokens/blockchain/cro.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'CRO', + coinMinimalDenom: 'basecro', + coinDecimals: 8, + coinGeckoId: 'crypto-com-chain', + coinImageUrl: '/tokens/blockchain/cro.png', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/crypto-org/txs/{txHash}', + gasPriceStep: { + low: 0.025, + average: 0.03, + high: 0.04, + }, + }, + }, + { + name: 'CHIHUAHUA', + defaultDecimals: 6, + addressPatterns: ['^(chihuahua1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'CHIHUAHUA', + symbol: 'HUAHUA', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/chihuahua.png', + displayName: 'Chihuahua', + shortName: 'Chihuahua', + sort: 39, + color: '#EFC92B', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'chihuahua-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: true, + rpc: 'https://rpc.chihuahua.wtf', + rest: 'https://api.chihuahua.wtf', + cosmostationLcdUrl: 'https://api.chihuahua.wtf', + cosmostationApiUrl: 'https://rpc.chihuahua.wtf', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'chihuahua', + chainName: 'Chihuahua', + stakeCurrency: { + coinDenom: 'HUAHUA', + coinMinimalDenom: 'uhuahua', + coinDecimals: 6, + coinGeckoId: 'pool:uhuahua', + coinImageUrl: '/tokens/blockchain/HUAHUA.svg', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'chihuahua', + bech32PrefixAccPub: 'chihuahuapub', + bech32PrefixValAddr: 'chihuahuavaloper', + bech32PrefixValPub: 'chihuahuavaloperpub', + bech32PrefixConsAddr: 'chihuahuavalcons', + bech32PrefixConsPub: 'chihuahuavalconspub', + }, + currencies: [ + { + coinDenom: 'HUAHUA', + coinMinimalDenom: 'uhuahua', + coinDecimals: 6, + coinGeckoId: 'pool:uhuahua', + coinImageUrl: '/tokens/blockchain/HUAHUA.svg', + }, + ], + feeCurrencies: [ + { + coinDenom: 'HUAHUA', + coinMinimalDenom: 'uhuahua', + coinDecimals: 6, + coinGeckoId: 'pool:uhuahua', + coinImageUrl: '/tokens/blockchain/HUAHUA.svg', + }, + ], + features: ['stargate', 'ibc-transfer', 'no-legacy-stdTx'], + explorerUrlToTx: 'https://ping.pub/chihuahua/tx/{txHash}', + gasPriceStep: { + low: 0.025, + average: 0.03, + high: 0.035, + }, + }, + }, + { + name: 'BANDCHAIN', + defaultDecimals: 6, + addressPatterns: ['^(band1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'BANDCHAIN', + symbol: 'BAND', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/bandchain.svg', + displayName: 'BandChain', + shortName: 'BandChain', + sort: 40, + color: '#4520E6', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'laozi-mainnet', + info: { + infoType: 'CosmosMetaInfo', + experimental: true, + rpc: 'https://rpc.laozi3.bandchain.org/', + rest: 'https://laozi1.bandchain.org/api', + cosmostationLcdUrl: 'https://laozi1.bandchain.org/api', + cosmostationApiUrl: 'https://rpc.laozi3.bandchain.org', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'band', + chainName: 'BandChain', + stakeCurrency: { + coinDenom: 'BAND', + coinMinimalDenom: 'uband', + coinDecimals: 6, + coinGeckoId: 'band-protocol', + coinImageUrl: '/tokens/blockchain/BAND.svg', + }, + bip44: { + coinType: 494, + }, + bech32Config: { + bech32PrefixAccAddr: 'band', + bech32PrefixAccPub: 'bandpub', + bech32PrefixValAddr: 'bandvaloper', + bech32PrefixValPub: 'bandvaloperpub', + bech32PrefixConsAddr: 'bandvalcons', + bech32PrefixConsPub: 'bandvalconspub', + }, + currencies: [ + { + coinDenom: 'BAND', + coinMinimalDenom: 'uband', + coinDecimals: 6, + coinGeckoId: 'band-protocol', + coinImageUrl: '/tokens/blockchain/BAND.svg', + }, + ], + feeCurrencies: [ + { + coinDenom: 'BAND', + coinMinimalDenom: 'uband', + coinDecimals: 6, + coinGeckoId: 'band-protocol', + coinImageUrl: '/tokens/blockchain/BAND.svg', + }, + ], + features: ['stargate', 'ibc-transfer', 'no-legacy-stdTx'], + explorerUrlToTx: 'https://cosmoscan.io/tx/{txHash}', + gasPriceStep: null, + }, + }, + { + name: 'COMDEX', + defaultDecimals: 6, + addressPatterns: ['^(comdex1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'COMDEX', + symbol: 'CMDX', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/comdex.svg', + displayName: 'Comdex', + shortName: 'Comdex', + sort: 41, + color: '#FE4350', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'comdex-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: true, + rpc: 'https://rpc.comdex.one', + rest: 'https://rest.comdex.one', + cosmostationLcdUrl: 'https://rest.comdex.one', + cosmostationApiUrl: 'https://rpc.comdex.one', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'comdex', + chainName: 'Comdex', + stakeCurrency: { + coinDenom: 'CMDX', + coinMinimalDenom: 'ucmdx', + coinDecimals: 6, + coinGeckoId: 'comdex', + coinImageUrl: '/tokens/blockchain/CMDX.png', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'comdex', + bech32PrefixAccPub: 'comdexpub', + bech32PrefixValAddr: 'comdexvaloper', + bech32PrefixValPub: 'comdexvaloperpub', + bech32PrefixConsAddr: 'comdexvalcons', + bech32PrefixConsPub: 'comdexvalconspub', + }, + currencies: [ + { + coinDenom: 'CMDX', + coinMinimalDenom: 'ucmdx', + coinDecimals: 6, + coinGeckoId: 'comdex', + coinImageUrl: '/tokens/blockchain/CMDX.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'CMDX', + coinMinimalDenom: 'ucmdx', + coinDecimals: 6, + coinGeckoId: 'comdex', + coinImageUrl: '/tokens/blockchain/CMDX.png', + }, + ], + features: ['stargate', 'ibc-transfer', 'no-legacy-stdTx'], + explorerUrlToTx: 'https://www.mintscan.io/comdex/txs/{txHash}', + gasPriceStep: null, + }, + }, + { + name: 'REGEN', + defaultDecimals: 6, + addressPatterns: ['^(regen1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'REGEN', + symbol: 'REGEN', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/regen.png', + displayName: 'Regen Network', + shortName: 'Regen Network', + sort: 42, + color: '#4FB573', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'regen-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://rpc-regen.ecostake.com', + rest: 'https://regen.stakesystems.io', + cosmostationLcdUrl: 'https://regen.stakesystems.io', + cosmostationApiUrl: 'https://rpc-regen.ecostake.com', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'regen', + chainName: 'Regen Network', + stakeCurrency: { + coinDenom: 'REGEN', + coinMinimalDenom: 'uregen', + coinDecimals: 6, + coinGeckoId: 'pool:uregen', + coinImageUrl: '/tokens/blockchain/regen.png', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'regen', + bech32PrefixAccPub: 'regenpub', + bech32PrefixValAddr: 'regenvaloper', + bech32PrefixValPub: 'regenvaloperpub', + bech32PrefixConsAddr: 'regenvalcons', + bech32PrefixConsPub: 'regenvalconspub', + }, + currencies: [ + { + coinDenom: 'REGEN', + coinMinimalDenom: 'uregen', + coinDecimals: 6, + coinGeckoId: 'pool:uregen', + coinImageUrl: '/tokens/blockchain/regen.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'REGEN', + coinMinimalDenom: 'uregen', + coinDecimals: 6, + coinGeckoId: 'pool:uregen', + coinImageUrl: '/tokens/blockchain/regen.png', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://regen.aneka.io/txs/{txHash}', + gasPriceStep: { + low: 0.015, + average: 0.025, + high: 0.04, + }, + }, + }, + { + name: 'IRIS', + defaultDecimals: 6, + addressPatterns: ['^(iaa1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'IRIS', + symbol: 'IRIS', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/iris.png', + displayName: 'IRISnet', + shortName: 'IRISnet', + sort: 43, + color: '#8A4A8E', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'irishub-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://rpc.nyancat.irisnet.org', + rest: 'https://lcd.nyancat.irisnet.org', + cosmostationLcdUrl: 'https://lcd.nyancat.irisnet.org', + cosmostationApiUrl: 'https://rpc.nyancat.irisnet.org', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'iris', + chainName: 'IRISnet', + stakeCurrency: { + coinDenom: 'IRIS', + coinMinimalDenom: 'uiris', + coinDecimals: 6, + coinGeckoId: 'iris-network', + coinImageUrl: '/tokens/blockchain/iris.svg', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'iaa', + bech32PrefixAccPub: 'iaapub', + bech32PrefixValAddr: 'iaavaloper', + bech32PrefixValPub: 'iaavaloperpub', + bech32PrefixConsAddr: 'iaavalcons', + bech32PrefixConsPub: 'iaavalconspub', + }, + currencies: [ + { + coinDenom: 'IRIS', + coinMinimalDenom: 'uiris', + coinDecimals: 6, + coinGeckoId: 'iris-network', + coinImageUrl: '/tokens/blockchain/iris.svg', + }, + ], + feeCurrencies: [ + { + coinDenom: 'IRIS', + coinMinimalDenom: 'uiris', + coinDecimals: 6, + coinGeckoId: 'iris-network', + coinImageUrl: '/tokens/blockchain/iris.svg', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/iris/txs/{txHash}', + gasPriceStep: { + low: 0.2, + average: 0.3, + high: 0.4, + }, + }, + }, + { + name: 'EMONEY', + defaultDecimals: 6, + addressPatterns: ['^(emoney1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'EMONEY', + symbol: 'NGM', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/emoney.svg', + displayName: 'e-Money', + shortName: 'e-Money', + sort: 44, + color: '#DFF5EF', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'emoney-3', + info: { + infoType: 'CosmosMetaInfo', + experimental: true, + rpc: 'https://emoney.validator.network/', + rest: 'https://emoney.validator.network/api', + cosmostationLcdUrl: 'https://emoney.validator.network/api', + cosmostationApiUrl: 'https://emoney.validator.network', + cosmostationDenomTracePath: + '/ibc/applications/transfer/v1beta1/denom_traces/', + mintScanName: 'emoney', + chainName: 'e-Money', + stakeCurrency: { + coinDenom: 'NGM', + coinMinimalDenom: 'ungm', + coinDecimals: 6, + coinGeckoId: 'e-money', + coinImageUrl: '/tokens/blockchain/NGM.png', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'emoney', + bech32PrefixAccPub: 'emoneypub', + bech32PrefixValAddr: 'emoneyvaloper', + bech32PrefixValPub: 'emoneyvaloperpub', + bech32PrefixConsAddr: 'emoneyvalcons', + bech32PrefixConsPub: 'emoneyvalconspub', + }, + currencies: [ + { + coinDenom: 'NGM', + coinMinimalDenom: 'ungm', + coinDecimals: 6, + coinGeckoId: 'e-money', + coinImageUrl: '/tokens/blockchain/NGM.png', + }, + { + coinDenom: 'EEUR', + coinMinimalDenom: 'eeur', + coinDecimals: 6, + coinGeckoId: 'e-money-eur', + coinImageUrl: '/tokens/blockchain/EEUR.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'NGM', + coinMinimalDenom: 'ungm', + coinDecimals: 6, + coinGeckoId: 'e-money', + coinImageUrl: '/tokens/blockchain/NGM.png', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://emoney.bigdipper.live/transactions/{txHash}', + gasPriceStep: { + low: 1, + average: 1, + high: 1, + }, + }, + }, + { + name: 'JUNO', + defaultDecimals: 6, + addressPatterns: ['^(juno1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'JUNO', + symbol: 'JUNO', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/juno.svg', + displayName: 'Juno', + shortName: 'Juno', + sort: 46, + color: '#f0827d', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'juno-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://rpc-juno.itastakers.com:443/', + rest: 'https://lcd-juno.itastakers.com', + cosmostationLcdUrl: 'https://lcd-juno.itastakers.com', + cosmostationApiUrl: 'https://rpc-juno.itastakers.com', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'juno', + chainName: 'Juno', + stakeCurrency: { + coinDenom: 'JUNO', + coinMinimalDenom: 'ujuno', + coinDecimals: 6, + coinGeckoId: 'juno-network', + coinImageUrl: '/tokens/blockchain/JUNO.png', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'juno', + bech32PrefixAccPub: 'junopub', + bech32PrefixValAddr: 'junovaloper', + bech32PrefixValPub: 'junovaloperpub', + bech32PrefixConsAddr: 'junovalcons', + bech32PrefixConsPub: 'junovalconspub', + }, + currencies: [ + { + coinDenom: 'JUNO', + coinMinimalDenom: 'ujuno', + coinDecimals: 6, + coinGeckoId: 'juno-network', + coinImageUrl: '/tokens/blockchain/JUNO.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'JUNO', + coinMinimalDenom: 'ujuno', + coinDecimals: 6, + coinGeckoId: 'juno-network', + coinImageUrl: '/tokens/blockchain/JUNO.png', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/juno/txs/{txHash}', + gasPriceStep: { + low: 0.001, + average: 0.0025, + high: 0.004, + }, + }, + }, + { + name: 'STRIDE', + defaultDecimals: 6, + addressPatterns: ['^(stride1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'STRIDE', + symbol: 'STRD', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/stride.svg', + displayName: 'Stride', + shortName: 'Stride', + sort: 48, + color: '#D63178', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'stride-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://stride-rpc.polkachu.com', + rest: 'https://stride-api.polkachu.com', + cosmostationLcdUrl: 'https://stride-api.polkachu.com', + cosmostationApiUrl: 'https://stride-rpc.polkachu.com', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'stride', + chainName: 'Stride', + stakeCurrency: { + coinDenom: 'STRD', + coinMinimalDenom: 'ustrd', + coinDecimals: 6, + coinGeckoId: 'stride', + coinImageUrl: '', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'stride', + bech32PrefixAccPub: 'stridepub', + bech32PrefixValAddr: 'stridevaloper', + bech32PrefixValPub: 'stridevaloperpub', + bech32PrefixConsAddr: 'stridevalcons', + bech32PrefixConsPub: 'stridevalconspub', + }, + currencies: [ + { + coinDenom: 'STRD', + coinMinimalDenom: 'ustrd', + coinDecimals: 6, + coinGeckoId: 'stride', + coinImageUrl: '', + }, + { + coinDenom: 'stATOM', + coinMinimalDenom: 'stuatom', + coinDecimals: 6, + coinGeckoId: 'stride-staked-atom', + coinImageUrl: '', + }, + { + coinDenom: 'stOSMO', + coinMinimalDenom: 'stuosmo', + coinDecimals: 6, + coinGeckoId: 'stride-staked-osmo', + coinImageUrl: '', + }, + { + coinDenom: 'stJUNO', + coinMinimalDenom: 'stujuno', + coinDecimals: 6, + coinGeckoId: 'stride-staked-juno', + coinImageUrl: '', + }, + { + coinDenom: 'stSTARS', + coinMinimalDenom: 'stustars', + coinDecimals: 6, + coinGeckoId: '', + coinImageUrl: '', + }, + { + coinDenom: 'stEVMOS', + coinMinimalDenom: 'staevmos', + coinDecimals: 18, + coinGeckoId: '', + coinImageUrl: '', + }, + { + coinDenom: 'stLUNA', + coinMinimalDenom: 'stuluna', + coinDecimals: 6, + coinGeckoId: '', + coinImageUrl: '', + }, + ], + feeCurrencies: [ + { + coinDenom: 'STRD', + coinMinimalDenom: 'ustrd', + coinDecimals: 6, + coinGeckoId: 'stride', + coinImageUrl: '', + }, + ], + features: ['ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/stride/txs/{txHash}', + gasPriceStep: { + low: 0.001, + average: 0.0025, + high: 0.04, + }, + }, + }, + { + name: 'MARS', + defaultDecimals: 6, + addressPatterns: ['^(mars1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'MARS', + symbol: 'MARS', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/mars.svg', + displayName: 'Mars', + shortName: 'Mars', + sort: 50, + color: '#CB4B3D', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'mars-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://rpc.marsprotocol.io', + rest: 'https://rest.marsprotocol.io', + cosmostationLcdUrl: 'https://rest.marsprotocol.io', + cosmostationApiUrl: 'https://rpc.marsprotocol.io', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'mars-protocol', + chainName: 'Mars', + stakeCurrency: { + coinDenom: 'MARS', + coinMinimalDenom: 'umars', + coinDecimals: 6, + coinGeckoId: 'mars-protocol-a7fcbcfb-fd61-4017-92f0-7ee9f9cc6da3', + coinImageUrl: '/tokens/blockchain/mars.svg', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'mars', + bech32PrefixAccPub: 'marspub', + bech32PrefixValAddr: 'marsvaloper', + bech32PrefixValPub: 'marsvaloperpub', + bech32PrefixConsAddr: 'marsvalcons', + bech32PrefixConsPub: 'marsvalconspub', + }, + currencies: [ + { + coinDenom: 'MARS', + coinMinimalDenom: 'umars', + coinDecimals: 6, + coinGeckoId: 'mars-protocol-a7fcbcfb-fd61-4017-92f0-7ee9f9cc6da3', + coinImageUrl: '/tokens/blockchain/mars.svg', + }, + ], + feeCurrencies: [ + { + coinDenom: 'MARS', + coinMinimalDenom: 'umars', + coinDecimals: 6, + coinGeckoId: 'mars-protocol-a7fcbcfb-fd61-4017-92f0-7ee9f9cc6da3', + coinImageUrl: '/tokens/blockchain/mars.svg', + }, + ], + features: ['ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/mars-protocol/txs/{txHash}', + gasPriceStep: { + low: 0.001, + average: 0.0025, + high: 0.01, + }, + }, + }, + { + name: 'TERRA', + defaultDecimals: 6, + addressPatterns: ['^(terra1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'TERRA', + symbol: 'LUNA', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/terra.png', + displayName: 'Terra 2.0', + shortName: 'Terra 2.0', + sort: 51, + color: '#5493F7', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'phoenix-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://phoenix-rpc.terra.dev', + rest: 'https://phoenix-lcd.terra.dev', + cosmostationLcdUrl: 'https://phoenix-lcd.terra.dev', + cosmostationApiUrl: null, + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: null, + chainName: 'Terra 2.0', + stakeCurrency: { + coinDenom: 'LUNA', + coinMinimalDenom: 'uluna', + coinDecimals: 6, + coinGeckoId: 'terra-luna-2', + coinImageUrl: '', + }, + bip44: { + coinType: 330, + }, + bech32Config: { + bech32PrefixAccAddr: 'terra', + bech32PrefixAccPub: 'terrapub', + bech32PrefixValAddr: 'terravaloper', + bech32PrefixValPub: 'terravaloperpub', + bech32PrefixConsAddr: 'terravalcons', + bech32PrefixConsPub: 'terravalconspub', + }, + currencies: [ + { + coinDenom: 'LUNA', + coinMinimalDenom: 'uluna', + coinDecimals: 6, + coinGeckoId: 'terra-luna-2', + coinImageUrl: '', + }, + ], + feeCurrencies: [ + { + coinDenom: 'LUNA', + coinMinimalDenom: 'uluna', + coinDecimals: 6, + coinGeckoId: 'terra-luna-2', + coinImageUrl: '', + }, + ], + features: ['cosmwasm', 'ibc-transfer'], + explorerUrlToTx: 'https://finder.terra.money/mainnet/txs/{txHash}', + gasPriceStep: { + low: 0.0125, + average: 0.015, + high: 0.15, + }, + }, + }, + { + name: 'BITSONG', + defaultDecimals: 6, + addressPatterns: ['^(bitsong1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'BITSONG', + symbol: 'BTSG', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/bitsong.svg', + displayName: 'BitSong', + shortName: 'BitSong', + sort: 53, + color: '#FF005C', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'bitsong-2b', + info: { + infoType: 'CosmosMetaInfo', + experimental: true, + rpc: 'https://rpc.explorebitsong.com', + rest: 'https://lcd.explorebitsong.com', + cosmostationLcdUrl: 'https://lcd.explorebitsong.com', + cosmostationApiUrl: 'https://rpc.explorebitsong.com', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'bitsong', + chainName: 'BitSong', + stakeCurrency: { + coinDenom: 'BTSG', + coinMinimalDenom: 'ubtsg', + coinDecimals: 6, + coinGeckoId: 'pool:ubtsg', + coinImageUrl: '/tokens/blockchain/BTSG.png', + }, + bip44: { + coinType: 639, + }, + bech32Config: { + bech32PrefixAccAddr: 'bitsong', + bech32PrefixAccPub: 'bitsongpub', + bech32PrefixValAddr: 'bitsongvaloper', + bech32PrefixValPub: 'bitsongvaloperpub', + bech32PrefixConsAddr: 'bitsongvalcons', + bech32PrefixConsPub: 'bitsongvalconspub', + }, + currencies: [ + { + coinDenom: 'BTSG', + coinMinimalDenom: 'ubtsg', + coinDecimals: 6, + coinGeckoId: 'pool:ubtsg', + coinImageUrl: '/tokens/blockchain/BTSG.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'BTSG', + coinMinimalDenom: 'ubtsg', + coinDecimals: 6, + coinGeckoId: 'pool:ubtsg', + coinImageUrl: '/tokens/blockchain/BTSG.png', + }, + ], + features: ['stargate', 'ibc-transfer', 'no-legacy-stdTx', 'ibc-go'], + explorerUrlToTx: 'https://explorebitsong.com/transactions/{txHash}', + gasPriceStep: null, + }, + }, + { + name: 'AKASH', + defaultDecimals: 6, + addressPatterns: ['^(akash1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'AKASH', + symbol: 'AKT', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/akash.svg', + displayName: 'Akash', + shortName: 'Akash', + sort: 54, + color: '#ED3524', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'akashnet-2', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://rpc.akashnet.net', + rest: 'https://api.akashnet.net', + cosmostationLcdUrl: 'https://api.akashnet.net', + cosmostationApiUrl: 'https://rpc.akashnet.net', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'akash', + chainName: 'Akash', + stakeCurrency: { + coinDenom: 'AKT', + coinMinimalDenom: 'uakt', + coinDecimals: 6, + coinGeckoId: 'akash-network', + coinImageUrl: '/tokens/blockchain/akt.svg', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'akash', + bech32PrefixAccPub: 'akashpub', + bech32PrefixValAddr: 'akashvaloper', + bech32PrefixValPub: 'akashvaloperpub', + bech32PrefixConsAddr: 'akashvalcons', + bech32PrefixConsPub: 'akashvalconspub', + }, + currencies: [ + { + coinDenom: 'AKT', + coinMinimalDenom: 'uakt', + coinDecimals: 6, + coinGeckoId: 'akash-network', + coinImageUrl: '/tokens/blockchain/akt.svg', + }, + ], + feeCurrencies: [ + { + coinDenom: 'AKT', + coinMinimalDenom: 'uakt', + coinDecimals: 6, + coinGeckoId: 'akash-network', + coinImageUrl: '/tokens/blockchain/akt.svg', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/akash/txs/{txHash}', + gasPriceStep: { + low: 0.001, + average: 0.0025, + high: 0.004, + }, + }, + }, + { + name: 'KI', + defaultDecimals: 6, + addressPatterns: ['^(ki1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'KI', + symbol: 'XKI', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/ki.png', + displayName: 'Ki', + shortName: 'Ki', + sort: 55, + color: '#0F2B3D', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'kichain-2', + info: { + infoType: 'CosmosMetaInfo', + experimental: true, + rpc: 'https://rpc-mainnet.blockchain.ki', + rest: 'https://api-mainnet.blockchain.ki', + cosmostationLcdUrl: 'https://api-mainnet.blockchain.ki', + cosmostationApiUrl: 'https://rpc-mainnet.blockchain.ki', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'ki-chain', + chainName: 'Ki', + stakeCurrency: { + coinDenom: 'XKI', + coinMinimalDenom: 'uxki', + coinDecimals: 6, + coinGeckoId: 'pool:uxki', + coinImageUrl: '/tokens/blockchain/XKI.png', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'ki', + bech32PrefixAccPub: 'kipub', + bech32PrefixValAddr: 'kivaloper', + bech32PrefixValPub: 'kivaloperpub', + bech32PrefixConsAddr: 'kivalcons', + bech32PrefixConsPub: 'kivalconspub', + }, + currencies: [ + { + coinDenom: 'XKI', + coinMinimalDenom: 'uxki', + coinDecimals: 6, + coinGeckoId: 'pool:uxki', + coinImageUrl: '/tokens/blockchain/XKI.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'XKI', + coinMinimalDenom: 'uxki', + coinDecimals: 6, + coinGeckoId: 'pool:uxki', + coinImageUrl: '/tokens/blockchain/XKI.png', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/ki-chain/txs/{txHash}', + gasPriceStep: null, + }, + }, + { + name: 'PERSISTENCE', + defaultDecimals: 6, + addressPatterns: ['^(persistence1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'PERSISTENCE', + symbol: 'XPRT', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/persistence.png', + displayName: 'Persistence', + shortName: 'Persistence', + sort: 56, + color: '#383838', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'core-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://rpc.core.persistence.one', + rest: 'https://rest.core.persistence.one', + cosmostationLcdUrl: 'https://rest.core.persistence.one', + cosmostationApiUrl: 'https://rpc.core.persistence.one', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'persistence', + chainName: 'Persistence', + stakeCurrency: { + coinDenom: 'XPRT', + coinMinimalDenom: 'uxprt', + coinDecimals: 6, + coinGeckoId: 'persistence', + coinImageUrl: '/tokens/blockchain/xprt.png', + }, + bip44: { + coinType: 750, + }, + bech32Config: { + bech32PrefixAccAddr: 'persistence', + bech32PrefixAccPub: 'persistencepub', + bech32PrefixValAddr: 'persistencevaloper', + bech32PrefixValPub: 'persistencevaloperpub', + bech32PrefixConsAddr: 'persistencevalcons', + bech32PrefixConsPub: 'persistencevalconspub', + }, + currencies: [ + { + coinDenom: 'XPRT', + coinMinimalDenom: 'uxprt', + coinDecimals: 6, + coinGeckoId: 'persistence', + coinImageUrl: '/tokens/blockchain/xprt.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'XPRT', + coinMinimalDenom: 'uxprt', + coinDecimals: 6, + coinGeckoId: 'persistence', + coinImageUrl: '/tokens/blockchain/xprt.png', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/persistence/txs/{txHash}', + gasPriceStep: { + low: 0, + average: 0.025, + high: 0.04, + }, + }, + }, + { + name: 'MEDIBLOC', + defaultDecimals: 6, + addressPatterns: ['^(panacea1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'MEDIBLOC', + symbol: 'MED', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/medibloc.png', + displayName: 'MediBloc', + shortName: 'MediBloc', + sort: 57, + color: '#4B66DC', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'panacea-3', + info: { + infoType: 'CosmosMetaInfo', + experimental: true, + rpc: 'https://rpc.gopanacea.org', + rest: 'https://api.gopanacea.org', + cosmostationLcdUrl: 'https://api.gopanacea.org', + cosmostationApiUrl: 'https://rpc.gopanacea.org', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'medibloc', + chainName: 'MediBloc', + stakeCurrency: { + coinDenom: 'MED', + coinMinimalDenom: 'umed', + coinDecimals: 6, + coinGeckoId: 'medibloc', + coinImageUrl: '/tokens/blockchain/MED.png', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'panacea', + bech32PrefixAccPub: 'panaceapub', + bech32PrefixValAddr: 'panaceavaloper', + bech32PrefixValPub: 'panaceavaloperpub', + bech32PrefixConsAddr: 'panaceavalcons', + bech32PrefixConsPub: 'panaceavalconspub', + }, + currencies: [ + { + coinDenom: 'MED', + coinMinimalDenom: 'umed', + coinDecimals: 6, + coinGeckoId: 'medibloc', + coinImageUrl: '/tokens/blockchain/MED.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'MED', + coinMinimalDenom: 'umed', + coinDecimals: 6, + coinGeckoId: 'medibloc', + coinImageUrl: '/tokens/blockchain/MED.png', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/medibloc/txs/{txHash}', + gasPriceStep: { + low: 5, + average: 7, + high: 9, + }, + }, + }, + { + name: 'KUJIRA', + defaultDecimals: 6, + addressPatterns: ['^(kujira1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'KUJIRA', + symbol: 'KUJI', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/kuji.svg', + displayName: 'Kujira', + shortName: 'Kujira', + sort: 58, + color: '#DF3935', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'kaiyo-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: true, + rpc: 'https://kujira-rpc.lavenderfive.com', + rest: 'https://kujira-api.lavenderfive.com', + cosmostationLcdUrl: 'https://lcd.kaiyo.kujira.setten.io', + cosmostationApiUrl: 'https://kujira-rpc.lavenderfive.com', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'kujira', + chainName: 'Kujira', + stakeCurrency: { + coinDenom: 'KUJI', + coinMinimalDenom: 'ukuji', + coinDecimals: 6, + coinGeckoId: 'kujira', + coinImageUrl: '/tokens/blockchain/kuji.svg', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'kujira', + bech32PrefixAccPub: 'kujirapub', + bech32PrefixValAddr: 'kujiravaloper', + bech32PrefixValPub: 'kujiravaloperpub', + bech32PrefixConsAddr: 'kujiravalcons', + bech32PrefixConsPub: 'kujiravalconspub', + }, + currencies: [ + { + coinDenom: 'KUJI', + coinMinimalDenom: 'ukuji', + coinDecimals: 6, + coinGeckoId: 'kujira', + coinImageUrl: '/tokens/blockchain/kuji.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'KUJI', + coinMinimalDenom: 'ukuji', + coinDecimals: 6, + coinGeckoId: 'kujira', + coinImageUrl: '/tokens/blockchain/kuji.png', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://finder.kujira.app/kaiyo-1/tx/{txHash}', + gasPriceStep: { + low: 0.01, + average: 0.025, + high: 0.03, + }, + }, + }, + { + name: 'SENTINEL', + defaultDecimals: 6, + addressPatterns: ['^(sent1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'SENTINEL', + symbol: 'DVPN', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/sentinel.png', + displayName: 'Sentinel', + shortName: 'Sentinel', + sort: 59, + color: '#142E51', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'sentinelhub-2', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://sentinel-rpc.publicnode.com', + rest: 'https://sentinel-rest.publicnode.com', + cosmostationLcdUrl: 'https://sentinel-rest.publicnode.com', + cosmostationApiUrl: 'https://sentinel-rpc.publicnode.com', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'sentinel', + chainName: 'Sentinel', + stakeCurrency: { + coinDenom: 'DVPN', + coinMinimalDenom: 'udvpn', + coinDecimals: 6, + coinGeckoId: 'sentinel', + coinImageUrl: '/tokens/blockchain/dvpn.png', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'sent', + bech32PrefixAccPub: 'sentpub', + bech32PrefixValAddr: 'sentvaloper', + bech32PrefixValPub: 'sentvaloperpub', + bech32PrefixConsAddr: 'sentvalcons', + bech32PrefixConsPub: 'sentvalconspub', + }, + currencies: [ + { + coinDenom: 'DVPN', + coinMinimalDenom: 'udvpn', + coinDecimals: 6, + coinGeckoId: 'sentinel', + coinImageUrl: '/tokens/blockchain/dvpn.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'DVPN', + coinMinimalDenom: 'udvpn', + coinDecimals: 6, + coinGeckoId: 'sentinel', + coinImageUrl: '/tokens/blockchain/dvpn.png', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/sentinel/txs/{txHash}', + gasPriceStep: { + low: 0.1, + average: 0.25, + high: 0.4, + }, + }, + }, + { + name: 'INJECTIVE', + defaultDecimals: 6, + addressPatterns: ['^(inj1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'INJECTIVE', + symbol: 'INJ', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/injective.svg', + displayName: 'Injective', + shortName: 'Injective', + sort: 60, + color: '#29B2F4', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'injective-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: true, + rpc: 'https://tm.injective.network', + rest: 'https://lcd.injective.network', + cosmostationLcdUrl: 'https://lcd.injective.network', + cosmostationApiUrl: 'https://tm.injective.network', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'injective', + chainName: 'Injective', + stakeCurrency: { + coinDenom: 'INJ', + coinMinimalDenom: 'uinj', + coinDecimals: 18, + coinGeckoId: 'injective', + coinImageUrl: '/tokens/INJECTIVE/inj.svg', + }, + bip44: { + coinType: 529, + }, + bech32Config: { + bech32PrefixAccAddr: 'inj', + bech32PrefixAccPub: 'injpub', + bech32PrefixValAddr: 'injvaloper', + bech32PrefixValPub: 'injvaloperpub', + bech32PrefixConsAddr: 'injvalcons', + bech32PrefixConsPub: 'injvalconspub', + }, + currencies: [ + { + coinDenom: 'INJ', + coinMinimalDenom: 'uinj', + coinDecimals: 18, + coinGeckoId: 'injective', + coinImageUrl: '/tokens/INJECTIVE/inj.svg', + }, + ], + feeCurrencies: [ + { + coinDenom: 'INJ', + coinMinimalDenom: 'uinj', + coinDecimals: 18, + coinGeckoId: 'injective', + coinImageUrl: '/tokens/INJECTIVE/inj.svg', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/injective/txs/{txHash}', + gasPriceStep: { + low: 500000000, + average: 500000000, + high: 500000000, + }, + }, + }, + { + name: 'SECRET', + defaultDecimals: 6, + addressPatterns: ['^(secret1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'SECRET', + symbol: 'SCRT', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/secret.svg', + displayName: 'Secret', + shortName: 'Secret', + sort: 61, + color: '#1B1B1B', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'secret-4', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://rpc.secret.express', + rest: 'https://lcd.secret.express', + cosmostationLcdUrl: 'https://lcd.secret.express', + cosmostationApiUrl: 'https://rpc.secret.express', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'secret', + chainName: 'Secret', + stakeCurrency: { + coinDenom: 'SCRT', + coinMinimalDenom: 'uscrt', + coinDecimals: 6, + coinGeckoId: 'secret', + coinImageUrl: 'https://dhj8dql1kzq2v.cloudfront.net/white/secret.png', + }, + bip44: { + coinType: 529, + }, + bech32Config: { + bech32PrefixAccAddr: 'secret', + bech32PrefixAccPub: 'secretpub', + bech32PrefixValAddr: 'secretvaloper', + bech32PrefixValPub: 'secretvaloperpub', + bech32PrefixConsAddr: 'secretvalcons', + bech32PrefixConsPub: 'secretvalconspub', + }, + currencies: [ + { + coinDenom: 'SCRT', + coinMinimalDenom: 'uscrt', + coinDecimals: 6, + coinGeckoId: 'secret', + coinImageUrl: 'https://dhj8dql1kzq2v.cloudfront.net/white/secret.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'SCRT', + coinMinimalDenom: 'uscrt', + coinDecimals: 6, + coinGeckoId: 'secret', + coinImageUrl: 'https://dhj8dql1kzq2v.cloudfront.net/white/secret.png', + }, + ], + features: ['secretwasm'], + explorerUrlToTx: 'https://www.mintscan.io/injective/txs/{txHash}', + gasPriceStep: { + low: 0.1, + average: 0.25, + high: 0.3, + }, + }, + }, + { + name: 'KONSTELLATION', + defaultDecimals: 6, + addressPatterns: ['^(darc1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'KONSTELLATION', + symbol: 'DARC', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/konstellation.svg', + displayName: 'Konstellation', + shortName: 'Konstellation', + sort: 62, + color: '#3D7BC2', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'darchub', + info: { + infoType: 'CosmosMetaInfo', + experimental: true, + rpc: 'https://node1.konstellation.tech:26657', + rest: 'https://node1.konstellation.tech:1318', + cosmostationLcdUrl: 'https://node1.konstellation.tech:1318', + cosmostationApiUrl: 'https://node1.konstellation.tech:26657', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'konstellation', + chainName: 'Konstellation', + stakeCurrency: { + coinDenom: 'DARC', + coinMinimalDenom: 'udarc', + coinDecimals: 6, + coinGeckoId: 'pool:udarc', + coinImageUrl: '/tokens/blockchain/DARC.png', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'darc', + bech32PrefixAccPub: 'darcpub', + bech32PrefixValAddr: 'darcvaloper', + bech32PrefixValPub: 'darcvaloperpub', + bech32PrefixConsAddr: 'darcvalcons', + bech32PrefixConsPub: 'darcvalconspub', + }, + currencies: [ + { + coinDenom: 'DARC', + coinMinimalDenom: 'udarc', + coinDecimals: 6, + coinGeckoId: 'pool:udarc', + coinImageUrl: '/tokens/blockchain/DARC.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'DARC', + coinMinimalDenom: 'udarc', + coinDecimals: 6, + coinGeckoId: 'pool:udarc', + coinImageUrl: '/tokens/blockchain/DARC.png', + }, + ], + features: ['stargate', 'ibc-transfer', 'no-legacy-stdTx'], + explorerUrlToTx: 'https://www.mintscan.io/konstellation/txs/{txHash}', + gasPriceStep: null, + }, + }, + { + name: 'STARNAME', + defaultDecimals: 6, + addressPatterns: ['^(star1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'STARNAME', + symbol: 'IOV', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/starname.png', + displayName: 'Starname', + shortName: 'Starname', + sort: 63, + color: '#BC64BB', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'iov-mainnet-ibc', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://rpc-starname-ia.cosmosia.notional.ventures', + rest: 'https://api-starname-ia.cosmosia.notional.ventures', + cosmostationLcdUrl: 'https://api-starname-ia.cosmosia.notional.ventures', + cosmostationApiUrl: 'https://rpc-starname-ia.cosmosia.notional.ventures', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'starname', + chainName: 'Starname', + stakeCurrency: { + coinDenom: 'IOV', + coinMinimalDenom: 'uiov', + coinDecimals: 6, + coinGeckoId: 'starname', + coinImageUrl: '/tokens/blockchain/IOV.png', + }, + bip44: { + coinType: 494, + }, + bech32Config: { + bech32PrefixAccAddr: 'star', + bech32PrefixAccPub: 'starpub', + bech32PrefixValAddr: 'starvaloper', + bech32PrefixValPub: 'starvaloperpub', + bech32PrefixConsAddr: 'starvalcons', + bech32PrefixConsPub: 'starvalconspub', + }, + currencies: [ + { + coinDenom: 'IOV', + coinMinimalDenom: 'uiov', + coinDecimals: 6, + coinGeckoId: 'starname', + coinImageUrl: '/tokens/blockchain/IOV.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'IOV', + coinMinimalDenom: 'uiov', + coinDecimals: 6, + coinGeckoId: 'starname', + coinImageUrl: '/tokens/blockchain/IOV.png', + }, + ], + features: ['stargate', 'ibc-transfer'], + explorerUrlToTx: 'https://www.mintscan.io/starname/txs/{txHash}', + gasPriceStep: { + low: 1, + average: 2, + high: 3, + }, + }, + }, + { + name: 'BITCANNA', + defaultDecimals: 6, + addressPatterns: ['^(bcna1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'BITCANNA', + symbol: 'BCNA', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/bitcanna.svg', + displayName: 'BitCanna', + shortName: 'BitCanna', + sort: 64, + color: '#3CC194', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'bitcanna-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: true, + rpc: 'https://rpc.bitcanna.io', + rest: 'https://lcd.bitcanna.io', + cosmostationLcdUrl: 'https://lcd.bitcanna.io', + cosmostationApiUrl: 'https://rpc.bitcanna.io', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'bitcanna', + chainName: 'BitCanna', + stakeCurrency: { + coinDenom: 'BCNA', + coinMinimalDenom: 'ubcna', + coinDecimals: 6, + coinGeckoId: 'bitcanna', + coinImageUrl: '/tokens/blockchain/BCNA.png', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'bcna', + bech32PrefixAccPub: 'bcnapub', + bech32PrefixValAddr: 'bcnavaloper', + bech32PrefixValPub: 'bcnavaloperpub', + bech32PrefixConsAddr: 'bcnavalcons', + bech32PrefixConsPub: 'bcnavalconspub', + }, + currencies: [ + { + coinDenom: 'BCNA', + coinMinimalDenom: 'ubcna', + coinDecimals: 6, + coinGeckoId: 'bitcanna', + coinImageUrl: '/tokens/blockchain/BCNA.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'BCNA', + coinMinimalDenom: 'ubcna', + coinDecimals: 6, + coinGeckoId: 'bitcanna', + coinImageUrl: '/tokens/blockchain/BCNA.png', + }, + ], + features: ['stargate', 'ibc-transfer', 'no-legacy-stdTx'], + explorerUrlToTx: 'https://www.mintscan.io/bitcanna/txs/{txHash}', + gasPriceStep: null, + }, + }, + { + name: 'UMEE', + defaultDecimals: 6, + addressPatterns: ['^(umee1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'UMEE', + symbol: 'UMEE', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/umee.svg', + displayName: 'Umee', + shortName: 'Umee', + sort: 65, + color: '#D2B6FF', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'umee-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: false, + rpc: 'https://umee-rpc.polkachu.com', + rest: 'https://api.mainnet.network.umee.cc', + cosmostationLcdUrl: 'https://api.mainnet.network.umee.cc', + cosmostationApiUrl: 'https://umee-rpc.polkachu.com', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'umee', + chainName: 'Umee', + stakeCurrency: { + coinDenom: 'UMEE', + coinMinimalDenom: 'uumee', + coinDecimals: 6, + coinGeckoId: 'pool:uumee', + coinImageUrl: '/tokens/blockchain/UMEE.png', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'umee', + bech32PrefixAccPub: 'umeepub', + bech32PrefixValAddr: 'umeevaloper', + bech32PrefixValPub: 'umeevaloperpub', + bech32PrefixConsAddr: 'umeevalcons', + bech32PrefixConsPub: 'umeevalconspub', + }, + currencies: [ + { + coinDenom: 'UMEE', + coinMinimalDenom: 'uumee', + coinDecimals: 6, + coinGeckoId: 'pool:uumee', + coinImageUrl: '/tokens/blockchain/UMEE.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'UMEE', + coinMinimalDenom: 'uumee', + coinDecimals: 6, + coinGeckoId: 'pool:uumee', + coinImageUrl: '/tokens/blockchain/UMEE.png', + }, + ], + features: ['stargate', 'ibc-transfer', 'no-legacy-stdTx'], + explorerUrlToTx: 'https://www.mintscan.io/umee/txs/{txHash}', + gasPriceStep: { + low: 0.05, + average: 0.06, + high: 0.1, + }, + }, + }, + { + name: 'DESMOS', + defaultDecimals: 6, + addressPatterns: ['^(desmos1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'DESMOS', + symbol: 'DSM', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/desmos.svg', + displayName: 'Desmos', + shortName: 'Desmos', + sort: 66, + color: '#DF6952', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'desmos-mainnet', + info: { + infoType: 'CosmosMetaInfo', + experimental: true, + rpc: 'https://rpc.mainnet.desmos.network', + rest: 'https://api.mainnet.desmos.network', + cosmostationLcdUrl: 'https://api.mainnet.desmos.network', + cosmostationApiUrl: 'https://rpc.mainnet.desmos.network', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'desmos', + chainName: 'Desmos', + stakeCurrency: { + coinDenom: 'DSM', + coinMinimalDenom: 'udsm', + coinDecimals: 6, + coinGeckoId: 'pool:udsm', + coinImageUrl: '/tokens/blockchain/DSM.png', + }, + bip44: { + coinType: 852, + }, + bech32Config: { + bech32PrefixAccAddr: 'desmos', + bech32PrefixAccPub: 'desmospub', + bech32PrefixValAddr: 'desmosvaloper', + bech32PrefixValPub: 'desmosvaloperpub', + bech32PrefixConsAddr: 'desmosvalcons', + bech32PrefixConsPub: 'desmosvalconspub', + }, + currencies: [ + { + coinDenom: 'DSM', + coinMinimalDenom: 'udsm', + coinDecimals: 6, + coinGeckoId: 'pool:udsm', + coinImageUrl: '/tokens/blockchain/DSM.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'DSM', + coinMinimalDenom: 'udsm', + coinDecimals: 6, + coinGeckoId: 'pool:udsm', + coinImageUrl: '/tokens/blockchain/DSM.png', + }, + ], + features: ['stargate', 'ibc-transfer', 'no-legacy-stdTx', 'ibc-go'], + explorerUrlToTx: 'https://explorer.desmos.network/transactions/{txHash}', + gasPriceStep: null, + }, + }, + { + name: 'LUMNETWORK', + defaultDecimals: 6, + addressPatterns: ['^(lum1)[0-9a-z]{38}$'], + feeAssets: [ + { + blockchain: 'LUMNETWORK', + symbol: 'LUM', + address: null, + }, + ], + logo: 'https://api.rango.exchange/blockchains/lumnetwork.png', + displayName: 'Lum Network', + shortName: 'Lum Network', + sort: 67, + color: '#1B42B4', + enabled: true, + type: TransactionType.COSMOS, + chainId: 'lum-network-1', + info: { + infoType: 'CosmosMetaInfo', + experimental: true, + rpc: 'https://node0.mainnet.lum.network/rpc', + rest: 'https://node0.mainnet.lum.network/rest', + cosmostationLcdUrl: 'https://node0.mainnet.lum.network/rest', + cosmostationApiUrl: 'https://node0.mainnet.lum.network/rpc', + cosmostationDenomTracePath: '/ibc/apps/transfer/v1/denom_traces/', + mintScanName: 'lum', + chainName: 'Lum Network', + stakeCurrency: { + coinDenom: 'LUM', + coinMinimalDenom: 'ulum', + coinDecimals: 6, + coinGeckoId: 'pool:ulum', + coinImageUrl: '/tokens/blockchain/LUM.png', + }, + bip44: { + coinType: 118, + }, + bech32Config: { + bech32PrefixAccAddr: 'lum', + bech32PrefixAccPub: 'lumpub', + bech32PrefixValAddr: 'lumvaloper', + bech32PrefixValPub: 'lumvaloperpub', + bech32PrefixConsAddr: 'lumvalcons', + bech32PrefixConsPub: 'lumvalconspub', + }, + currencies: [ + { + coinDenom: 'LUM', + coinMinimalDenom: 'ulum', + coinDecimals: 6, + coinGeckoId: 'pool:ulum', + coinImageUrl: '/tokens/blockchain/LUM.png', + }, + ], + feeCurrencies: [ + { + coinDenom: 'LUM', + coinMinimalDenom: 'ulum', + coinDecimals: 6, + coinGeckoId: 'pool:ulum', + coinImageUrl: '/tokens/blockchain/LUM.png', + }, + ], + features: ['stargate', 'ibc-transfer', 'no-legacy-stdTx', 'ibc-go'], + explorerUrlToTx: 'https://www.mintscan.io/lum/txs/{txHash}', + gasPriceStep: null, + }, + }, +]; diff --git a/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.test.ts b/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.test.ts new file mode 100644 index 0000000000..69b0ad3f3c --- /dev/null +++ b/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.test.ts @@ -0,0 +1,273 @@ +import type { BlockchainMeta } from 'rango-sdk'; + +import { beforeEach, describe, expect, it } from 'vitest'; + +import { MOST_USED_BLOCKChAINS } from './usePrepareBlockchainList.constants'; +import { + generateSortByPreferredBlockchainsFor, + prepare, + sortByMostUsedBlockchains, +} from './usePrepareBlockchainList.helpers'; +import { sampleBlockchains } from './usePrepareBlockchainList.mock'; + +describe('usePrepareBlockchainList', () => { + let sample: BlockchainMeta[] = []; + + beforeEach(() => { + sample = JSON.parse(JSON.stringify(sampleBlockchains)); + }); + + it('should sort blockchains by most used ones.', () => { + const sortedBlockchainsList = sample.sort(sortByMostUsedBlockchains); + + const mostUsedCount = MOST_USED_BLOCKChAINS.length; + const expected = MOST_USED_BLOCKChAINS; + const received = sortedBlockchainsList + .map((blockchain) => blockchain.name) + .slice(0, mostUsedCount); + + expect(expected).toEqual(received); + }); + + it('should sort blockchains by user preferences', () => { + const preferredBlockchains = ['UMEE', 'BANDCHAIN', 'LINEA']; + const sortedBlockchainsList = sample.sort( + generateSortByPreferredBlockchainsFor(preferredBlockchains) + ); + + const expected = [ + 'UMEE', + 'BANDCHAIN', + 'LINEA', + 'ETH', + 'BSC', + 'ARBITRUM', + 'POLYGON', + 'ZKSYNC', + 'STARKNET', + 'OPTIMISM', + 'AVAX_CCHAIN', + 'POLYGONZK', + 'TRON', + 'BTC', + 'COSMOS', + 'OSMOSIS', + 'NEUTRON', + 'NOBLE', + 'SOLANA', + 'CRONOS', + 'BNB', + 'AURORA', + 'MAYA', + 'THOR', + 'BOBA', + 'MOONBEAM', + 'MOONRIVER', + 'OKC', + 'BOBA_AVALANCHE', + 'LTC', + 'BCH', + 'HECO', + 'STARGAZE', + 'CRYPTO_ORG', + 'CHIHUAHUA', + 'COMDEX', + 'REGEN', + 'IRIS', + 'EMONEY', + 'JUNO', + 'STRIDE', + 'MARS', + 'TERRA', + 'BITSONG', + 'AKASH', + 'KI', + 'PERSISTENCE', + 'MEDIBLOC', + 'KUJIRA', + 'SENTINEL', + 'INJECTIVE', + 'SECRET', + 'KONSTELLATION', + 'STARNAME', + 'BITCANNA', + 'DESMOS', + 'LUMNETWORK', + ]; + const received = sortedBlockchainsList.map((blockchain) => blockchain.name); + + expect(expected).toEqual(received); + }); + + it('should prepare the list by most used and user preferences', () => { + const listLimit = 10; + const preferredBlockchains = ['BTC', 'SOLANA', 'COSMOS', 'ETH']; + const expected = [ + 'BTC', + 'SOLANA', + 'ETH', + 'COSMOS', + 'OSMOSIS', + 'BSC', + 'ARBITRUM', + 'POLYGON', + 'ZKSYNC', + 'STARKNET', + 'OPTIMISM', + 'AVAX_CCHAIN', + 'POLYGONZK', + 'LINEA', + 'TRON', + 'NEUTRON', + 'NOBLE', + 'CRONOS', + 'BNB', + 'AURORA', + 'MAYA', + 'THOR', + 'BOBA', + 'MOONBEAM', + 'MOONRIVER', + 'OKC', + 'BOBA_AVALANCHE', + 'LTC', + 'BCH', + 'HECO', + 'STARGAZE', + 'CRYPTO_ORG', + 'CHIHUAHUA', + 'BANDCHAIN', + 'COMDEX', + 'REGEN', + 'IRIS', + 'EMONEY', + 'JUNO', + 'STRIDE', + 'MARS', + 'TERRA', + 'BITSONG', + 'AKASH', + 'KI', + 'PERSISTENCE', + 'MEDIBLOC', + 'KUJIRA', + 'SENTINEL', + 'INJECTIVE', + 'SECRET', + 'KONSTELLATION', + 'STARNAME', + 'BITCANNA', + 'UMEE', + 'DESMOS', + 'LUMNETWORK', + ]; + const received = prepare(sample, preferredBlockchains, { + limit: listLimit, + }); + + const receivedListNames = received.list.map( + (blockchain) => blockchain.name + ); + const receivedMoreNames = received.more.map( + (blockchain) => blockchain.name + ); + + expect(received.list).toHaveLength(listLimit); + expect(received.more).toHaveLength(expected.length - listLimit); + expect(expected).toEqual([...receivedListNames, ...receivedMoreNames]); + + // Check duplication + receivedListNames.forEach((listName) => { + expect(receivedMoreNames).not.toContain(listName); + }); + + // Check preferred blockchains to be on the main list + preferredBlockchains.forEach((blockchain) => { + expect(receivedListNames).toContain(blockchain); + }); + }); + + it('should prepare the list correctly if user has a long list of preferences ', () => { + const listLimit = 10; + const preferredBlockchains = [ + 'ETH', + 'BTC', + 'SOLANA', + 'CRYPTO_ORG', + 'TRON', + 'BOBA_AVALANCHE', + 'AKASH', + 'LUMNETWORK', + 'KONSTELLATION', + 'BANDCHAIN', + 'INJECTIVE', + ]; + const expected = [ + 'ETH', + 'BTC', + 'SOLANA', + 'CRYPTO_ORG', + 'TRON', + 'BOBA_AVALANCHE', + 'AKASH', + 'LUMNETWORK', + 'KONSTELLATION', + 'BANDCHAIN', + 'INJECTIVE', + 'COSMOS', + 'OSMOSIS', + 'BSC', + 'ARBITRUM', + 'POLYGON', + 'ZKSYNC', + 'STARKNET', + 'OPTIMISM', + 'AVAX_CCHAIN', + 'POLYGONZK', + 'LINEA', + 'NEUTRON', + 'NOBLE', + 'CRONOS', + 'BNB', + 'AURORA', + 'MAYA', + 'THOR', + 'BOBA', + 'MOONBEAM', + 'MOONRIVER', + 'OKC', + 'LTC', + 'BCH', + 'HECO', + 'STARGAZE', + 'CHIHUAHUA', + 'COMDEX', + 'REGEN', + 'IRIS', + 'EMONEY', + 'JUNO', + 'STRIDE', + 'MARS', + 'TERRA', + 'BITSONG', + 'KI', + 'PERSISTENCE', + 'MEDIBLOC', + 'KUJIRA', + 'SENTINEL', + 'SECRET', + 'STARNAME', + 'BITCANNA', + 'UMEE', + 'DESMOS', + ]; + const received = prepare(sample, preferredBlockchains, { + limit: listLimit, + }); + + expect(expected).toEqual([ + ...received.list.map((blockchain) => blockchain.name), + ...received.more.map((blockchain) => blockchain.name), + ]); + }); +}); diff --git a/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.ts b/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.ts new file mode 100644 index 0000000000..0fd4ecbc8c --- /dev/null +++ b/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.ts @@ -0,0 +1,38 @@ +import type { + PrepareListOptions, + PrepareListOutput, +} from './usePrepareBlockchainList.types'; +import type { BlockchainMeta } from 'rango-sdk'; + +import { useEffect } from 'react'; + +import { useSettingsStore } from '../../store/settings'; + +import { prepare } from './usePrepareBlockchainList.helpers'; + +/** + * + * UI needs some specific logics like limiting the list and sorting, + * this function is getting the raw blockchains list and return a list for showing in UI. + * + */ +export function usePrepareBlockchainList( + blockchains: BlockchainMeta[], + options?: PrepareListOptions +): PrepareListOutput { + const { preferredBlockchains, addPreferredBlockchain } = useSettingsStore(); + + useEffect(() => { + if (options?.selected) { + addPreferredBlockchain(options?.selected); + } + }, [options?.selected]); + + const output = prepare(blockchains, preferredBlockchains, options); + + return { + list: output.list, + more: output.more, + history: [], + }; +} diff --git a/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.types.ts b/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.types.ts new file mode 100644 index 0000000000..c30bf0aa63 --- /dev/null +++ b/widget/embedded/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.types.ts @@ -0,0 +1,12 @@ +import type { BlockchainMeta } from 'rango-sdk'; + +export interface PrepareListOptions { + limit?: number; + selected?: string; +} + +export interface PrepareListOutput { + list: BlockchainMeta[]; + more: BlockchainMeta[]; + history: string[]; +} diff --git a/widget/embedded/src/store/settings.ts b/widget/embedded/src/store/settings.ts index 04ed0b0775..9418dca0fe 100644 --- a/widget/embedded/src/store/settings.ts +++ b/widget/embedded/src/store/settings.ts @@ -2,6 +2,7 @@ import { type Language } from '@rango-dev/ui'; import { create } from 'zustand'; import { persist, subscribeWithSelector } from 'zustand/middleware'; +import { BLOCKCHAIN_LIST_SIZE } from '../constants/configs'; import { DEFAULT_LANGUAGE } from '../constants/languages'; import { DEFAULT_SLIPPAGE } from '../constants/swapSettings'; import { removeDuplicateFrom } from '../utils/common'; @@ -12,6 +13,8 @@ import createSelectors from './selectors'; export type ThemeMode = 'auto' | 'dark' | 'light'; export interface SettingsState { + /** Keeping a history of blockchains that user has selected (in Swap process) */ + preferredBlockchains: string[]; slippage: number; customSlippage: number | null; infiniteApprove: boolean; @@ -21,6 +24,7 @@ export interface SettingsState { affiliateRef: string | null; affiliatePercent: number | null; affiliateWallets: { [key: string]: string } | null; + setSlippage: (slippage: number) => void; setCustomSlippage: (customSlippage: number | null) => void; toggleInfiniteApprove: () => void; @@ -33,12 +37,14 @@ export interface SettingsState { setAffiliateWallets: ( affiliateWallets: { [key: string]: string } | null ) => void; + addPreferredBlockchain: (blockchain: string) => void; } export const useSettingsStore = createSelectors( create()( persist( - subscribeWithSelector((set) => ({ + subscribeWithSelector((set, get) => ({ + preferredBlockchains: [], slippage: DEFAULT_SLIPPAGE, customSlippage: null, infiniteApprove: false, @@ -48,6 +54,33 @@ export const useSettingsStore = createSelectors( disabledLiquiditySources: [], theme: 'auto', language: DEFAULT_LANGUAGE, + addPreferredBlockchain: (blockchain) => { + const currentPreferredBlockchains = get().preferredBlockchains; + + const noNeedToDoAnything = currentPreferredBlockchains.find( + (preferredBlockchain, index) => { + const isSameBlockchain = preferredBlockchain === blockchain; + const isInVisibleList = index <= BLOCKCHAIN_LIST_SIZE - 1; + + return isSameBlockchain && isInVisibleList; + } + ); + + if (noNeedToDoAnything) { + return; + } + + const nextPreferredBlockchains: string[] = + currentPreferredBlockchains.filter((preferredBlockchain) => { + const isSameBlockchain = preferredBlockchain === blockchain; + + return !isSameBlockchain; + }); + + set(() => ({ + preferredBlockchains: [blockchain, ...nextPreferredBlockchains], + })); + }, setSlippage: (slippage) => set(() => ({ slippage: slippage, From 6bbb158e80c561c228daef74aeba79f3cb36dfbc Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sun, 5 Nov 2023 03:17:46 +0000 Subject: [PATCH 636/769] chore(release): publish - widget-embedded@0.14.1-next.16 - widget-playground@0.12.1-next.55 - widget-iframe@0.12.1-next.54 - widget-app@0.12.1-next.54 Affected packages: widget-embedded@0.14.1-next.16,widget-playground@0.12.1-next.55,widget-iframe@0.12.1-next.54,widget-app@0.12.1-next.54 --- translations/en.po | 6 +++--- translations/es.po | 6 +++--- translations/fr.po | 6 +++--- translations/jp.po | 6 +++--- widget/app/package.json | 4 ++-- widget/embedded/package.json | 2 +- widget/iframe/package.json | 4 ++-- widget/playground/package.json | 4 ++-- 8 files changed, 19 insertions(+), 19 deletions(-) diff --git a/translations/en.po b/translations/en.po index 69432b7bd8..cb69202e29 100644 --- a/translations/en.po +++ b/translations/en.po @@ -157,18 +157,18 @@ msgstr "Max" #. js-lingui-explicit-id #: widget/embedded/src/components/BlockchainList/BlockchainList.tsx:66 -#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:41 +#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:44 #: widget/embedded/src/pages/SelectBlockchainPage.tsx:38 #~ msgid "Select Blockchain" #~ msgstr "Select Blockchain" #. js-lingui-explicit-id -#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:61 +#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:64 #~ msgid "All" #~ msgstr "All" #. js-lingui-explicit-id -#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:76 +#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:91 #~ msgid "More +{count}" #~ msgstr "More +{count}" diff --git a/translations/es.po b/translations/es.po index c04a6f080b..aecc25e1a9 100644 --- a/translations/es.po +++ b/translations/es.po @@ -157,18 +157,18 @@ msgstr "" #. js-lingui-explicit-id #: widget/embedded/src/components/BlockchainList/BlockchainList.tsx:66 -#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:41 +#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:44 #: widget/embedded/src/pages/SelectBlockchainPage.tsx:38 #~ msgid "Select Blockchain" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:61 +#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:64 #~ msgid "All" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:76 +#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:91 #~ msgid "More +{count}" #~ msgstr "" diff --git a/translations/fr.po b/translations/fr.po index a18a1a9e4f..2d9fd825bf 100644 --- a/translations/fr.po +++ b/translations/fr.po @@ -157,18 +157,18 @@ msgstr "" #. js-lingui-explicit-id #: widget/embedded/src/components/BlockchainList/BlockchainList.tsx:66 -#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:41 +#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:44 #: widget/embedded/src/pages/SelectBlockchainPage.tsx:38 #~ msgid "Select Blockchain" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:61 +#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:64 #~ msgid "All" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:76 +#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:91 #~ msgid "More +{count}" #~ msgstr "" diff --git a/translations/jp.po b/translations/jp.po index c1541d6999..7f8bc57d08 100644 --- a/translations/jp.po +++ b/translations/jp.po @@ -157,18 +157,18 @@ msgstr "" #. js-lingui-explicit-id #: widget/embedded/src/components/BlockchainList/BlockchainList.tsx:66 -#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:41 +#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:44 #: widget/embedded/src/pages/SelectBlockchainPage.tsx:38 #~ msgid "Select Blockchain" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:61 +#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:64 #~ msgid "All" #~ msgstr "" #. js-lingui-explicit-id -#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:76 +#: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:91 #~ msgid "More +{count}" #~ msgstr "" diff --git a/widget/app/package.json b/widget/app/package.json index bf6224e1d1..daa7f54765 100644 --- a/widget/app/package.json +++ b/widget/app/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-app", - "version": "0.12.1-next.53", + "version": "0.12.1-next.54", "license": "MIT", "private": true, "source": "public/index.html", @@ -14,7 +14,7 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.15", + "@rango-dev/widget-embedded": "^0.14.1-next.16", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0" diff --git a/widget/embedded/package.json b/widget/embedded/package.json index aa999ff960..7230e62470 100644 --- a/widget/embedded/package.json +++ b/widget/embedded/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-embedded", - "version": "0.14.1-next.15", + "version": "0.14.1-next.16", "license": "MIT", "type": "module", "main": "dist/index.js", diff --git a/widget/iframe/package.json b/widget/iframe/package.json index d9aac0e452..591a4cfa9e 100644 --- a/widget/iframe/package.json +++ b/widget/iframe/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-iframe", - "version": "0.12.1-next.53", + "version": "0.12.1-next.54", "license": "MIT", "private": true, "source": "src/index.ts", @@ -13,6 +13,6 @@ }, "devDependencies": {}, "dependencies": { - "@rango-dev/widget-embedded": "^0.14.1-next.15" + "@rango-dev/widget-embedded": "^0.14.1-next.16" } } diff --git a/widget/playground/package.json b/widget/playground/package.json index 393f420830..e7f53a8a9a 100644 --- a/widget/playground/package.json +++ b/widget/playground/package.json @@ -1,6 +1,6 @@ { "name": "@rango-dev/widget-playground", - "version": "0.12.1-next.54", + "version": "0.12.1-next.55", "license": "MIT", "private": true, "source": "public/index.html", @@ -21,7 +21,7 @@ "@rango-dev/ui": "^0.17.1-next.10", "@rango-dev/wallets-react": "^0.3.1-next.1", "@rango-dev/wallets-shared": "^0.17.1-next.0", - "@rango-dev/widget-embedded": "^0.14.1-next.15", + "@rango-dev/widget-embedded": "^0.14.1-next.16", "rango-sdk": "^0.1.35", "react": "^18.2.0", "react-color": "^2.19.3", From f0967cb0b0b0cc1d41a98ae3f845c3975495a9b8 Mon Sep 17 00:00:00 2001 From: samobasquiat Date: Sun, 5 Nov 2023 10:39:51 +0000 Subject: [PATCH 637/769] feat: implement supportedTokens for playground --- .../src/hooks/useSyncStoresWithConfig.ts | 50 ++++- .../components/Collapse/Collapse.styles.ts | 3 + .../src/components/Collapse/Collapse.tsx | 2 +- .../ExportConfigModal.styles.tsx | 3 + .../ExportConfigModal/ExportConfigModal.tsx | 4 +- .../components/MultiList/MultiList.styles.ts | 8 +- .../src/components/MultiList/MultiList.tsx | 13 +- .../components/MultiList/MultiList.types.ts | 17 +- .../MultiSelect/MultiSelect.styles.ts | 6 + .../components/MultiSelect/MultiSelect.tsx | 61 +++--- .../MultiSelect/MultiSelect.types.ts | 26 ++- .../OverlayPanel/OverlayPanel.styles.ts | 6 + .../src/components/SingleList/SingleList.tsx | 30 +-- .../src/components/SingleList/index.ts | 2 +- .../TokensPanel/TokensPanel.Chip.tsx | 36 ++++ .../TokensPanel/TokensPanel.List.tsx | 184 ++++++++++++++++++ .../TokensPanel/TokensPanel.styles.ts | 56 ++++++ .../components/TokensPanel/TokensPanel.tsx | 123 ++++++++++++ .../TokensPanel/TokensPanel.types.ts | 24 +++ .../src/components/TokensPanel/index.ts | 1 + .../DefaultChainAndToken.tsx | 8 +- .../FunctionalLayout.From.tsx | 5 + .../FunctionalLayout/FunctionalLayout.To.tsx | 6 + .../FunctionalLayout.Wallets.tsx | 4 +- .../SupportedBlockchains.tsx | 8 +- .../SupportedTokens/SupportedTokens.tsx | 69 +++++++ .../src/containers/SupportedTokens/index.ts | 1 + 27 files changed, 686 insertions(+), 70 deletions(-) create mode 100644 widget/playground/src/components/TokensPanel/TokensPanel.Chip.tsx create mode 100644 widget/playground/src/components/TokensPanel/TokensPanel.List.tsx create mode 100644 widget/playground/src/components/TokensPanel/TokensPanel.styles.ts create mode 100644 widget/playground/src/components/TokensPanel/TokensPanel.tsx create mode 100644 widget/playground/src/components/TokensPanel/TokensPanel.types.ts create mode 100644 widget/playground/src/components/TokensPanel/index.ts create mode 100644 widget/playground/src/containers/SupportedTokens/SupportedTokens.tsx create mode 100644 widget/playground/src/containers/SupportedTokens/index.ts diff --git a/widget/embedded/src/hooks/useSyncStoresWithConfig.ts b/widget/embedded/src/hooks/useSyncStoresWithConfig.ts index a2299dc90d..e65f5de596 100644 --- a/widget/embedded/src/hooks/useSyncStoresWithConfig.ts +++ b/widget/embedded/src/hooks/useSyncStoresWithConfig.ts @@ -1,7 +1,7 @@ import type { WidgetConfig } from '../types'; import type { Asset } from 'rango-sdk'; -import { useEffect, useRef } from 'react'; +import { useEffect, useMemo, useRef } from 'react'; import { useBestRouteStore } from '../store/bestRoute'; import { useMetaStore } from '../store/meta'; @@ -15,6 +15,10 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) { setToBlockchain, setFromBlockchain, setFromToken, + fromToken, + toToken, + fromBlockchain, + toBlockchain, } = useBestRouteStore(); const { @@ -25,6 +29,22 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) { const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } = useSettingsStore(); + const fromTokensConfig = useMemo( + () => config?.from?.tokens, + [config?.from?.tokens] + ); + const fromBlockchainsConfig = useMemo( + () => config?.from?.blockchains, + [config?.from?.blockchains] + ); + const toTokensConfig = useMemo( + () => config?.to?.tokens, + [config?.to?.tokens] + ); + const toBlockchainsConfig = useMemo( + () => config?.to?.blockchains, + [config?.to?.blockchains] + ); const prevConfigFromToken = useRef(undefined); const prevConfigToToken = useRef(undefined); const prevConfigFromBlockchain = useRef(undefined); @@ -62,6 +82,34 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) { loadingMetaStatus, ]); + useEffect(() => { + if (fromToken && fromTokensConfig) { + if (!fromTokensConfig.some((token) => tokensAreEqual(token, fromToken))) { + setFromToken(null); + } + } + + if (fromBlockchain && fromBlockchainsConfig) { + if (!fromBlockchainsConfig.includes(fromBlockchain.name)) { + setFromBlockchain(null); + } + } + }, [fromTokensConfig, fromBlockchainsConfig]); + + useEffect(() => { + if (toToken && toTokensConfig) { + if (!toTokensConfig.some((token) => tokensAreEqual(token, toToken))) { + setToToken(null); + } + } + + if (toBlockchain && toBlockchainsConfig) { + if (!toBlockchainsConfig.includes(toBlockchain.name)) { + setToBlockchain(null); + } + } + }, [toTokensConfig, toBlockchainsConfig]); + useEffect(() => { if (loadingMetaStatus === 'success') { const chain = blockchains.find( diff --git a/widget/playground/src/components/Collapse/Collapse.styles.ts b/widget/playground/src/components/Collapse/Collapse.styles.ts index 5d80efc107..13aab52649 100644 --- a/widget/playground/src/components/Collapse/Collapse.styles.ts +++ b/widget/playground/src/components/Collapse/Collapse.styles.ts @@ -6,6 +6,9 @@ export const CollapseContainer = styled(Collapsible, { border: '1px solid $neutral100', '&:hover': { borderColor: '$info300', + '& .collapse_header > svg': { + color: '$secondary500', + }, }, }); diff --git a/widget/playground/src/components/Collapse/Collapse.tsx b/widget/playground/src/components/Collapse/Collapse.tsx index 6488353763..83d7222752 100644 --- a/widget/playground/src/components/Collapse/Collapse.tsx +++ b/widget/playground/src/components/Collapse/Collapse.tsx @@ -17,7 +17,7 @@ export function Collapse(props: PropsWithChildren) { open={open} onOpenChange={toggle} trigger={ - + {title} diff --git a/widget/playground/src/components/ExportConfigModal/ExportConfigModal.styles.tsx b/widget/playground/src/components/ExportConfigModal/ExportConfigModal.styles.tsx index fc45cbde9e..b05c379ba6 100644 --- a/widget/playground/src/components/ExportConfigModal/ExportConfigModal.styles.tsx +++ b/widget/playground/src/components/ExportConfigModal/ExportConfigModal.styles.tsx @@ -6,6 +6,9 @@ export const Link = styled('a', { textDecoration: 'none', '&:hover': { color: '$secondary500', + '& .icon_container > svg': { + color: '$secondary500', + }, }, }); diff --git a/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx b/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx index 219a358db7..c340547154 100644 --- a/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx +++ b/widget/playground/src/components/ExportConfigModal/ExportConfigModal.tsx @@ -97,7 +97,7 @@ export function ExportConfigModal(props: ExportConfigModalProps) { - +  Full Instructions @@ -109,7 +109,7 @@ export function ExportConfigModal(props: ExportConfigModalProps) { - +  More Examples diff --git a/widget/playground/src/components/MultiList/MultiList.styles.ts b/widget/playground/src/components/MultiList/MultiList.styles.ts index c20699128f..d3ef775734 100644 --- a/widget/playground/src/components/MultiList/MultiList.styles.ts +++ b/widget/playground/src/components/MultiList/MultiList.styles.ts @@ -1,4 +1,4 @@ -import { ListItemButton, styled } from '@rango-dev/ui'; +import { ListItemButton, styled, Typography } from '@rango-dev/ui'; export const HeaderContainer = styled('div', { display: 'flex', @@ -17,6 +17,12 @@ export const SelectButton = styled('div', { cursor: 'pointer', textTransform: 'capitalize', }); + +export const SelectDeselectText = styled(Typography, { + '&:hover': { + color: '$secondary500', + }, +}); export const CheckList = styled('div', { overflow: 'auto', height: '90%', diff --git a/widget/playground/src/components/MultiList/MultiList.tsx b/widget/playground/src/components/MultiList/MultiList.tsx index 0f634e94f5..59c7c40931 100644 --- a/widget/playground/src/components/MultiList/MultiList.tsx +++ b/widget/playground/src/components/MultiList/MultiList.tsx @@ -24,6 +24,7 @@ import { IconWrapper, ItemDivider, SelectButton, + SelectDeselectText, StyledListItemButton, } from './MultiList.styles'; @@ -55,7 +56,9 @@ export function MultiList(props: MultiListPropTypes) { const categoryList = category === 'ALL' || !showCategory ? filteredList - : filteredList.filter((item) => item.networks?.includes(category)); + : filteredList.filter((item) => + item.supportedNetworks?.includes(category) + ); // Handle item selection/unselection const handleChangeList = (item: string) => { @@ -172,9 +175,12 @@ export function MultiList(props: MultiListPropTypes) { ? handleAllSelectedClick('deselect') : handleAllSelectedClick('select') }> - + {isAllCategorySelected ? 'Deselect all' : 'Select all'} - + @@ -194,6 +200,7 @@ export function MultiList(props: MultiListPropTypes) { Confirm diff --git a/widget/playground/src/components/MultiList/MultiList.types.ts b/widget/playground/src/components/MultiList/MultiList.types.ts index 83fb451b46..b0f7aac1ad 100644 --- a/widget/playground/src/components/MultiList/MultiList.types.ts +++ b/widget/playground/src/components/MultiList/MultiList.types.ts @@ -1,16 +1,7 @@ -export interface MultiListPropTypes { - type: 'Bridges' | 'DEXs' | 'Blockchains' | 'Wallets'; +import type { CommonListProps } from '../MultiSelect/MultiSelect.types'; + +export type MultiListPropTypes = { label: string; icon: React.ReactNode; - onChange: (items?: string[]) => void; - defaultSelectedItems: string[]; showCategory?: boolean; - list: MapSupportedList[]; -} - -export type MapSupportedList = { - title: string; - logo: string; - name: string; - networks?: string[]; -}; +} & CommonListProps; diff --git a/widget/playground/src/components/MultiSelect/MultiSelect.styles.ts b/widget/playground/src/components/MultiSelect/MultiSelect.styles.ts index f57afa7a05..f3fbaf14b5 100644 --- a/widget/playground/src/components/MultiSelect/MultiSelect.styles.ts +++ b/widget/playground/src/components/MultiSelect/MultiSelect.styles.ts @@ -22,6 +22,12 @@ export const Select = styled('div', { flexWrap: 'wrap', gap: '$5', }, + '&:hover': { + borderColor: '$info300', + '& svg': { + color: '$secondary500', + }, + }, }); export const WalletChip = styled('div', { diff --git a/widget/playground/src/components/MultiSelect/MultiSelect.tsx b/widget/playground/src/components/MultiSelect/MultiSelect.tsx index a3778ae4fc..79ff0bc14a 100644 --- a/widget/playground/src/components/MultiSelect/MultiSelect.tsx +++ b/widget/playground/src/components/MultiSelect/MultiSelect.tsx @@ -1,4 +1,7 @@ -import type { MultiSelectChipProps, PropTypes } from './MultiSelect.types'; +import type { + MuliSelectPropTypes, + MultiSelectChipProps, +} from './MultiSelect.types'; import { ChainsIcon, @@ -11,6 +14,7 @@ import React, { useState } from 'react'; import { MultiList } from '../MultiList'; import { OverlayPanel } from '../OverlayPanel'; +import { TokensPanel } from '../TokensPanel'; import { Label, Select, WalletChip } from './MultiSelect.styles'; @@ -26,25 +30,19 @@ const Chip = (props: MultiSelectChipProps) => { ); }; -export function MultiSelect(props: PropTypes) { +export function MultiSelect(props: MuliSelectPropTypes) { const [showNextModal, setShowNextModal] = useState(false); - const { label, type, value, onChange, icon, defaultSelectedItems, list } = - props; + const { label, type, value, list } = props; const valueAll = !value; const noneSelected = !valueAll && !value.length; const hasValue = !valueAll; const showMore = hasValue && value.length > MAX_CHIPS; const onBack = () => setShowNextModal(false); - const handleListChange = (items?: string[]) => { - onChange(items); - onBack(); - }; - return ( <>