Merge pull request #2716 from kadena-community/feat/wallet-sdk-interface

Feat: Wallet sdk and example wallet

.changeset/nervous-pears-remain.md

@@ -0,0 +1,9 @@
+---
+'@kadena/wallet-sdk': minor
+---
+
+The Kadena Wallet SDK provides a simple and unified interface to integrate
+Kadena blockchain functionalities into your wallet applications. It abstracts
+the complexities of interacting with the Kadena network, allowing you to focus
+on building feature-rich wallet experiences without re-implementing common
+integrations.

.changeset/pink-camels-float.md

@@ -0,0 +1,5 @@
+---
+'@kadena/hd-wallet': patch
+---
+
+Improved documentation in readme

.github/labeler.yml

@@ -148,3 +148,9 @@ e2e-proof-of-us:
 '@kadena/snap':
   - changed-files:
       - any-glob-to-any-file: packages/libs/snap/*
+'@kadena/wallet-sdk':
+  - changed-files:
+      - any-glob-to-any-file: packages/libs/wallet-sdk/*
+wallet-sdk-example-app:
+  - changed-files:
+      - any-glob-to-any-file: packages/apps/wallet-sdk-example/*

README.md

@@ -46,14 +46,15 @@ Overview of the main packages maintained in this repository:
 | [@kadena/pactjs-generator][56]       | [![version][58]][57] |
 | [@kadena/snap][59]                   | [![version][61]][60] |
 | [@kadena/types][62]                  | [![version][64]][63] |
+| [@kadena/wallet-sdk][65]             | [![version][67]][66] |
 
 <!--packageTable end -->
 
 ## Contributors
 
 Special thanks to the wonderful people who have contributed to this project:
 
-[![Contributors][66]][65]
+[![Contributors][69]][68]
 
 [1]: https://docs.kadena.io
 [2]: https://discord.io/kadena
@@ -138,5 +139,9 @@ Special thanks to the wonderful people who have contributed to this project:
   https://github.com/kadena-community/kadena.js/tree/main/packages/libs/types
 [63]: packages/libs/types/CHANGELOG.md
 [64]: https://img.shields.io/npm/v/@kadena/types.svg
-[65]: https://github.com/kadena-community/kadena.js/graphs/contributors
-[66]: https://contrib.rocks/image?repo=kadena-community/kadena.js
+[65]:
+  https://github.com/kadena-community/kadena.js/tree/main/packages/libs/wallet-sdk
+[66]: packages/libs/wallet-sdk/CHANGELOG.md
+[67]: https://img.shields.io/npm/v/@kadena/wallet-sdk.svg
+[68]: https://github.com/kadena-community/kadena.js/graphs/contributors
+[69]: https://contrib.rocks/image?repo=kadena-community/kadena.js

packages.json

@@ -191,6 +191,12 @@
     "private": false,
     "path": "packages/libs/types"
   },
+  {
+    "name": "@kadena/wallet-sdk",
+    "version": "0.0.1",
+    "private": false,
+    "path": "packages/libs/wallet-sdk"
+  },
   {
     "name": "@kadena-dev/e2e-base",
     "version": "0.0.2",
@@ -256,5 +262,11 @@
     "version": "0.0.2",
     "private": true,
     "path": "packages/e2e/e2e-tools"
+  },
+  {
+    "name": "wallet-sdk-example-app",
+    "version": "0.0.1",
+    "private": true,
+    "path": "packages/apps/wallet-sdk-example"
   }
 ]

packages/apps/dev-wallet/package.json

@@ -62,14 +62,14 @@
     "@types/react-dom": "^18.2.25",
     "@vanilla-extract/esbuild-plugin": "^2.3.11",
     "@vanilla-extract/vite-plugin": "4.0.17",
-    "@vitejs/plugin-react-swc": "^3.3.2",
+    "@vitejs/plugin-react-swc": "^3.2.2",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^8.2.2",
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "typescript": "5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.4.8",
     "vite-plugin-static-copy": "^1.0.0",
     "vite-tsconfig-paths": "^4.2.1",
     "vitest": "^1.6.0"

packages/apps/wallet-sdk-example/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/apps/wallet-sdk-example/README.md

@@ -0,0 +1,148 @@
+# Wallet SDK Example App
+
+The Wallet SDK Example App is a comprehensive showcase of the features and
+capabilities of the 
+[Kadena Wallet SDK](https://github.com/kadena-community/kadena.js/blob/main/packages/libs/wallet-sdk).
+This app is designed to provide developers with an interactive platform to
+explore, understand, and experiment with every function of the SDK.
+
+## **Features**
+
+- **Function Demonstrations**: Every function of the Wallet SDK is demonstrated,
+  including examples of:
+
+  - Transaction creation.
+  - Account querying.
+  - Transfers
+  - Cross-chain transfers.
+  - Gas estimation.
+  - Human Readible Name Resolving
+
+- **Live Code Execution**: Each function displays:
+  - The code being executed.
+  - The real-time response from the Kadena network.
+  - The real-time response from the Kadena Graph
+- **Code Highlighter**: Interactive code snippets are highlighted for better
+  understanding.
+- **Step-by-Step Guidance**: Navigate the app to learn how to implement each
+  feature of the Wallet SDK.
+
+---
+
+## **Getting Started**
+
+### **Prerequisites**
+
+Ensure you have the following installed:
+
+- **Node.js** (v16 or later)
+- **Yarn** or **npm**
+- A modern browser (Chrome, Firefox, etc.)
+
+### **Installation**
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/kadena-community/kadena.js.git
+   cd kadena.js/packages/apps/wallet-sdk-example
+   ```
+
+2. Install dependencies:
+
+   ```bash
+   npm install
+   # or
+   yarn install
+   # or
+   pnpm install
+   ```
+
+3. Start the development server:
+
+   ```bash
+   npm run dev
+   # or
+   yarn dev
+   # or
+   pnpm run dev
+   ```
+
+4. Open the app in your browser:
+   ```bash
+   http://localhost:3000
+   ```
+
+---
+
+## **Usage**
+
+1. Launch the app in your browser.
+2. Explore the features:
+   - Select a option from the navigation menu.
+   - View the code example and corresponding response.
+   - Modify inputs (where applicable) to test custom scenarios.
+3. Use the app as a guide to integrate Wallet SDK functions into your own
+   projects.
+
+---
+
+## **Technical Details**
+
+This app is built using:
+
+- **React** for the UI.
+- **TypeScript** for type safety.
+- **Vite** for fast builds and development.
+- **Kadena Wallet SDK** for blockchain interactions.
+
+---
+
+## **Development**
+
+To extend or modify or play with the app:
+
+1. Open the project in your favorite IDE.
+2. Navigate to the `src` folder to explore the codebase:
+   - `components/`: Reusable React components.
+   - `pages/`: Main pages showcasing the SDK functions.
+   - `utils/`: Utility functions for interacting with the SDK.
+3. Add new features or update existing examples as needed.
+
+---
+
+## **Contributing**
+
+Contributions are welcome! If you'd like to improve the app or add new features,
+please:
+
+1. Fork the repository.
+2. Create a new branch:
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+3. Commit your changes:
+   ```bash
+   git commit -m "Add your feature"
+   ```
+4. Push your changes and create a pull request.
+
+---
+
+## **License**
+
+This project is licensed under the BSD 3-Clause License. See the
+[LICENSE](https://github.com/kadena-community/kadena.js/LICENSE) file for
+details.
+
+---
+
+## **Resources**
+
+- [Kadena Wallet SDK Documentation](https://github.com/kadena-community/kadena.js/tree/feat/wallet-sdk-interface/packages/libs/wallet-sdk/README.md)
+- [Kadena Official Documentation](https://docs.kadena.io/)
+- [Kadena GitHub Repository](https://github.com/kadena-io/)
+
+---
+
+Happy coding! 🎉

packages/apps/wallet-sdk-example/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+    },
+  },
+);

packages/apps/wallet-sdk-example/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+        rel="stylesheet"
+      />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400;500;600;700&display=swap"
+        rel="stylesheet"
+      />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

packages/apps/wallet-sdk-example/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "wallet-sdk-example-app",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "dev": "vite",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@kadena/client": "workspace:*",
+    "@kadena/hd-wallet": "workspace:*",
+    "@kadena/kode-icons": "workspace:*",
+    "@kadena/kode-ui": "workspace:*",
+    "@kadena/wallet-sdk": "workspace:*",
+    "@popperjs/core": "^2.11.8",
+    "@tanstack/react-query": "^5.32.0",
+    "@vanilla-extract/css": "1.14.2",
+    "@vanilla-extract/vite-plugin": "4.0.17",
+    "clsx": "^2.1.1",
+    "dompurify": "^3.2.1",
+    "highlight.js": "^11.10.0",
+    "html-react-parser": "^5.1.18",
+    "jotai": "^2.10.1",
+    "markdown-it": "^14.1.0",
+    "next-themes": "^0.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.26.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.11.1",
+    "@kadena-dev/shared-config": "workspace:*",
+    "@types/markdown-it": "^14.1.2",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@vitejs/plugin-react-swc": "^3.2.2",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "globals": "^15.9.0",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "5.4.5",
+    "typescript-eslint": "^8.7.0",
+    "vite": "^5.4.8",
+    "vite-plugin-node-polyfills": "^0.22.0"
+  }
+}

packages/apps/wallet-sdk-example/postcss.config.mjs

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