First commit

.gitignore

@@ -23,7 +23,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*.local
+.env
 
 # vercel
 .vercel

README.md

@@ -1,17 +1,9 @@
-<p align="center">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/coinbase/onchainkit/main/site/docs/public/logo/v0-27.png">
-    <img alt="OnchainKit logo vibes" src="https://raw.githubusercontent.com/coinbase/onchainkit/main/site/docs/public/logo/v0-27.png" width="auto">
-  </picture>
-</p>
 
-# Onchain App Template
+# Token Machine Template
 
 An Onchain App Template build with [OnchainKit](https://onchainkit.xyz), and ready to be deployed to Vercel.
 
-Play with it live on https://onchain-app-template.vercel.app
-
-Have fun! ⛵️
+The template is a simple swap app made with the OnchainKit [Swap component](https://onchainkit.xyz/docs/swap/swap).
 
 <br />
 
@@ -36,7 +28,10 @@ NEXT_PUBLIC_WC_PROJECT_ID="GET_FROM_WALLET_CONNECT"
 
 ```sh
 # Install bun in case you don't have it
-bun curl -fsSL <https://bun.sh/install> | bash
+curl -fsSL https://bun.sh/install | bash # for macOS, Linux, and WSL
+# to install a specific version
+curl -fsSL https://bun.sh/install | bash -s "bun-v1.0.0"
+
 
 # Install packages
 bun i
@@ -54,4 +49,4 @@ bun run dev
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

src/app/layout.tsx

@@ -19,10 +19,10 @@ export const viewport = {
 };
 
 export const metadata: Metadata = {
-  title: 'Onchain App Template',
+  title: 'Community Swap',
   description: 'Built with OnchainKit',
   openGraph: {
-    title: 'Onchain App Template',
+    title: 'Community Swap',
     description: 'Built with OnchainKit',
     images: [`${NEXT_PUBLIC_URL}/vibes/vibes-19.png`],
   },

src/app/page.tsx

@@ -2,22 +2,28 @@
 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 { COMMUNITY_LINK } from 'src/links';
+import OnchainkitSvg from 'src/svg/CommunitySvg';
 import { useAccount } from 'wagmi';
 import LoginButton from '../components/LoginButton';
 import SignupButton from '../components/SignupButton';
+import SwapWrapper from 'src/components/SwapWrapper';
+import Image from 'next/image';
+import meetMochi from '../images/meet-mochi.png';
 
 export default function Page() {
   const { address } = useAccount();
 
   return (
     <div className="flex h-full w-96 max-w-full flex-col px-1 md:w-[1008px]">
+      <div className="fixed inset-0 -z-10 h-screen w-screen bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem]">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,#FFDAB9,transparent)]"></div>
+      </div>
       <section className="mt-6 mb-6 flex w-full flex-col md:flex-row">
         <div className="flex w-full flex-row items-center justify-between gap-2 md:gap-0">
           <a
-            href={ONCHAINKIT_LINK}
-            title="onchainkit"
+            href={COMMUNITY_LINK}
+            title="Token"
             target="_blank"
             rel="noreferrer"
           >
@@ -29,24 +35,18 @@ export default function Page() {
           </div>
         </div>
       </section>
-      <section className="templateSection flex w-full flex-col items-center justify-center gap-4 rounded-xl bg-gray-100 px-2 py-4 md:grow">
-        <div className="flex h-[450px] w-[450px] max-w-full items-center justify-center rounded-xl bg-[#030712]">
-          <div className="rounded-xl bg-[#F3F4F6] px-4 py-[11px]">
-            <p className="font-normal text-indigo-600 text-xl not-italic tracking-[-1.2px]">
-              npm install @coinbase/onchainkit
-            </p>
-          </div>
+      <section className="templateSection flex w-full flex-col items-center justify-center gap-4 rounded-xl bg-[#FF9D49] px-4 py-12 md:grow">
+        <div className="flex w-full items-center justify-center mt-[-50px] mb-[-20px]">
+          <Image src={meetMochi} alt="Welcome to Mochi" width={500} height={200} fill={false} style={{objectFit: "contain"}} />
+        </div>
+        <div className="flex w-full items-center justify-center mt-[-50px] mb-[-20px]">
+          <p className="text-2xl font-bold mt-[20px] mb-[20px] text-black">The cutest cat community</p>
+        </div>
+        <div className="z-10 flex w-full items-center justify-center mt-[10x]">
+          <SwapWrapper />
         </div>
-        {address ? (
-          <TransactionWrapper address={address} />
-        ) : (
-          <WalletWrapper
-            className="w-[450px] max-w-full"
-            text="Sign in to collect"
-          />
-        )}
       </section>
       <Footer />
     </div>
   );
-}
+}

src/components/Footer.tsx

@@ -4,33 +4,33 @@ import {
   DISCORD_LINK,
   FIGMA_LINK,
   GITHUB_LINK,
-  ONCHAINKIT_LINK,
+  COMMUNITY_LINK,
   TWITTER_LINK,
 } from 'src/links';
 import ArrowSvg from 'src/svg/ArrowSvg';
 
 const docLinks = [
-  { href: ONCHAINKIT_LINK, title: 'Docs' },
+  { href: COMMUNITY_LINK, title: '$MOCHI' },
   { href: GITHUB_LINK, title: 'Github' },
   { href: DISCORD_LINK, title: 'Discord' },
-  { href: FIGMA_LINK, title: 'Figma' },
+  // { href: FIGMA_LINK, title: 'Figma' },
   { href: TWITTER_LINK, title: 'X' },
 ];
 
 export default function Footer() {
   return (
-    <section className="mt-auto mb-2 flex w-full flex-col flex-col-reverse justify-between gap-2 md:mt-8 md:mb-6 md:flex-row">
+    <section className="mt-auto mb-8 pb-8 flex w-full flex-col justify-between gap-2 md:mt-8 md:mb-12 md:pb-12 md:flex-row">
       <aside className="flex items-center pt-2 md:pt-0">
         <h3 className="mr-2 mb-2 text-m md:mb-0">
-          Built with love by{' '}
+          Built with{' '}
           <a
-            href={ONCHAINKIT_LINK}
+            href={GITHUB_LINK}
             target="_blank"
             rel="noreferrer"
             title="OnchainKit"
             className="font-semibold hover:text-indigo-600"
           >
-            OnchainKit
+            OnchainKit Template
           </a>
         </h3>
       </aside>
@@ -52,4 +52,4 @@ export default function Footer() {
       </ul>
     </section>
   );
-}
+}

src/components/SwapWrapper.tsx

@@ -0,0 +1,64 @@
+'use client';
+import { useCallback } from 'react';
+import { Name } from '@coinbase/onchainkit/identity';
+import { 
+  Swap, 
+  SwapAmountInput, 
+  SwapToggleButton, 
+  SwapButton, 
+  SwapMessage
+} from '@coinbase/onchainkit/swap'; 
+import { Wallet, ConnectWallet } from '@coinbase/onchainkit/wallet';
+import { useAccount, useSendTransaction } from 'wagmi';
+import type { Token } from '@coinbase/onchainkit/token';
+
+export default function SwapComponents() {
+  const { address } = useAccount();
+  const { sendTransaction } = useSendTransaction();
+
+  const ETHToken: Token = {
+      address: "",
+      chainId: 8453,
+      decimals: 10,
+      name: "Ethereum",
+      symbol: "ETH",
+      image: "https://dynamic-assets.coinbase.com/dbb4b4983bde81309ddab83eb598358eb44375b930b94687ebe38bc22e52c3b2125258ffb8477a5ef22e33d6bd72e32a506c391caa13af64c00e46613c3e5806/asset_icons/4113b082d21cc5fab17fc8f2d19fb996165bcce635e6900f7fc2d57c4ef33ae9.png"
+  };
+
+  const MochiToken: Token = {
+      address: "0xf6e932ca12afa26665dc4dde7e27be02a7c02e50",
+      chainId: 8453,
+      decimals: 6,
+      name: "Mochi",
+      symbol: "MOCHI",
+      image: "https://s2.coinmarketcap.com/static/img/coins/64x64/28478.png"
+  };
+
+  const swappableTokens: Token[] = [ETHToken, MochiToken];
+
+  return (
+    address ? (
+      <Swap address={address}>
+        <SwapAmountInput className='bg-[#F0F0F0] text-white'
+          label="Sell"
+          swappableTokens={swappableTokens} 
+          token={ETHToken} 
+          type="from"
+        /> 
+        <SwapToggleButton /> 
+        <SwapAmountInput className='bg-[#F0F0F0] text-white'
+          label="Buy"
+          swappableTokens={swappableTokens} 
+          token={MochiToken} 
+          type="to"
+        /> 
+        <SwapButton className='bg-[#FF9D49] text-white'/> 
+        <SwapMessage /> 
+      </Swap> 
+    ) : (
+      <Wallet>
+        <ConnectWallet />
+      </Wallet>
+    )
+  );
+}

src/components/WalletWrapper.tsx

@@ -43,7 +43,7 @@ export default function WalletWrapper({
             <EthBalance />
           </Identity>
           <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
-            Go to Wallet Dashboard
+            Wallet
           </WalletDropdownLink>
           <WalletDropdownDisconnect />
         </WalletDropdown>

src/links.ts

@@ -1,6 +1,6 @@
 export const DISCORD_LINK = 'https://discord.gg/wTJ7besU';
 export const FIGMA_LINK =
   'https://www.figma.com/community/file/1370194397345450683/onchainkit';
-export const GITHUB_LINK = 'https://github.com/coinbase/onchainkit';
-export const ONCHAINKIT_LINK = 'https://onchainkit.xyz';
-export const TWITTER_LINK = 'https://x.com/Onchainkit';
+export const GITHUB_LINK = 'https://github.com/fakepixels/token-machine';
+export const COMMUNITY_LINK = 'https://mochithecatcoin.com/';
+export const TWITTER_LINK = 'https://x.com/mochi_token';

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es2020",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {
@@ -20,6 +24,13 @@
     ],
     "baseUrl": "."
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }