Unboxed-Software · carson2222 · Jun 27, 2024
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -23,10 +24,13 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
 # local env files
 .env*.local
 
 # vercel
 .vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -8,15 +8,17 @@ First, run the development server:
 npm run dev
 # or
 yarn dev
+# or
+pnpm dev
+# or
+bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
 ## Learn More
 

diff --git a/app/globals.css b/app/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body suppressHydrationWarning={true} className={inter.className}>
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/pages/index.tsx → app/page.tsx b/pages/index.tsx → app/page.tsx
@@ -8,7 +8,7 @@ import { CreateTokenAccountForm } from "../components/CreateTokenAccount";
 import { CreateMintForm } from "../components/CreateMint";
 import Head from "next/head";
 
-const Home: NextPage = (props) => {
+const Home: NextPage = () => {
   return (
     <div className={styles.App}>
       <Head>

diff --git a/components/AppBar.tsx b/components/AppBar.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { FC } from "react";
 import styles from "../styles/Home.module.css";
 import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
@@ -6,7 +7,7 @@ import Image from "next/image";
 export const AppBar: FC = () => {
   return (
     <div className={styles.AppHeader}>
-      <Image src="/solanaLogo.png" height={30} width={200} />
+      <Image src="/solanaLogo.png" height={30} width={200} alt="sol logo" />
       <span>Token Program</span>
       <WalletMultiButton />
     </div>

diff --git a/components/BalanceDisplay.tsx b/components/BalanceDisplay.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useConnection, useWallet } from "@solana/wallet-adapter-react";
 import { LAMPORTS_PER_SOL } from "@solana/web3.js";
 import { FC, useEffect, useState } from "react";
@@ -13,6 +14,7 @@ export const BalanceDisplay: FC = () => {
     }
 
     connection.getAccountInfo(publicKey).then((info) => {
+      if (!info) return;
       setBalance(info.lamports);
     });
   }, [connection, publicKey]);

diff --git a/components/CreateMint.tsx b/components/CreateMint.tsx
@@ -1,6 +1,7 @@
+"use client";
 import { useConnection, useWallet } from "@solana/wallet-adapter-react";
 import * as web3 from "@solana/web3.js";
-import { FC, useState } from "react";
+import { FC, FormEvent, useState } from "react";
 import styles from "../styles/Home.module.css";
 import {
   MINT_SIZE,
@@ -16,12 +17,10 @@ export const CreateMintForm: FC = () => {
   const { connection } = useConnection();
   const { publicKey, sendTransaction } = useWallet();
   const link = () => {
-    return txSig
-      ? `https://explorer.solana.com/tx/${txSig}?cluster=devnet`
-      : "";
+    return txSig ? `https://explorer.solana.com/tx/${txSig}?cluster=devnet` : "";
   };
 
-  const createMint = async (event) => {
+  const createMint = async (event: FormEvent) => {
     event.preventDefault();
     if (!connection || !publicKey) {
       return;
@@ -41,13 +40,7 @@ export const CreateMintForm: FC = () => {
         lamports,
         programId: TOKEN_PROGRAM_ID,
       }),
-      createInitializeMintInstruction(
-        mint.publicKey,
-        0,
-        publicKey,
-        publicKey,
-        TOKEN_PROGRAM_ID
-      )
+      createInitializeMintInstruction(mint.publicKey, 0, publicKey, publicKey, TOKEN_PROGRAM_ID)
     );
 
     sendTransaction(transaction, connection, {

diff --git a/components/CreateTokenAccount.tsx b/components/CreateTokenAccount.tsx
@@ -1,7 +1,8 @@
+"use client";
 import { useConnection, useWallet } from "@solana/wallet-adapter-react";
 import * as web3 from "@solana/web3.js";
 import { LAMPORTS_PER_SOL } from "@solana/web3.js";
-import { FC, useState } from "react";
+import { FC, FormEvent, useState } from "react";
 import styles from "../styles/Home.module.css";
 
 import {
@@ -17,12 +18,10 @@ export const CreateTokenAccountForm: FC = () => {
   const { connection } = useConnection();
   const { publicKey, sendTransaction } = useWallet();
   const link = () => {
-    return txSig
-      ? `https://explorer.solana.com/tx/${txSig}?cluster=devnet`
-      : "";
+    return txSig ? `https://explorer.solana.com/tx/${txSig}?cluster=devnet` : "";
   };
 
-  const createTokenAccount = async (event) => {
+  const createTokenAccount = async (event: any) => {
     event.preventDefault();
     if (!connection || !publicKey) {
       return;
@@ -62,13 +61,7 @@ export const CreateTokenAccountForm: FC = () => {
       {publicKey ? (
         <form onSubmit={createTokenAccount} className={styles.form}>
           <label htmlFor="owner">Token Mint:</label>
-          <input
-            id="mint"
-            type="text"
-            className={styles.formField}
-            placeholder="Enter Token Mint"
-            required
-          />
+          <input id="mint" type="text" className={styles.formField} placeholder="Enter Token Mint" required />
           <label htmlFor="owner">Token Account Owner:</label>
           <input
             id="owner"

diff --git a/components/MintToForm.tsx b/components/MintToForm.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useConnection, useWallet } from "@solana/wallet-adapter-react";
 import * as web3 from "@solana/web3.js";
 import { LAMPORTS_PER_SOL } from "@solana/web3.js";
@@ -18,12 +19,10 @@ export const MintToForm: FC = () => {
   const { connection } = useConnection();
   const { publicKey, sendTransaction } = useWallet();
   const link = () => {
-    return txSig
-      ? `https://explorer.solana.com/tx/${txSig}?cluster=devnet`
-      : "";
+    return txSig ? `https://explorer.solana.com/tx/${txSig}?cluster=devnet` : "";
   };
 
-  const mintTo = async (event) => {
+  const mintTo = async (event: any) => {
     event.preventDefault();
     if (!connection || !publicKey) {
       return;
@@ -42,9 +41,7 @@ export const MintToForm: FC = () => {
       ASSOCIATED_TOKEN_PROGRAM_ID
     );
 
-    transaction.add(
-      createMintToInstruction(mintPubKey, associatedToken, publicKey, amount)
-    );
+    transaction.add(createMintToInstruction(mintPubKey, associatedToken, publicKey, amount));
 
     const signature = await sendTransaction(transaction, connection);
 
@@ -63,13 +60,7 @@ export const MintToForm: FC = () => {
       {publicKey ? (
         <form onSubmit={mintTo} className={styles.form}>
           <label htmlFor="mint">Token Mint:</label>
-          <input
-            id="mint"
-            type="text"
-            className={styles.formField}
-            placeholder="Enter Token Mint"
-            required
-          />
+          <input id="mint" type="text" className={styles.formField} placeholder="Enter Token Mint" required />
           <label htmlFor="recipient">Recipient:</label>
           <input
             id="recipient"
@@ -79,13 +70,7 @@ export const MintToForm: FC = () => {
             required
           />
           <label htmlFor="amount">Amount Tokens to Mint:</label>
-          <input
-            id="amount"
-            type="text"
-            className={styles.formField}
-            placeholder="e.g. 100"
-            required
-          />
+          <input id="amount" type="text" className={styles.formField} placeholder="e.g. 100" required />
           <button type="submit" className={styles.formButton}>
             Mint Tokens
           </button>

diff --git a/components/WalletContextProvider.tsx b/components/WalletContextProvider.tsx
@@ -1,8 +1,6 @@
+"use client";
 import { FC, ReactNode } from "react";
-import {
-  ConnectionProvider,
-  WalletProvider,
-} from "@solana/wallet-adapter-react";
+import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
 import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
 import * as web3 from "@solana/web3.js";
 import { PhantomWalletAdapter } from "@solana/wallet-adapter-wallets";

diff --git a/next.config.js b/next.config.js
diff --git a/next.config.mjs b/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;