Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b0b4898
commit 59398fa
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { Button, ButtonProps } from "@/components/ui/button" | ||
| import { CheckIcon, CopyIcon } from "lucide-react" | ||
| import { useState } from "react" | ||
| import { useDebounceCallback } from "usehooks-ts" | ||
|
|
||
| export namespace CopyButton { | ||
| export interface Props extends ButtonProps { | ||
| text: string | ||
| copyResetDelayMs?: number | ||
| } | ||
| } | ||
|
|
||
| const COPY_RESET_DELAY_MS = 2000 | ||
|
|
||
| export const CopyButton: React.FC<CopyButton.Props> = ({ | ||
|
Check warning on line 15 in projects/wallet-template/src/containers/WalletPopup/components/CopyButton.tsx
|
||
| text, | ||
| onClick, | ||
| copyResetDelayMs, | ||
| ...props | ||
| }) => { | ||
| const [isCopied, setIsCopied] = useState(false) | ||
| const setIsCopiedDebounced = useDebounceCallback( | ||
| setIsCopied, | ||
| copyResetDelayMs ?? COPY_RESET_DELAY_MS, | ||
| ) | ||
|
|
||
| const copy = () => { | ||
| copyToClipboard(text) | ||
| setIsCopied(true) | ||
| setIsCopiedDebounced(false) | ||
| } | ||
|
|
||
| return ( | ||
| <Button | ||
| variant={isCopied ? "ghost" : "outline"} | ||
| size="sm" | ||
| onClick={(e) => { | ||
| copy() | ||
| onClick?.(e) | ||
| }} | ||
| {...props} | ||
| > | ||
| {isCopied ? ( | ||
| <> | ||
| <CheckIcon className="w-4 h-4 mr-2" /> | ||
| Copied | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <CopyIcon className="w-4 h-4 mr-2" /> | ||
| Copy JSON | ||
| </> | ||
| )} | ||
| </Button> | ||
| ) | ||
| } | ||
|
|
||
| function copyToClipboard(text: string) { | ||
| navigator.clipboard.writeText(text) | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,76 +1,154 @@ | ||
| import React, { useState } from "react" | ||
| import { useForm, SubmitHandler } from "react-hook-form" | ||
| import { CheckCircle, UploadIcon } from "lucide-react" | ||
| import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" | ||
|
|
||
| import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" | ||
| import { Label } from "@/components/ui/label" | ||
| import { Textarea } from "@/components/ui/textarea" | ||
| import { Input } from "@/components/ui/input" | ||
| import { Button } from "@/components/ui/button" | ||
| import { z } from "zod" | ||
| import { zodResolver } from "@hookform/resolvers/zod" | ||
| import { | ||
| Form, | ||
| FormControl, | ||
| FormField, | ||
| FormItem, | ||
| FormLabel, | ||
| FormMessage, | ||
| } from "@/components/ui/form" | ||
|
|
||
| type FormFields = { | ||
| rawChainSpec: string | ||
| } | ||
|
|
||
| const formSchema = z.object({ | ||
| rawChainSpec: z | ||
| .string({ required_error: "Raw Chain Spec is required" }) | ||
| .min(1, "Chain Spec is empty") | ||
| .trim(), | ||
| }) | ||
|
|
||
| export namespace AddChainSpec { | ||
| export type Props = { | ||
| addChainSpec: (rawChainSpec: string) => Promise<void> | ||
| } | ||
| } | ||
|
|
||
| type InputMethod = "upload" | "paste" | (string & {}) | ||
|
|
||
| export const AddChainSpec: React.FC<AddChainSpec.Props> = ({ | ||
| addChainSpec, | ||
| }) => { | ||
| const form = useForm<z.infer<typeof formSchema>>({ | ||
| resolver: zodResolver(formSchema), | ||
| defaultValues: { | ||
| rawChainSpec: "", | ||
| }, | ||
| }) | ||
| const { | ||
| handleSubmit, | ||
| formState: { isSubmitting, errors, isSubmitted, isSubmitSuccessful }, | ||
| } = form | ||
| const [inputMethod, setInputMethod] = useState<InputMethod>("paste") | ||
|
|
||
| const onSubmit: SubmitHandler<FormFields> = async ({ | ||
| rawChainSpec: chainSpec, | ||
| }) => { | ||
| await addChainSpec(chainSpec) | ||
| } | ||
|
|
||
| return ( | ||
| <Card> | ||
| <CardHeader> | ||
| <CardTitle>Allow a Chain Spec</CardTitle> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <Form {...form}> | ||
| <form onSubmit={handleSubmit(onSubmit)}> | ||
| <div className="grid gap-4 mb-4"> | ||
| <RadioGroup | ||
| value={inputMethod} | ||
| onValueChange={setInputMethod} | ||
| className="mb-4" | ||
| > | ||
| <div className="flex items-center mb-2"> | ||
| <RadioGroupItem value="paste" /> | ||
| <Label className="ml-2 text-foreground"> | ||
| Paste Chain Spec JSON | ||
| </Label> | ||
| </div> | ||
| <div className="flex items-center"> | ||
| <RadioGroupItem value="upload" /> | ||
| <Label className="ml-2 text-foreground"> | ||
| Upload Chain Spec File | ||
| </Label> | ||
| </div> | ||
| </RadioGroup> | ||
| {inputMethod === "paste" && ( | ||
| <FormField | ||
| control={form.control} | ||
| name="rawChainSpec" | ||
| render={({ field }) => ( | ||
| <FormItem> | ||
| <FormLabel>Paste Chain Spec JSON</FormLabel> | ||
| <FormControl> | ||
| <Textarea | ||
| placeholder="Paste your chainspec JSON here..." | ||
| {...field} | ||
| /> | ||
| </FormControl> | ||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
| )} | ||
| {inputMethod === "upload" && ( | ||
| <FormField | ||
| control={form.control} | ||
| name="rawChainSpec" | ||
| render={({ field: { value, onChange, ...fieldProps } }) => ( | ||
| <FormItem> | ||
| <FormLabel>Upload Chain Spec File</FormLabel> | ||
| <FormControl> | ||
| <Input | ||
| {...fieldProps} | ||
| type="file" | ||
| onChange={async (event) => | ||
| onChange( | ||
| event.target.files && | ||
| (await event.target.files[0].text()), | ||
| ) | ||
| } | ||
| /> | ||
| </FormControl> | ||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
| )} | ||
| </div> | ||
| <div className="flex justify-end"> | ||
| <Button type="submit" disabled={isSubmitting}> | ||
| <UploadIcon className="w-4 h-4 mr-2" /> | ||
| Submit | ||
| </Button> | ||
| </div> | ||
| </form> | ||
| </Form> | ||
| {isSubmitted && isSubmitSuccessful && ( | ||
| <p className="mt-2 text-center text-primary"> | ||
| <CheckCircle className="inline-block mr-2" /> | ||
| Chain specification submitted successfully. | ||
| </p> | ||
| )} | ||
| {isSubmitted && !isSubmitSuccessful && errors && ( | ||
| <p className="mt-2 text-center text-destructive"> | ||
| Error submitting chain specification. | ||
| </p> | ||
| )} | ||
| </CardContent> | ||
| </Card> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" | ||
| import { useState } from "react" | ||
| import { ListChainSpecs } from "./ListChainSpecs" | ||
| import useSWR from "swr" | ||
| import { rpc } from "../../api" | ||
| import { ChainSpec } from "@/background/types" | ||
| import { AddChainSpec } from "./AddChainSpec" | ||
|
|
||
| export const ChainSpecs = () => { | ||
| const { data: chainSpecs, mutate } = useSWR( | ||
| "rpc.getChainSpecs", | ||
| () => rpc.client.getChainSpecs(), | ||
| { revalidateOnFocus: true }, | ||
| ) | ||
|
|
||
| const [view, setView] = useState<"list" | "allow" | (string & {})>("list") | ||
|
|
||
| const addChainSpec = async (rawChainSpec: string) => { | ||
| await rpc.client.addChainSpec(rawChainSpec) | ||
| await mutate() | ||
| } | ||
|
|
||
| const removeChainSpec = async (chainSpec: ChainSpec) => { | ||
| await rpc.client.removeChainSpec(chainSpec.genesisHash) | ||
| await mutate() | ||
| } | ||
|
|
||
| return ( | ||
| <div className="container"> | ||
| <h2 className="mb-6 text-3xl font-semibold"> | ||
| Manage Chain Specifications | ||
| </h2> | ||
|
|
||
| <Tabs defaultValue={view} onValueChange={setView}> | ||
| <TabsList className="mb-6"> | ||
| <TabsTrigger value="list">Allowlist</TabsTrigger> | ||
| <TabsTrigger value="allow">Add ChainSpec</TabsTrigger> | ||
| </TabsList> | ||
|
|
||
| <TabsContent value="list"> | ||
| <ListChainSpecs | ||
| chainSpecs={chainSpecs ?? []} | ||
| removeChainSpec={removeChainSpec} | ||
| /> | ||
| </TabsContent> | ||
|
|
||
| <TabsContent value="allow"> | ||
| <AddChainSpec addChainSpec={addChainSpec} /> | ||
| </TabsContent> | ||
| </Tabs> | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.