chore: move Spinner, WaitingSignature and SignatureSteps from withdra…

…w-pool to cow-hooks-ui

apps/withdraw-pool/src/app/page.tsx

@@ -14,7 +14,7 @@ import { useGetHookInfo } from "#/hooks/useGetHookInfo";
 import { useIFrameContext } from "@bleu/cow-hooks-ui";
 import { useUserPoolContext } from "#/context/userPools";
 import { useRouter } from "next/navigation";
-import { Spinner } from "#/components/Spinner";
+import { Spinner } from "@bleu/cow-hooks-ui";
 
 export default function Page() {
   const { context, setHookInfo } = useIFrameContext();

apps/withdraw-pool/src/app/signing/page.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import { SignatureSteps } from "#/components/SignaturesSteps";
-import { WaitingSignature } from "#/components/WaitingSignature";
-import { useIFrameContext } from "@bleu/cow-hooks-ui";
+import {
+  useIFrameContext,
+  WaitingSignature,
+  SignatureSteps,
+} from "@bleu/cow-hooks-ui";
 import {
   BaseTransaction,
   useCowShedSignature,

apps/withdraw-pool/src/types.ts

@@ -43,13 +43,6 @@ export interface IPoolBalance {
   fiatAmount: number;
 }
 
-export interface SignatureStepsProps {
-  callback: () => Promise<void>;
-  label: string;
-  description: string;
-  id: string;
-}
-
 export interface IHooksInfo {
   txs: BaseTransaction[];
   permitData: {

packages/cow-hooks-ui/package.json

@@ -29,6 +29,7 @@
     "autoprefixer": "^10.4.20",
     "next": "15.0.0-rc.0",
     "postcss": "^8.4.47",
+    "swr": "2.2.5",
     "tailwindcss": "^3.4.13",
     "typescript": "5.6.2"
   },

packages/cow-hooks-ui/src/index.tsx

@@ -8,6 +8,9 @@ export * from "./ui/InputBase";
 export * from "./ui/TooltipBase";
 export * from "./ui/PeriodWithScaleInput";
 export * from "./ui/TokenAmountInput";
+export * from "./ui/Spinner";
+export * from "./ui/SignaturesSteps";
+export * from "./ui/WaitingSignature";
 export * from "./hooks/cowShed";
 export * from "./hooks/tokenAllowance";
 export * from "./hooks/useSubmitHook";

packages/cow-hooks-ui/src/types.ts

@@ -22,3 +22,10 @@ export interface HookDappContextAdjusted extends HookDappContext {
   account?: Address;
   chainId: SupportedChainId;
 }
+
+export interface SignatureStepsProps {
+  callback: () => Promise<void>;
+  label: string;
+  description: string;
+  id: string;
+}

packages/cow-hooks-ui/src/ui/PeriodWithScaleInput.tsx

@@ -61,7 +61,6 @@ export function PeriodWithScaleInput({
       )}
       <div className="flex items-center justify-center w-[160px] h-12 p-2.5 bg-color-paper-darker rounded-xl">
         <Input
-          type="number"
           autoComplete="off"
           className={cn(
             "outline-none text-left w-14 max-h-10 px-2.5 py-0 border-none rounded-l-xl text-base text-color-text-paper bg-inherit [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",

apps/withdraw-pool/src/components/SignaturesSteps.tsx → packages/cow-hooks-ui/src/ui/SignaturesSteps.tsx

@@ -1,4 +1,3 @@
-import { SignatureStepsProps } from "#/types";
 import { CheckIcon } from "@radix-ui/react-icons";
 
 export function SignatureSteps({

packages/cow-hooks-ui/src/ui/TokenAmountInput.tsx

@@ -1,6 +1,8 @@
+import { TokenLogo } from "../TokenLogo";
 import { InfoTooltip } from "./TooltipBase";
 import { cn, Input, Label } from "@bleu/ui";
 import { HTMLProps } from "react";
+import { Token } from "@uniswap/sdk-core";
 import {
   FieldError,
   RegisterOptions,
@@ -11,7 +13,7 @@ import {
 interface IPeriodWithScaleInput
   extends Omit<HTMLProps<HTMLInputElement>, "name"> {
   name: string;
-  tokenSymbol: string;
+  token?: Token | undefined;
   label?: string;
   tooltipText?: string;
   tooltipLink?: string;
@@ -21,7 +23,7 @@ interface IPeriodWithScaleInput
 
 export function TokenAmountInput({
   name,
-  tokenSymbol,
+  token,
   label,
   tooltipText,
   tooltipLink,
@@ -38,19 +40,23 @@ export function TokenAmountInput({
   const errorMessage = error?.message;
 
   return (
-    <div>
+    <div className="w-full">
       {label && (
         <div className="flex flex-row gap-x-2 items-center mb-2">
           <Label className="ml-2 block text-sm">{label}</Label>
           {tooltipText && <InfoTooltip text={tooltipText} link={tooltipLink} />}
           {extraLabelElement}
         </div>
       )}
-      <div className="flex items-center justify-between h-12 py-2.5 px-1.5 bg-color-paper-darker rounded-xl">
-        <div className="w-min h-8 p-2.5 flex items-center justify-start gap-2 rounded-xl text-color-text-paper bg-color-paper">
-          <span>@</span>
-          <span className="m-0 p-0 min-h-fit">{tokenSymbol}</span>
-        </div>
+      <div className="flex items-center justify-between w-full h-12 py-2.5 px-1.5 bg-color-paper-darker rounded-xl">
+        {token && (
+          <div className="w-min h-8 p-2.5 flex items-center justify-start gap-2 rounded-xl text-color-text-paper bg-color-paper">
+            <div className="w-4 h-4">
+              <TokenLogo token={token} height={16} width={16} alt="" />
+            </div>
+            <span className="m-0 p-0 min-h-fit">{token?.symbol}</span>
+          </div>
+        )}
         <Input
           autoComplete="off"
           className={cn(

apps/withdraw-pool/src/components/WaitingSignature.tsx → packages/cow-hooks-ui/src/ui/WaitingSignature.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { SignatureStepsProps } from "#/types";
+import { SignatureStepsProps } from "../types";
 import { Button } from "@bleu/ui";
 import useSWR from "swr";
 import { Spinner } from "./Spinner";
-import { useEffect } from "react";
 
 export function WaitingSignature({
   callback,