feat: TokenChainPill

Author: OmarBasem

packages/smart-routing-address-react/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@zerodev/smart-routing-address-react",
   "version": "0.0.1",
-  "description": "React hooks + provider for ZeroDev Smart Routing Address deposits",
+  "description": "React hooks, provider, and UI for ZeroDev Smart Routing Address deposits",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zerodevapp/zerodev-wallet-sdk.git",
     "directory": "packages/smart-routing-address-react"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/_types/index.d.ts",
@@ -16,50 +18,69 @@
       "types": "./dist/_types/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist",
     "src/**/*.ts",
     "src/**/*.tsx",
     "!dist/**/*.tsbuildinfo",
     "!src/**/*.test.ts",
-    "!src/**/*.test.tsx"
+    "!src/**/*.test.tsx",
+    "!src/**/*.stories.ts",
+    "!src/**/*.stories.tsx"
   ],
   "scripts": {
-    "build": "pnpm run clean && pnpm run build:js && pnpm run build:types",
+    "build": "pnpm run clean && pnpm run build:css && pnpm run build:js && pnpm run build:types",
+    "build:css": "npx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css --minify",
     "build:js": "vite build",
     "build:types": "tsc --project ./tsconfig.build.json --outDir ./dist/_types --emitDeclarationOnly --declaration --declarationMap",
     "dev": "tsc --watch",
+    "dev:css": "npx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css --watch",
     "typecheck": "tsc --noEmit --project ./tsconfig.build.json",
     "clean": "rm -rf dist",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "storybook": "storybook dev -p 6008",
+    "build-storybook": "storybook build"
   },
   "keywords": [
     "react",
     "hooks",
+    "components",
     "smart-routing",
     "deposit",
     "zerodev",
     "web3"
   ],
+  "dependencies": {
+    "@zerodev/react-ui": "workspace:*"
+  },
   "peerDependencies": {
     "@zerodev/smart-routing-address": "^0.2.5",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "viem": "^2.47.18"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
+    "@tailwindcss/cli": "^4.2.2",
+    "@tailwindcss/postcss": "^4.2.2",
     "@testing-library/react": "^16.3.0",
     "@types/react": "~19.2.14",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^4.7.0",
     "@vitest/coverage-v8": "^4.0.18",
     "@zerodev/smart-routing-address": "^0.2.5",
     "happy-dom": "^20.6.0",
+    "postcss": "^8.5.8",
     "react": "19.2.0",
     "react-dom": "19.2.0",
+    "storybook": "^10.3.3",
+    "tailwindcss": "^4.2.2",
     "typescript": "5.9.3",
     "viem": "^2.47.18",
     "vite": "^6.4.1",

packages/smart-routing-address-react/src/index.ts

@@ -1,8 +1,12 @@
 /**
  * @zerodev/smart-routing-address-react
- * React hooks + provider for ZeroDev Smart Routing Address deposits.
+ * React hooks, provider, and UI for ZeroDev Smart Routing Address deposits.
  */
 
+// Components
+export type { TokenChainPillProps } from './components/TokenChainPill'
+export { TokenChainPill } from './components/TokenChainPill'
+
 // Provider
 export type { SmartRoutingAddressProviderProps } from './context/SmartRoutingAddressProvider'
 export { SmartRoutingAddressProvider } from './context/SmartRoutingAddressProvider'

packages/smart-routing-address-react/vite.config.ts

@@ -17,6 +17,7 @@ export default defineConfig({
         'react-dom',
         'react/jsx-runtime',
         'react/jsx-dev-runtime',
+        '@zerodev/react-ui',
         '@zerodev/smart-routing-address',
         'viem',
       ],