From 82ebe37180c3d3651336a88361a8883806eb7c9c Mon Sep 17 00:00:00 2001 From: Manan Tank Date: Sat, 6 Apr 2024 19:52:35 +0530 Subject: [PATCH] Generate Documentation Page for All wallets --- .../[walletId]/assets/appstore.svg | 1 + .../[walletId]/assets/chromestore.svg | 87 ++++ .../[walletId]/assets/playstore.svg | 16 + .../v5/supported-wallets/[walletId]/page.tsx | 375 ++++++++++++++++++ src/components/Document/DocLink.tsx | 6 +- src/components/others/AllSupportedWallets.tsx | 47 ++- 6 files changed, 513 insertions(+), 19 deletions(-) create mode 100644 src/app/typescript/v5/supported-wallets/[walletId]/assets/appstore.svg create mode 100644 src/app/typescript/v5/supported-wallets/[walletId]/assets/chromestore.svg create mode 100644 src/app/typescript/v5/supported-wallets/[walletId]/assets/playstore.svg create mode 100644 src/app/typescript/v5/supported-wallets/[walletId]/page.tsx diff --git a/src/app/typescript/v5/supported-wallets/[walletId]/assets/appstore.svg b/src/app/typescript/v5/supported-wallets/[walletId]/assets/appstore.svg new file mode 100644 index 00000000..4138662d --- /dev/null +++ b/src/app/typescript/v5/supported-wallets/[walletId]/assets/appstore.svg @@ -0,0 +1 @@ + diff --git a/src/app/typescript/v5/supported-wallets/[walletId]/assets/chromestore.svg b/src/app/typescript/v5/supported-wallets/[walletId]/assets/chromestore.svg new file mode 100644 index 00000000..340e7252 --- /dev/null +++ b/src/app/typescript/v5/supported-wallets/[walletId]/assets/chromestore.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/typescript/v5/supported-wallets/[walletId]/assets/playstore.svg b/src/app/typescript/v5/supported-wallets/[walletId]/assets/playstore.svg new file mode 100644 index 00000000..cd14eec4 --- /dev/null +++ b/src/app/typescript/v5/supported-wallets/[walletId]/assets/playstore.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/app/typescript/v5/supported-wallets/[walletId]/page.tsx b/src/app/typescript/v5/supported-wallets/[walletId]/page.tsx new file mode 100644 index 00000000..7ad791e8 --- /dev/null +++ b/src/app/typescript/v5/supported-wallets/[walletId]/page.tsx @@ -0,0 +1,375 @@ +/* eslint-disable @next/next/no-img-element */ + +import { + getAllWalletsList, + getWalletInfo, + type WalletId, +} from "thirdweb/wallets"; +import { + CodeBlock, + createMetadata, + DocLink, + Heading, + Paragraph, +} from "../../../../../components/Document"; +import Image from "next/image"; +import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; +import playStoreSvg from "./assets/playstore.svg"; +import chromeStoreSvg from "./assets/chromestore.svg"; +import appStoreSvg from "./assets/appstore.svg"; +import { GlobeIcon } from "lucide-react"; + +type PageProps = { + params: { + walletId: WalletId; + }; +}; + +export async function generateMetadata({ params }: PageProps) { + const walletMetadata = await getWalletInfo(params.walletId); + + return createMetadata({ + title: walletMetadata.name, + description: `Connect ${walletMetadata.name} with thirdweb Connect SDK`, + image: { + title: walletMetadata.name, + icon: "wallets", + }, + }); +} + +export default async function Page(props: PageProps) { + const [walletMetadata, walletImage] = await Promise.all([ + getWalletInfo(props.params.walletId), + getWalletInfo(props.params.walletId, true), + ]); + + const isWCSupported = + walletMetadata.mobile.native || walletMetadata.mobile.universal; + + const isInjectedSupported = walletMetadata.rdns; + + return ( +
+
+ + + {walletMetadata.name} + +
+ + + + {walletMetadata.homepage} + + +
+ {walletMetadata.app.android && ( + + Play Store + + )} + + {walletMetadata.app.chrome && ( + + Play Store + + )} + + {walletMetadata.app.ios && ( + + Play Store + + )} +
+ + + Wallet ID + + + + + + Connect Wallet + + + + + TypeScript + React (Custom UI) + React (Component) + + + + + + + + + + You can add this wallet in the{" "} + + {" "} + ConnectButton{" "} + {" "} + or + + {" "} + ConnectEmbed{" "} + {" "} + component to get a pre-built UI for connecting the wallet. + + Example + + + + + +
+ ); +} + +export async function generateStaticParams(): Promise { + const walletList = await getAllWalletsList(); + + return walletList.map((w) => { + return { + walletId: w.id, + }; + }); +} + +function injectedSupportedTS(id: string) { + return `\ +import { createThirdwebClient } from "thirdweb"; +import { createWallet, injectedProvider } from "thirdweb/wallets"; + +const client = createThirdwebClient({ clientId }); + +const wallet = createWallet("${id}"); // pass the wallet id + +// if the wallet extension is installed, connect to it +if (injectedProvider("${id}")) { + await wallet.connect({ client }); +} + +// show error message to user that wallet is not installed +else { + alert('wallet is not installed'); +} +`; +} + +function WCSupportedTS(id: string) { + return `\ +import { createThirdwebClient } from "thirdweb"; +import { createWallet } from "thirdweb/wallets"; + +const client = createThirdwebClient({ clientId }); + +const wallet = createWallet("${id}"); // pass the wallet id + +// open WalletConnect modal so user can scan the QR code and connect +await wallet.connect({ + client, + walletConnect: { showQrModal: true }, +}); +`; +} + +function injectedAndWCSupportedCodeTS(id: string) { + return `\ +import { createThirdwebClient } from "thirdweb"; +import { createWallet, injectedProvider } from "thirdweb/wallets"; + +const client = createThirdwebClient({ clientId }); + +const wallet = createWallet("${id}"); // pass the wallet id + +// if user has wallet installed, connect to it +if (injectedProvider("${id}")) { + await wallet.connect({ client }); +} + +// open WalletConnect modal so user can scan the QR code and connect +else { + await wallet.connect({ + client, + walletConnect: { showQrModal: true }, + }); +} +`; +} + +function injectedAndWCSupportedCodeReact(id: string) { + return `\ +import { createThirdwebClient } from "thirdweb"; +import { useConnect } from "thirdweb/react"; +import { createWallet, injectedProvider } from "thirdweb/wallets"; + +const client = createThirdwebClient({ clientId }); + +function Example() { + const { connect, isConnecting, error } = useConnect(); + return ( + + ); +} +`; +} + +function WCSupportedCodeReact(id: string) { + return `\ +import { createThirdwebClient } from "thirdweb"; +import { useConnect } from "thirdweb/react"; +import { createWallet } from "thirdweb/wallets"; + +const client = createThirdwebClient({ clientId }); + +function Example() { + const { connect, isConnecting, error } = useConnect(); + return ( + + ); +} +`; +} + +function injectedSupportedCodeReact(id: string) { + return `\ +import { createThirdwebClient } from "thirdweb"; +import { useConnect } from "thirdweb/react"; +import { createWallet, injectedProvider } from "thirdweb/wallets"; + +const client = createThirdwebClient({ clientId }); + +function Example() { + const { connect, isConnecting, error } = useConnect(); + return ( + + ); +} +`; +} + +function componentCode(id: string) { + return `\ +import { ConnectButton } from "thirdweb/react"; +import { createWallet } from "thirdweb/wallets"; + +const wallets = [ + createWallet("${id}"), // Add your wallet in wallet list + // add other wallets... +]; + +function Example() { + return ( +
+ {/* Use ConnectButton */} + + + {/* Or Use ConnectEmbed */} + +
+ ); +}`; +} diff --git a/src/components/Document/DocLink.tsx b/src/components/Document/DocLink.tsx index 5c252b06..cddc49fc 100644 --- a/src/components/Document/DocLink.tsx +++ b/src/components/Document/DocLink.tsx @@ -5,6 +5,7 @@ export function DocLink(props: { href: string; children: React.ReactNode; className?: string; + target?: string; }) { return ( {props.children} diff --git a/src/components/others/AllSupportedWallets.tsx b/src/components/others/AllSupportedWallets.tsx index bee74263..2b0e147b 100644 --- a/src/components/others/AllSupportedWallets.tsx +++ b/src/components/others/AllSupportedWallets.tsx @@ -1,7 +1,14 @@ import { getAllWalletsList, getWalletInfo, WalletId } from "thirdweb/wallets"; import Image from "next/image"; import { Table, Tr, Td, TBody, Th } from "../Document/Table"; -import { InlineCode } from "../Document"; +import { DocLink, InlineCode } from "../Document"; + +const specialWallets: { + [key in WalletId]?: boolean; +} = { + smart: true, + embedded: true, +}; export async function AllSupportedWallets() { const wallets = await getAllWalletsList(); @@ -10,24 +17,30 @@ export async function AllSupportedWallets() { - - - + + - {wallets.map((w) => { - return ( - - - - - - ); - })} + {wallets + .filter((w) => !(w.id in specialWallets)) + .map((w) => { + return ( + + + + + ); + })}
Icon Name Wallet ID Wallet ID
- - {w.name} - -
+ + + {w.name} + + + +
);