Add SRC20 deployment functionality from the airdrop itself

airdrop/package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@fuel-ts/merkle": "^0.96.1",
+    "@fuel-ts/merkle": "^0.97.0",
     "@fuels/connectors": "^0.36.0",
     "@fuels/react": "^0.36.0",
     "@mui/material": "^5.16.5",

airdrop/src/components/Layout.tsx

@@ -6,7 +6,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className="w-full">
       <Toaster />
-      <div className="flex flex-col w-['100vw'] bg-black text-white">
+      <div className="flex flex-col w-['100vw'] bg-background text-foreground">
         <NavMenu />
         <div className="min-h-screen items-center p-24 flex flex-col gap-6">
           {children}

airdrop/src/components/NavMenu.tsx

@@ -9,6 +9,7 @@ import { Link } from "./Link";
 import { WalletDisplay } from "./WalletDisplay";
 import { useTheme } from "./theme-provider";
 import { Button } from "./ui/button";
+import { ModeToggle } from "./mode-toggle";
 
 export const NavMenu = () => {
   const { isMobile } = useBreakpoints();
@@ -62,7 +63,8 @@ export const NavMenu = () => {
 
           {!isMobile && (
             <Button
-              className="bg-gray-500"
+              variant="outline"
+              className="hover:bg-secondary/80"
               onClick={() => {
                 if (!isConnected)
                   return toast.error(
@@ -92,13 +94,20 @@ export const NavMenu = () => {
             </Button>
           )}
           {isConnected && !isMobile && (
-            <Button className="bg-red-600" onClick={() => disconnect()}>
+            <Button
+              variant="destructive"
+              className="hover:bg-destructive/90 hover:dark:text-white"
+              onClick={() => disconnect()}
+            >
               Disconnect
             </Button>
           )}
           {!isConnected && !isMobile && (
-            <Button onClick={connect}>Connect Wallet</Button>
+            <Button variant="outline" onClick={connect}>
+              Connect Wallet
+            </Button>
           )}
+          <ModeToggle />
         </nav>
       </div>
     </>

airdrop/src/components/Text.tsx

@@ -5,7 +5,7 @@ type TextProps = TypographyProps;
 
 export const Text = ({ children, className, ...props }: TextProps) => {
   return (
-    <Typography {...props} className={`text-white font-sans ${className}`}>
+    <Typography {...props} className={`text-foreground font-sans ${className}`}>
       {children}
     </Typography>
   );

airdrop/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

airdrop/src/components/ui/button.tsx

@@ -15,7 +15,7 @@ const buttonVariants = cva(
         outline:
           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 dark:hover:text-white",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },

airdrop/src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

airdrop/src/components/ui/date-picker.tsx

@@ -14,9 +14,10 @@ import {
 interface DatePickerProps {
   className?: string;
   onChangeHandler?: (date: Date | undefined) => void;
+  disabled?: boolean;
 }
 
-export function DatePicker({ className, onChangeHandler }: DatePickerProps) {
+export function DatePicker({ className, onChangeHandler, disabled }: DatePickerProps) {
   const [date, setDate] = React.useState<Date>();
 
   const handleDateChange = (selectedDate: Date | undefined) => {
@@ -36,6 +37,7 @@ export function DatePicker({ className, onChangeHandler }: DatePickerProps) {
             !date && "text-muted-foreground",
             className
           )}
+          disabled={disabled}
         >
           <CalendarIcon className="mr-2 h-4 w-4" />
           {date ? format(date, "PPP") : <span>Pick a date</span>}
@@ -47,6 +49,7 @@ export function DatePicker({ className, onChangeHandler }: DatePickerProps) {
           selected={date}
           onSelect={handleDateChange}
           initialFocus
+          disabled={disabled}
         />
       </PopoverContent>
     </Popover>

airdrop/src/components/ui/input.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-
 import { cn } from "@/lib/utils";
 
 export interface InputProps
@@ -11,9 +10,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground 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,
-          inputStyle
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground 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
         )}
         ref={ref}
         {...props}
@@ -24,24 +22,3 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 Input.displayName = "Input";
 
 export { Input };
-
-import clsx from "clsx";
-
-export const inputStyle = [
-  "mt-1",
-  "shrink",
-  "basis-2/3",
-  "rounded-lg",
-  "border-2",
-  "border-solid",
-  "border-zinc-500/25",
-  "p-1",
-  "font-sans",
-  "outline-none",
-  "md:-ml-2",
-  "md:mt-2",
-  "md:p-2",
-  "bg-transparent",
-  "placeholder:text-zinc-400",
-  "text-white",
-];

airdrop/src/hooks/src20Hooks/useDeploySrc20.ts

@@ -0,0 +1,34 @@
+import { Src20Factory } from "@/sway-api";
+import { useWallet } from "@fuels/react";
+import { useMutation } from "@tanstack/react-query";
+import { DeployContractOptions } from "fuels";
+import toast from "react-hot-toast";
+
+export type Src20Args = {
+  options?: DeployContractOptions;
+};
+export const useDeploySrc20 = () => {
+  const { wallet } = useWallet();
+  const mutation = useMutation({
+    mutationFn: async (args: Src20Args) => {
+      if (!wallet) {
+        throw new Error("Wallet not connected!");
+      }
+
+      const { options } = args;
+      const result = await Src20Factory.deploy(wallet, options);
+      const { contract, transactionResult } = await result.waitForResult();
+
+      return { contract, transactionResult };
+    },
+    onSuccess: () => {
+      toast.success(`SRC20 Contract deployed successfully!`);
+    },
+    onError: (err) => {
+      console.error("Error deploying contract:", err);
+      toast.error(err.message);
+    },
+  });
+
+  return mutation;
+};

airdrop/src/hooks/src20Hooks/useGetSrc20Balance.ts

@@ -0,0 +1,16 @@
+import { AirdropQueryKeys } from "@/queryKeys";
+import { useWallet } from "@fuels/react";
+import { useQuery } from "@tanstack/react-query";
+
+export const useGetSrc20Balance = (assetId: string) => {
+  const { wallet } = useWallet();
+  const query = useQuery({
+    queryKey: [AirdropQueryKeys.src20Balance],
+    queryFn: async () => {
+      if (!wallet || !assetId || assetId.trim() === "") return;
+      const balance = await wallet.getBalance(assetId);
+      return balance;
+    },
+  });
+  return query;
+};

airdrop/src/hooks/src20Hooks/useInitializeOwner.ts

@@ -0,0 +1,37 @@
+import { Src20 } from "@/sway-api";
+import { useWallet } from "@fuels/react";
+import { useMutation } from "@tanstack/react-query";
+import { bn } from "fuels";
+import toast from "react-hot-toast";
+
+export type InitializeOwnerArgs = {
+  contractId: string;
+};
+
+export const useInitializeOwner = () => {
+  const { wallet } = useWallet();
+  const mutation = useMutation({
+    mutationFn: async (args: InitializeOwnerArgs) => {
+      if (!wallet) {
+        throw new Error("Wallet not connected!");
+      }
+
+      const owner = { Address: { bits: wallet.address.toB256() } };
+
+      const contract = new Src20(args.contractId, wallet);
+
+      const result = await contract.functions.constructor(owner).call();
+      const transactionResult = await result.waitForResult();
+      return transactionResult;
+    },
+    onSuccess: () => {
+      toast.success("Owner initialized successfully!");
+    },
+    onError: (err) => {
+      console.error("Error initializing owner:", err);
+      toast.error(err.message);
+    },
+  });
+
+  return mutation;
+};

airdrop/src/hooks/src20Hooks/useMint.ts

@@ -0,0 +1,44 @@
+import { Src20 } from "@/sway-api";
+import { useWallet } from "@fuels/react";
+import { useMutation } from "@tanstack/react-query";
+import { bn } from "fuels";
+import toast from "react-hot-toast";
+
+export type Src20MintArgs = {
+  amount: number;
+  contractId: string;
+  subId: string;
+};
+
+export const useMint = () => {
+  const { wallet } = useWallet();
+  const mutation = useMutation({
+    mutationFn: async (args: Src20MintArgs) => {
+      if (!wallet) {
+        throw new Error("Wallet not connected!");
+      }
+
+      const { amount, contractId, subId } = args;
+
+      const recipient = { Address: { bits: wallet.address.toB256() } };
+
+      const contract = new Src20(contractId, wallet);
+
+      // Passing DEFAULT_SUB_ID as its a single asset contract
+      const result = await contract.functions
+        .mint(recipient, subId, bn(amount))
+        .call();
+      const transactionResult = await result.waitForResult();
+      return transactionResult;
+    },
+    onSuccess: () => {
+      toast.success("Successfully minted Src20!");
+    },
+    onError: (err) => {
+      console.error("Error minting Src20:", err);
+      toast.error(err.message);
+    },
+  });
+
+  return mutation;
+};