feat: add @avalanche-sdk/ui package

.github/workflows/ui_sdk_publish.yaml

@@ -0,0 +1,119 @@
+name: Publish UI SDK
+
+on:
+  push:
+    tags:
+      - "ui/v*"
+  workflow_dispatch:
+    inputs:
+      version:
+        description: "Version to publish (e.g., 1.0.0)"
+        required: true
+        type: string
+      tag:
+        description: "Tag to publish (e.g., latest, alpha, beta, etc.)"
+        required: false
+        type: string
+        default: ""
+
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  publish:
+    name: Publish to npm
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Set version
+        id: set_version
+        run: |
+          if [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then
+            VERSION="${{ github.event.inputs.version }}"
+          else
+            TAG_NAME=${GITHUB_REF#refs/tags/}
+            VERSION=${TAG_NAME#ui/v}
+          fi
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+      - name: Update package.json version
+        run: |
+          VERSION=${{ steps.set_version.outputs.version }}
+          cd ui
+          npm version "$VERSION" --no-git-tag-version --allow-same-version
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 10.6.3
+
+      - name: Install dependencies
+        run: |
+          cd ui
+          pnpm install
+
+      - name: Build the package
+        run: |
+          cd ui
+          pnpm run build
+
+      - name: Update npm
+        run: npm install -g npm@latest
+
+      - name: Check if version exists
+        id: check_version
+        run: |
+          cd ui
+          VERSION=${{ steps.set_version.outputs.version }}
+          echo "Checking if version $VERSION already exists..."
+
+          if npm view "@avalanche-sdk/ui@$VERSION" version >/dev/null 2>&1; then
+            echo "Version $VERSION already exists"
+            echo "exists=true" >> $GITHUB_OUTPUT
+          else
+            echo "Version $VERSION does not exist"
+            echo "exists=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Publish package
+        run: |
+          cd ui
+          VERSION=${{ steps.set_version.outputs.version }}
+          INPUT_TAG=${{ github.event.inputs.tag }}
+          EXISTS=${{ steps.check_version.outputs.exists }}
+
+          echo "Detected version: $VERSION"
+          echo "Input tag: $INPUT_TAG"
+          echo "Version exists: $EXISTS"
+
+          if [[ "$EXISTS" == "false" ]]; then
+            if [[ "$VERSION" == *"-"* ]]; then
+              # Prerelease: publish with auto-detected tag + add input tag if provided
+              PRERELEASE=${VERSION#*-}
+              TAG=${PRERELEASE%%.*}
+              echo "Prerelease detected; publishing under dist-tag: $TAG"
+              npm publish --tag "$TAG" --access public
+            else
+              # Stable: publish with latest tag
+              echo "Official release detected; publishing under 'latest'"
+              npm publish --access public
+            fi
+          fi
+          if [[ -n "$INPUT_TAG" ]]; then
+            echo "Adding input tag: $INPUT_TAG"
+            npm dist-tag add "@avalanche-sdk/ui@$VERSION" "$INPUT_TAG"
+          else
+            echo "No input tag provided. Skipping tag addition."
+          fi
+
+

ui/.gitignore

@@ -0,0 +1,56 @@
+# Dependencies
+node_modules/
+.pnpm-store/
+.pnpm-debug.log*
+
+# Build outputs
+dist/
+esm/
+*.tsbuildinfo
+
+# Testing
+coverage/
+.nyc_output/
+*.lcov
+.vitest/
+
+# Logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# ESLint cache
+.eslintcache
+
+# Temporary files
+*.tmp
+*.temp
+.cache/
+temp/
+
+# Vite
+.vite/
+
+# TypeScript
+*.tsbuildinfo
+
+# Playground build
+playground/dist/
+playground/node_modules/
+

ui/package.json

@@ -0,0 +1,138 @@
+{
+  "name": "@avalanche-sdk/ui",
+  "version": "0.1.0",
+  "description": "A comprehensive React component library and TypeScript utilities for building Avalanche blockchain applications. Includes ready-to-use UI components for wallet management, token transfers, staking, earning, and interchain operations.",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ava-labs/avalanche-sdk-typescript.git",
+    "directory": "ui"
+  },
+  "license": "BSD-3-Clause",
+  "keywords": [
+    "avalanche",
+    "avalanche-sdk",
+    "react",
+    "ui",
+    "components",
+    "wallet",
+    "blockchain",
+    "web3"
+  ],
+  "author": "0xstt",
+  "bugs": {
+    "url": "https://github.com/ava-labs/avalanche-sdk-typescript/issues"
+  },
+  "homepage": "https://github.com/ava-labs/avalanche-sdk-typescript/tree/main/ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "pnpm clean && vite build",
+    "dev": "NODE_ENV=development vite build --watch",
+    "clean": "rm -rf dist esm",
+    "format": "prettier --write .",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "prepublishOnly": "pnpm run typecheck && pnpm run build"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "viem": "^2.0.0"
+  },
+  "dependencies": {
+    "@avalanche-sdk/chainkit": "0.3.0-alpha.8",
+    "@avalanche-sdk/client": "^0.0.4-alpha.16",
+    "@avalanche-sdk/interchain": "^0.1.1-alpha.1",
+    "@floating-ui/react": "^0.27.13",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.14",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.468.0",
+    "tailwind-merge": "^3.2.0",
+    "usehooks-ts": "^3.1.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "6.4.7",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.13.10",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^3.0.5",
+    "@vitest/ui": "^3.0.5",
+    "autoprefixer": "^10.4.19",
+    "esbuild-fix-imports-plugin": "^1.0.19",
+    "esbuild-plugin-babel": "^0.2.3",
+    "glob": "^11.0.1",
+    "jsdom": "^24.1.0",
+    "postcss": "^8",
+    "postcss-import": "^16.1.0",
+    "postcss-load-config": "^6.0.1",
+    "react": "^18.2.43",
+    "react-dom": "^18.2.17",
+    "rollup-plugin-preserve-use-client": "^3.0.1",
+    "tailwindcss": "^3.4.6",
+    "tailwindcss-animate": "^1.0.7",
+    "tscpaths": "^0.0.9",
+    "tsup": "^8.3.5",
+    "viem": "^2.21.45",
+    "vite": "^5.4.20",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-externalize-deps": "^0.9.0",
+    "vitest": "^3.0.5"
+  },
+  "files": [
+    "dist/**/*",
+    "src/**/*"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "exports": {
+    "./package.json": "./package.json",
+    "./styles.css": "./dist/assets/style.css",
+    "./dist/assets/style.css": "./dist/assets/style.css",
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "module": "./dist/theme.js",
+      "import": "./dist/theme.js",
+      "default": "./dist/theme.js"
+    },
+    ".": {
+      "types": "./dist/index.d.ts",
+      "module": "./dist/index.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./wallet": {
+      "types": "./dist/wallet.d.ts",
+      "module": "./dist/wallet.js",
+      "import": "./dist/wallet.js",
+      "default": "./dist/wallet.js"
+    },
+    "./transfer": {
+      "types": "./dist/transfer.d.ts",
+      "module": "./dist/transfer.js",
+      "import": "./dist/transfer.js",
+      "default": "./dist/transfer.js"
+    }
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "packageManager": "pnpm@10.6.3"
+}

ui/playground/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Avalanche UI Kit Playground</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

ui/playground/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "avalanche-ui-playground",
+  "version": "0.1.0",
+  "description": "Development playground and interactive demo for @avalanche-sdk/ui components.",
+  "private": true,
+  "type": "module",
+  "author": "0xstt",
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@avalanche-sdk/client": "^0.0.4-alpha.16",
+    "@avalanche-sdk/ui": "^0.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "lucide-react": "^0.468.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "viem": "^2.21.45"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "buffer": "^6.0.3",
+    "postcss": "^8",
+    "process": "^0.11.10",
+    "tailwindcss": "^3.4.6",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.2.2",
+    "util": "^0.12.5",
+    "vite": "^5.0.8"
+  }
+}

ui/playground/postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+