[TOOL-4651] Dashboard: Show error on invalid token distribution in ERC20 asset creation form

Author: MananTank

apps/dashboard/src/@/components/blocks/distribution-chart.tsx

@@ -10,6 +10,7 @@ type DistributionBarChartProps = {
   segments: Segment[];
   title: string;
 };
+
 export function DistributionBarChart(props: DistributionBarChartProps) {
   const totalPercentage = props.segments.reduce(
     (sum, segment) => sum + segment.percent,
@@ -59,7 +60,13 @@ export function DistributionBarChart(props: DistributionBarChartProps) {
                   backgroundColor: segment.color,
                 }}
               />
-              <p className="text-sm">
+              <p
+                className={cn(
+                  "text-sm",
+                  (segment.percent > 100 || segment.percent < 0) &&
+                    "text-destructive-text",
+                )}
+              >
                 {segment.label}: {segment.percent}%
               </p>
             </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-card.tsx

@@ -15,6 +15,7 @@ export function StepCard(props: {
     | undefined
     | {
         type: "submit";
+        disabled?: boolean;
       }
     | {
         type: "custom";
@@ -56,6 +57,7 @@ export function StepCard(props: {
             variant="default"
             className="gap-2"
             type="submit"
+            disabled={props.nextButton.disabled}
             onClick={() => {
               trackEvent(
                 getStepCardTrackingData({

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-distribution.tsx

@@ -25,6 +25,7 @@ export function TokenDistributionFieldset(props: {
   client: ThirdwebClient;
 }) {
   const { form } = props;
+  const distributionError = getDistributionError(form);
 
   return (
     <Form {...form}>
@@ -37,6 +38,7 @@ export function TokenDistributionFieldset(props: {
           }}
           nextButton={{
             type: "submit",
+            disabled: !!distributionError,
           }}
         >
           <div>
@@ -55,9 +57,17 @@ export function TokenDistributionFieldset(props: {
                 </div>
               </FormFieldSetup>
 
-              <TokenDistributionBarChart
-                distributionFormValues={form.watch()}
-              />
+              <div className="flex flex-col gap-3">
+                <TokenDistributionBarChart
+                  distributionFormValues={form.watch()}
+                />
+
+                {distributionError && (
+                  <div className="text-destructive-text text-sm">
+                    {distributionError}
+                  </div>
+                )}
+              </div>
             </div>
 
             <TokenAirdropSection form={form} client={props.client} />
@@ -73,6 +83,36 @@ export function TokenDistributionFieldset(props: {
   );
 }
 
+function getDistributionError(form: TokenDistributionForm) {
+  const supply = Number(form.watch("supply"));
+  const totalAirdrop = form.watch("airdropAddresses").reduce((sum, addr) => {
+    return sum + SafeNumber(addr.quantity);
+  }, 0);
+
+  if (totalAirdrop > supply) {
+    return "Total airdrop quantity exceeds total supply";
+  }
+
+  const saleSupplyPercentage = SafeNumber(
+    form.watch("saleAllocationPercentage"),
+  );
+
+  const saleSupply = (saleSupplyPercentage / 100) * supply;
+  const ownerSupply = Math.max(supply - totalAirdrop - saleSupply, 0);
+  const totalSumOfSupply = totalAirdrop + saleSupply + ownerSupply;
+
+  if (totalSumOfSupply > supply) {
+    return "Token distribution exceeds total supply";
+  }
+
+  return undefined;
+}
+
+function SafeNumber(value: string) {
+  const num = Number(value);
+  return Number.isNaN(num) ? 0 : num;
+}
+
 export function TokenDistributionBarChart(props: {
   distributionFormValues: TokenDistributionFormValues;
 }) {
@@ -86,7 +126,8 @@ export function TokenDistributionBarChart(props: {
   const salePercentage = Number(
     props.distributionFormValues.saleAllocationPercentage,
   );
-  const ownerPercentage = 100 - airdropPercentage - salePercentage;
+
+  const ownerPercentage = Math.max(100 - airdropPercentage - salePercentage, 0);
 
   const tokenAllocations: Segment[] = [
     {