+
);
}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 000000000..5cb753030
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,26 @@
+interface Props {
+ onClick: () => void;
+ label: string | JSX.Element;
+ className?: string;
+ backgroundColor?: string;
+}
+
+export default function Button({
+ onClick,
+ label,
+ className,
+ backgroundColor,
+}: Props): JSX.Element {
+ return (
+
+ );
+}
diff --git a/src/components/ChevronIcon.tsx b/src/components/ChevronIcon.tsx
new file mode 100644
index 000000000..df9ce6f7a
--- /dev/null
+++ b/src/components/ChevronIcon.tsx
@@ -0,0 +1,7 @@
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+
+export const ChevronIcon = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ {
+ setCopied(true);
+ copyToClipboard(el);
+ }}
+ />
+
+ );
+ };
+
+ return copyable(value);
+}
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
new file mode 100644
index 000000000..6daae681c
--- /dev/null
+++ b/src/components/Dropdown.tsx
@@ -0,0 +1,81 @@
+import { Fragment } from "react";
+import { Listbox, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/solid";
+
+interface Props{sliced}
+ Copied
+
+ {label}
+
+
+ {all.map((item, idx) => (
+
+ `cursor-default select-none relative py-2 pl-10 pr-4 ${
+ active ? "text-amber-900 bg-amber-100" : "text-gray-900"
+ }`
+ }
+ value={item}
+ >
+ {({ selected }) => (
+ <>
+
+ {formatter(item)}
+
+ {selected ? (
+
+
+
+ ) : null}
+
+ )}
+
+ ))}
+
+
+
+
+
+
+ {formatter(selected)}
+
+
+
+
+
+ {actionButton}
+
+
+
+
+ selected={selected}
+ all={extensions}
+ onChange={setSelected}
+ formatter={(item) => `${item.name} ${item.version}`}
+ label="Upgradable extensions:"
+ actionButton={
+ }
+ onClick={() => {
+ selected?.metadata?.provide(meta).then((ok) => {
+ if (ok) {
+ extensionsToUpdate(chainSpec).then((injected) => {
+ setExtensions(injected);
+ setSelected(injected[0]);
+ });
+ }
+ });
+ }}
+ />
+ }
+ />
+
+ );
+}
+
+interface ExtensionWithMeta {
+ injectedExtension: InjectedExtension;
+ metadata: InjectedMetadataKnown[];
+}
+
+async function extensionsToUpdate(
+ chainSpec: ChainSpec
+): Promise
+ {children}
+
+);
+
+export const FAQ = () => (
+
+
+);
diff --git a/src/components/Hr.tsx b/src/components/Hr.tsx
new file mode 100644
index 000000000..4e29df49b
--- /dev/null
+++ b/src/components/Hr.tsx
@@ -0,0 +1 @@
+export const Hr = () => FAQ
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ How Can I Use The Portal?
++ The Portal is primarily used to add and update networks for{" "} + + Polkadot Vault cold storage wallet + + . Since Polkadot Vault is always offline and air-gapped, you need to + follow a unique process to + update the chain metadata so that your transactions are valid. +
+What Is Polkadot Vault?
++ Polkadot Vault is a cold storage solution that turns your iOS or + Android device into a dedicated hardware wallet for Polkadot, + Kusama, and other Substrate-based chains. Your keys are kept secure + (i.e. offline) at all times, and transactions are signed in an + air-gapped way via QR-codes. +
++ How To Add And Update Networks In Polkadot Vault +
+-
+
-
+
1 ++ The first step is to locate the network that needs metadata + updating in Parity or{" "} + Novasama. Note: To + navigate between the two portals, use the Metadata Portal + dropdown at the top of the page. ++
+ -
+
2 ++ Then select the{" "} + {'"Chain Spec"'} tab ++
+ -
+
3 ++ Open the scanner tab from your Polkadot Vault device and scan + the network’s{" "} + {'"Chain Spec" QR code'} ++
+ -
+
4 ++ Review the verifier certificate, and{" "} + {'Select "Approve"'} ++
+ -
+
5 ++ Select the{" "} + {'"Metadata" tab'} at the + top of the metadata portal screen ++
+ -
+
6 ++ Open the scanner tab in your Polkadot Vault device again and{" "} + + {'scan the network’s "Chain Spec" QR code'} + ++
+ -
+
7 ++ Scan the Metadata QR code + . Note: this can take a few minutes to complete. ++
+ -
+
8 ++ Finally, review the verifier certificate and{" "} + {'Select "Approve"'} ++
+
+ {"I Haven't Found The Network I Need"} +
++ Metadata about networks chain specs is stored in two places: +
+-
+
-
+
1 ++ + Parity + {" "} + for Polkadot, Kusama, and Westend ++
+ -
+
2 ++ + Centrifuge + {" "} + for Centrifuge and Altair parachains ++
+ -
+
2 ++ + Novasama + {" "} + for other Parachains and Solochains ++
+
+ If you cannot find the network you are looking for, contact the + network’s developers directly +
+; diff --git a/src/components/Links.tsx b/src/components/Links.tsx new file mode 100644 index 000000000..1d080bb00 --- /dev/null +++ b/src/components/Links.tsx @@ -0,0 +1,22 @@ +const LINKS = [ + ["GitHub", "https://github.com/paritytech/metadata-portal"], + ["Terms of Service", "https://www.parity.io/terms/"], +]; + +export const Links = () => { + return ( +
+ {LINKS.map(([label, href], i) => (
+
+ {label}
+
+ ))}
+
+ );
+};
diff --git a/src/components/Network.tsx b/src/components/Network.tsx
new file mode 100644
index 000000000..0272a407d
--- /dev/null
+++ b/src/components/Network.tsx
@@ -0,0 +1,243 @@
+import { Tab } from "@headlessui/react";
+import { Fragment, useState } from "react";
+import { ChainSpec, RpcSource, WasmSource } from "../scheme";
+import { cn, formatTitle } from "../utils";
+import Copyable, { hashSlicer, keepHeadSlicer } from "./Copyable";
+import { Hr } from "./Hr";
+import { Links } from "./Links";
+import { Row } from "./Row";
+import {
+ CheckBadgeIcon,
+ ExclamationCircleIcon,
+} from "@heroicons/react/24/solid";
+
+function tabFromSearch() {
+ const params = new URLSearchParams(location.search);
+ const tab = parseInt(params.get("tab") || "0", 10);
+
+ return tab === 0 || tab === 1 ? tab : 0;
+}
+
+function setTabToSearch(v: number) {
+ const url = new URL(location.href);
+ url.searchParams.set("tab", v.toString());
+ window.history.replaceState(null, "", url);
+}
+
+export const Network = ({ spec }: { spec: ChainSpec }) => {
+ const [selectedTab, setSelectedTab] = useState(tabFromSearch());
+ const metadataQr = spec.metadataQr;
+
+ function updateTab(v: number) {
+ setTabToSearch(v);
+ setSelectedTab(v);
+ }
+ const svgClass = "inline mr-2 h-7";
+ const vaultLink = (
+
+ Polkadot Vault
+
+ );
+
+ const createGithubIssueLink = (
+
+ Create a Github issue
+
+ );
+
+ return (
+
+
+ );
+};
diff --git a/src/components/NetworkAndPortalSelectMobile.tsx b/src/components/NetworkAndPortalSelectMobile.tsx
new file mode 100644
index 000000000..0625353ce
--- /dev/null
+++ b/src/components/NetworkAndPortalSelectMobile.tsx
@@ -0,0 +1,116 @@
+import { Listbox } from "@headlessui/react";
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import { Chains, Portals } from "../scheme";
+import { cn, currentPortalKey, formatTitle } from "../utils";
+import { ChevronIcon } from "./ChevronIcon";
+import { Hr } from "./Hr";
+
+export const NetworkAndPortalSelectMobile = ({
+ chains,
+ portals,
+ currentChain,
+ onSelect,
+}: {
+ chains: Chains;
+ portals: Portals;
+ currentChain: string;
+ onSelect: (v: string) => void;
+}) => {
+ const current = currentPortalKey(portals);
+ const hasManyPortals = Boolean(current) && Object.keys(portals).length > 1;
+
+ return (
+
+
+
+ {formatTitle(spec.title)}
+
+
+
+
+
+
+ {selectedTab === 0 && (
+
+
+ 
+
+ )}
+ {selectedTab === 1 && (
+
+ {spec.specsQr.signedBy ? (
+
+
+
+ ) : (
+
+
+ )}
+
+ {"Scan this code to add chain specs to the "}
+ {vaultLink}
+
+
+ {!metadataQr && (
+
+ )}
+
+
+ )}
+ {metadataQr && (
+
+ The metadata for {spec.title} Network is out of date.
+ Request the new metadata version by creating a Github
+ issue.
+ {createGithubIssueLink}
+
+
+
+
+ )}
+
+ {spec.metadataQr?.file.signedBy ? (
+
+
+
+ ) : (
+
+
+ )}
+
+ {"Scan this code to update "}
+ {vaultLink}
+
+
+
+
+ {["Chain Specs", "Metadata"].map((title) => (
+
+ {({ selected }) => (
+
+ )}
+
+ ))}
+
+
+
+
+
+ {metadataQr && (
+
+
+
+
+
+
+
+ +
-
+
+
+ {spec.color}
+
+
+ {metadataQr?.file.source?.type === "Wasm" && (
+
+ )}
+ {metadataQr?.file.source?.type === "Rpc" && (
+ #{metadataQr?.version}
+ {metadataQr?.file.signedBy}
+
+ )}
+ -
+
+ {hasManyPortals && (
+ <>
+
+ + )} +
+ );
+};
diff --git a/src/components/NetworkSelect.tsx b/src/components/NetworkSelect.tsx
new file mode 100644
index 000000000..44ab46780
--- /dev/null
+++ b/src/components/NetworkSelect.tsx
@@ -0,0 +1,60 @@
+import { Listbox } from "@headlessui/react";
+import { Chains } from "../scheme";
+import { cn, formatTitle } from "../utils";
+import { useState } from "react";
+import { SearchBar } from "./SearchBar";
+
+export const NetworkSelect = ({
+ chains,
+ currentChain,
+ onSelect,
+}: {
+ chains: Chains;
+ currentChain: string;
+ onSelect: (v: string) => void;
+}) => {
+ const chainList = Object.keys(chains);
+ const [searchString, setSearchString] = useState("");
+
+ const handleSearch = (event: React.ChangeEvent
+
+
+
+
+
+ {({ selected }) =>
+ selected ? (
+
+ ))}
+
+
+
+
+ Metadata Portal
+
+
+ {portals[current].name}
+
+
+
+
+
+ {Object.keys(portals).map((portal) => (
+ Metadata Portal
+
+
+ ) : (
+
+ {portals[portal].name}
+ {portals[portal].name}
+
+ )
+ }
+ + + )} +
+
+
+
+
+
+ {({ selected }) => (
+
+ ))}
+
+
+
+
+ Selected Network
+
+
+ {formatTitle(chains[currentChain]?.title)}
+
+
+
+
+
+ {Object.keys(chains).map((chain) => (
+ Selected Network
+
+
+ )}
+
+ {formatTitle(chains[chain].title)}
+
+
+
+
+ {filteredItems.map((chain) => (
+
+ {({ selected }) => (
+
+ ))}
+
+
+
+ );
+};
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
deleted file mode 100644
index 0c731dff4..000000000
--- a/src/components/Page.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Chains } from "../scheme";
-import Selector from "./Selector";
-import QrCode from "./QrCode";
-import Specs from "./Specs";
-import AddToSigner from "./AddToSigner";
-
-interface Props {
- allChains: Chains;
- currentName: string;
-}
-
-export default function Page({ allChains, currentName }: Props) {
- const chain = allChains[currentName];
- const metadataQr = chain.metadataQr;
- const specsQr = chain.specsQr;
- document.body.style.backgroundColor = chain.color;
- return (
- Networks
+ {chainList.length > 10 && (
+
+
+ )}
+
+ {formatTitle(chains[chain].title)}
+
+
-
- );
-}
diff --git a/src/components/PortalSelect.tsx b/src/components/PortalSelect.tsx
new file mode 100644
index 000000000..835b37a24
--- /dev/null
+++ b/src/components/PortalSelect.tsx
@@ -0,0 +1,74 @@
+import { Listbox, Transition } from "@headlessui/react";
+import { Fragment } from "react";
+import { Portals } from "../scheme";
+import { cn, currentPortalKey } from "../utils";
+import { ChevronIcon } from "./ChevronIcon";
+
+export const PortalSelect = ({ portals }: { portals: Portals }) => {
+ const current = currentPortalKey(portals);
+ const hasManyPortals = Boolean(current) && Object.keys(portals).length > 1;
+
+ if (!hasManyPortals) return null;
+
+ return (
+
-
-
- {metadataQr && (
- <>
-
-
-
-
- )}
- - Metadata #{metadataQr.version} -
-
+
+
+ cn(
+ "w-full bordered-action py-3 hover:bg-neutral-100 transition-colors",
+ open && "bg-neutral-100"
+ )
+ }
+ >
+
+
+
+ {Object.keys(portals).map((portal) => (
+
+ {({ selected }) =>
+ selected ? (
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/src/components/QrCode.tsx b/src/components/QrCode.tsx
deleted file mode 100644
index 16a19fcc6..000000000
--- a/src/components/QrCode.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { QrInfo } from "../scheme";
-import {
- CheckBadgeIcon,
- ExclamationCircleIcon,
-} from "@heroicons/react/24/solid";
-
-export default function QrCode({ path, signedBy }: QrInfo) {
- const svgClass = "inline mr-2 h-7";
- return (
-
+
+
+
+ Metadata Portal
+
+ {portals[current].name}
+
+
+ {portals[portal].name}
+
+ ) : (
+
+ {portals[portal].name}
+
+ )
+ }
+
-
-
- );
-}
diff --git a/src/components/Row.tsx b/src/components/Row.tsx
new file mode 100644
index 000000000..e897f8c47
--- /dev/null
+++ b/src/components/Row.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+
+export function Row({
+ title,
+ children,
+}: {
+ title: string;
+ children?: ReactNode;
+}) {
+ return (
+
- {signedBy ? (
-
-
-
- ) : (
-
-
- )}
- {title}
+ {children}
+
+
+ );
+};
diff --git a/src/components/Selector.tsx b/src/components/Selector.tsx
deleted file mode 100644
index 166ce0223..000000000
--- a/src/components/Selector.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Menu, Transition } from "@headlessui/react";
-import { Fragment } from "react";
-import { ChevronDownIcon } from "@heroicons/react/24/solid";
-import { Link } from "react-router-dom";
-import { Chains, ChainSpec } from "../scheme";
-
-interface Props {
- allChains: Chains;
- selectedName: string;
-}
-
-function capitalizeFirstLetter(string: string) {
- return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-function ChainLogo(props: { chain: ChainSpec; className?: string }) {
- return (
-
- {props.chain.title}
-
- );
-}
-
-export default function Selector({ selectedName, allChains }: Props) {
- const selected = allChains[selectedName];
- const dropdownItems = Object.keys(allChains).map((name) => {
- return (
-
+
+
+
+
+
+
+
-
-
- );
-}
diff --git a/src/components/Specs.tsx b/src/components/Specs.tsx
deleted file mode 100644
index a594d89eb..000000000
--- a/src/components/Specs.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ChainSpec } from "../scheme";
-
-export default function Specs(chainSpec: ChainSpec) {
- return (
- -
- {row("RPC endpoint", chainSpec.rpcEndpoint)}
- {row("Genesis hash", chainSpec.genesisHash)}
- {row("Color", chainSpec.color)}
- {row("Unit", chainSpec.unit)}
- {row("Address prefix", chainSpec.base58prefix)}
-
{title}
- {value}
-