diff --git a/apps/playground/src/components/CurrencySelection.tsx b/apps/playground/src/components/CurrencySelection.tsx index 24bb5b41..9cda50cc 100644 --- a/apps/playground/src/components/CurrencySelection.tsx +++ b/apps/playground/src/components/CurrencySelection.tsx @@ -11,71 +11,88 @@ import { JsonInput, } from "@mantine/core"; import type { UseFormReturnType } from "@mantine/form"; -import type { FormValues } from "./TransferForm"; +import type { FormValues } from "./transfer/XcmTransferForm"; import { isRelayChain } from "@paraspell/sdk"; type Props = { form: UseFormReturnType; currencyOptions: ComboboxItem[]; + index: number; }; -const CurrencySelection: FC = ({ form, currencyOptions }) => { +const CurrencySelection: FC = ({ form, currencyOptions, index }) => { + const { from, to, currencies } = form.getValues(); + + const isCustomCurrency = currencies[index].isCustomCurrency; + const customCurrencyType = currencies[index].customCurrencyType; + useEffect(() => { - if (!form.values.customCurrencyType) return; - form.setFieldValue("customCurrency", ""); - }, [form.values.customCurrencyType]); + if (!customCurrencyType) return; + form.setFieldValue(`currencies.${index}.customCurrency`, ""); + }, [customCurrencyType]); - const isRelayToPara = isRelayChain(form.values.from); - const isParaToRelay = isRelayChain(form.values.to); + const isRelayToPara = isRelayChain(from); + const isParaToRelay = isRelayChain(to); const isNotParaToPara = isRelayToPara || isParaToRelay; + // If it's not para-to-para, we do not allow custom currencies useEffect(() => { if (isNotParaToPara) { - form.setFieldValue("isCustomCurrency", false); + form.setFieldValue(`currencies.${index}.isCustomCurrency`, false); } }, [isNotParaToPara]); + const options = [ + { label: "Asset ID", value: "id" }, + { label: "Symbol", value: "symbol" }, + { label: "Multi-location", value: "multilocation" }, + ...(currencies.length === 1 + ? [{ label: "Override Multi-location", value: "overridenMultilocation" }] + : []), + ]; + + const size = currencies.length > 1 ? "xs" : "sm"; + return ( - {form.values.isCustomCurrency && - (form.values.customCurrencyType === "id" || - form.values.customCurrencyType === "symbol") && ( + {isCustomCurrency && + (customCurrencyType === "id" || customCurrencyType === "symbol") && ( )} - {form.values.isCustomCurrency && - form.values.customCurrencyType === "multilocation" && ( - - )} + {isCustomCurrency && customCurrencyType === "multilocation" && ( + + )} - {form.values.isCustomCurrency && - form.values.customCurrencyType === "overridenMultilocation" && ( - - )} + {isCustomCurrency && customCurrencyType === "overridenMultilocation" && ( + + )} - {!form.values.isCustomCurrency && ( + {!isCustomCurrency && ( = ({ /> - - + +