feat: feat: added vue for exports in solana (#2449)

Co-authored-by: valentyn-solana <[email protected]>
reown-com · Jul 7, 2024 · c802bad · c802bad
1 parent be32dd7
commit c802bad
Show file tree

Hide file tree

Showing 15 changed files with 1,444 additions and 0 deletions.
diff --git a/examples/react-solana/CHANGELOG.md b/examples/react-solana/CHANGELOG.md
diff --git a/examples/react-solana/index.html b/examples/react-solana/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React wagmi example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react-solana/package.json b/examples/react-solana/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@examples/react-solana",
+  "private": true,
+  "version": "5.0.6",
+  "scripts": {
+    "dev:example": "vite --port 3002",
+    "build:examples": "vite build"
+  },
+  "dependencies": {
+    "@web3modal/solana": "5.0.6",
+    "@tanstack/react-query": "5.24.8",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "vite": "5.2.11",
+    "@solana/wallet-adapter-backpack": "0.1.14",
+    "@solana/wallet-adapter-wallets": "0.19.32"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "4.2.1",
+    "vite": "5.2.11"
+  }
+}
diff --git a/examples/react-solana/src/App.tsx b/examples/react-solana/src/App.tsx
@@ -0,0 +1,102 @@
+import { defaultSolanaConfig } from '@web3modal/solana/react'
+import {
+  createWeb3Modal,
+  useWeb3Modal,
+  useWeb3ModalEvents,
+  useWeb3ModalState,
+  useWeb3ModalTheme
+} from '@web3modal/solana/react'
+import { BackpackWalletAdapter } from '@solana/wallet-adapter-backpack'
+import {
+  PhantomWalletAdapter,
+  HuobiWalletAdapter,
+  SolflareWalletAdapter,
+  TrustWalletAdapter
+} from '@solana/wallet-adapter-wallets'
+
+// @ts-expect-error 1. Get projectId
+const projectId = import.meta.env.VITE_PROJECT_ID
+if (!projectId) {
+  throw new Error('VITE_PROJECT_ID is not set')
+}
+
+const chains = [
+  {
+    chainId: '5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+    name: 'Solana',
+    currency: 'SOL',
+    explorerUrl: 'https://solscan.io',
+    rpcUrl: 'https://rpc.walletconnect.org/v1'
+  },
+  {
+    chainId: '4uhcVJyU9pJkvQyS88uRDiswHXSCkY3z',
+    name: 'Solana Testnet',
+    currency: 'SOL',
+    explorerUrl: 'https://explorer.solana.com/?cluster=testnet',
+    rpcUrl: 'https://api.testnet.solana.com'
+  },
+  {
+    chainId: 'EtWTRABZaYq6iMfeYKouRu166VU2xqa1',
+    name: 'Solana Devnet',
+    currency: 'SOL',
+    explorerUrl: 'https://explorer.solana.com/?cluster=devnet',
+    rpcUrl: 'https://api.devnet.solana.com'
+  }
+]
+
+// 2. Create solanaConfig
+const solanaConfig = defaultSolanaConfig({
+  chains: chains,
+  projectId,
+  metadata: {
+    name: 'Web3Modal React Example',
+    description: 'Web3Modal React Example',
+    url: '',
+    icons: []
+  }
+})
+
+// 3. Create modal
+createWeb3Modal({
+  solanaConfig,
+  projectId,
+  themeMode: 'light',
+  chains,
+  wallets: [
+    new BackpackWalletAdapter(),
+    new HuobiWalletAdapter(),
+    new PhantomWalletAdapter(),
+    new SolflareWalletAdapter(),
+    new TrustWalletAdapter()
+  ],
+  themeVariables: {
+    '--w3m-color-mix': '#00DCFF',
+    '--w3m-color-mix-strength': 20
+  }
+})
+
+export default function App() {
+  // 4. Use modal hook
+  const modal = useWeb3Modal()
+  const state = useWeb3ModalState()
+  const { themeMode, themeVariables, setThemeMode } = useWeb3ModalTheme()
+  const events = useWeb3ModalEvents()
+
+  return (
+    <>
+      <w3m-button />
+      <w3m-network-button />
+      <w3m-connect-button />
+      <w3m-account-button />
+
+      <button onClick={() => modal.open()}>Connect Wallet</button>
+      <button onClick={() => modal.open({ view: 'Networks' })}>Choose Network</button>
+      <button onClick={() => setThemeMode(themeMode === 'dark' ? 'light' : 'dark')}>
+        Toggle Theme Mode
+      </button>
+      <pre>{JSON.stringify(state, null, 2)}</pre>
+      <pre>{JSON.stringify({ themeMode, themeVariables }, null, 2)}</pre>
+      <pre>{JSON.stringify(events, null, 2)}</pre>
+    </>
+  )
+}
diff --git a/examples/react-solana/src/main.tsx b/examples/react-solana/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('app')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/examples/react-solana/tsconfig.json b/examples/react-solana/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "noEmit": true,
+    "incremental": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/react-solana/vite.config.js b/examples/react-solana/vite.config.js
@@ -0,0 +1,6 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [react()]
+})