Skip to content

Commit

Permalink
feat(playground): Add support for multi-assets to playground 🛝
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaeldev5 @dudo50
michaeldev5 authored and dudo50 committed Dec 12, 2024
1 parent ccff487 commit 4bf8a07
Show file tree
Hide file tree
Showing 29 changed files with 554 additions and 457 deletions.
131 changes: 77 additions & 54 deletions apps/playground/src/components/CurrencySelection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<FormValues>;
currencyOptions: ComboboxItem[];
index: number;
};

const CurrencySelection: FC<Props> = ({ form, currencyOptions }) => {
const CurrencySelection: FC<Props> = ({ 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 (
<Stack gap="xs">
{form.values.isCustomCurrency &&
(form.values.customCurrencyType === "id" ||
form.values.customCurrencyType === "symbol") && (
{isCustomCurrency &&
(customCurrencyType === "id" || customCurrencyType === "symbol") && (
<TextInput
size={size}
label="Custom currency"
placeholder={
form.values.customCurrencyType === "id" ? "Asset ID" : "Symbol"
}
placeholder={customCurrencyType === "id" ? "Asset ID" : "Symbol"}
required
{...form.getInputProps("customCurrency")}
{...form.getInputProps(`currencies.${index}.customCurrency`)}
/>
)}

{form.values.isCustomCurrency &&
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("customCurrency")}
/>
)}
{isCustomCurrency && customCurrencyType === "multilocation" && (
<JsonInput
size={size}
placeholder="Input Multi-Location JSON or interior junctions JSON"
formatOnBlur
autosize
minRows={10}
{...form.getInputProps(`currencies.${index}.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")}
/>
)}
{isCustomCurrency && customCurrencyType === "overridenMultilocation" && (
<JsonInput
size={size}
placeholder="Provide the XCM Multi-Location JSON to override the default configuration"
formatOnBlur
autosize
minRows={10}
{...form.getInputProps(`currencies.${index}.customCurrency`)}
/>
)}

{!form.values.isCustomCurrency && (
{!isCustomCurrency && (
<Select
key={form.values.from + form.values.to}
key={from + to}
size={size}
label="Currency"
placeholder="Pick value"
data={currencyOptions}
Expand All @@ -84,29 +101,35 @@ const CurrencySelection: FC<Props> = ({ form, currencyOptions }) => {
searchable
required
data-testid="select-currency"
{...form.getInputProps("currencyOptionId")}
{...form.getInputProps(`currencies.${index}.currencyOptionId`)}
/>
)}

{!isNotParaToPara && (
<Group>
<Checkbox
size="xs"
label="Select custom asset"
{...form.getInputProps("isCustomCurrency", { type: "checkbox" })}
/>
{form.values.isCustomCurrency && (
<Group>
<Checkbox
size="xs"
label="Select custom asset"
{...form.getInputProps(`currencies.${index}.isCustomCurrency`, {
type: "checkbox",
})}
/>
{currencies.length > 1 && (
<Checkbox
size="xs"
label="Is fee asset"
{...form.getInputProps(`currencies.${index}.isFeeAsset`, {
type: "checkbox",
})}
/>
)}
</Group>
{isCustomCurrency && (
<SegmentedControl
size="xs"
data={[
{ label: "Asset ID", value: "id" },
{ label: "Symbol", value: "symbol" },
{ label: "Multi-location", value: "multilocation" },
{
label: "Override Multi-location",
value: "overridenMultilocation",
},
]}
{...form.getInputProps("customCurrencyType")}
data={options}
{...form.getInputProps(`currencies.${index}.customCurrencyType`)}
/>
)}
</Group>
Expand Down
63 changes: 24 additions & 39 deletions apps/playground/src/components/RouterTransferForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,18 +164,20 @@ const RouterTransferForm: FC<Props> = ({
},
});

const { from, to, exchange } = form.getValues();

useEffect(() => {
if (form.values.from === "Ethereum" || form.values.to === "Ethereum") {
if (from === "Ethereum" || to === "Ethereum") {
onAccountDisconnect();
}
}, [form.values.from, form.values.to]);
}, [from, to]);

useEffect(() => {
if (form.values.from !== "Ethereum" || form.values.to !== "Ethereum") {
if (from !== "Ethereum" || to !== "Ethereum") {
onAssetHubAccountDisconnect();
onEthWalletDisconnect();
}
}, [form.values.from, form.values.to]);
}, [from, to]);

const connectAssetHubWallet = async () => {
try {
Expand Down Expand Up @@ -234,11 +236,7 @@ const RouterTransferForm: FC<Props> = ({
currencyToMap,
isFromNotParaToPara,
isToNotParaToPara,
} = useRouterCurrencyOptions(
form.values.from,
form.values.exchange,
form.values.to,
);
} = useRouterCurrencyOptions(from, exchange, to);

const onSubmitInternal = (values: TRouterFormValues) => {
const currencyFrom = currencyFromMap[values.currencyFromOptionId];
Expand Down Expand Up @@ -388,12 +386,7 @@ const RouterTransferForm: FC<Props> = ({
/>

<Select
key={
form.values.from +
form.values.exchange +
form.values.to +
"currencyFrom"
}
key={from + exchange + to + "currencyFrom"}
label="Currency From"
placeholder="Pick value"
data={currencyFromOptions}
Expand All @@ -406,12 +399,7 @@ const RouterTransferForm: FC<Props> = ({
/>

<Select
key={
form.values.from +
form.values.exchange +
form.values.to +
"currencyTo"
}
key={from + exchange + to + "currencyTo"}
label="Currency To"
placeholder="Pick value"
data={currencyToOptions}
Expand Down Expand Up @@ -472,8 +460,7 @@ const RouterTransferForm: FC<Props> = ({
data-testid="checkbox-api"
/>
<Button.Group orientation="vertical">
{(form.values.from === "Ethereum" ||
form.values.to === "Ethereum") && (
{(from === "Ethereum" || to === "Ethereum") && (
<Button
size="xs"
variant="outline"
Expand All @@ -486,8 +473,7 @@ const RouterTransferForm: FC<Props> = ({
: "Connect Ethereum Wallet"}
</Button>
)}
{(form.values.from === "Ethereum" ||
form.values.to === "Ethereum") && (
{(from === "Ethereum" || to === "Ethereum") && (
<Button
size="xs"
variant="outline"
Expand All @@ -500,20 +486,19 @@ const RouterTransferForm: FC<Props> = ({
: "Connect AssetHub wallet"}
</Button>
)}
{form.values.from !== "Ethereum" &&
form.values.to !== "Ethereum" && (
<Button
size="xs"
variant="outline"
onClick={onConnectEvmWallet}
rightSection={infoEvmWallet}
data-testid="connect-evm-wallet"
>
{selectedAccount
? `${selectedAccount?.meta.name} (${selectedAccount?.meta.source})`
: "Connect EVM wallet"}
</Button>
)}
{from !== "Ethereum" && to !== "Ethereum" && (
<Button
size="xs"
variant="outline"
onClick={onConnectEvmWallet}
rightSection={infoEvmWallet}
data-testid="connect-evm-wallet"
>
{selectedAccount
? `${selectedAccount?.meta.name} (${selectedAccount?.meta.source})`
: "Connect EVM wallet"}
</Button>
)}
</Button.Group>
</Group>

Expand Down
Loading

0 comments on commit 4bf8a07

Please sign in to comment.