wip start withdraw-pool app

.tool-versions

@@ -1 +1 @@
-nodejs 22.9.0
+nodejs 18.17.0

apps/claim-vesting/package.json

@@ -13,7 +13,6 @@
     "lint:fix": "eslint '**/*.{ts,tsx}' --fix"
   },
   "dependencies": {
-    "@bleu/cow-hooks-ui": "workspace:*",
     "@bleu/tsconfig": "workspace:*",
     "@bleu/ui": "git+ssh://[email protected]:bleu/bleu-ui.git#main",
     "babel-plugin-react-compiler": "0.0.0-experimental-6067d4e-20240919",

apps/claim-vesting/public/manifest.json

@@ -5,13 +5,13 @@
   "description": "CoW hook dapp: Omnibridge",
   "icons": [
     {
-      "src": "/android-chrome-192x192.png",
+      "src": "https://cdn-icons-png.flaticon.com/512/3069/3069118.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "any maskable"
     },
     {
-      "src": "/android-chrome-512x512.png",
+      "src": "https://cdn-icons-png.flaticon.com/512/3069/3069118.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "any maskable"

apps/claim-vesting/src/app/page.tsx

@@ -1,5 +1,18 @@
-import { Joana } from "@bleu/cow-hooks-ui";
+"use client";
+
+import { StrictMode, useEffect, useState } from "react";
+import { initCoWHookDapp, HookDappContext } from "@cowprotocol/hook-dapp-lib";
 
 export default function Page() {
-  return <Joana myProp="123" />;
+  const [context, setContext] = useState<HookDappContext | null>(null);
+
+  useEffect(() => {
+    const { actions, provider } = initCoWHookDapp({ onContext: setContext });
+  }, []);
+
+  return (
+    <StrictMode>
+      <p>This is a test</p>
+    </StrictMode>
+  );
 }

apps/withdraw-pool/.gitignore

@@ -0,0 +1,58 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+
+/coverage
+
+# next.js
+
+/.next/
+/out/
+
+# production
+
+/build
+
+# misc
+
+.DS_Store
+\*.pem
+
+# debug
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+
+.env*
+
+# vercel
+
+.vercel
+
+# typescript
+
+\*.tsbuildinfo
+next-env.d.ts
+
+.vscode
+
+# Sentry
+.sentryclirc
+
+.cache/
+
+# Sentry Auth Token
+.sentryclirc
+
+# Sentry Config File
+.sentryclirc

apps/withdraw-pool/lint-staged.config.js

@@ -0,0 +1,24 @@
+// @ts-check
+
+/**
+ * This files overrides the base lint-staged.config.js present in the root directory.
+ * It allows to run eslint based the package specific requirements.
+ * {@link https://github.com/okonet/lint-staged#how-to-use-lint-staged-in-a-multi-package-monorepo}
+ * {@link https://github.com/belgattitude/nextjs-monorepo-example/blob/main/docs/about-lint-staged.md}
+ */
+
+const {
+  concatFilesForPrettier,
+  getEslintFixCmd,
+} = require("../../lint-staged.common.js");
+
+/**
+ * @type {Record<string, (filenames: string[]) => string | string[] | Promise<string | string[]>>}
+ */
+const rules = {
+  "**/*.{json,md,mdx,css,html,yml,yaml,scss}": (filenames) => {
+    return [`yarn biome check --write ${concatFilesForPrettier(filenames)}`];
+  },
+};
+
+module.exports = rules;

apps/withdraw-pool/next.config.js

@@ -0,0 +1,12 @@
+/* eslint-env node */
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+
+/** @type {import('next').NextConfig} */
+const moduleExports = {
+  experimental: {
+    reactCompiler: true,
+  },
+  transpilePackages: ["@bleu/cow-hooks-ui"],
+};
+
+module.exports = moduleExports;

apps/withdraw-pool/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@bleu/withdraw-pool",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "build:prepare:gql": "cd ../../ && pnpm run -C=packages/gql graphql:update-types",
+    "build:prepare": "pnpm npm-run-all -l --parallel 'build:prepare:gql'",
+    "dev": "next dev",
+    "start": "next start",
+    "lint": "eslint '**/*.{ts,tsx}'",
+    "lint:fix": "eslint '**/*.{ts,tsx}' --fix"
+  },
+  "dependencies": {
+    "@bleu/cow-hooks-ui": "workspace:*",
+    "@bleu/tsconfig": "workspace:*",
+    "@bleu/ui": "git+ssh://[email protected]:bleu/bleu-ui.git#main",
+    "@bleu/utils": "workspace:*",
+    "@cowprotocol/hook-dapp-lib": "1.0.0-RC0",
+    "@radix-ui/colors": "^3.0.0",
+    "@uniswap/sdk-core": "5.4.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "date-fns": "^3.3.1",
+    "downshift": "^8.4.0",
+    "ethers": "5.7",
+    "next": "^14.2.12",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "7.53.0",
+    "server-only": "^0.0.1",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7",
+    "tiny-invariant": "^1.3.3",
+    "url": "^0.11.4"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.2",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "14.5.2",
+    "@types/jest": "^29.5.13",
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.3.7",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.20",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.12",
+    "typescript": "5.6.2"
+  }
+}

apps/withdraw-pool/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/withdraw-pool/public/manifest.json

@@ -0,0 +1,37 @@
+{
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "homepage_url": "https://swap.cow.fi",
+  "description": "CoW hook dapp: Omnibridge",
+  "icons": [
+    {
+      "src": "https://cdn-icons-png.flaticon.com/512/3069/3069118.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "https://cdn-icons-png.flaticon.com/512/3069/3069118.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "orientation": "portrait",
+  "name": "Omnibridge hook",
+  "short_name": "Omnibridge hook",
+  "start_url": ".",
+  "theme_color": "#ffffff",
+  "cow_hook_dapp": {
+    "name": "Omnibridge",
+    "descriptionShort": "Bridge from Gnosis Chain to Mainnet",
+    "description": "The Omnibridge can be used to bridge ERC-20 tokens between Ethereum and Gnosis. The first time a token is bridged, a new ERC677 token contract is deployed on GC with an additional suffix to differentiate the token. It will say \"token name on xDai\", as this was the original chain name prior to re-branding. If a token has been bridged previously, the previously deployed contract is used. The requested token amount is minted and sent to the account initiating the transfer (or an alternative receiver account specified by the sender).",
+    "version": "0.0.1",
+    "website": "https://omni.legacy.gnosischain.com",
+    "image": "http://localhost:3000/hook-dapp-omnibridge/apple-touch-icon.png",
+    "conditions": {
+      "position": "post",
+      "smartContractWalletSupported": false
+    }
+  }
+}

apps/withdraw-pool/src/app/global-error.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  /* eslint-disable-next-line no-console */
+  console.error(error);
+
+  return (
+    <html>
+      <body>
+        <h2>Something went wrong!</h2>
+        <button onClick={() => reset()}>Try again</button>
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,13 @@
+import "#/global.css";
+
+import type * as React from "react";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className="h-full">
+      <body className={"flex h-full flex-col font-sans font-normal"}>
+        {children}
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,83 @@
+"use client";
+
+import { StrictMode, useEffect, useMemo, useState } from "react";
+import { initCoWHookDapp, HookDappContext } from "@cowprotocol/hook-dapp-lib";
+import { useUserPools } from "#/hooks/useUserPools";
+import { IMinimalPool } from "#/types";
+import { usePoolUserBalance } from "#/hooks/usePoolUserBalance";
+import { multiplyValueByPct } from "#/utils";
+import { DropdownMenu } from "@bleu/ui";
+
+export default function Page() {
+  const [context, setContext] = useState<HookDappContext | null>(null);
+
+  useEffect(() => {
+    const { actions, provider } = initCoWHookDapp({ onContext: setContext });
+  }, []);
+
+  const pools = useUserPools(context?.account);
+  const [selectedPool, setSelectedPool] = useState<IMinimalPool>();
+  const poolBalances = usePoolUserBalance(selectedPool?.id);
+  const [withdrawPct, setWithdrawPct] = useState<number>(100);
+
+  const poolBalancesAfterWithdraw = useMemo(() => {
+    if (!poolBalances) return [];
+    return poolBalances.map((poolBalance) => ({
+      ...poolBalance,
+      balance: multiplyValueByPct(poolBalance.balance, 100 - withdrawPct),
+      fiatAmount: multiplyValueByPct(poolBalance.fiatAmount, 100 - withdrawPct),
+    }));
+  }, [poolBalances, withdrawPct]);
+
+  const buttonProps = useMemo(() => {
+    if (!context?.account)
+      return { disabled: true, message: "Connect wallet to withdraw" };
+    if (!pools.length)
+      return { disabled: true, message: "No pools to withdraw from" };
+    if (!selectedPool)
+      return { disabled: true, message: "Choose liquidity pool" };
+    if (!withdrawPct) return { disabled: true, message: "Define percentage" };
+    return { disabled: false, message: "Add pre-hook" };
+  }, [context?.account, pools, selectedPool, withdrawPct]);
+
+  return (
+    <div className="size-full flex flex-col gap-2 p-2 justify-center">
+      <DropdownMenu
+        items={pools.map((pool) => ({ value: pool.symbol, id: pool.id }))}
+        text={
+          selectedPool?.symbol || "Choose a pool to remove liquidity from.."
+        }
+        setSelectedItem={({ id }) =>
+          setSelectedPool(pools.find((pool) => pool.id === id))
+        }
+      />
+      {selectedPool && (
+        <>
+          <div>
+            <PoolBalancesPreview
+              label="Current balance"
+              poolBalance={poolBalances}
+            />
+          </div>
+          <div>
+            <Slider
+              value={withdrawPct}
+              setValue={setWithdrawPct}
+              title="Define withdrawal percentage"
+            />
+          </div>
+          <div>
+            <PoolBalancesPreview
+              label="Balance after withdraw"
+              poolBalance={poolBalancesAfterWithdraw}
+              backgroundColor={UI.COLOR_PAPER_DARKER}
+            />
+          </div>
+        </>
+      )}
+      <ButtonPrimary disabled={buttonProps.disabled}>
+        {buttonProps.message}
+      </ButtonPrimary>
+    </div>
+  );
+}

apps/withdraw-pool/src/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/withdraw-pool/src/hooks/usePoolUserBalance.tsx

@@ -0,0 +1,19 @@
+import { Token } from '@uniswap/sdk-core'
+
+import { PoolBalance } from '../types'
+
+export function usePoolUserBalance(poolId?: string): PoolBalance[] {
+  if (!poolId) return []
+  return [
+    {
+      token: new Token(1115511, '0x912ce59144191c1204e64559fe8253a0e49e6548', 18, 'ARB', 'Arbitrum'),
+      fiatAmount: '2765252315984615',
+      balance: '100000000000000000',
+    },
+    {
+      token: new Token(111551, '0x82af49447d8a07e3bd95bd0d56f35241523fbab1', 18, 'WETH', 'Wrapped Ether'),
+      fiatAmount: '2765252315984615',
+      balance: '100000000000000000',
+    },
+  ]
+}