Feat(bex): expose proportional deposit toggle

apps/hub/src/app/pools/[poolId]/deposit/AddLiquidityContent.tsx

@@ -28,6 +28,7 @@ import {
 } from "@bera/shared-ui";
 import { cn } from "@bera/ui";
 import { Button } from "@bera/ui/button";
+import { Switch } from "@bera/ui/switch";
 import { Card, CardContent, CardHeader, CardTitle } from "@bera/ui/card";
 import { Icons } from "@bera/ui/icons";
 import { Address, formatEther } from "viem";
@@ -48,6 +49,7 @@ import { beraToken, wBeraToken } from "@bera/wagmi";
 import { useAddLiquidity } from "./useAddLiquidity";
 import { Alert, AlertDescription, AlertTitle } from "@bera/ui/alert";
 import { Checkbox } from "@bera/ui/checkbox";
+import AddLiquidityError from "./AddLiquidityError";
 
 interface IAddLiquidityContent {
   poolId: Address;
@@ -298,39 +300,34 @@ export default function AddLiquidityContent({ poolId }: IAddLiquidityContent) {
                 );
               })}
           </TokenList>
-          {process.env.NODE_ENV === "development" && (
-            <div className="flex items-center gap-2">
-              <Checkbox
-                id="balance-amounts"
-                checked={type === AddLiquidityKind.Proportional}
-                onClick={() =>
-                  setType((t) =>
-                    t === AddLiquidityKind.Proportional
-                      ? AddLiquidityKind.Unbalanced
-                      : AddLiquidityKind.Proportional,
-                  )
-                }
-              />
-              <label htmlFor="balance-amounts">Balance amounts</label>
-            </div>
-          )}
+
+          <div className="flex items-center gap-2">
+            <Switch
+              size="sm"
+              checked={type === AddLiquidityKind.Proportional}
+              onClick={() =>
+                setType((t) =>
+                  t === AddLiquidityKind.Proportional
+                    ? AddLiquidityKind.Unbalanced
+                    : AddLiquidityKind.Proportional,
+                )
+              }
+              id="balance-amounts"
+            />
+            <label
+              htmlFor="balance-amounts"
+              className="text-sm text-muted-foreground"
+            >
+              Keep amounts balanced
+            </label>
+          </div>
+
           <AddLiquidityDetails
             totalValue={totalValue?.toString()}
             priceImpact={priceImpact}
             exchangeRate="Details"
           />
-          {error && (
-            <Alert variant="destructive">
-              <AlertTitle>
-                <Icons.tooltip className="mt-[-4px] inline h-4 w-4" /> Error
-              </AlertTitle>
-              <AlertDescription className="text-xs">
-                {error.balanceError
-                  ? `Balancer error ${error.balanceError}`
-                  : error.message}
-              </AlertDescription>
-            </Alert>
-          )}
+          <AddLiquidityError error={error} transactionType={type} />
           {/* {error && (
             <Alert variant="destructive">
               <AlertTitle>Error</AlertTitle>

apps/hub/src/app/pools/[poolId]/deposit/AddLiquidityError.tsx

@@ -0,0 +1,42 @@
+import { Alert, AlertDescription, AlertTitle } from "@bera/ui/alert";
+import { Icons } from "@bera/ui/icons";
+import { AddLiquidityError as AddLiquidityErrorType } from "./useAddLiquidity";
+import { AddLiquidityKind } from "@berachain-foundation/berancer-sdk";
+
+export default function AddLiquidityError({
+  error,
+  transactionType,
+}: {
+  error: AddLiquidityErrorType | undefined;
+  transactionType: AddLiquidityKind;
+}) {
+  if (!error) {
+    return null;
+  }
+
+  const isUnbalanced = transactionType === AddLiquidityKind.Unbalanced;
+
+  const isUnbalanceAndTooMuch =
+    isUnbalanced && error.balanceError === "BAL#001";
+
+  return (
+    <Alert variant="destructive">
+      <AlertTitle className="flex items-center gap-1">
+        <Icons.tooltip className=" inline h-4 w-4" /> Error
+      </AlertTitle>
+      <AlertDescription className="text-xs">
+        {isUnbalanceAndTooMuch ? (
+          <span>
+            Balancer error: {error.balanceError} SUB_OVERFLOW.
+            <br />
+            Try to reduce the amount of tokens or use balanced mode.
+          </span>
+        ) : error.balanceError ? (
+          `Balancer error ${error.balanceError}`
+        ) : (
+          error.message
+        )}
+      </AlertDescription>
+    </Alert>
+  );
+}

apps/hub/src/app/pools/[poolId]/deposit/useAddLiquidity.ts

@@ -17,6 +17,12 @@ export interface UseAddLiquidityArgs {
   wethIsEth: boolean;
 }
 
+export type AddLiquidityError = {
+  error?: unknown;
+  balanceError?: `BAL#${string}`;
+  message?: string;
+};
+
 export const useAddLiquidity = ({ pool, wethIsEth }: UseAddLiquidityArgs) => {
   const [type, setType] = useState<AddLiquidityKind>(
     AddLiquidityKind.Unbalanced,
@@ -30,11 +36,7 @@ export const useAddLiquidity = ({ pool, wethIsEth }: UseAddLiquidityArgs) => {
   >([]);
 
   const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<{
-    error?: unknown;
-    balanceError?: string;
-    message?: string;
-  }>();
+  const [error, setError] = useState<AddLiquidityError>();
 
   const [priceImpact, setPriceImpact] = useState<PriceImpactAmount>();
 
@@ -131,7 +133,7 @@ export const useAddLiquidity = ({ pool, wethIsEth }: UseAddLiquidityArgs) => {
         const e = error as ContractFunctionExecutionError;
         setError({
           error: e,
-          balanceError: e?.shortMessage?.split("\n").at(1),
+          balanceError: e?.shortMessage?.split("\n").at(1) as `BAL#${string}`,
           message: e.shortMessage,
         });
       } else {

packages/ui/src/switch.tsx

@@ -4,24 +4,57 @@ import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 
 import { cn } from "./utils/cn";
+import { VariantProps, cva } from "class-variance-authority";
+
+const rootVariants = cva(
+  [
+    "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "data-[state=checked]:bg-positive data-[state=unchecked]:bg-secondary-foreground",
+  ],
+  {
+    variants: {
+      size: {
+        md: "h-[24px] w-[44px]",
+        sm: "h-[16px] w-[28px]",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+const thumbVariants = cva(
+  [
+    "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
+    "data-[state=unchecked]:translate-x-0",
+  ],
+  {
+    variants: {
+      size: {
+        md: "h-5 w-5 data-[state=checked]:translate-x-5",
+        sm: "h-3 w-3 data-[state=checked]:translate-x-3",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> &
+    VariantProps<typeof rootVariants>
+>(({ className, size, ...props }, ref) => (
   <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-positive data-[state=unchecked]:bg-secondary-foreground",
-      className,
-    )}
+    className={rootVariants({ className, size })}
     {...props}
     ref={ref}
   >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
-      )}
-    />
+    <SwitchPrimitives.Thumb className={thumbVariants({ size })} />
   </SwitchPrimitives.Root>
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;