feat: multi wallet with autoconnect

jup-ag · Aug 10, 2024 · 1873374 · 1873374
1 parent 8d51de5
commit 1873374
Show file tree

Hide file tree

Showing 8 changed files with 802 additions and 160 deletions.
diff --git a/README.md b/README.md
@@ -59,6 +59,11 @@ pnpm run version-packages
 # Applies changesets to bump package versions and update CHANGELOGs
 # "changeset version && pnpm i
 
+# NOTE: to publish scoped packages you must
+# first create an org.
+# 1. create an org in npmjs.com
+# 2. login to npm via `npm login`
+# 3. name org/scope according to package name
 pnpm run release
 # Builds and publishes changed packages to npm
 # pnpm run build-test && changeset publish

diff --git a/examples/start-tailwind/package.json b/examples/start-tailwind/package.json
@@ -1,35 +1,38 @@
 {
-  "name": "@solana-wallets-solid/start-tailwind",
-  "type": "module",
-  "private": true,
-  "scripts": {
-    "dev": "vinxi dev",
-    "build": "vinxi build",
-    "start": "vinxi start",
-    "typecheck": "tsc --noEmit -p tsconfig.typecheck.json",
-    "deploy": "vinxi build && wrangler pages deploy dist"
-  },
-  "dependencies": {
-    "@solana-mobile/wallet-adapter-mobile": "^2.1.3",
-    "@solana-wallets-solid/core": "workspace:*",
-    "@solana-wallets-solid/hello": "workspace:*",
-    "@solana/wallet-adapter-base": "^0.9.23",
-    "@solana/wallet-adapter-phantom": "^0.9.24",
-    "@solana/wallet-adapter-solflare": "^0.6.28",
-    "@solana/wallet-adapter-walletconnect": "^0.1.16",
-    "@solana/wallet-adapter-wallets": "^0.19.32",
-    "@solana/wallet-standard-util": "^1.1.1",
-    "@solana/wallet-standard-wallet-adapter-base": "^1.1.2",
-    "@solidjs/router": "^0.14.1",
-    "@solidjs/start": "^1.0.6",
-    "@wallet-standard/app": "0.0.0-20240703212708",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.38",
-    "solid-js": "^1.8.18",
-    "tailwindcss": "^3.4.3",
-    "vinxi": "^0.4.1"
-  },
-  "engines": {
-    "node": ">=18"
-  }
+	"name": "@solana-wallets-solid/start-tailwind",
+	"type": "module",
+	"private": true,
+	"scripts": {
+		"dev": "vinxi dev",
+		"build": "vinxi build",
+		"start": "vinxi start",
+		"typecheck": "tsc --noEmit -p tsconfig.typecheck.json",
+		"deploy": "vinxi build && wrangler pages deploy dist"
+	},
+	"dependencies": {
+		"@solana-mobile/wallet-adapter-mobile": "^2.1.3",
+		"@solana-wallets-solid/core": "workspace:*",
+		"@solana-wallets-solid/hello": "workspace:*",
+		"@solana/wallet-adapter-base": "^0.9.23",
+		"@solana/wallet-adapter-phantom": "^0.9.24",
+		"@solana/wallet-adapter-solflare": "^0.6.28",
+		"@solana/wallet-adapter-walletconnect": "^0.1.16",
+		"@solana/wallet-adapter-wallets": "^0.19.32",
+		"@solana/wallet-standard-util": "^1.1.1",
+		"@solana/wallet-standard-wallet-adapter-base": "^1.1.2",
+		"@solidjs/router": "^0.14.1",
+		"@solidjs/start": "^1.0.6",
+		"@wallet-standard/app": "0.0.0-20240703212708",
+		"autoprefixer": "^10.4.19",
+		"postcss": "^8.4.38",
+		"solid-js": "^1.8.18",
+		"tailwindcss": "^3.4.3",
+		"vinxi": "^0.4.1"
+	},
+	"engines": {
+		"node": ">=18"
+	},
+	"devDependencies": {
+		"wrangler": "^3.70.0"
+	}
 }
diff --git a/examples/start-tailwind/src/routes/index.tsx b/examples/start-tailwind/src/routes/index.tsx
@@ -1,4 +1,4 @@
-import { createEffect, onCleanup, onMount, Show } from "solid-js"
+import { createEffect, For, onCleanup, onMount, Show } from "solid-js"
 import { useWallet } from "@solana-wallets-solid/core"
 import { getWallets, DEPRECATED_getWallets } from "@wallet-standard/app"
 
@@ -8,9 +8,21 @@ import { A } from "@solidjs/router"
 import { StandardWalletAdapter } from "@solana/wallet-standard-wallet-adapter-base"
 import { isWalletAdapterCompatibleStandardWallet } from "@solana/wallet-adapter-base"
 
+const SIGN_ARBITRARY_MSG = new TextEncoder().encode("Hello World")
+
 export default function Home() {
-  const { autoConnect, connect, initialize, select, wallets, adapter, publicKey, disconnect } =
-    useWallet()
+  const {
+    autoConnect,
+    connect,
+    initialize,
+    select,
+    wallets,
+    name,
+    adapter,
+    publicKey,
+    disconnect,
+    signMessage,
+  } = useWallet()
 
   function updateWallets() {
     // get installed wallets compatible with the standard
@@ -104,15 +116,20 @@ export default function Home() {
   //   })
   // }
   //
-  async function handleConnect() {
-    const firstWallet = wallets[0]
-    console.log({ firstWallet })
-    const pubKey = publicKey()
-    if (!pubKey) {
-      await select(firstWallet.adapter.name)
-      await connect()
-    } else {
-      await disconnect()
+
+  async function signArbitary() {
+    try {
+      const signMsg = signMessage()
+      if (!signMsg) {
+        console.error("connected wallet is unable to sign arbitrary message!")
+        return
+      }
+      const res = await signMsg(SIGN_ARBITRARY_MSG)
+      console.log(res)
+      alert("Sign success! Check console logs for details.")
+    } catch (err) {
+      console.error(err)
+      alert((err as Error).message)
     }
   }
 
@@ -126,24 +143,52 @@ export default function Home() {
       removeUnregisterListener()
     })
   })
+  createEffect(() => {
+    console.log("connected wallet: ", { adapter: adapter() })
+  })
 
   createEffect(() => {
-    console.log("connected pub key: ", { adapter: adapter(), pubkey: publicKey() })
+    console.log("connected pub key: ", { pubkey: publicKey() })
   })
   return (
     <main class="text-center mx-auto text-gray-700 p-4 space-y-8">
       <h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">Hello world!</h1>
 
       <Hello />
+      <div class="flex flex-col gap-y-3 items-center justify-center">
+        <For each={Object.values(wallets)}>
+          {w => (
+            <button
+              class="rounded-lg px-3 py-1.5 text-lg bg-blue-300 w-fit"
+              onClick={async () => {
+                const _adapter = adapter()
+                if (!_adapter) {
+                  await select(w.adapter.name)
+                  await connect()
+                } else if (_adapter.name === w.adapter.name) {
+                  await disconnect()
+                }
+              }}
+            >
+              <Show
+                when={!adapter() || name() !== w.adapter.name}
+                fallback={`disconnect from ${w.adapter.name}`}
+              >
+                connect to {w.adapter.name}
+              </Show>
+            </button>
+          )}
+        </For>
+      </div>
       <div class="flex flex-col gap-y-3 items-center justify-center">
         <Show when={publicKey() != null} fallback={""}>
           <code>{publicKey()!.toString()}</code>
         </Show>
-        <button class="rounded-lg px-3 py-1.5 text-lg bg-blue-300 w-fit" onClick={handleConnect}>
-          <Show when={!publicKey()} fallback={"Disconnect!"}>
-            Connect!
-          </Show>
-        </button>
+        <Show when={publicKey()}>
+          <button class="rounded-lg px-3 py-1.5 text-lg bg-blue-300 w-fit" onClick={signArbitary}>
+            Sign message!
+          </button>
+        </Show>
       </div>
 
       <Counter />

diff --git a/examples/start-tailwind/wrangler.toml b/examples/start-tailwind/wrangler.toml
@@ -1,5 +1,5 @@
 # https://developers.cloudflare.com/pages/functions/wrangler-configuration
-name = "start-tailwind"
+name = "solana-wallets-solid-start-tailwind"
 pages_build_output_dir = "dist"
 compatibility_date = "2024-07-24"
 compatibility_flags = ["nodejs_compat"]

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,22 +1,21 @@
 {
   "name": "@solana-wallets-solid/core",
   "version": "0.2.0",
-  "description": "Example hello world package in the your-repository-name repository.",
+  "description": "Example hello world package in the solana-wallets-solid repository.",
   "license": "MIT",
-  "author": "your-author-name",
+  "author": "aidanaden",
   "contributors": [],
-  "homepage": "https://github.com/your-nickname/your-repository-name#readme",
+  "homepage": "https://github.com/aidanaden/solana-wallets-solid#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/your-nickname/your-repository-name.git"
+    "url": "git+https://github.com/aidanaden/solana-wallets-solid.git"
   },
   "bugs": {
-    "url": "https://github.com/your-nickname/your-repository-name/issues"
+    "url": "https://github.com/aidanaden/solana-wallets-solid/issues"
   },
   "keywords": [
     "solid"
   ],
-  "private": true,
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -60,5 +59,8 @@
   },
   "peerDependencies": {
     "solid-js": "^1.8.18"
+  },
+  "directories": {
+    "test": "test"
   }
 }
diff --git a/packages/core/src/localstorage.ts b/packages/core/src/localstorage.ts
@@ -0,0 +1,29 @@
+export function getLocalStorage<T>(
+  key: string,
+  defaultValue: T | undefined = undefined,
+): T | undefined {
+  try {
+    const value = localStorage.getItem(key)
+    if (value) return JSON.parse(value) as T
+  } catch (error) {
+    if (typeof window !== "undefined") {
+      console.error(error)
+    }
+  }
+
+  return defaultValue
+}
+
+export function setLocalStorage<T>(key: string, value: T | undefined = undefined): void {
+  try {
+    if (value === undefined) {
+      localStorage.removeItem(key)
+    } else {
+      localStorage.setItem(key, JSON.stringify(value))
+    }
+  } catch (error) {
+    if (typeof window !== "undefined") {
+      console.error(error)
+    }
+  }
+}