chore: Template #1 QA updates (#6)

Co-authored-by: Alissa Crane <[email protected]>
coinbase · Aug 7, 2024 · 3df267a · 3df267a
1 parent 0fc741b
commit 3df267a
Show file tree

Hide file tree

Showing 9 changed files with 143 additions and 19 deletions.
diff --git 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! ⛵️
 
 <br />
 
-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"
+```
 <br />
 
 ## Locally run
@@ -33,6 +44,7 @@ bun i
 # Run Next app
 bun run dev
 ```
+<br />
 
 ## Resources
 

diff --git 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() {
     <div className="flex h-full w-96 max-w-full flex-col md:w-[1008px]">
       <section className="mt-6 mb-6 flex w-full flex-col md:flex-row">
         <div className="flex w-full flex-col items-center justify-between gap-2 md:flex-row md:gap-0">
-          <h2 className="text-3xl">Onchainkit</h2>
+          <a
+            href={ONCHAINKIT_LINK}
+            title="onchainkit"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <OnchainkitSvg />
+          </a>
           <div className="flex gap-3">
             <SignupButton />
             {!address && <LoginButton />}

diff --git 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 (
     <section className="mt-12 mb-6 flex w-full flex-col justify-between gap-2 md:flex-row ">
       <aside className="flex items-center justify-center md:justify-start">
-        <h3 className="mr-2 text-m">Built with love by the OnchainKit team</h3>
+        <h3 className="mr-2 text-m">
+          Built with love by{' '}
+          <a
+            href={ONCHAINKIT_LINK}
+            target="_blank"
+            rel="noreferrer"
+            title="OnchainKit"
+          >
+            OnchainKit
+          </a>
+        </h3>
       </aside>
-      <ul className="flex justify-center gap-6 md:justify-start">
+      <ul className="flex max-w-full flex-wrap justify-center gap-6 md:justify-start">
         {docLinks.map(({ href, title }) => (
           <li className="flex" key={href}>
-            <a href={href} target="_blank" rel="noreferrer" title={title}>
+            <a
+              href={href}
+              target="_blank"
+              rel="noreferrer"
+              title={title}
+              className="flex items-center gap-1"
+            >
               <p>{title}</p>
+              <ArrowSvg />
             </a>
           </li>
         ))}

diff --git a/src/components/LoginButton.tsx b/src/components/LoginButton.tsx
@@ -2,5 +2,5 @@
 import WalletWrapper from './WalletWrapper';
 
 export default function LoginButton() {
-  return <WalletWrapper text="Log in" />;
+  return <WalletWrapper className="min-w-[90px]" text="Log in" />;
 }
diff --git a/src/components/SignupButton.tsx b/src/components/SignupButton.tsx
@@ -4,7 +4,7 @@ import WalletWrapper from './WalletWrapper';
 export default function SignupButton() {
   return (
     <WalletWrapper
-      className="ockConnectWallet_Container bg-slate-200 text-[#030712] hover:bg-slate-300"
+      className="ockConnectWallet_Container min-w-[90px] shrink bg-slate-200 text-[#030712] hover:bg-slate-300"
       text="Sign up"
       withWalletAggregator={true}
     />

diff --git a/src/components/TransactionWrapper.tsx b/src/components/TransactionWrapper.tsx
@@ -38,7 +38,10 @@ export default function TransactionWrapper({
         contracts={contracts}
         className="w-[450px]"
       >
-        <TransactionButton className="mt-0 mr-auto ml-auto w-[450px] text-[white]" />
+        <TransactionButton
+          className="mt-0 mr-auto ml-auto w-[450px] text-[white]"
+          text="Collect"
+        />
         <TransactionStatus>
           <TransactionStatusLabel />
           <TransactionStatusAction />

diff --git a/src/links.ts 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
@@ -0,0 +1,18 @@
+export default function ArrowSvg() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="pb-1"
+    >
+      <title>Arrow SVG</title>
+      <path
+        d="M3.25586 2.99992H11.9106L1.33325 13.5773L2.51176 14.7558L13.0892 4.1784V12.8333H14.7559V1.33325H3.25586V2.99992Z"
+        fill="#0A0B0D"
+      />
+    </svg>
+  );
+}
diff --git a/src/svg/OnchainkitSvg.tsx b/src/svg/OnchainkitSvg.tsx
@@ -0,0 +1,53 @@
+export default function OnchainkitSvg() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="155"
+      height="26"
+      viewBox="0 0 155 26"
+      fill="none"
+    >
+      <title>Onchainkit SVG</title>
+      <path
+        d="M155.002 10.7364H151.783V20.0258C151.783 21.9709 152.722 22.2056 155.002 22.0715V24.9556C154.298 25.1232 153.526 25.2239 152.587 25.2239C149.77 25.2239 148.228 23.9495 148.228 20.3276V10.7364H145.746V7.85237H148.228V2.45312H151.783V7.85237H155.002V10.7364Z"
+        fill="black"
+      />
+      <path
+        d="M142.133 4.96807C141.16 4.96807 140.154 4.29735 140.154 3.09007C140.154 1.88278 141.16 1.24561 142.133 1.24561C143.173 1.24561 144.145 1.88278 144.145 3.09007C144.145 4.29735 143.173 4.96807 142.133 4.96807ZM140.389 7.85213H143.91V24.9889H140.389V7.85213Z"
+        fill="black"
+      />
+      <path
+        d="M119.021 1.01074H123.012V12.8488L133.878 1.01074H138.64L129.317 11.1721L139.21 24.9888H134.549L126.701 13.9555L123.012 17.9127V24.9888H119.021V1.01074Z"
+        fill="black"
+      />
+      <path
+        d="M110.402 7.38281C113.588 7.38281 116.103 9.22728 116.103 13.1509V24.989H112.548V14.157C112.548 11.8431 111.576 10.3675 109.161 10.3675C106.445 10.3675 104.701 12.0107 104.701 14.5594V24.989H101.18V7.85231H104.701V10.0657H104.768C105.673 8.72424 107.451 7.38281 110.402 7.38281Z"
+        fill="black"
+      />
+      <path
+        d="M96.4942 4.96807C95.5217 4.96807 94.5156 4.29735 94.5156 3.09007C94.5156 1.88278 95.5217 1.24561 96.4942 1.24561C97.5338 1.24561 98.5064 1.88278 98.5064 3.09007C98.5064 4.29735 97.5338 4.96807 96.4942 4.96807ZM94.7504 7.85213H98.2716V24.9889H94.7504V7.85213Z"
+        fill="black"
+      />
+      <path
+        d="M87.962 12.3461C87.962 11.1053 87.2242 10.1663 84.8767 10.1663C82.0597 10.1663 81.0201 11.0382 80.8525 13.2516H77.4318C77.5995 9.96506 79.7122 7.38281 84.8767 7.38281C88.6663 7.38281 91.4833 8.82485 91.4833 13.3857V21.5349C91.4833 22.7422 91.7515 23.3793 93.1265 23.2452V24.922C92.3217 25.2238 91.7515 25.2909 91.0808 25.2909C89.2028 25.2909 88.3309 24.6202 87.9956 22.9434H87.9285C86.8553 24.4525 84.9103 25.4921 82.2609 25.4921C78.7732 25.4921 76.627 23.4799 76.627 20.5959C76.627 16.8399 79.4104 15.6661 83.703 14.8277C86.3523 14.3247 87.962 13.9893 87.962 12.3461ZM83.0323 22.7086C85.9499 22.7086 87.962 21.2666 87.962 18.4831V15.9009C87.3919 16.3033 86.0169 16.7057 84.3737 17.0411C81.4561 17.6783 80.1817 18.5167 80.1817 20.2605C80.1817 21.8367 81.1207 22.7086 83.0323 22.7086Z"
+        fill="black"
+      />
+      <path
+        d="M69.2822 7.38252C72.5352 7.38252 75.0503 9.22698 75.0503 13.1507V24.9888H71.4955V14.1567C71.4955 11.8428 70.523 10.3672 68.0749 10.3672C65.4927 10.3672 63.6482 12.0104 63.6482 14.5592V24.9888H60.127V1.01074H63.6482V10.0654H63.7153C64.6207 8.72395 66.3981 7.38252 69.2822 7.38252Z"
+        fill="black"
+      />
+      <path
+        d="M54.9503 14.1235C54.8161 12.3796 53.7094 10.2669 50.6912 10.2669C47.2371 10.2669 45.7615 13.218 45.7615 16.4374C45.7615 19.6569 47.2035 22.608 50.6912 22.608C53.7094 22.608 54.8161 20.5288 54.9503 18.6173H58.4715C58.2032 22.5745 55.1515 25.4921 50.6912 25.4921C45.5603 25.4921 42.2402 21.8032 42.2402 16.4374C42.2402 11.0717 45.5603 7.38281 50.6577 7.38281C55.1179 7.38281 58.0355 10.2333 58.4715 14.1235H54.9503Z"
+        fill="black"
+      />
+      <path
+        d="M34.8961 7.38281C38.082 7.38281 40.5972 9.22728 40.5972 13.1509V24.989H37.0424V14.157C37.0424 11.8431 36.0699 10.3675 33.6553 10.3675C30.9389 10.3675 29.1951 12.0107 29.1951 14.5594V24.989H25.6738V7.85231H29.1951V10.0657H29.2621C30.1676 8.72424 31.945 7.38281 34.8961 7.38281Z"
+        fill="black"
+      />
+      <path
+        d="M11.771 25.4919C4.52732 25.4919 0 20.1933 0 12.9831C0 5.77291 4.52732 0.507812 11.771 0.507812C18.9812 0.507812 23.542 5.77291 23.542 12.9831C23.542 20.1933 18.9812 25.4919 11.771 25.4919ZM11.771 22.0713C17.2709 22.0713 19.5513 17.8458 19.5513 12.9831C19.5513 8.15395 17.2709 3.92845 11.771 3.92845C6.27117 3.92845 3.95721 8.15395 3.95721 12.9831C3.95721 17.8458 6.27117 22.0713 11.771 22.0713Z"
+        fill="black"
+      />
+    </svg>
+  );
+}