From e14a74e3f388a458e052d6f0755d8f20dd4cf133 Mon Sep 17 00:00:00 2001
From: pindaroso <me@pindaroso.com>
Date: Wed, 16 Oct 2024 09:48:56 -0400
Subject: [PATCH] Minor UI/UX style improvements

---
 packages/app/src/app/page.tsx                 | 35 +++++++++----------
 .../src/components/buttons/create-mint.tsx    |  5 +++
 packages/app/src/components/buttons/send.tsx  |  9 +++++
 3 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/packages/app/src/app/page.tsx b/packages/app/src/app/page.tsx
index e26a0f7..771610d 100644
--- a/packages/app/src/app/page.tsx
+++ b/packages/app/src/app/page.tsx
@@ -49,7 +49,7 @@ declare global {
 }
 
 const defaultNetwork =
-  process.env.NODE_ENV === 'development' ? 'localnet' : 'devnet'
+  process.env.NODE_ENV === 'development' ? 'Localnet' : 'Devnet'
 
 export default function Home() {
   const { publicKey, disconnect } = useWallet()
@@ -110,9 +110,9 @@ export default function Home() {
 
   return (
     <div className="flex flex-col min-h-screen">
-      <nav className="p-4">
+      <nav className="p-3 px-4 border-b border-1 border-zinc-200 dark:border-zinc-800">
         <div className="flex justify-between items-center">
-          <div className="flex items-center gap-6 text-zinc-700 dark:text-zinc-300">
+          <div className="flex items-center text-sm gap-6 text-zinc-700 dark:text-zinc-300">
             <Link href="/" className="text-primary text-lg">
               Solana ZK Starter
             </Link>
@@ -144,16 +144,13 @@ export default function Home() {
           <div className="flex items-center">
             {publicKey ? (
               <>
-                <Button
-                  variant="ghost"
-                  className="mr-2 text-zinc-700 dark:text-zinc-300"
-                >
+                <Button variant="ghost" className="mr-2 font-normal">
                   {balance !== null ? balance.toFixed(2) + ' SOL' : '-'}
                 </Button>
                 <div className="flex flex-row">
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                      <Button variant="outline" className="w-24">
+                      <Button variant="outline" className="w-24 font-normal">
                         {networkActive ? (
                           <span className="text-green-400 mr-2">&bull;</span>
                         ) : (
@@ -164,7 +161,7 @@ export default function Home() {
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
                       defaultValue={network}
-                      className="bg-background w-56"
+                      className="w-56"
                     >
                       <DropdownMenuLabel>Network</DropdownMenuLabel>
                       <DropdownMenuSeparator />
@@ -172,10 +169,10 @@ export default function Home() {
                         value={endpoint}
                         onValueChange={(value) => {
                           const endpoints = {
-                            localnet: 'http://127.0.0.1:8899',
-                            devnet: 'https://api.devnet.solana.com',
-                            testnet: 'https://api.testnet.solana.com',
-                            mainnet: 'https://api.mainnet-beta.solana.com',
+                            Localnet: 'http://127.0.0.1:8899',
+                            Devnet: 'https://api.devnet.solana.com',
+                            Testnet: 'https://api.testnet.solana.com',
+                            Mainnet: 'https://api.mainnet-beta.solana.com',
                           }
                           setEndpoint(
                             endpoints[value as keyof typeof endpoints]
@@ -183,16 +180,16 @@ export default function Home() {
                           setNetwork(value)
                         }}
                       >
-                        <DropdownMenuRadioItem value="localnet">
+                        <DropdownMenuRadioItem value="Localnet">
                           Localnet
                         </DropdownMenuRadioItem>
-                        <DropdownMenuRadioItem value="devnet">
+                        <DropdownMenuRadioItem value="Devnet">
                           Devnet
                         </DropdownMenuRadioItem>
-                        <DropdownMenuRadioItem value="testnet">
+                        <DropdownMenuRadioItem value="Testnet">
                           Testnet
                         </DropdownMenuRadioItem>
-                        <DropdownMenuRadioItem disabled value="mainnet">
+                        <DropdownMenuRadioItem disabled value="Mainnet">
                           Mainnet
                         </DropdownMenuRadioItem>
                       </DropdownMenuRadioGroup>
@@ -280,8 +277,8 @@ export default function Home() {
             </>
           )}
           {hash === '' && (
-            <div className="flex flex-col mt-2 text-center gap-2">
-              <h1 className="text-primary text-4xl">zkgm</h1>
+            <div className="flex flex-col mt-2 text-center gap-2 text-zinc-700 dark:text-zinc-300">
+              <h1 className="text-4xl">zkgm</h1>
               <p>Say hello to your new zk compresison app.</p>
             </div>
           )}
diff --git a/packages/app/src/components/buttons/create-mint.tsx b/packages/app/src/components/buttons/create-mint.tsx
index 4918e22..f06b6d2 100644
--- a/packages/app/src/components/buttons/create-mint.tsx
+++ b/packages/app/src/components/buttons/create-mint.tsx
@@ -16,11 +16,16 @@ export const CreateMintButton: FC<{ className?: string }> = ({ className }) => {
   const onClick = useCallback(async () => {
     if (!wallet) throw new WalletNotConnectedError()
 
+    toast.error('Not Implemented')
+    return
+
+    // @ts-ignore
     try {
       const rpc = createRpc(endpoint)
       const { transactionSignature } = await createMint(
         rpc,
         wallet as unknown as Signer, // TODO: Fix this
+        // @ts-ignore
         wallet.publicKey,
         9
       )
diff --git a/packages/app/src/components/buttons/send.tsx b/packages/app/src/components/buttons/send.tsx
index 067900c..df7afe8 100644
--- a/packages/app/src/components/buttons/send.tsx
+++ b/packages/app/src/components/buttons/send.tsx
@@ -30,8 +30,13 @@ export const SendButton: FC<{ className?: string }> = ({ className }) => {
 
     const connection = createRpc(endpoint)
 
+    toast.error('Not Implemented')
+    return
+
     const compressInstruction = await LightSystemProgram.compress({
+      // @ts-ignore
       payer: publicKey,
+      // @ts-ignore
       toAddress: publicKey,
       lamports: 1e8,
       outputStateTree: defaultTestStateTreeAccounts().merkleTree,
@@ -47,6 +52,7 @@ export const SendButton: FC<{ className?: string }> = ({ className }) => {
       value: blockhashCtx,
     } = await connection.getLatestBlockhashAndContext()
 
+    // @ts-ignore
     const tx = buildTx(compressInstructions, publicKey, blockhashCtx.blockhash)
     const signature = await sendTransaction(tx, connection, {
       minContextSlot,
@@ -65,6 +71,7 @@ export const SendButton: FC<{ className?: string }> = ({ className }) => {
     // Send compressed SOL to a random address
     const recipient = Keypair.generate().publicKey
 
+    // @ts-ignore
     const accounts = await connection.getCompressedAccountsByOwner(publicKey)
     const [selectedAccounts, _] = selectMinCompressedSolAccountsForTransfer(
       accounts.items,
@@ -78,6 +85,7 @@ export const SendButton: FC<{ className?: string }> = ({ className }) => {
 
     // Create and send compressed transfer
     const sendInstruction = await LightSystemProgram.transfer({
+      // @ts-ignore
       payer: publicKey,
       toAddress: recipient,
       lamports: 1e7,
@@ -100,6 +108,7 @@ export const SendButton: FC<{ className?: string }> = ({ className }) => {
     } = await connection.getLatestBlockhashAndContext()
 
     const messageV0Send = new TransactionMessage({
+      // @ts-ignore
       payerKey: publicKey,
       recentBlockhash: blockhashSend,
       instructions: sendInstructions,