cal.pub0.org/packages/app-store/rainbow/components/RainbowInstallForm.tsx

70 lines
2.2 KiB
TypeScript

import type { UseFormReturn } from "react-hook-form";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { SUPPORTED_CHAINS_FOR_FORM } from "@calcom/rainbow/utils/ethereum";
import type { FormValues } from "@calcom/web/pages/event-types/[type]";
import Select from "@components/ui/form/Select";
type RainbowInstallFormProps = {
formMethods: UseFormReturn<FormValues>;
blockchainId: number;
smartContractAddress: string;
};
const RainbowInstallForm: React.FC<RainbowInstallFormProps> = ({
formMethods,
blockchainId,
smartContractAddress,
}) => {
const { t } = useLocale();
return (
<>
<hr className="my-2 border-neutral-200" />
<div className="block items-center sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<label htmlFor="blockchainId" className="flex text-sm font-medium text-neutral-700">
{t("Blockchain")}
</label>
</div>
<Select
isSearchable={false}
className="block w-full min-w-0 flex-1 rounded-sm text-sm"
onChange={(e) => {
formMethods.setValue("blockchainId", (e && e.value) || 1);
}}
defaultValue={
SUPPORTED_CHAINS_FOR_FORM.find((e) => e.value === blockchainId) || {
value: 1,
label: "Ethereum",
}
}
options={SUPPORTED_CHAINS_FOR_FORM || [{ value: 1, label: "Ethereum" }]}
/>
</div>
<div className="block items-center sm:flex">
<div className="min-w-48 mb-4 sm:mb-0">
<label htmlFor="smartContractAddress" className="flex text-sm font-medium text-neutral-700">
{t("token_address")}
</label>
</div>
<div className="w-full">
<div className="relative mt-1 rounded-sm">
<input
type="text"
className="block w-full rounded-sm border-gray-300 text-sm "
placeholder={t("Example: 0x71c7656ec7ab88b098defb751b7401b5f6d8976f")}
defaultValue={(smartContractAddress || "") as string}
{...formMethods.register("smartContractAddress")}
/>
</div>
</div>
</div>
</>
);
};
export default RainbowInstallForm;