react

packages/mesh-react/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@polkadot/react",
+  "version": "1.9.0-beta.3",
+  "description": "React component library - https://meshjs.dev/react",
+  "main": "./dist/index.cjs",
+  "browser": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    "./styles.css": "./dist/index.css",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build:mesh_old": "tsup src/index.ts --format esm,cjs --cjsInterop --dts && tailwindcss -i ./src/styles.css -o ./dist/index.css",
+    "build:mesh": "tsup && tailwindcss -i ./src/styles.css -o ./dist/index.css",
+    "dev": "concurrently \"tsup src/index.ts --format esm,cjs --watch --dts\" \"tailwindcss -i ./src/styles.css -o ./dist/index.css --watch\"",
+    "clean": "rm -rf .turbo && rm -rf dist && rm -rf node_modules",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint",
+    "pack": "npm pack --pack-destination=./dist",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@meshsdk/polkadot": "*",
+    "@radix-ui/react-popover": "^1.1.7",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.488.0",
+    "tailwind-merge": "^3.2.0",
+    "tw-animate-css": "^1.2.5"
+  },
+  "devDependencies": {
+    "@polkadot/configs": "*",
+    "@types/react": "^18.3.1",
+    "autoprefixer": "^10.4.18",
+    "concurrently": "^8.0.1",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "latest"
+  },
+  "peerDependencies": {
+    "react": ">=16.0.0 <20.0.0 || >=16.0.0-rc <20.0.0-rc || >=19.0.0-rc",
+    "react-dom": ">=16.0.0 <20.0.0 || >=16.0.0-rc <20.0.0-rc || >=19.0.0-rc"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "Apache-2.0",
+  "keywords": [
+    "polkadot",
+    "dot",
+    "web3",
+    "blockchain",
+    "sdk"
+  ]
+}

packages/mesh-react/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useWalletList"

packages/mesh-react/src/hooks/useWalletList.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+import type { Wallet } from "@meshsdk/polkadot";
+import { BrowserWallet } from "@meshsdk/polkadot";
+
+export const useWalletList = () => {
+  const [wallets, setWallets] = useState<Wallet[]>([]);
+  useEffect(() => {
+    async function get() {
+      setWallets(await BrowserWallet.getAvailableWallets());
+    }
+    get();
+  }, []);
+
+  return wallets;
+};

packages/mesh-react/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./polkadot-wallet";
+// export * from "./hooks";

packages/mesh-react/src/polkadot-wallet/index.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { Check } from "lucide-react";
+import { BrowserWallet, CreatePolkadotBrowserWalletOptions, Wallet } from "@meshsdk/polkadot";
+import { useWalletList } from "../hooks/useWalletList";
+
+type ConnectProps = {
+  options: CreatePolkadotBrowserWalletOptions
+}
+
+export const ConnectWallet: React.FC<ConnectProps> = ({ options }) => {
+  const wallets = useWalletList();
+  const [selectedWallet, setSelectedWallet] = useState<Wallet | null>(null);
+  const [connecting, setConnecting] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(false);
+
+  const handleSelectWallet = async (wallet: Wallet) => {
+    setConnecting(true);
+    try {
+      await BrowserWallet.enable(wallet.name, options);
+      setSelectedWallet(wallet);
+      setOpen(false);
+    } catch (err) {
+      console.error("Failed to enable wallet:", err);
+    } finally {
+      setConnecting(false);
+    }
+  };
+
+  return (
+    <div className="relative inline-block">
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.Trigger asChild>
+          <button
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"
+            disabled={connecting}
+          >
+            {connecting
+              ? "Connecting..."
+              : selectedWallet
+              ? selectedWallet.name
+              : "Connect Wallet"}
+          </button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            side="bottom"
+            align="start"
+            className="z-50 mt-2 w-64 rounded-lg border bg-white p-4 shadow-md"
+          >
+            {wallets.length === 0 ? (
+              <div className="text-center text-gray-500">No wallets available</div>
+            ) : (
+              <ul className="space-y-2">
+                {wallets.map((wallet: Wallet) => (
+                  <li key={wallet.name}>
+                    <button
+                      onClick={() => handleSelectWallet(wallet)}
+                      className="w-full flex items-center justify-between px-3 py-2 rounded-md hover:bg-gray-100 transition text-left"
+                    >
+                      <span>{wallet.name}</span>
+                      {selectedWallet?.name === wallet.name && (
+                        <Check className="w-4 h-4 text-green-500" />
+                      )}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    </div>
+  );
+};

packages/mesh-react/src/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/mesh-react/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@polkadot/configs/typescript/base.json",
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"],
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+}

packages/mesh-react/tsup.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+  skipNodeModulesBundle: true,
+});

packages/polkadot/README.md

@@ -1,3 +1,12 @@
 # mesh-polkadot
 
 [meshjs.dev](https://meshjs.dev/)
+
+## Notes
+
+
+- API is currently exposing polkadot.js types directly. We should re-define those locally so the API is independent of the underlying library used
+- Add some functionality similar to getNetworkId in Cardano to determine information about which chain we are connected to
+- Consider switching underlying library to papi
+  - Requires cli to download metadata from node and generate ts types
+  - Generating ts code has some issues as the users will have to make sure their build system is compatible

packages/polkadot/src/interfaces/wallet.ts

@@ -32,4 +32,9 @@ export abstract class IPolkadotWallet {
    * @returns SignerResult
    */
   abstract signData(payload: string): Promise<string>
+}
+
+export type Wallet = {
+  name: string;
+  version: string;
 }

packages/polkadot/src/wallets/browser/index.ts

@@ -1,20 +1,15 @@
 import { ApiOptions, Signer } from "@polkadot/api/types";
-import { IPolkadotWallet } from "../../interfaces";
+import { IPolkadotWallet, Wallet } from "../../interfaces";
 import { web3Accounts, web3Enable, web3FromAddress } from '@polkadot/extension-dapp';
 import { ApiPromise } from "@polkadot/api";
 import { initPolkadotApi, WsProviderOptions } from "../../core";
 import { Account } from "../../types/account";
 
 export type CreatePolkadotBrowserWalletOptions = {
-  provider: WsProviderOptions;
+  provider: WsProviderOptions | string;
   api: ApiOptions;
 };
 
-export type Wallet = {
-  name: string;
-  version: string;
-}
-
 export class BrowserWallet extends IPolkadotWallet {
   private constructor(
     api: ApiPromise,