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
pendulum-chain · Oct 31, 2023 · 62037d7 · 62037d7
1 parent ad4c476
commit 62037d7
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 30 deletions.
diff --git 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<ExtendedRegistryVault[]>();
   const [manualVaultSelection, setManualVaultSelection] = useState(false);
   const { getVaults, getVaultsWithIssuableTokens, getVaultsWithRedeemableTokens } = useVaultRegistryPallet();
-  const [selectedAsset, setSelectedAsset] = useState<Asset>();
   const [selectedVault, setSelectedVault] = useState<ExtendedRegistryVault>();
+  const { selectedAsset, setSelectedAsset } = React.useContext(BridgeContext);
 
   useEffect(() => {
     const combinedVaults: ExtendedRegistryVault[] = [];

diff --git 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<Asset | undefined>;
+}
+
+export const BridgeContext = React.createContext<BridgeContextValue>({ 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<Asset>();
 
   const Content = useMemo(() => {
     if (!chain) return;
@@ -34,28 +44,34 @@ function Bridge(): JSX.Element | null {
   }, [chain, nativeCurrency, tabValue, wrappedCurrencySuffix]);
 
   return chain ? (
-    <div className="h-full flex items-center justify-center mt-4">
-      <SettingsDialog visible={settingsVisible} onClose={() => setSettingsVisible(false)} />
-      <Card className="bridge-card bg-base-200 min-h-500 w-full max-w-[520px] rounded-lg">
-        <div className="flex justify-between px-5 mt-5">
-          <Tabs className="flex w-5/6 flex-grow justify-center" boxed value={tabValue} onChange={setTabValue}>
-            <Tabs.Tab className="w-2/5 h-fit p-2" value={0}>
-              {chain === 'Pendulum' && <PendulumLogo className="w-6 h-6 mr-1" />}
-              {chain === 'Amplitude' && <AmplitudeLogo className="w-6 h-6 mr-1" />}
-              To {chain}
-            </Tabs.Tab>
-            <Tabs.Tab className="w-2/5 h-fit p-2" value={1}>
-              <StellarLogo className="w-6 h-6 mr-1" />
-              Back To Stellar
-            </Tabs.Tab>
-          </Tabs>
-          <Button color="ghost" className="settings p-1 min-h-0 h-fit m-auto" onClick={() => setSettingsVisible(true)}>
-            <SettingsIcon />
-          </Button>
-        </div>
-        {Content}
-      </Card>
-    </div>
+    <BridgeContext.Provider value={{ selectedAsset, setSelectedAsset }}>
+      <div className="h-full flex items-center justify-center mt-4">
+        <SettingsDialog visible={settingsVisible} onClose={() => setSettingsVisible(false)} />
+        <Card className="bridge-card bg-base-200 min-h-500 w-full max-w-[520px] rounded-lg">
+          <div className="flex justify-between px-5 mt-5">
+            <Tabs className="flex w-5/6 flex-grow justify-center" boxed value={tabValue} onChange={setTabValue}>
+              <Tabs.Tab className="w-2/5 h-fit p-2" value={0}>
+                {chain === 'Pendulum' && <PendulumLogo className="w-6 h-6 mr-1" />}
+                {chain === 'Amplitude' && <AmplitudeLogo className="w-6 h-6 mr-1" />}
+                To {chain}
+              </Tabs.Tab>
+              <Tabs.Tab className="w-2/5 h-fit p-2" value={1}>
+                <StellarLogo className="w-6 h-6 mr-1" />
+                Back To Stellar
+              </Tabs.Tab>
+            </Tabs>
+            <Button
+              color="ghost"
+              className="settings p-1 min-h-0 h-fit m-auto"
+              onClick={() => setSettingsVisible(true)}
+            >
+              <SettingsIcon />
+            </Button>
+          </div>
+          {Content}
+        </Card>
+      </div>
+    </BridgeContext.Provider>
   ) : (
     <></>
   );

diff --git a/yarn.lock b/yarn.lock
@@ -13093,7 +13093,7 @@ [email protected], 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"