merge into main

apps/claim-vesting/public/manifest.json

@@ -18,15 +18,15 @@
     }
   ],
   "orientation": "portrait",
-  "name": "Claim Vesting Hook",
-  "short_name": "Claim Vesting",
+  "name": "Claim LlamaPay Vesting Hook",
+  "short_name": "Claim LlamaPay Vesting",
   "start_url": ".",
   "theme_color": "#ffffff",
   "cow_hook_dapp": {
-    "id": "177eda1e6d1d89f1777d60387f06e1fdcb2c11baad38c6f06c8a3404ebc7e03a",
-    "name": "Claim Vesting",
-    "descriptionShort": "Claim your vesting contract funds",
-    "description": "The Claim Vesting Hook is a powerful and user-friendly feature designed to streamline the process of claiming funds from LlamaPay vesting contracts. This tool empowers users to easily access and manage their vested tokens, ensuring a smooth and efficient experience in handling time-locked assets.",
+    "id": "5d2c081d11a01ca0b76e2fafbc0d3c62a4c9945ce404706fb1e49e826c0f99eb",
+    "name": "Claim LlamaPay Vesting",
+    "descriptionShort": "Claim your LlamaPay vesting contract funds",
+    "description": "The Claim LlampaPay Vesting Hook is a powerful and user-friendly feature designed to streamline the process of claiming funds from LlamaPay vesting contracts. This tool empowers users to easily access and manage their vested tokens, ensuring a smooth and efficient experience in handling time-locked assets.",
     "version": "0.0.1",
     "website": "https://github.com/bleu/cow-hooks-dapps",
     "image": "https://cow-hooks-dapps-claim-vesting.vercel.app/llama-pay-icon.png",

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

@@ -1,6 +1,6 @@
 "use client";
 
-import "#/global.css";
+import "@bleu/cow-hooks-ui/global.css";
 import Head from "next/head";
 import type * as React from "react";
 

apps/claim-vesting/tailwind.config.js

@@ -1,5 +1,6 @@
 /* eslint-env node */
 /* eslint-disable @typescript-eslint/no-var-requires */
+const commonConfig = require("../../packages/cow-hooks-ui/tailwind.config.base.js");
 
 /** @type {import("tailwindcss").Config} */
 module.exports = {
@@ -8,102 +9,6 @@ module.exports = {
     "./node_modules/@bleu/ui/dist/**/*",
     "../../packages/cow-hooks-ui/src/**/*.{js,ts,jsx,tsx}",
   ],
-  theme: {
-    extend: {
-      colors: {
-        // V3
-        "color-primary": "var(--cow-color-primary)",
-        "color-primary-lighter": "var(--cow-color-primary-lighter)",
-        "color-primary-darker": "var(--cow-color-primary-darker)",
-        "color-primary-darkest": "var(--cow-color-primary-darkest)",
-        "color-primary-paper": "var(--cow-color-primary-paper)",
-
-        "color-secondary": "var(--cow-color-secondary)",
-
-        "color-background": "var(--cow-color-background)",
-
-        "color-paper": "var(--cow-color-paper)",
-        "color-paper-darker": "var(--cow-color-paper-darker)",
-        "color-paper-darkest": "var(--cow-color-paper-darkest)",
-
-        "box-shadow": "var(--cow-box-shadow)",
-        "box-shadow-2": "var(--cow-box-shadow-2)",
-
-        "color-text": "var(--cow-color-text)",
-        "color-text-paper": "var(--cow-color-text-paper)",
-
-        "color-secondary-text": "var(--cow-color-secondary-text)",
-        "color-disabled-text": "var(--cow-color-disabled-text)",
-        "color-button-text": "var(--cow-color-button-text)",
-        "color-button-text-disabled": "var(--cow-color-button-text-disabled)",
-
-        "color-dark-image-paper": "var(--cow-color-dark-image-paper)",
-        "color-dark-image-paper-text": "var(--cow-color-dark-image-paper-text)",
-
-        "color-warning": "var(--cow-color-warning)",
-        "color-warning-bg": "var(--cow-color-warning-bg)",
-        "color-warning-text": "var(--cow-color-warning-text)",
-
-        "color-success": "var(--cow-color-success)",
-        "color-success-bg": "var(--cow-color-success-bg)",
-        "color-success-text": "var(--cow-color-success-text)",
-
-        "color-info": "var(--cow-color-info)",
-        "color-info-bg": "var(--cow-color-info-bg)",
-        "color-info-text": "var(--cow-color-info-text)",
-
-        "color-alert": "var(--cow-color-alert)",
-        "color-alert-bg": "var(--cow-color-alert-bg)",
-        "color-alert-text": "var(--cow-color-alert-text)",
-        "color-alert-text-darker": "var(--cow-color-alert-text-darker)",
-
-        "color-danger": "var(--cow-color-danger)",
-        "color-danger-bg": "var(--cow-color-danger-bg)",
-        "color-danger-text": "var(--cow-color-danger-text)",
-
-        // ================================================================================
-
-        // Badge
-        "color-badge-yellow-bg": "var(--cow-color-badge-yellow-bg)",
-        "color-badge-yellow-text": "var(--cow-color-badge-yellow-text)",
-
-        // Colors
-        "color-white": "var(--cow-color-white)",
-        "color-blue": "var(--cow-color-blue)",
-        "color-yellow-light": "var(--cow-color-yellow-light)",
-        "color-green": "var(--cow-color-green)",
-        "color-red": "var(--cow-color-red)",
-
-        // Elements
-        "color-border": "var(--cow-color-border)",
-        "color-container-bg-01": "var(--cow-container-bg-01)",
-        "color-container-bg-02": "var(--cow-container-bg-02)",
-
-        // Misc
-        "modal-backdrop": "var(--cow-modal-backdrop)",
-        "border-radius-normal": "var(--cow-border-radius-normal)",
-        "border-radius-large": "var(--cow-border-radius-large)",
-        "padding-normal": "var(--cow-padding-normal)",
-
-        // Icons
-        "icon-color-normal": "var(--cow-icon-color-normal)",
-
-        // States
-
-        // Text
-        "color-text1": "var(--cow-color-text1)",
-        "color-text1-inactive": "var(--cow-color-text1-inactive)",
-        "color-text2": "var(--cow-color-text2)",
-        "color-link": "var(--cow-color-link)",
-
-        // Animation
-        "animation-duration": "var(--cow-animation-duration)",
-        "animation-duration-slow": "var(--cow-animation-duration-slow)",
-      },
-      fontFamily: {
-        "inter-sans": '"Inter var", sans-serif',
-      },
-    },
-  },
+  theme: commonConfig.theme,
   plugins: [],
 };

apps/create-vesting/package.json

@@ -12,10 +12,15 @@
     "@bleu/cow-hooks-ui": "workspace:*",
     "@bleu/tsconfig": "workspace:*",
     "@bleu/ui": "0.1.131",
+    "@bleu/utils": "workspace:*",
+    "@cowprotocol/cow-sdk": "^5.5.1",
     "@cowprotocol/hook-dapp-lib": "1.0.0-RC1",
     "@hookform/resolvers": "3.9.0",
     "@radix-ui/react-icons": "1.3.0",
+    "@uniswap/sdk-core": "5.4.0",
+    "@weiroll/weiroll.js": "^0.3.0",
     "babel-plugin-react-compiler": "0.0.0-experimental-6067d4e-20240923",
+    "ethers": "^5.7.2",
     "next": "15.0.0-rc.0",
     "react": "19.0.0-rc-e4953922-20240919",
     "react-dom": "19.0.0-rc-e4953922-20240919",

apps/create-vesting/src/app/layout.tsx

@@ -1,18 +1,24 @@
 "use client";
 
-import "#/global.css";
+import "@bleu/cow-hooks-ui/global.css";
 import Head from "next/head";
 import type * as React from "react";
+import { IFrameContextProvider } from "@bleu/cow-hooks-ui";
+import { TokenAmountTypeProvider } from "#/context/TokenAmountType";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className="h-full">
       <Head>
         <link rel="manifest" href="/manifest.json" />
       </Head>
-      <body className="flex flex-col h-full font-sans font-normal">
-        {children}
-      </body>
+      <IFrameContextProvider>
+        <TokenAmountTypeProvider>
+          <body className="flex flex-col h-full font-sans font-normal">
+            {children}
+          </body>
+        </TokenAmountTypeProvider>
+      </IFrameContextProvider>
     </html>
   );
 }