Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(playground): Add support for multi-assets to playground 🛝 #565

Merged
merged 1 commit into from
Dec 12, 2024
Merged

feat(playground): Add support for multi-assets to playground 🛝 #565

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 77 additions & 54 deletions apps/playground/src/components/CurrencySelection.tsx
View file
Open in desktop
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
Open in desktop
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
Loading