Add network dropdown

solana-developers · Dec 28, 2023 · 44cc9c0 · 44cc9c0
1 parent 61ce257
commit 44cc9c0
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 3 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -33,6 +33,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Toaster } from "@/components/ui/toaster";
 import { useToast } from "@/components/ui/use-toast";
 import { Footer } from "@/components/ui/footer";
+import { Dropdown } from "@/components/ui/dropdown";
 
 export default function Home() {
   const amountOptions = [0.5, 1, 2.5, 5];
@@ -44,6 +45,7 @@ export default function Home() {
   });
   const [showVerifyDialog, setShowVerifyDialog] = useState<boolean>(false);
   const toaster = useToast();
+  const [network, setSelectedNetwork] = useState('devnet');
 
   const validateWallet = (address: string): boolean => {
     try {
@@ -71,6 +73,10 @@ export default function Home() {
     }
   };
 
+  const handleDropdownChange = (event: any) => {
+    setSelectedNetwork(event.target.value);
+  };
+
   const requestAirdrop = async (cloudflareCallback: string | null = null) => {
     try {
       if (cloudflareCallback === null) {
@@ -85,7 +91,7 @@ export default function Home() {
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ walletAddress, amount, cloudflareCallback }),
+        body: JSON.stringify({ walletAddress, amount, cloudflareCallback, network: network }),
       });
 
       if (res.ok) {
@@ -132,6 +138,9 @@ export default function Home() {
       <Toaster />
       <Header />
       <Footer />
+      <div className="absolute top-0 left-0 p-4">
+        <Dropdown value={network} onChange={handleDropdownChange} />
+      </div>
       <div className="absolute">
         <Card className="mx-2 sm:w-full md:w-[450px]">
           <CardHeader>

diff --git a/components/ui/dropdown.tsx b/components/ui/dropdown.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { cn } from "@/lib/utils";
+
+export interface DropdownProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+const Dropdown: React.FC<DropdownProps> = ({ className, ...props }) => {
+    return (
+        <select
+            className={cn(
+                "block w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                className
+            )}
+            {...props}
+        >
+            <option value="devnet">devnet</option>
+            <option value="testnet">testnet</option>
+        </select>
+    );
+};
+
+Dropdown.displayName = 'Dropdown';
+
+export { Dropdown };
diff --git a/pages/api/request.ts b/pages/api/request.ts
@@ -53,9 +53,10 @@ export default async function handler(
   const ip = firstForwardedIp || req.socket.remoteAddress;
   const walletAddress = req.body.walletAddress;
   const amount = req.body.amount;
+  const network = req.body.network;
   const cloudflareCallback = req.body.cloudflareCallback;
 
-  console.log("ip", ip);
+  console.log("ip, network", ip, network);
 
   if (!walletAddress) {
     res.status(BAD_REQUEST).json({ error: "Missing wallet address" });
@@ -130,8 +131,11 @@ export default async function handler(
   const keypair = JSON.parse(process.env.FAUCET_KEYPAIR ?? "");
   const payer = Keypair.fromSecretKey(Uint8Array.from(keypair));
 
+  const rpc_url = network == "testnet" ? "https://api.testnet.solana.com" : process.env.RPC_URL ?? "https://api.devnet.solana.com";
+  console.log(rpc_url);
+
   const connection = new Connection(
-    process.env.RPC_URL ?? "https://api.devnet.solana.com",
+    rpc_url,
     "confirmed"
   );