diff --git a/README.md b/README.md index 68db2a4..edbf68b 100644 --- a/README.md +++ b/README.md @@ -9,16 +9,27 @@ An Onchain App Template build with [OnchainKit](https://onchainkit.xyz), and ready to be deployed to Vercel. -To ensure all components work seamlessly, set the `NEXT_PUBLIC_CDP_API_KEY` in your `.env` file. +Play with it live on https://onchain-app-template.vercel.app -You can find the API KEY on the Node page at the [Coinbase Dev Portal](https://portal.cdp.coinbase.com/products/node). +Have fun! ⛵️
-Play with it live on https://onchain-app-template.vercel.app +## Setup -Have fun! ⛵️ +To ensure all components work seamlessly, set the following environment variables in your `.env` file using `.local.env.example` as a reference. + +You can find the API key on the [Coinbase Developer Portal's OnchainKit page](https://portal.cdp.coinbase.com/products/onchainkit). If you don't have an account, you will need to create one. +You can find your Wallet Connector project ID at [Wallet Connect](https://cloud.walletconnect.com). + +```sh +# See https://portal.cdp.coinbase.com/products/onchainkit +NEXT_PUBLIC_CDP_API_KEY="GET_FROM_COINBASE_DEVELOPER_PLATFORM" + +# See https://cloud.walletconnect.com +WALLET_CONNECTOR_PROJECT_ID="GET_FROM_WALLET_CONNECT" +```
## Locally run @@ -33,6 +44,7 @@ bun i # Run Next app bun run dev ``` +
## Resources diff --git a/src/app/page.tsx b/src/app/page.tsx index af51003..89ea7f4 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,6 +2,8 @@ import Footer from 'src/components/Footer'; import TransactionWrapper from 'src/components/TransactionWrapper'; import WalletWrapper from 'src/components/WalletWrapper'; +import { ONCHAINKIT_LINK } from 'src/links'; +import OnchainkitSvg from 'src/svg/OnchainkitSvg'; import { useAccount } from 'wagmi'; import LoginButton from '../components/LoginButton'; import SignupButton from '../components/SignupButton'; @@ -13,7 +15,14 @@ export default function Page() {
-

Onchainkit

+ + +
{!address && } diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 0617c29..7abf0cf 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,27 +1,50 @@ 'use client'; +import { + DISCORD_LINK, + FIGMA_LINK, + GITHUB_LINK, + ONCHAINKIT_LINK, + TWITTER_LINK, +} from 'src/links'; +import ArrowSvg from 'src/svg/ArrowSvg'; + const docLinks = [ - { href: 'https://onchainkit.xyz', title: 'Docs' }, - { href: 'https://github.com/coinbase/onchainkit', title: 'Github' }, - { href: 'https://discord.gg/8gW3h6w5', title: 'Discord' }, - { - href: 'https://www.figma.com/community/file/1370194397345450683/onchainkit', - title: 'Figma', - }, - { href: 'https://x.com/Onchainkit', title: 'X' }, + { href: ONCHAINKIT_LINK, title: 'Docs' }, + { href: GITHUB_LINK, title: 'Github' }, + { href: DISCORD_LINK, title: 'Discord' }, + { href: FIGMA_LINK, title: 'Figma' }, + { href: TWITTER_LINK, title: 'X' }, ]; export default function Footer() { return (
-
    +
      {docLinks.map(({ href, title }) => (
    • - +

      {title}

      +
      • ))} diff --git a/src/components/LoginButton.tsx b/src/components/LoginButton.tsx index afd5e86..a188110 100644 --- a/src/components/LoginButton.tsx +++ b/src/components/LoginButton.tsx @@ -2,5 +2,5 @@ import WalletWrapper from './WalletWrapper'; export default function LoginButton() { - return ; + return ; } diff --git a/src/components/SignupButton.tsx b/src/components/SignupButton.tsx index d1a2bc8..6231a23 100644 --- a/src/components/SignupButton.tsx +++ b/src/components/SignupButton.tsx @@ -4,7 +4,7 @@ import WalletWrapper from './WalletWrapper'; export default function SignupButton() { return ( diff --git a/src/components/TransactionWrapper.tsx b/src/components/TransactionWrapper.tsx index e297123..69f07af 100644 --- a/src/components/TransactionWrapper.tsx +++ b/src/components/TransactionWrapper.tsx @@ -38,7 +38,10 @@ export default function TransactionWrapper({ contracts={contracts} className="w-[450px]" > - + diff --git a/src/links.ts b/src/links.ts new file mode 100644 index 0000000..3ed0820 --- /dev/null +++ b/src/links.ts @@ -0,0 +1,6 @@ +export const ONCHAINKIT_LINK = 'https://onchainkit.xyz'; +export const GITHUB_LINK = 'https://github.com/coinbase/onchainkit'; +export const DISCORD_LINK = 'https://discord.gg/wTJ7besU'; +export const FIGMA_LINK = + 'https://www.figma.com/community/file/1370194397345450683/onchainkit'; +export const TWITTER_LINK = 'https://x.com/Onchainkit'; diff --git a/src/svg/ArrowSvg.tsx b/src/svg/ArrowSvg.tsx new file mode 100644 index 0000000..e0adaef --- /dev/null +++ b/src/svg/ArrowSvg.tsx @@ -0,0 +1,18 @@ +export default function ArrowSvg() { + return ( + + Arrow SVG + + + ); +} diff --git a/src/svg/OnchainkitSvg.tsx b/src/svg/OnchainkitSvg.tsx new file mode 100644 index 0000000..91fed68 --- /dev/null +++ b/src/svg/OnchainkitSvg.tsx @@ -0,0 +1,53 @@ +export default function OnchainkitSvg() { + return ( + + Onchainkit SVG + + + + + + + + + + + + ); +}