forked from inkonchain/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: ink-701 add ink network buttons
- Loading branch information
1 parent
f7b6b18
commit 35f6206
Showing
8 changed files
with
247 additions
and
123 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| interface Window { | ||
| ethereum: any; | ||
| } |
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,65 +1,88 @@ | ||
| import { useEffect, useState } from "react"; | ||
|
|
||
| import { addNetwork, isNetworkAdded, NetworkType } from "@/utils/add-network"; | ||
| import { CheckIcon } from "@/icons/Check"; | ||
| import { ConnectedPulse } from "@/icons/ConnectedPulse"; | ||
| import { | ||
| networkParams, | ||
| NetworkType, | ||
| useNetwork, | ||
| UseNetworkResponse, | ||
| } from "@/utils/networks"; | ||
|
|
||
| import { Button } from "./Button"; | ||
|
|
||
| interface AddNetworkButtonProps { | ||
| network: NetworkType; | ||
| heading: string; | ||
| } | ||
|
|
||
| export const AddNetworkButton = ({ network }: AddNetworkButtonProps) => { | ||
| const [isAdded, setIsAdded] = useState<boolean>(false); | ||
|
|
||
| useEffect(() => { | ||
| const checkNetwork = async () => { | ||
| if ((window as any).ethereum) { | ||
| const added = await isNetworkAdded(network); | ||
| setIsAdded(added); | ||
| } | ||
| }; | ||
| export const AddNetworkButton = ({ | ||
| network, | ||
| heading, | ||
| }: AddNetworkButtonProps) => { | ||
| const { isWalletInstalled, isAdded, isSelected, addNetwork, selectNetwork } = | ||
| useNetwork(network); | ||
|
|
||
| checkNetwork(); | ||
|
|
||
| if ((window as any).ethereum) { | ||
| (window as any).ethereum.on("chainChanged", checkNetwork); | ||
| } | ||
| return ( | ||
| <div className="h-36"> | ||
| <div className="flex flex-col gap-2"> | ||
| <h3 className="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl relative flex gap-2 items-center"> | ||
| <span>{heading}</span> | ||
| {isSelected && <ConnectedPulse className="size-6" />} | ||
| <a | ||
| href="#mainnet" | ||
| id="mainnet" | ||
| className="subheading-anchor" | ||
| aria-label="Permalink for this section" | ||
| ></a> | ||
| </h3> | ||
| <AddNetworkButtonContent | ||
| isWalletInstalled={isWalletInstalled} | ||
| isAdded={isAdded} | ||
| isSelected={isSelected} | ||
| addNetwork={addNetwork} | ||
| selectNetwork={selectNetwork} | ||
| network={network} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| const AddNetworkButtonContent = ({ | ||
| isWalletInstalled, | ||
| isAdded, | ||
| isSelected, | ||
| addNetwork, | ||
| selectNetwork, | ||
| network, | ||
| }: UseNetworkResponse & { network: NetworkType }) => { | ||
| if (!isWalletInstalled) { | ||
| return <p>No wallet connected</p>; | ||
| } | ||
|
|
||
| return () => { | ||
| if ((window as any).ethereum) { | ||
| (window as any).ethereum.removeListener("chainChanged", checkNetwork); | ||
| } | ||
| }; | ||
| }, [network]); | ||
| if (isAdded && isSelected) { | ||
| return ( | ||
| <span className="text-green-500 font-bold flex gap-1 items-center"> | ||
| <span>Network added & selected.</span> | ||
| </span> | ||
| ); | ||
| } | ||
|
|
||
| const networkName = network === "mainnet" ? "Ink Mainnet" : "Ink Sepolia"; | ||
| if (isAdded) { | ||
| return ( | ||
| <span className="text-green-500 font-bold flex flex-col gap-1"> | ||
| <p>Network added.</p> | ||
| <p | ||
| onClick={selectNetwork} | ||
| className="underline hover:cursor-pointer hover:opacity-90" | ||
| > | ||
| Click here to select it. | ||
| </p> | ||
| </span> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="space-y-2 mt-4"> | ||
| {isAdded ? ( | ||
| <div className="flex items-center text-green-600 dark:text-green-400 font-semibold"> | ||
| <svg | ||
| className="w-5 h-5 mr-2" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| viewBox="0 0 24 24" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| strokeWidth={2} | ||
| d="M5 13l4 4L19 7" | ||
| /> | ||
| </svg> | ||
| {networkName} Network Added | ||
| </div> | ||
| ) : ( | ||
| <div className="space-y-4"> | ||
| <Button variant="primary" onClick={() => addNetwork(network)}> | ||
| Add {networkName} Network | ||
| </Button> | ||
| </div> | ||
| )} | ||
| </div> | ||
| <Button variant="primary" onClick={addNetwork} className="w-60 mt-2"> | ||
| Add {networkParams[network].chainName} | ||
| </Button> | ||
| ); | ||
| }; |
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,19 @@ | ||
| export const CheckIcon: React.FC<{ className?: string }> = ({ | ||
| className = "size-6", | ||
| }) => { | ||
| return ( | ||
| <svg | ||
| className={className} | ||
| fill="none" | ||
| stroke="currentColor" | ||
| viewBox="0 0 24 24" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| strokeWidth={2} | ||
| d="M5 13l4 4L19 7" | ||
| /> | ||
| </svg> | ||
| ); | ||
| }; |
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,12 @@ | ||
| import clsx from "clsx"; | ||
|
|
||
| export const ConnectedPulse: React.FC<{ className?: string }> = ({ | ||
| className, | ||
| }) => { | ||
| return ( | ||
| <span className={clsx("relative flex h-3 w-3", className)}> | ||
| <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span> | ||
| <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span> | ||
| </span> | ||
| ); | ||
| }; |
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 was deleted.
Oops, something went wrong.
Oops, something went wrong.