feat(evm): swap and supply

.changeset/bumpy-words-learn.md

@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": patch
+---
+
+fix rocket illustration resolution

.changeset/chatty-geese-float.md

@@ -0,0 +1,8 @@
+---
+"@venusprotocol/chains": minor
+"@venusprotocol/landing": minor
+"@venusprotocol/ui": minor
+"@venusprotocol/evm": minor
+---
+
+tailwind css upgrade to v4

.changeset/fancy-lines-raise.md

@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": patch
+---
+
+always show user assets only filter

apps/evm/package.json

@@ -41,14 +41,14 @@
     "@rhinestone/module-sdk": "0.2.7",
     "@sentry/react": "^10.19.0",
     "@sentry/vite-plugin": "^4.0.1",
+    "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-query": "^5.48.0",
     "@venusprotocol/chains": "*",
     "@venusprotocol/ui": "*",
     "@wagmi/core": "^2.16.4",
     "@yornaath/batshit": "^0.12.0",
     "bignumber.js": "^9.1.1",
     "buffer": "^6.0.3",
-    "clsx": "^2.0.0",
     "compare-versions": "^6.1.0",
     "connectkit": "^1.8.2",
     "copy-to-clipboard": "^3.3.3",
@@ -75,7 +75,7 @@
     "react-router": "^7.6.0",
     "react-uid": "^2.3.3",
     "recharts": "2.15.3",
-    "tailwind-merge": "^3.1.0",
+    "tailwindcss": "^4.1.18",
     "viem": "^2.23.1",
     "wagmi": "^2.15.6",
     "yup": "^1.2.0",
@@ -123,7 +123,6 @@
     "@venusprotocol/venus-protocol": "10.0.0",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/coverage-v8": "^2.1.5",
-    "autoprefixer": "^10.4.16",
     "c8": "^10.0.0",
     "fs": "^0.0.1-security",
     "genversion": "^3.1.1",
@@ -144,11 +143,10 @@
     "rollup-plugin-visualizer": "^6.0.1",
     "storybook": "^8.6.14",
     "stylelint": "^15.10.3",
-    "tailwind-scrollbar": "3.1.0",
-    "tailwindcss": "^3.3.3",
-    "tailwindcss-animate": "^1.0.7",
+    "tailwind-scrollbar": "^4.0.2",
     "tsconfig-paths": "^4.2.0",
     "tsx": "^4.1.2",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.1.6",
     "vite": "^6.2.5",
     "vite-plugin-svgr": "^4.3.0",
@@ -157,15 +155,7 @@
     "whatwg-fetch": "^3.6.18"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "production": [">0.2%", "not dead", "not op_mini all"],
+    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
   }
 }

apps/evm/src/App/ThemeHandler/index.tsx

@@ -7,10 +7,10 @@ export const ThemeHandler: React.FC = () => {
 
   // Change theme based on active chain
   useEffect(() => {
-    document.body.classList.remove('unichain-theme');
+    document.documentElement.classList.remove('unichain-theme');
 
     if (isOnUnichain) {
-      document.body.classList.add('unichain-theme');
+      document.documentElement.classList.add('unichain-theme');
     }
   }, [isOnUnichain]);
 

apps/evm/src/assets/styles/index.css

@@ -1,76 +1,84 @@
-@import '@venusprotocol/ui/fonts/proximaNova';
-@import '@venusprotocol/ui/theme';
+@import 'tailwindcss' source("../../../src");
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* let tailwindcss include ui components */
+@source "../../../../../packages/ui";
 
-@layer utilities {
-  .scrollbar-hidden {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
+@import "tw-animate-css";
+@plugin 'tailwind-scrollbar';
 
-  .scrollbar-hidden::-webkit-scrollbar { 
-    display: none;
+@import '@venusprotocol/ui/fonts/proximaNova' layer(base);
+@import '@venusprotocol/ui/theme' layer(theme);
+
+@layer base {
+  body {
+    font-family: var(--font-proxima-nova), sans-serif;
+    background-color: var(--color-background);
+    color: var(--color-offWhite);
   }
-}
 
-body {
-  font-family: var(--font-proxima-nova), sans-serif;
-  background-color: theme('colors.background');
-  color: theme('colors.offWhite');
-}
+  * {
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
 
-input {
-  color: inherit;
+    /* Track */
+    &::-webkit-scrollbar-track {
+      border-radius: 4px;
+      background-color: var(--color-background);
+    }
 
-  &::-webkit-input-placeholder {
-    /* Chrome/Opera/Safari */
-    padding-right: 22px;
-  }
-  &::-moz-placeholder {
-    /* Firefox 19+ */
-    padding-right: 22px;
-  }
-  &:-moz-placeholder {
-    /* Firefox 18- */
-    padding-right: 22px;
-  }
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--color-grey);
+      border-radius: 4px;
+    }
 
-  /* Hide arrows from input number */
-  /* Chrome, Safari, Edge, Opera */
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  /* Firefox */
-  &[type='number'] {
-    -moz-appearance: textfield;
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-offWhite);
+    }
   }
 }
 
-* {
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
+@layer components {
+  input {
+    color: inherit;
 
-  /* Track */
-  &::-webkit-scrollbar-track {
-    border-radius: 4px;
-    background-color: theme('colors.background');
-  }
+    &::-webkit-input-placeholder {
+      /* Chrome/Opera/Safari */
+      padding-right: 22px;
+    }
 
-  /* Handle */
-  &::-webkit-scrollbar-thumb {
-    background-color: theme('colors.grey');
-    border-radius: 4px;
-  }
+    &::-moz-placeholder {
+      /* Firefox 19+ */
+      padding-right: 22px;
+    }
+
+    &:-moz-placeholder {
+      /* Firefox 18- */
+      padding-right: 22px;
+    }
+
+    /* Hide arrows from input number */
+    /* Chrome, Safari, Edge, Opera */
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
 
-  /* Handle on hover */
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: theme('colors.offWhite');
+    /* Firefox */
+    &[type='number'] {
+      -moz-appearance: textfield;
+    }
   }
 }
+
+@utility scrollbar-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

apps/evm/src/clients/api/mutations/useSwapTokensAndSupply/__tests__/index.spec.ts

@@ -1,5 +1,5 @@
 import fakeAccountAddress from '__mocks__/models/address';
-import { usdc, xvs } from '__mocks__/models/tokens';
+import { bnb, usdc, xvs } from '__mocks__/models/tokens';
 import { vXvs } from '__mocks__/models/vTokens';
 import BigNumber from 'bignumber.js';
 import { queryClient } from 'clients/api';
@@ -18,7 +18,7 @@ const mockPoolComptrollerAddress = '0x456' as Address;
 const mockPoolName = 'Test Pool';
 
 const mockSwap = {
-  direction: 'exactAmountIn' as const,
+  direction: 'exact-in' as const,
   fromToken: xvs,
   toToken: usdc,
   fromTokenAmountSoldMantissa: new BigNumber(1000),
@@ -87,18 +87,14 @@ describe('useSwapTokensAndSupply', () => {
       `
       {
         "abi": Any<Object>,
-        "address": "0xfakeSwapRouterContractAddress",
+        "address": "0xfakeSwapRouterV2ContractAddress",
         "args": [
           "0x6d6F697e34145Bb95c54E77482d97cc261Dc237E",
-          1000n,
-          900n,
-          [
-            "0xdef",
-            "0xghi",
-          ],
-          1747386407n,
+          "1000",
+          "900",
+          undefined,
         ],
-        "functionName": "swapExactTokensForTokensAndSupply",
+        "functionName": "swapAndSupply",
       }
     `,
     );
@@ -110,7 +106,6 @@ describe('useSwapTokensAndSupply', () => {
       [
         "Tokens swapped and supplied",
         {
-          "exchangeRate": 1,
           "fromTokenAmountTokens": 1e-15,
           "fromTokenSymbol": "XVS",
           "poolName": "Test Pool",
@@ -140,7 +135,7 @@ describe('useSwapTokensAndSupply', () => {
     );
 
     const { fn } = (useSendTransaction as Mock).mock.calls[0][0];
-    const res = await fn({ swap: mockSwap });
+    const res = await fn({ swap: { ...mockSwap, fromToken: bnb } });
 
     expect(res).toMatchInlineSnapshot(
       {
@@ -149,18 +144,14 @@ describe('useSwapTokensAndSupply', () => {
       `
       {
         "abi": Any<Object>,
-        "address": "0xfakeSwapRouterContractAddress",
+        "address": "0xfakeSwapRouterV2ContractAddress",
         "args": [
           "0x6d6F697e34145Bb95c54E77482d97cc261Dc237E",
-          1000n,
-          900n,
-          [
-            "0xdef",
-            "0xghi",
-          ],
-          1747386407n,
+          "900",
+          undefined,
         ],
-        "functionName": "swapExactTokensForTokensAndSupply",
+        "functionName": "swapNativeAndSupply",
+        "value": "1000",
       }
     `,
     );
@@ -180,7 +171,7 @@ describe('useSwapTokensAndSupply', () => {
     );
 
     const invalidMockSwap = {
-      direction: 'exactAmountOut' as const,
+      direction: 'exact-out' as const,
       fromToken: {
         isNative: false,
         address: '0xdef' as Address,