feat(sdk): Add asset search by multi-location ✨

paraspell · Nov 14, 2024 · d3ec875 · d3ec875
1 parent 7730776
commit d3ec875
Show file tree

Hide file tree

Showing 119 changed files with 8,491 additions and 6,236 deletions.
diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -33,7 +33,7 @@
     "@tabler/icons-react": "^3.21.0",
     "axios": "^1.7.7",
     "ethers": "^6.13.4",
-    "polkadot-api": "^1.6.5",
+    "polkadot-api": "^1.7.3",
     "react": "^18.3.1",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.3.1",

diff --git a/apps/playground/src/components/CurrencySelection.tsx b/apps/playground/src/components/CurrencySelection.tsx
@@ -46,13 +46,25 @@ const CurrencySelection: FC<Props> = ({ form, currencyOptions }) => {
       {form.values.isCustomCurrency &&
         form.values.customCurrencyType === "multilocation" && (
           <JsonInput
-            placeholder="Enter Multi-Location JSON here"
+            placeholder="Input Multi-Location JSON or interior junctions JSON to search for and identify the asset"
             formatOnBlur
             autosize
             minRows={10}
             {...form.getInputProps("customCurrency")}
           />
         )}
+
+      {form.values.isCustomCurrency &&
+        form.values.customCurrencyType === "overridenMultilocation" && (
+          <JsonInput
+            placeholder="Provide the XCM Multi-Location JSON to override the default configuration"
+            formatOnBlur
+            autosize
+            minRows={10}
+            {...form.getInputProps("customCurrency")}
+          />
+        )}
+
       {!form.values.isCustomCurrency && (
         <Select
           key={form.values.from + form.values.to}
@@ -71,7 +83,7 @@ const CurrencySelection: FC<Props> = ({ form, currencyOptions }) => {
         <Group>
           <Checkbox
             size="xs"
-            label="Use Custom Currency"
+            label="Select custom asset"
             {...form.getInputProps("isCustomCurrency", { type: "checkbox" })}
           />
           {form.values.isCustomCurrency && (
@@ -81,6 +93,10 @@ const CurrencySelection: FC<Props> = ({ form, currencyOptions }) => {
                 { label: "Asset ID", value: "id" },
                 { label: "Symbol", value: "symbol" },
                 { label: "Multi-location", value: "multilocation" },
+                {
+                  label: "Override Multi-location",
+                  value: "overridenMultilocation",
+                },
               ]}
               {...form.getInputProps("customCurrencyType")}
             />

diff --git a/apps/playground/src/components/TransferForm.tsx b/apps/playground/src/components/TransferForm.tsx
@@ -25,7 +25,11 @@ export type FormValues = {
   amount: string;
   useApi: boolean;
   isCustomCurrency: boolean;
-  customCurrencyType?: "id" | "symbol" | "multilocation";
+  customCurrencyType?:
+    | "id"
+    | "symbol"
+    | "multilocation"
+    | "overridenMultilocation";
 };
 
 export type FormValuesTransformed = FormValues & {

diff --git a/apps/playground/src/components/TransferInfo.tsx b/apps/playground/src/components/TransferInfo.tsx
@@ -8,6 +8,7 @@ import TransferInfoForm from "./TransferInfoForm";
 import OutputAlert from "./OutputAlert";
 import { fetchFromApi } from "../utils/submitUsingApi";
 import { replaceBigInt } from "../utils/replaceBigInt";
+import type { TCurrencyCore, TMultiLocation } from "@paraspell/sdk";
 
 const TransferInfo = () => {
   const { selectedAccount, apiType } = useWallet();
@@ -35,11 +36,16 @@ const TransferInfo = () => {
     }
   }, [error, scrollIntoView]);
 
-  const resolveCurrency = (formValues: FormValues) => {
-    if (formValues.customCurrencyType === "id") {
+  const resolveCurrency = (formValues: FormValues): TCurrencyCore => {
+    if (formValues.customCurrencyType === "multilocation") {
+      return {
+        multilocation: JSON.parse(formValues.currency) as TMultiLocation,
+      };
+    } else if (formValues.customCurrencyType === "id") {
       return { id: formValues.currency };
+    } else {
+      return { symbol: formValues.currency };
     }
-    return { symbol: formValues.currency };
   };
 
   const getQueryResult = async (formValues: FormValues): Promise<unknown> => {

diff --git a/apps/playground/src/components/TransferInfoForm.tsx b/apps/playground/src/components/TransferInfoForm.tsx
@@ -4,7 +4,7 @@ import { useEffect, type FC } from "react";
 import {
   Button,
   Checkbox,
-  Group,
+  JsonInput,
   SegmentedControl,
   Select,
   Stack,
@@ -25,7 +25,7 @@ export type FormValues = {
   destinationAddress: string;
   amount: string;
   useApi: boolean;
-  customCurrencyType?: "id" | "symbol";
+  customCurrencyType?: "id" | "symbol" | "multilocation";
 };
 
 type Props = {
@@ -99,18 +99,32 @@ const TransferInfoForm: FC<Props> = ({ onSubmit, loading }) => {
           {...form.getInputProps("to")}
         />
 
-        <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")}
-          />
+        <Stack gap="xs">
+          {(form.values.customCurrencyType === "id" ||
+            form.values.customCurrencyType === "symbol") && (
+            <TextInput
+              disabled={isNotParaToPara}
+              flex={1}
+              label="Currency"
+              placeholder={
+                form.values.customCurrencyType === "id" ? "Asset ID" : "Symbol"
+              }
+              required
+              data-testid="input-currency"
+              {...form.getInputProps("currency")}
+            />
+          )}
+
+          {form.values.customCurrencyType === "multilocation" && (
+            <JsonInput
+              placeholder="Input Multi-Location JSON or interior junctions JSON to search for and identify the asset"
+              formatOnBlur
+              autosize
+              minRows={10}
+              {...form.getInputProps("currency")}
+            />
+          )}
+
           <SegmentedControl
             disabled={isNotParaToPara}
             onClick={onSelectCurrencyTypeClick}
@@ -119,10 +133,11 @@ const TransferInfoForm: FC<Props> = ({ onSubmit, loading }) => {
             data={[
               { label: "Asset ID", value: "id" },
               { label: "Symbol", value: "symbol" },
+              { label: "Multi-location", value: "multilocation" },
             ]}
             {...form.getInputProps("customCurrencyType")}
           />
-        </Group>
+        </Stack>
 
         <TextInput
           label="Address"

diff --git a/apps/playground/src/components/XcmTransfer.tsx b/apps/playground/src/components/XcmTransfer.tsx
@@ -5,6 +5,7 @@ import TransferForm from "./TransferForm";
 import { useDisclosure, useScrollIntoView } from "@mantine/hooks";
 import {
   isForeignAsset,
+  Override,
   type Extrinsic,
   type TCurrencyInput,
   type TMultiLocation,
@@ -58,6 +59,10 @@ const XcmTransfer = () => {
         return {
           symbol: customCurrency,
         };
+      } else if (customCurrencyType === "overridenMultilocation") {
+        return {
+          multilocation: Override(JSON.parse(customCurrency) as TMultiLocation),
+        };
       } else {
         return {
           multilocation: JSON.parse(customCurrency) as TMultiLocation,
@@ -75,12 +80,12 @@ const XcmTransfer = () => {
       const hasDuplicateIds = isRelayChain(from)
         ? false
         : getOtherAssets(from as TNodePolkadotKusama).filter(
-            (asset) => asset.assetId === currency.assetId,
+            (asset) => asset.assetId === currency.assetId
           ).length > 1;
       return hasDuplicateIds
         ? { symbol: currency.symbol ?? "" }
         : {
-            id: currency.assetId,
+            id: currency.assetId ?? "",
           };
     } else {
       throw Error("Currency is required");
@@ -127,7 +132,7 @@ const XcmTransfer = () => {
           selectedAccount.address,
           apiType,
           "POST",
-          true,
+          true
         );
       } else {
         const builder = Sdk.Builder(api as ApiPromise & PolkadotClient);
@@ -143,7 +148,9 @@ const XcmTransfer = () => {
           tx = await builder
             .from(from)
             .to(to)
-            .currency(determineCurrency(formValues))
+            .currency({
+              symbol: "4-Pool",
+            })
             .amount(amount)
             .address(address, ahAddress)
             .build();
@@ -153,14 +160,14 @@ const XcmTransfer = () => {
       if (apiType === "PAPI") {
         await submitTransactionPapi(
           tx as TPapiTransaction,
-          signer as PolkadotSigner,
+          signer as PolkadotSigner
         );
       } else {
         await submitTransaction(
           api as ApiPromise,
           tx as Extrinsic,
           signer as Signer,
-          selectedAccount.address,
+          selectedAccount.address
         );
       }
 

diff --git a/apps/playground/src/components/asset-claim/AssetClaimForm.tsx b/apps/playground/src/components/asset-claim/AssetClaimForm.tsx
@@ -1,18 +1,18 @@
 import { Stack, Select, TextInput, Button, Checkbox } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import type { TNodeWithRelayChains } from "@paraspell/sdk";
+import type { TNodeDotKsmWithRelayChains } from "@paraspell/sdk";
 import type { FC } from "react";
 import { isValidWalletAddress } from "../../utils";
 
-const SUPPORTED_NODES: TNodeWithRelayChains[] = [
+const SUPPORTED_NODES: TNodeDotKsmWithRelayChains[] = [
   "Polkadot",
   "Kusama",
   "AssetHubPolkadot",
   "AssetHubKusama",
 ];
 
 export type FormValues = {
-  from: TNodeWithRelayChains;
+  from: TNodeDotKsmWithRelayChains;
   address: string;
   amount: string;
   useApi: boolean;

diff --git a/apps/playground/src/components/assets/AssetsForm.tsx b/apps/playground/src/components/assets/AssetsForm.tsx
@@ -3,7 +3,7 @@ import { useEffect, type FC } from "react";
 import {
   Button,
   Checkbox,
-  Group,
+  JsonInput,
   SegmentedControl,
   Select,
   Stack,
@@ -20,7 +20,7 @@ export type FormValues = {
   currency: string;
   address: string;
   useApi: boolean;
-  currencyType?: "id" | "symbol";
+  currencyType?: "id" | "symbol" | "multilocation";
 };
 
 type Props = {
@@ -79,8 +79,16 @@ const AssetsForm: FC<Props> = ({ onSubmit, loading }) => {
     if (form.values.node === "Ethereum" && notSupportsEthereum) {
       form.setFieldValue("node", "Acala");
     }
+    if (showSymbolInput) {
+      form.setFieldValue("currency", "");
+      form.setFieldValue("currencyType", "symbol");
+    }
   }, [form.values.func]);
 
+  const onSelectCurrencyTypeClick = () => {
+    form.setFieldValue("currency", "");
+  };
+
   return (
     <form onSubmit={form.onSubmit(onSubmitInternal)}>
       <Stack>
@@ -107,34 +115,50 @@ const AssetsForm: FC<Props> = ({ onSubmit, loading }) => {
         />
 
         {showSymbolInput && (
-          <Group align="flex-end">
-            <TextInput
-              flex={1}
-              label={supportsCurrencyType ? "Currency" : "Symbol"}
-              placeholder={
-                supportsCurrencyType
-                  ? "GLMR"
-                  : form.values.currencyType === "id"
-                    ? "Asset ID"
-                    : "Symbol"
-              }
-              required
-              data-testid="input-currency"
-              {...form.getInputProps("currency")}
-            />
+          <Stack gap="xs">
+            {(form.values.currencyType === "id" ||
+              form.values.currencyType === "symbol") && (
+              <TextInput
+                flex={1}
+                label={supportsCurrencyType ? "Currency" : "Symbol"}
+                placeholder={
+                  supportsCurrencyType
+                    ? "GLMR"
+                    : form.values.currencyType === "id"
+                      ? "Asset ID"
+                      : "Symbol"
+                }
+                required
+                data-testid="input-currency"
+                {...form.getInputProps("currency")}
+              />
+            )}
+
+            {form.values.currencyType === "multilocation" && (
+              <JsonInput
+                placeholder="Input Multi-Location JSON or interior junctions JSON to search for and identify the asset"
+                formatOnBlur
+                autosize
+                minRows={10}
+                {...form.getInputProps("currency")}
+              />
+            )}
+
             {supportsCurrencyType && (
               <SegmentedControl
                 size="xs"
                 pb={8}
                 data={[
                   { label: "Asset ID", value: "id" },
                   { label: "Symbol", value: "symbol" },
+                  { label: "Multi-location", value: "multilocation" },
                 ]}
+                onClick={onSelectCurrencyTypeClick}
                 data-testid="currency-type"
                 {...form.getInputProps("currencyType")}
               />
             )}
-          </Group>
+          </Stack>
         )}
 
         {showAddressInput && (