Update

thirdweb-dev · Sep 20, 2024 · 74c47df · 74c47df
2 parents 2bb558b + 8fa6227
commit 74c47df
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 167 deletions.
diff --git a/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-button.tsx b/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-button.tsx
@@ -3,10 +3,10 @@ import {
   SheetContent,
   SheetHeader,
   SheetTitle,
+  SheetTrigger,
 } from "@/components/ui/sheet";
-import { Icon } from "@chakra-ui/react";
+import { Droplet } from "lucide-react";
 import { useState } from "react";
-import { FiDroplet } from "react-icons/fi";
 import type { ThirdwebContract } from "thirdweb";
 import { balanceOf } from "thirdweb/extensions/erc20";
 import { useActiveAccount, useReadContract } from "thirdweb/react";
@@ -33,24 +33,23 @@ export const TokenAirdropButton: React.FC<TokenAirdropButtonProps> = ({
   const [open, setOpen] = useState(false);
 
   return (
-    <>
-      <Sheet open={open} onOpenChange={setOpen}>
-        <SheetContent className="z-[10000] lg:w-[700px] sm:w-[540px] sm:max-w-[90%]">
-          <SheetHeader>
-            <SheetTitle>Aidrop tokens</SheetTitle>
-          </SheetHeader>
-          <TokenAirdropForm contract={contract} />
-        </SheetContent>
-      </Sheet>
-      <Button
-        colorScheme="primary"
-        leftIcon={<Icon as={FiDroplet} />}
-        {...restButtonProps}
-        onClick={() => setOpen(true)}
-        isDisabled={!hasBalance}
-      >
-        Airdrop
-      </Button>
-    </>
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger>
+        <Button
+          colorScheme="primary"
+          leftIcon={<Droplet size={16} />}
+          {...restButtonProps}
+          isDisabled={!hasBalance}
+        >
+          Airdrop
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="z-[10000] lg:w-[700px] sm:w-[540px] sm:max-w-[90%]">
+        <SheetHeader>
+          <SheetTitle>Aidrop tokens</SheetTitle>
+        </SheetHeader>
+        <TokenAirdropForm contract={contract} />
+      </SheetContent>
+    </Sheet>
   );
 };
diff --git a/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-form.tsx b/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-form.tsx
@@ -1,4 +1,4 @@
-import { Flex, Icon, Stack } from "@chakra-ui/react";
+import { Icon, Stack } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
@@ -30,15 +30,12 @@ export const TokenAirdropForm: React.FC<TokenAirdropFormProps> = ({
   });
   const trackEvent = useTrack();
   const sendTransaction = useSendAndConfirmTransaction();
-
   const { onSuccess, onError } = useTxNotifications(
     "Airdrop successful",
     "Error transferring",
     contract,
   );
-
   const addresses = watch("addresses");
-
   const [airdropFormOpen, setAirdropFormOpen] = useState(false);
 
   return (
@@ -100,7 +97,7 @@ export const TokenAirdropForm: React.FC<TokenAirdropFormProps> = ({
                 }
               />
             ) : (
-              <Flex direction={{ base: "column", md: "row" }} gap={4}>
+              <div className="flex flex-col md:flex-row gap-4">
                 <Button
                   colorScheme="primary"
                   borderRadius="md"
@@ -110,24 +107,16 @@ export const TokenAirdropForm: React.FC<TokenAirdropFormProps> = ({
                   Upload addresses
                 </Button>
 
-                <Flex
-                  gap={2}
-                  direction="row"
-                  align="center"
-                  justify="center"
-                  color={addresses.length === 0 ? "orange.500" : "green.500"}
-                >
-                  {addresses.length > 0 && (
-                    <>
-                      <Icon as={BsCircleFill} boxSize={2} />
-                      <Text size="body.sm" color="inherit">
-                        <strong>{addresses.length} addresses</strong> ready to
-                        be airdropped
-                      </Text>
-                    </>
-                  )}
-                </Flex>
-              </Flex>
+                {addresses.length > 0 && (
+                  <div className="gap-2 flex flex-row items-center justify-center text-green-500">
+                    <Icon as={BsCircleFill} boxSize={2} />
+                    <Text size="body.sm" color="inherit">
+                      <strong>{addresses.length} addresses</strong> ready to be
+                      airdropped
+                    </Text>
+                  </div>
+                )}
+              </div>
             )}
           </Stack>
           {!airdropFormOpen && (