diff --git a/apps/laboratory/public/logo-dark.svg b/apps/laboratory/public/logo-dark.svg index 1bc3b790a6..fcc8ee3c1f 100644 --- a/apps/laboratory/public/logo-dark.svg +++ b/apps/laboratory/public/logo-dark.svg @@ -1 +1,17 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + diff --git a/apps/laboratory/public/logo-light.svg b/apps/laboratory/public/logo-light.svg index 198c681332..08366dcf03 100644 --- a/apps/laboratory/public/logo-light.svg +++ b/apps/laboratory/public/logo-light.svg @@ -1 +1,17 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + diff --git a/apps/laboratory/src/components/ConfigurationList.tsx b/apps/laboratory/src/components/ConfigurationList.tsx new file mode 100644 index 0000000000..5ed26f6fa6 --- /dev/null +++ b/apps/laboratory/src/components/ConfigurationList.tsx @@ -0,0 +1,61 @@ +/* eslint-disable no-negated-condition */ +import { + Box, + Button, + Card, + CardBody, + CardHeader, + Heading, + Link, + Stack, + StackDivider, + Text +} from '@chakra-ui/react' +import type { SdkOption } from '../utils/DataUtil' +import { IoArrowForward } from 'react-icons/io5' +import type { ReactNode } from 'react' +import { RandomLink } from './RandomLink' + +type Props = { + title: ReactNode + sdkOptions: SdkOption[] +} + +export function ConfigurationList({ title, sdkOptions }: Props) { + return ( + <> + + + {title} + + + } spacing="4"> + {sdkOptions.map(option => ( + + + + + {option.title} + + + {option.description} + + + {option.randomLinks !== undefined && option.randomLinks.length > 0 ? ( + + + + ) : ( + + + + )} + + + ))} + + + + + ) +} diff --git a/apps/laboratory/src/layout/LayoutHeader.tsx b/apps/laboratory/src/layout/LayoutHeader.tsx index 3565631e8c..4ba000b02f 100644 --- a/apps/laboratory/src/layout/LayoutHeader.tsx +++ b/apps/laboratory/src/layout/LayoutHeader.tsx @@ -17,6 +17,7 @@ import { DownloadIcon } from '@chakra-ui/icons' import { useChakraToast } from '../components/Toast' import { useEffect, useState } from 'react' import { useRouter } from 'next/router' +import { DOCS_URL, GALLERY_URL, REPO_URL } from '../utils/ConstantsUtil' function downloadLogs(toast: ReturnType) { type WindowWithLogs = typeof Window & { @@ -57,13 +58,13 @@ export function LayoutHeader() { - + GitHub - + Gallery - + Docs diff --git a/apps/laboratory/src/pages/index.tsx b/apps/laboratory/src/pages/index.tsx index ebb251f472..dd851d212c 100644 --- a/apps/laboratory/src/pages/index.tsx +++ b/apps/laboratory/src/pages/index.tsx @@ -1,258 +1,32 @@ -import { - Heading, - Card, - CardHeader, - CardBody, - Stack, - StackDivider, - Box, - Text, - Button, - Link, - Badge -} from '@chakra-ui/react' -import { IoArrowForward } from 'react-icons/io5' +import { Badge } from '@chakra-ui/react' import { wagmiSdkOptions, ethersSdkOptions, solanaSdkOptions, - ethers5SdkOptions + ethers5SdkOptions, + featuredSdkOptions, + multichainSdkOptions, + testingSdkOptions } from '../utils/DataUtil' -import { RandomLink } from '../components/RandomLink' +import { ConfigurationList } from '../components/ConfigurationList' export default function HomePage() { return ( <> - - - Testing - - - - } spacing="4"> - - - - - Demo - - - All features enabled and randomly using ethers or wagmi - - - - - - - - - - - } spacing="4"> - - - - - Demo w/ Sample Wallets - - - All features enabled, with sample wallet links, and randomly using ethers or - wagmi - - - - - - - - - - - - - - Wagmi - - - - } spacing="4"> - {wagmiSdkOptions.map(option => ( - - - - - {option.title} - - - {option.description} - - - - - - - - ))} - - - - - - - Ethers - - - - } spacing="4"> - {ethersSdkOptions.map(option => ( - - - - - {option.title} - - - {option.description} - - - - - - - - ))} - - - - - - - Ethers 5 - - - - } spacing="4"> - {ethers5SdkOptions.map(option => ( - - - - - {option.title} - - - {option.description} - - - - - - - - ))} - - - - - - - Solana - - - - } spacing="4"> - {solanaSdkOptions.map(option => ( - - - - - {option.title} - - - {option.description} - - - - - - - - ))} - - - - - - - + + + + + + + AppKit ⛓️ Multichain ✨ New - - - - - } spacing="4"> - - - - - Wagmi + Solana - - - Configuration with Wagmi and Solana adapters enabled for AppKit - - - - - - - - - - - - Ethers + Solana - - - Configuration with Ethers and Solana adapters enabled for AppKit - - - - - - - - - - - - Ethers5 + Solana - - - Configuration with Ethers and Solana adapters enabled for AppKit - - - - - - - - - - - - Basic - - - Configuration with no adapters enabled for AppKit - - - - - - - - - - + + } + sdkOptions={multichainSdkOptions} + /> ) } diff --git a/apps/laboratory/src/utils/ConstantsUtil.ts b/apps/laboratory/src/utils/ConstantsUtil.ts index baba8ee602..87f838d555 100644 --- a/apps/laboratory/src/utils/ConstantsUtil.ts +++ b/apps/laboratory/src/utils/ConstantsUtil.ts @@ -8,6 +8,10 @@ export const WALLET_URL = process.env['WALLET_URL'] || 'https://react-wallet.wal export const WC_COSIGNER_BASE_URL = 'https://rpc.walletconnect.org/v1/sessions' export const USEROP_BUILDER_SERVICE_BASE_URL = 'https://react-wallet.walletconnect.com/api' +export const GALLERY_URL = 'https://appkit-gallery.reown.com/' +export const DOCS_URL = 'https://docs.reown.com/appkit/overview' +export const REPO_URL = 'https://github.com/reown-com/appkit' + export function getPublicUrl() { const publicUrl = process.env['NEXT_PUBLIC_PUBLIC_URL'] if (publicUrl) { diff --git a/apps/laboratory/src/utils/DataUtil.ts b/apps/laboratory/src/utils/DataUtil.ts index 786d658ca0..396573d4be 100644 --- a/apps/laboratory/src/utils/DataUtil.ts +++ b/apps/laboratory/src/utils/DataUtil.ts @@ -16,9 +16,16 @@ export const colors = [ '#414796' ] +export type SdkOption = { + title: string + link: string + description: string + randomLinks?: string[] +} + export const vitalikEthAddress = '0xd8da6bf26964af9d7eed9e03e53415d37aa96045' -export const wagmiSdkOptions = [ +export const wagmiSdkOptions: SdkOption[] = [ { title: 'Default', link: '/library/wagmi', @@ -51,7 +58,7 @@ export const wagmiSdkOptions = [ } ] -export const ethersSdkOptions = [ +export const ethersSdkOptions: SdkOption[] = [ { title: 'Default', link: '/library/ethers', @@ -74,7 +81,7 @@ export const ethersSdkOptions = [ } ] -export const ethers5SdkOptions = [ +export const ethers5SdkOptions: SdkOption[] = [ { title: 'Default', link: '/library/ethers5', @@ -92,7 +99,7 @@ export const ethers5SdkOptions = [ } ] -export const solanaSdkOptions = [ +export const solanaSdkOptions: SdkOption[] = [ { title: 'Default', link: '/library/solana', @@ -109,3 +116,60 @@ export const solanaSdkOptions = [ description: 'Configuration using ethers without socials' } ] + +export const multichainSdkOptions: SdkOption[] = [ + { + title: 'Wagmi + Solana', + link: '/library/multichain-wagmi-solana', + description: 'Configuration with Wagmi and Solana adapters enabled for AppKit' + }, + { + title: 'Ethers + Solana', + link: '/library/multichain-ethers-solana', + description: 'Configuration with Ethers and Solana adapters enabled for AppKit' + }, + { + title: 'Ethers5 + Solana', + link: '/library/multichain-ethers5-solana', + description: 'Configuration with Ethers 5 and Solana adapters enabled for AppKit' + }, + { + title: 'Basic', + link: '/library/multichain-basic', + description: 'Configuration with no adapters enabled for AppKit' + } +] + +export const testingSdkOptions: SdkOption[] = [ + { + title: 'Demo', + link: '', + description: 'All features enabled and randomly using ethers or wagmi', + randomLinks: ['/library/wagmi-all', '/library/ethers-all'] + }, + { + title: 'Demo w/ Sample Wallets', + link: '', + description: + 'All features enabled, with sample wallet links, and randomly using ethers or wagmi', + randomLinks: ['/library/wagmi-all-internal', '/library/ethers-all-internal'] + } +] + +export const featuredSdkOptions: SdkOption[] = [ + { + title: 'Default', + link: '/library/wagmi', + description: 'Basic configuration using wagmi as a driving library' + }, + { + title: 'Multichain', + link: '/library/multichain-wagmi-solana', + description: 'Configuration with Wagmi and Solana adapters enabled for AppKit' + }, + { + title: 'Basic', + link: '/library/multichain-basic', + description: 'Configuration with no adapters enabled for AppKit' + } +]