From 1d5ec842611795706afa41819d1ef626d8f15ac6 Mon Sep 17 00:00:00 2001
From: Dickson Pang <34560707+dicksonpys@users.noreply.github.com>
Date: Fri, 22 Sep 2023 14:47:23 +0800
Subject: [PATCH] Readme getting started

---
 README.md                             | 78 +++++++++++++--------------
 src/exercises/2-airdropping/index.tsx | 55 +++++++++++++------
 2 files changed, 76 insertions(+), 57 deletions(-)

diff --git a/README.md b/README.md
index a75ac52..dad1b7a 100644
--- a/README.md
+++ b/README.md
@@ -1,40 +1,38 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-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.tsx`. 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.ts`.
-
-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
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+# APU Solana Hands-on
+
+This repo is a simple introduction to performing some essentials and simple functionality in Solana Blockchain.
+
+## Getting started (Codespace)
+- go to https://github.com/codespaces/new
+  - insert jup-ag/apu-solana-hands-on
+
+- Install dependencies and start the server
+  - npm install
+  - npm run dev
+  - Go to chrome
+    - https://localhost:3000
+
+## Getting started (Local)
+- unix-like environment
+  - macOS, Linux, WSL, etc.
+
+- Install VSCode
+  - https://code.visualstudio.com/
+
+- Install NodeJS
+  - Preferably install via NVM
+    - https://github.com/nvm-sh/nvm
+    - curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+    - nvm install --lts
+  - Or, via NodeJS (Get the latest LTS version)
+    - https://nodejs.org/en/download/
+
+- Clone the repo
+  - Repo: https://github.com/jup-ag/apu-solana-hands-on
+  - git clone https://github.com/jup-ag/apu-solana-hands-on.git ./
+
+- Install dependencies and start the server
+  - npm install
+  - npm run dev
+  - Go to chrome
+    - https://localhost:3000
\ No newline at end of file
diff --git a/src/exercises/2-airdropping/index.tsx b/src/exercises/2-airdropping/index.tsx
index 1e8ef46..c0f8836 100644
--- a/src/exercises/2-airdropping/index.tsx
+++ b/src/exercises/2-airdropping/index.tsx
@@ -5,11 +5,14 @@ const Exercise2Airdropping: React.FC<{
   keypair: Keypair | null;
   connection: Connection;
 }> = ({ keypair, connection }) => {
+  const [airdropped, setAirdropped] = useState<boolean>(false);
   const [airdropping, setAirdropping] = useState<boolean>(false);
+
   const onClickAirdrop = async () => {
     if (!keypair?.publicKey) return;
 
     setAirdropping(true);
+    setAirdropped(true);
     try {
       const txid = await connection.requestAirdrop(
         keypair?.publicKey,
@@ -32,23 +35,41 @@ const Exercise2Airdropping: React.FC<{
     <div className="mt-6">
       <p className="font-semibold">Airdop</p>
       <div className="mt-4">
-        {airdropping ? (
-          <button
-            type="button"
-            disabled
-            className="cursor-not-allowed opacity-50 text-black backdrop-blur-2xl rounded-xl px-4 py-2 bg-white"
-          >
-            Airdropping...
-          </button>
-        ) : (
-          <button
-            type="button"
-            onClick={onClickAirdrop}
-            className="text-black backdrop-blur-2xl rounded-xl px-4 py-2 bg-white"
-          >
-            Click to Airdrop
-          </button>
-        )}
+        {(() => {
+          if (airdropping) {
+            return (
+              <button
+                type="button"
+                disabled
+                className="cursor-not-allowed opacity-50 text-black backdrop-blur-2xl rounded-xl px-4 py-2 bg-white"
+              >
+                Airdropping...
+              </button>
+            );
+          }
+
+          if (airdropped) {
+            return (
+              <button
+                type="button"
+                disabled
+                className="cursor-not-allowed opacity-50 text-black backdrop-blur-2xl rounded-xl px-4 py-2 bg-white"
+              >
+                Already Airdropped
+              </button>
+            );
+          }
+
+          return (
+            <button
+              type="button"
+              onClick={onClickAirdrop}
+              className="text-black backdrop-blur-2xl rounded-xl px-4 py-2 bg-white"
+            >
+              Click to Airdrop
+            </button>
+          );
+        })()}
       </div>
     </div>
   );