From 62037d77cf7bd31c9be1cf9ce0c7d03c831ac90e Mon Sep 17 00:00:00 2001 From: Gonza Montiel Date: Tue, 31 Oct 2023 10:59:24 +0100 Subject: [PATCH] fix: Show vaults for selected asset on Bridge Settings (#278) * add a context at the parent bridge level to store selected asset * update yarn lock --- src/hooks/spacewalk/useBridgeSettings.ts | 5 +- src/pages/bridge/index.tsx | 62 +++++++++++++++--------- yarn.lock | 15 ++++-- 3 files changed, 52 insertions(+), 30 deletions(-) diff --git a/src/hooks/spacewalk/useBridgeSettings.ts b/src/hooks/spacewalk/useBridgeSettings.ts index e29e60bd..99803fba 100644 --- a/src/hooks/spacewalk/useBridgeSettings.ts +++ b/src/hooks/spacewalk/useBridgeSettings.ts @@ -1,8 +1,9 @@ import _ from 'lodash'; -import { StateUpdater, useEffect, useMemo, useState } from 'react'; +import React, { StateUpdater, useEffect, useMemo, useState } from 'react'; import { Asset } from 'stellar-sdk'; import { convertCurrencyToStellarAsset } from '../../helpers/spacewalk'; import { stringifyStellarAsset } from '../../helpers/stellar'; +import { BridgeContext } from '../../pages/bridge'; import { ExtendedRegistryVault, useVaultRegistryPallet } from './vaultRegistry'; export interface BridgeSettings { @@ -21,8 +22,8 @@ function useBridgeSettings(): BridgeSettings { const [vaults, setExtendedVaults] = useState(); const [manualVaultSelection, setManualVaultSelection] = useState(false); const { getVaults, getVaultsWithIssuableTokens, getVaultsWithRedeemableTokens } = useVaultRegistryPallet(); - const [selectedAsset, setSelectedAsset] = useState(); const [selectedVault, setSelectedVault] = useState(); + const { selectedAsset, setSelectedAsset } = React.useContext(BridgeContext); useEffect(() => { const combinedVaults: ExtendedRegistryVault[] = []; diff --git a/src/pages/bridge/index.tsx b/src/pages/bridge/index.tsx index 16133ce6..d64ef956 100644 --- a/src/pages/bridge/index.tsx +++ b/src/pages/bridge/index.tsx @@ -1,5 +1,7 @@ -import { useMemo, useState } from 'preact/hooks'; +import React from 'preact/compat'; +import { StateUpdater, useMemo, useState } from 'preact/hooks'; import { Button, Card, Tabs } from 'react-daisyui'; +import { Asset } from 'stellar-sdk'; import { useNodeInfoState } from '../../NodeInfoProvider'; import AmplitudeLogo from '../../assets/AmplitudeLogo'; import PendulumLogo from '../../assets/PendulumLogo'; @@ -16,12 +18,20 @@ enum BridgeTabs { Redeem = 1, } +interface BridgeContextValue { + selectedAsset?: Asset; + setSelectedAsset: StateUpdater; +} + +export const BridgeContext = React.createContext({ setSelectedAsset: () => {} }); + function Bridge(): JSX.Element | null { const [tabValue, setTabValue] = useState(BridgeTabs.Issue); const [settingsVisible, setSettingsVisible] = useState(false); const { chain } = useNodeInfoState().state; const nativeCurrency = chain === 'Amplitude' ? 'AMPE' : 'PEN'; const wrappedCurrencySuffix = SpacewalkConstants.WrappedCurrencySuffix; + const [selectedAsset, setSelectedAsset] = useState(); const Content = useMemo(() => { if (!chain) return; @@ -34,28 +44,34 @@ function Bridge(): JSX.Element | null { }, [chain, nativeCurrency, tabValue, wrappedCurrencySuffix]); return chain ? ( -
- setSettingsVisible(false)} /> - -
- - - {chain === 'Pendulum' && } - {chain === 'Amplitude' && } - To {chain} - - - - Back To Stellar - - - -
- {Content} - -
+ +
+ setSettingsVisible(false)} /> + +
+ + + {chain === 'Pendulum' && } + {chain === 'Amplitude' && } + To {chain} + + + + Back To Stellar + + + +
+ {Content} + +
+ ) : ( <> ); diff --git a/yarn.lock b/yarn.lock index d89ebae7..b5d8ce9d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13093,7 +13093,7 @@ tslib@1.14.1, tslib@^1.10.0, tslib@^1.8.1: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== -tslib@^2.0.0, tslib@^2.0.3, tslib@^2.4.0, tslib@^2.6.1: +tslib@^2.0.0, tslib@^2.0.3, tslib@^2.4.0, tslib@^2.5.3, tslib@^2.6.1: version "2.6.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.1.tgz#fd8c9a0ff42590b25703c0acb3de3d3f4ede0410" integrity sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig== @@ -13103,10 +13103,10 @@ tslib@^2.1.0, tslib@^2.3.1, tslib@^2.5.0: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf" integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== -tslib@^2.5.3: - version "2.6.1" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.1.tgz#fd8c9a0ff42590b25703c0acb3de3d3f4ede0410" - integrity sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig== +tslib@~2.5.0: + version "2.5.3" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913" + integrity sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w== tsutils@^3.21.0: version "3.21.0" @@ -13210,6 +13210,11 @@ typescript@^4.8.2, typescript@^4.9.5: resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== +ua-parser-js@^1.0.33: + version "1.0.37" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.37.tgz#b5dc7b163a5c1f0c510b08446aed4da92c46373f" + integrity sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ== + ua-parser-js@^1.0.35: version "1.0.35" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.35.tgz#c4ef44343bc3db0a3cbefdf21822f1b1fc1ab011"