feat: import names from pre-existing json

src/CommonTypes/CommonTypes.tsx

@@ -8,6 +8,7 @@ import { twMerge } from "tailwind-merge"
 import { CommonType } from "./CommonType"
 import { ExportKnownTypes } from "./Export"
 import { commonTypeNames$, commonTypes$, setSearch } from "./commonTypes.state"
+import { ImportKnownTypes } from "./Import"
 
 export function CommonTypes({ className }: { className?: string }) {
   const commonTypes = useStateObservable(commonTypes$)
@@ -40,14 +41,24 @@ export function CommonTypes({ className }: { className?: string }) {
   return (
     <div className={twMerge("flex flex-col gap-2", className)}>
       <div className="border-2 rounded p-2 sticky top-2 z-10 bg-slate-50 flex justify-between">
-        <Popover.Root>
-          <Popover.Trigger>
-            <Button>Export</Button>
-          </Popover.Trigger>
-          <Popover.Content>
-            <ExportKnownTypes />
-          </Popover.Content>
-        </Popover.Root>
+        <div className="flex items-center gap-2">
+          <Popover.Root>
+            <Popover.Trigger>
+              <Button>Export</Button>
+            </Popover.Trigger>
+            <Popover.Content>
+              <ExportKnownTypes />
+            </Popover.Content>
+          </Popover.Root>
+          <Popover.Root>
+            <Popover.Trigger>
+              <Button>Import</Button>
+            </Popover.Trigger>
+            <Popover.Content>
+              <ImportKnownTypes />
+            </Popover.Content>
+          </Popover.Root>
+        </div>
         <TextField.Root
           onChange={(evt) => changeSearch(evt.target.value)}
           onBlur={(evt) => {

src/CommonTypes/Export.tsx

@@ -9,7 +9,7 @@ import {
 } from "./commonTypes.state"
 import { Checkbox } from "@radix-ui/themes"
 
-type RepositoryEntry = {
+export type RepositoryEntry = {
   name: string
   chains: string
   paths: string[]

src/CommonTypes/Import.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react"
+import { RepositoryEntry } from "./Export"
+import { commonTypeNames$, setTypeName } from "./commonTypes.state"
+
+export const ImportKnownTypes = () => {
+  const [done, setDone] = useState(false)
+
+  useEffect(() => {
+    const sub = commonTypeNames$.subscribe()
+    return () => sub.unsubscribe()
+  }, [])
+
+  const handleChange = (value: string) => {
+    try {
+      const result = JSON.parse(value) as Record<string, RepositoryEntry>
+      if (typeof result !== "object") throw new Error("Not an object")
+      Object.entries(result).forEach(([checksum, type]) => {
+        setTypeName({ checksum, name: type.name })
+      })
+      setDone(true)
+    } catch (ex) {
+      console.error(ex)
+    }
+  }
+
+  if (done) {
+    return (
+      <div className="p-2 max-h-[50vh] flex flex-col gap-2">
+        <p>Imported successfully!</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-2 max-h-[50vh] flex flex-col gap-2">
+      <p>Paste here your saved types</p>
+      <textarea
+        className="p-1"
+        onChange={(evt) => {
+          handleChange(evt.target.value)
+        }}
+      ></textarea>
+    </div>
+  )
+}