fix: set only the coin list of active provider in exchange form (#404)

ArdentHQ · May 31, 2023 · 43057f6 · 43057f6
1 parent 1e79fd3
commit 43057f6
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 1 deletion.
diff --git a/src/domains/exchange/components/ExchangeForm/ExchangeForm.test.tsx b/src/domains/exchange/components/ExchangeForm/ExchangeForm.test.tsx
@@ -26,6 +26,7 @@ import {
 import { ExchangeProvider, useExchangeContext } from "@/domains/exchange/contexts/Exchange";
 import { httpClient, toasts } from "@/app/services";
 import { requestMock, requestMockOnce, server } from "@/tests/mocks/server";
+import * as useQueryParameters from "@/app/hooks/use-query-parameters";
 
 import currencyEth from "@/tests/fixtures/exchange/changenow/currency-eth.json";
 import order from "@/tests/fixtures/exchange/changenow/order.json";
@@ -136,9 +137,14 @@ const payoutValue = "37042.3588384";
 
 describe("ExchangeForm", () => {
 	let findExchangeTransactionMock;
+	let queryParametersMock;
 
 	beforeAll(() => {
 		profile = env.profiles().findById(getDefaultProfileId());
+
+		queryParametersMock = vi.spyOn(useQueryParameters, "useQueryParameters").mockImplementation(() => ({
+			get: () => "changenow",
+		}));
 	});
 
 	beforeEach(() => {
@@ -1349,6 +1355,38 @@ describe("ExchangeForm", () => {
 
 		exchangeTransactionUpdateMock.mockRestore();
 	});
+
+	it.each(["xs", "lg"])("should render with changelly in (%s)", async (breakpoint) => {
+		const onReady = vi.fn();
+		queryParametersMock.mockRestore();
+
+		vi.spyOn(useQueryParameters, "useQueryParameters").mockImplementation(() => ({
+			get: () => "changelly",
+		}));
+
+		renderResponsiveWithRoute(
+			<Route path="/profiles/:profileId/exchange/view">
+				<ExchangeProvider>
+					<Wrapper>
+						<ExchangeForm onReady={onReady} />
+					</Wrapper>
+				</ExchangeProvider>
+			</Route>,
+			breakpoint,
+			{
+				history,
+				route: exchangeURL,
+			},
+		);
+
+		await waitFor(() => {
+			expect(onReady).toHaveBeenCalledWith();
+		});
+
+		await waitFor(() => {
+			expect(screen.getByTestId("ExchangeForm")).toBeInTheDocument();
+		});
+	});
 });
 
 describe("FormStep", () => {

diff --git a/src/domains/exchange/components/ExchangeForm/ExchangeForm.tsx b/src/domains/exchange/components/ExchangeForm/ExchangeForm.tsx
@@ -14,7 +14,7 @@ import { FormButtons } from "@/app/components/Form/FormButtons";
 import { StepIndicator } from "@/app/components/StepIndicator";
 import { TabPanel, Tabs } from "@/app/components/Tabs";
 import { useEnvironmentContext, useNavigationContext } from "@/app/contexts";
-import { useActiveProfile, useValidation } from "@/app/hooks";
+import { useActiveProfile, useQueryParameters, useValidation } from "@/app/hooks";
 import { toasts } from "@/app/services";
 import { useExchangeContext } from "@/domains/exchange/contexts/Exchange";
 import { CurrencyData, ExchangeFormState, Order } from "@/domains/exchange/exchange.contracts";
@@ -57,6 +57,7 @@ const ExchangeForm = ({ orderId, onReady }: { orderId?: string; onReady: () => v
 
 	const { currencies, fromCurrency, toCurrency, minPayinAmount, minPayoutAmount, recipientWallet, refundWallet } =
 		watch();
+	const queryParameters = useQueryParameters();
 
 	useEffect(() => {
 		const fetchCurrencies = async () => {
@@ -72,6 +73,10 @@ const ExchangeForm = ({ orderId, onReady }: { orderId?: string; onReady: () => v
 						currency.coin !== "ark" && currency.coin !== "eth" && currency.coin !== "btc",
 				);
 
+				if (provider?.slug !== queryParameters.get("exchangeId")) {
+					return;
+				}
+
 				setValue("currencies", [...ark, ...btc, ...eth, ...rest]);
 			} catch {
 				//