fix(sdk): Fix transfer info invalid currency error handling 🛠️

paraspell · Oct 23, 2024 · 139bcfc · 139bcfc
1 parent 8784881
commit 139bcfc
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 30 deletions.
diff --git a/apps/playground/src/components/TransferInfo.tsx b/apps/playground/src/components/TransferInfo.tsx
@@ -36,13 +36,17 @@ const TransferInfo = () => {
     }
   }, [error, scrollIntoView]);
 
+  const resolveCurrency = (formValues: FormValues) => {
+    if (formValues.customCurrencyType === "id") {
+      return { id: formValues.currency };
+    }
+    return { symbol: formValues.currency };
+  };
+
   const getQueryResult = async (formValues: FormValues): Promise<unknown> => {
     const { useApi } = formValues;
-    const originAddress = selectedAccount?.address ?? "";
-    const currency =
-      formValues.customCurrencyType === "id"
-        ? { id: formValues.currency }
-        : { symbol: formValues.currency };
+    const originAddress = formValues.address;
+    const currency = resolveCurrency(formValues);
     if (useApi) {
       return await fetchFromApi(
         {

diff --git a/apps/playground/src/components/TransferInfoForm.tsx b/apps/playground/src/components/TransferInfoForm.tsx
@@ -1,6 +1,6 @@
 import { useForm } from "@mantine/form";
 import { isValidWalletAddress } from "../utils";
-import type { FC } from "react";
+import { useEffect, type FC } from "react";
 import {
   Button,
   Checkbox,
@@ -11,7 +11,11 @@ import {
   TextInput,
 } from "@mantine/core";
 import type { TNodeDotKsmWithRelayChains } from "@paraspell/sdk";
-import { NODES_WITH_RELAY_CHAINS } from "@paraspell/sdk";
+import {
+  getRelayChainSymbol,
+  isRelayChain,
+  NODES_WITH_RELAY_CHAINS,
+} from "@paraspell/sdk";
 
 export type FormValues = {
   from: TNodeDotKsmWithRelayChains;
@@ -54,6 +58,22 @@ const TransferInfoForm: FC<Props> = ({ onSubmit, loading }) => {
     form.values.to === "Polkadot" ||
     form.values.to === "Kusama";
 
+  const onSelectCurrencyTypeClick = () => {
+    form.setFieldValue("currency", "");
+  };
+
+  useEffect(() => {
+    if (isRelayChain(form.values.from) || isRelayChain(form.values.to)) {
+      form.setFieldValue("customCurrencyType", "symbol");
+      if (isRelayChain(form.values.from)) {
+        form.setFieldValue("currency", getRelayChainSymbol(form.values.from));
+      }
+      if (isRelayChain(form.values.to)) {
+        form.setFieldValue("currency", getRelayChainSymbol(form.values.to));
+      }
+    }
+  }, [form.values.from, form.values.to]);
+
   return (
     <form onSubmit={form.onSubmit(onSubmit)}>
       <Stack>
@@ -79,29 +99,30 @@ const TransferInfoForm: FC<Props> = ({ onSubmit, loading }) => {
           {...form.getInputProps("to")}
         />
 
-        {!isNotParaToPara && (
-          <Group align="flex-end">
-            <TextInput
-              flex={1}
-              label="Currency"
-              placeholder={
-                form.values.customCurrencyType === "id" ? "Asset ID" : "Symbol"
-              }
-              required
-              data-testid="input-currency"
-              {...form.getInputProps("currency")}
-            />
-            <SegmentedControl
-              size="xs"
-              pb={8}
-              data={[
-                { label: "Asset ID", value: "id" },
-                { label: "Symbol", value: "symbol" },
-              ]}
-              {...form.getInputProps("customCurrencyType")}
-            />
-          </Group>
-        )}
+        <Group align="flex-end">
+          <TextInput
+            disabled={isNotParaToPara}
+            flex={1}
+            label="Currency"
+            placeholder={
+              form.values.customCurrencyType === "id" ? "Asset ID" : "Symbol"
+            }
+            required
+            data-testid="input-currency"
+            {...form.getInputProps("currency")}
+          />
+          <SegmentedControl
+            disabled={isNotParaToPara}
+            onClick={onSelectCurrencyTypeClick}
+            size="xs"
+            pb={8}
+            data={[
+              { label: "Asset ID", value: "id" },
+              { label: "Symbol", value: "symbol" },
+            ]}
+            {...form.getInputProps("customCurrencyType")}
+          />
+        </Group>
 
         <TextInput
           label="Address"

diff --git a/packages/sdk/src/pallets/assets/transfer-info/getTransferInfo.test.ts b/packages/sdk/src/pallets/assets/transfer-info/getTransferInfo.test.ts
@@ -12,6 +12,7 @@ import {
 } from '../getExistentialDeposit'
 import type { ApiPromise } from '@polkadot/api'
 import { getNativeAssetSymbol } from '../assets'
+import { InvalidCurrencyError } from '../../../errors'
 
 vi.mock('../../../utils', () => ({
   createApiInstanceForNode: vi.fn(),
@@ -112,4 +113,11 @@ describe('getTransferInfo', () => {
       getTransferInfo(origin, destination, accountOrigin, accountDestination, currency, amount)
     ).rejects.toThrow('API failure')
   })
+
+  it('Throws an error if invalid currency for origin node provided', async () => {
+    vi.mocked(getAssetBySymbolOrId).mockReturnValue(null)
+    await expect(() =>
+      getTransferInfo(origin, destination, accountOrigin, accountDestination, currency, amount)
+    ).rejects.toThrow(InvalidCurrencyError)
+  })
 })
diff --git a/packages/sdk/src/pallets/assets/transfer-info/getTransferInfo.ts b/packages/sdk/src/pallets/assets/transfer-info/getTransferInfo.ts
@@ -1,3 +1,4 @@
+import { InvalidCurrencyError } from '../../../errors'
 import type { TCurrencyCore, TNodeDotKsmWithRelayChains } from '../../../types'
 import type { TTransferInfo } from '../../../types/TTransferInfo'
 import { createApiInstanceForNode, determineRelayChainSymbol } from '../../../utils'
@@ -45,6 +46,12 @@ export const getTransferInfo = async (
 
   const asset = getAssetBySymbolOrId(origin, currency)
 
+  if (!asset) {
+    throw new InvalidCurrencyError(
+      `Asset ${'symbol' in currency ? currency.symbol : currency.id} not found on ${origin}`
+    )
+  }
+
   return {
     chain: {
       origin,