[TOOL-2890] Dashboard: Fix spelling issues

apps/dashboard/src/@/api/team.ts

@@ -64,7 +64,7 @@ export async function getTeams() {
   return null;
 }
 
-type TeamNebulWaitList = {
+type TeamNebulaWaitList = {
   onWaitlist: boolean;
   createdAt: null | string;
 };
@@ -86,7 +86,7 @@ export async function getTeamNebulaWaitList(teamSlug: string) {
   );
 
   if (res.ok) {
-    return (await res.json()).result as TeamNebulWaitList;
+    return (await res.json()).result as TeamNebulaWaitList;
   }
 
   return null;

apps/dashboard/src/@/components/ui/button.stories.tsx

@@ -20,7 +20,7 @@ export const AllVariants: Story = {
 
 function Component() {
   return (
-    <div className="flex min-h-screen flex-col gap-6 bg-background p-6 text-foregroun">
+    <div className="flex min-h-screen flex-col gap-6 bg-background p-6 text-foreground">
       <Variants size="default" />
       <Variants size="sm" />
       <Variants size="icon" />
@@ -58,7 +58,7 @@ function Variants(props: {
           {props.size === "icon" ? (
             <StarIcon className="size-4" />
           ) : (
-            "Desctructive"
+            "Destructive"
           )}
         </Button>
       </div>

apps/dashboard/src/@/components/ui/button.tsx

@@ -15,7 +15,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive hover:bg-destructive/90 text-semibold text-destructive-foreground ",
         outline:
-          "border border-input bg-transaprent hover:bg-accent hover:text-accent-foreground text-semibold",
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground text-semibold",
         secondary:
           "bg-secondary hover:bg-secondary/80 text-semibold text-secondary-foreground ",
         ghost: "hover:bg-accent text-semibold hover:text-accent-foreground",

apps/dashboard/src/@/components/ui/select.stories.tsx

@@ -31,7 +31,7 @@ function randomName() {
 
 function Component() {
   return (
-    <div className="flex min-h-screen flex-col gap-10 bg-background p-6 text-foregroun">
+    <div className="flex min-h-screen flex-col gap-10 bg-background p-6 text-foreground">
       <BadgeContainer label="5 items, no placeholder, no label, value filled">
         <SelectDemo listItems={5} selectFirst />
       </BadgeContainer>

apps/dashboard/src/@/constants/thirdweb.client.ts

@@ -32,7 +32,7 @@ export function useThirdwebClient(jwt?: string) {
   });
 
   return useMemo(
-    // prfer jwt from props over the one from the token query if it exists
+    // prefer jwt from props over the one from the token query if it exists
     () => getThirdwebClient(jwt || query.data),
     [jwt, query.data],
   );

apps/dashboard/src/@/lib/DashboardRouter.tsx

@@ -100,7 +100,7 @@ function DashboardRouterTopProgressBarInner() {
     }
 
     async function startEffect() {
-      // if the loading state remains for atleast 500ms start the progress bar
+      // if the loading state remains for at least 500ms start the progress bar
       await wait(500);
       if (isMounted) {
         updateProgressBar(0, 100);

apps/dashboard/src/@/styles/globals.css

@@ -143,7 +143,7 @@ body {
   min-height: 100%;
 }
 
-/* Fix colors on autofilled inputs  */
+/* Fix colors on auto-filled inputs  */
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,

apps/dashboard/src/@3rdweb-sdk/react/hooks/useActivity.ts

@@ -22,7 +22,7 @@ export interface InternalTransaction {
 export function useActivity(contract: ThirdwebContract, autoUpdate?: boolean) {
   const abiQuery = useResolveContractAbi(contract);
 
-  // Get all the PreprareEvents from the contract abis
+  // Get all the Prepare Events from the contract abis
   const events: PreparedEvent<AbiEvent>[] = useMemo(() => {
     const eventsItems = (abiQuery.data || []).filter((o) => o.type === "event");
     const eventSignatures = eventsItems.map((event) => formatAbiItem(event));

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/add-chain-to-wallet.tsx

@@ -47,7 +47,7 @@ export const AddChainToWallet: React.FC<AddChainToWalletProps> = (props) => {
         className="w-full gap-2"
         variant="outline"
         onClick={() => {
-          // Connct directly to this chain
+          // Connect directly to this chain
           if (!account) {
             return customConnectModal({ chain: props.chain });
           }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/FaucetSection.tsx

@@ -12,7 +12,7 @@ export async function FaucetSection(props: {
 }) {
   const { chain, twAccount } = props;
 
-  // Check eligibilty.
+  // Check eligibility.
   const sanitizedChainName = chain.name.replace("Mainnet", "").trim();
   const amountToGive = getFaucetClaimAmount(props.chain.chainId);
 

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx

@@ -162,7 +162,7 @@ export default async function ChainPageLayout(props: {
             {/* Gas Sponsored badge - Mobile */}
             {chainMetadata?.gasSponsored && (
               <div className="flex md:hidden">
-                <GasSponseredBadge />
+                <GasSponsoredBadge />
               </div>
             )}
 
@@ -182,7 +182,7 @@ export default async function ChainPageLayout(props: {
               {/* Gas Sponsored badge - Desktop */}
               {chainMetadata?.gasSponsored && (
                 <div className="hidden md:block">
-                  <GasSponseredBadge />
+                  <GasSponsoredBadge />
                 </div>
               )}
             </div>
@@ -221,7 +221,7 @@ export default async function ChainPageLayout(props: {
   );
 }
 
-function GasSponseredBadge() {
+function GasSponsoredBadge() {
   return (
     <div className="flex items-center gap-2 rounded-full bg-[hsla(335,57%,51%,0.2)] px-2.5 py-1 text-[hsl(334,81.12%,69.65%)]">
       <TicketCheckIcon className="size-4" />

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-table.tsx

@@ -51,7 +51,7 @@ export const AccountsTable: React.FC<AccountsTableProps> = ({ contract }) => {
   const totalAccountsQuery = useReadContract(totalAccounts, { contract });
 
   // the total size should never be more than max int size (that would be hella wallets!)
-  // so converting the totalAccounts to a nunber should be safe here
+  // so converting the totalAccounts to a number should be safe here
   const totalAccountsNum = useMemo(
     () => Number(totalAccountsQuery.data || 0),
     [totalAccountsQuery.data],

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx

@@ -52,7 +52,7 @@ export default async function Layout(props: {
   // check if the contract exists
   const isValidContract = await isContractDeployed(contract).catch(() => false);
   if (!isValidContract) {
-    // TODO - replace 404 with a better page to upsale deploy or other thirdweb products
+    // TODO - replace 404 with a better page to upsell deploy or other thirdweb products
     notFound();
   }
   const contractPageMetadata = await getContractPageMetadata(contract);

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/AdvancedNFTMetadataFormGroup.tsx

@@ -82,7 +82,7 @@ export function AdvancedNFTMetadataFormGroup<
               <Input {...field} />
             </FormControl>
             <FormDescription>
-              If you already have your NFT Animation URL preuploaded, you can
+              If you already have your NFT Animation URL pre-uploaded, you can
               set the URL or URI here.
             </FormDescription>
             <FormMessage />

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/claim-tab.tsx

@@ -59,7 +59,7 @@ const ClaimTabERC1155: React.FC<ClaimTabProps> = ({
           if (approveTx) {
             const approvalPromise = sendAndConfirmTx.mutateAsync(approveTx);
             toast.promise(approvalPromise, {
-              success: "Approved succesfully",
+              success: "Approved successfully",
               error: "Failed to approve ERC20",
             });
             await approvalPromise;

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx

@@ -361,7 +361,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
               <FormLabel>Image URL</FormLabel>
               <Input max="6" {...register("customImage")} />
               <FormHelperText>
-                If you already have your NFT image preuploaded, you can set the
+                If you already have your NFT image pre-uploaded, you can set the
                 URL or URI here.
               </FormHelperText>
               <FormErrorMessage>
@@ -372,7 +372,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
               <FormLabel>Animation URL</FormLabel>
               <Input max="6" {...register("customAnimationUrl")} />
               <FormHelperText>
-                If you already have your NFT Animation URL preuploaded, you can
+                If you already have your NFT Animation URL pre-uploaded, you can
                 set the URL or URI here.
               </FormHelperText>
               <FormErrorMessage>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx

@@ -294,7 +294,7 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
                 <FormLabel>Image URL</FormLabel>
                 <Input max="6" {...register("customImage")} />
                 <FormHelperText>
-                  If you already have your NFT image preuploaded, you can set
+                  If you already have your NFT image pre-uploaded, you can set
                   the URL or URI here.
                 </FormHelperText>
                 <FormErrorMessage>
@@ -305,7 +305,7 @@ export const LazyMintNftForm: React.FC<LazyMintNftFormParams> = ({
                 <FormLabel>Animation URL</FormLabel>
                 <Input max="6" {...register("customAnimationUrl")} />
                 <FormHelperText>
-                  If you already have your NFT Animation URL preuploaded, you
+                  If you already have your NFT Animation URL pre-uploaded, you
                   can set the URL or URI here.
                 </FormHelperText>
                 <FormErrorMessage>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-form.tsx

@@ -317,7 +317,7 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
                 <FormLabel>Image URL</FormLabel>
                 <Input max="6" {...register("customImage")} />
                 <FormHelperText>
-                  If you already have your NFT image preuploaded, you can set
+                  If you already have your NFT image pre-uploaded, you can set
                   the URL or URI here.
                 </FormHelperText>
                 <FormErrorMessage>
@@ -328,7 +328,7 @@ export const NFTMintForm: React.FC<NFTMintForm> = ({
                 <FormLabel>Animation URL</FormLabel>
                 <Input max="6" {...register("customAnimationUrl")} />
                 <FormHelperText>
-                  If you already have your NFT Animation URL preuploaded, you
+                  If you already have your NFT Animation URL pre-uploaded, you
                   can set the URL or URI here.
                 </FormHelperText>
                 <FormErrorMessage>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx

@@ -247,7 +247,7 @@ export const SharedMetadataForm: React.FC<{
                 <FormLabel>Image URL</FormLabel>
                 <Input max="6" {...register("customImage")} />
                 <FormHelperText>
-                  If you already have your NFT image preuploaded, you can set
+                  If you already have your NFT image pre-uploaded, you can set
                   the URL or URI here.
                 </FormHelperText>
                 <FormErrorMessage>
@@ -258,7 +258,7 @@ export const SharedMetadataForm: React.FC<{
                 <FormLabel>Animation URL</FormLabel>
                 <Input max="6" {...register("customAnimationUrl")} />
                 <FormHelperText>
-                  If you already have your NFT Animation URL preuploaded, you
+                  If you already have your NFT Animation URL pre-uploaded, you
                   can set the URL or URI here.
                 </FormHelperText>
                 <FormErrorMessage>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/delegate-button.tsx

@@ -30,7 +30,7 @@ export const DelegateButton: React.FC<VoteButtonProps> = ({
       enabled: !!account,
     },
   });
-  const delgateMutation = useDelegateMutation();
+  const delegateMutation = useDelegateMutation();
 
   if (tokensDelegatedQuery.data || tokensDelegatedQuery.isPending) {
     return null;
@@ -44,7 +44,7 @@ export const DelegateButton: React.FC<VoteButtonProps> = ({
         transactionCount={1}
         onClick={() => {
           toast.promise(
-            delgateMutation.mutateAsync(contract, {
+            delegateMutation.mutateAsync(contract, {
               onSuccess: () => {
                 trackEvent({
                   category: "vote",
@@ -68,7 +68,7 @@ export const DelegateButton: React.FC<VoteButtonProps> = ({
             },
           );
         }}
-        isPending={delgateMutation.isPending}
+        isPending={delegateMutation.isPending}
       >
         Delegate Tokens
       </TransactionButton>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/ContractSourcesPage.tsx

@@ -72,7 +72,7 @@ interface ConnectorModalProps {
 const VerifyContractModal: React.FC<
   ConnectorModalProps & { resetSignal: number }
 > = ({ isOpen, onClose, contract, resetSignal }) => {
-  const veryifyQuery = useQuery({
+  const verifyQuery = useQuery({
     queryKey: [
       "verify-contract",
       contract.chain.id,
@@ -101,23 +101,23 @@ const VerifyContractModal: React.FC<
         <Divider mb={4} />
         <ModalBody py={4}>
           <Flex flexDir="column">
-            {veryifyQuery.isPending && (
+            {verifyQuery.isPending && (
               <Flex gap={2} align="center">
                 <Spinner color="purple.500" size="sm" />
                 <Heading size="label.md">Verifying...</Heading>
               </Flex>
             )}
-            {veryifyQuery?.error ? (
+            {verifyQuery?.error ? (
               <Flex gap={2} align="center">
                 <CircleXIcon className="size-4 text-red-600" />
                 <Heading size="label.md">
-                  {veryifyQuery?.error.toString()}
+                  {verifyQuery?.error.toString()}
                 </Heading>
               </Flex>
             ) : null}
 
-            {veryifyQuery.data?.results
-              ? veryifyQuery.data?.results.map(
+            {verifyQuery.data?.results
+              ? verifyQuery.data?.results.map(
                   (result: VerificationResult, index: number) => (
                     // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
                     <Flex key={index} gap={2} align="center" mb={4}>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/ContractSplitPage.tsx

@@ -110,7 +110,7 @@ export const ContractSplitPage: React.FC<SplitPageProps> = ({
         <Flex gap={4}>
           <DistributeButton
             balances={balances as Balance[]}
-            balancesisPending={
+            balancesIsPending={
               balanceQuery.isPending || nativeBalanceQuery.isPending
             }
             balancesIsError={balanceQuery.isError && nativeBalanceQuery.isError}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/components/distribute-button.tsx

@@ -13,15 +13,15 @@ import type { Balance } from "../ContractSplitPage";
 interface DistributeButtonProps {
   contract: ThirdwebContract;
   balances: Balance[];
-  balancesisPending: boolean;
+  balancesIsPending: boolean;
   balancesIsError: boolean;
   twAccount: Account | undefined;
 }
 
 export const DistributeButton: React.FC<DistributeButtonProps> = ({
   contract,
   balances,
-  balancesisPending,
+  balancesIsPending,
   balancesIsError,
   twAccount,
   ...restButtonProps
@@ -37,13 +37,13 @@ export const DistributeButton: React.FC<DistributeButtonProps> = ({
     ) {
       return 1;
     }
-    if (!validBalances || balancesisPending) {
+    if (!validBalances || balancesIsPending) {
       return 0;
     }
     return validBalances?.filter(
       (b) => b.display_balance !== "0.0" && b.display_balance !== "0",
     ).length;
-  }, [validBalances, balancesisPending]);
+  }, [validBalances, balancesIsPending]);
 
   const mutation = useSplitDistributeFunds(contract);
 

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/transfer-button.tsx

@@ -140,8 +140,8 @@ export const TokenTransferButton: React.FC<TokenTransferButtonProps> = ({
                 },
               });
               toast.promise(promise, {
-                loading: "Transfering tokens",
-                success: "Successfully transfered tokens",
+                loading: "Transferring tokens",
+                success: "Successfully transferred tokens",
                 error: "Failed to transfer tokens",
               });
             })}

apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/filters.tsx

@@ -162,7 +162,7 @@ export const ChainTypeFilter: React.FC<ChainTypeFilterProps> = ({
         </div>
         <div className="flex items-center gap-2">
           <RadioGroupItem value="mainnets" id="mainnets" />
-          <Label htmlFor="mainnest">Mainnets Only</Label>
+          <Label htmlFor="mainnets">Mainnets Only</Label>
         </div>
         <div className="flex items-center gap-2">
           <RadioGroupItem value="testnets" id="testnets" />

apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/view.tsx

@@ -6,11 +6,11 @@ import { Grid2X2Icon, ListIcon } from "lucide-react";
 import { usePathname, useSearchParams } from "next/navigation";
 import { useCallback } from "react";
 
-type hainListViewProps = {
+type ChainListViewProps = {
   activeView: "grid" | "table";
 };
 
-export const ChainListView: React.FC<hainListViewProps> = ({ activeView }) => {
+export const ChainListView: React.FC<ChainListViewProps> = ({ activeView }) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const router = useDashboardRouter();

apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/[version]/page.tsx

@@ -76,7 +76,7 @@ export default async function PublishedContractPage(
       >
         <PublishedActions
           {...params}
-          dispayName={publishedContract.displayName || publishedContract.name}
+          displayName={publishedContract.displayName || publishedContract.name}
         />
       </DeployContractHeader>
       <Separator />