Docs Release - Transaction Preview docs, Expanded build env documentation, Connect wallet btn and latest W3O packages

docs/package.json

@@ -43,6 +43,7 @@
     "prettier-plugin-svelte": "^2.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rollup-plugin-polyfill-node": "^0.11.0",
     "shiki": "^0.10.1",
     "svelte": "^3.44.0",
     "svelte-check": "^2.7.1",
@@ -53,11 +54,28 @@
   },
   "type": "module",
   "dependencies": {
-    "@web3-onboard/core": "^2.8.4",
+    "@web3-onboard/coinbase": "^2.1.4",
+    "@web3-onboard/core": "^2.11.1-alpha.1",
+    "@web3-onboard/dcent": "^2.2.2",
+    "@web3-onboard/enkrypt": "^2.0.0",
+    "@web3-onboard/fortmatic": "^2.0.14",
     "@web3-onboard/gas": "^2.1.4",
-    "@web3-onboard/injected-wallets": "^2.2.3",
+    "@web3-onboard/gnosis": "^2.1.5",
+    "@web3-onboard/injected-wallets": "^2.4.0",
+    "@web3-onboard/keepkey": "^2.3.2",
+    "@web3-onboard/keystone": "^2.3.2",
+    "@web3-onboard/ledger": "^2.3.2",
+    "@web3-onboard/magic": "^2.1.3",
+    "@web3-onboard/mew-wallet": "^2.0.0",
+    "@web3-onboard/portis": "^2.1.3",
+    "@web3-onboard/sequence": "^2.0.4",
+    "@web3-onboard/tallyho": "^2.0.1",
+    "@web3-onboard/torus": "^2.2.0-alpha.1",
+    "@web3-onboard/trezor": "^2.3.2",
+    "@web3-onboard/uauth": "^2.0.1-alpha.1",
+    "@web3-onboard/web3auth": "^2.1.4-alpha.1",
+    "@web3-onboard/walletconnect": "^2.2.1",
     "animejs": "^3.2.1",
-    "ethers": "^5.7.0",
-    "rollup-plugin-polyfill-node": "^0.10.2"
+    "ethers": "^5.7.0"
   }
 }

docs/src/lib/components/ConnectWalletButton.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import type { OnboardAPI, WalletState } from '@web3-onboard/core'
+  import getOnboard from '$lib/services/onboard.js'
+  let onboard: OnboardAPI
+  let connectedWallets: WalletState[]
+  let buttonText = 'Connect'
+
+  async function connectWallet() {
+    if (onboard && onboard.state.get().wallets.length) {
+      onboard.disconnectWallet({ label: onboard.state.get().wallets[0].label })
+      buttonText = 'Connect'
+      return
+    }
+    if (onboard) {
+      await onboard.connectWallet()
+    }
+  }
+
+  onMount(async () => {
+    if (!onboard) {
+      onboard = await getOnboard()
+    }
+    const sub = onboard.state.select('wallets').subscribe((wallets) => {
+      connectedWallets = wallets
+      buttonText = wallets.length ? 'Disconnect' : (buttonText = 'Connect')
+    })
+    buttonText = onboard.state.get().wallets.length ? 'Disconnect' : (buttonText = 'Connect')
+  })
+</script>
+
+<button
+  class="rounded-lg bg-gray-inverse hover:bg-gray-hover hover:text-gray-inverse transition-all px-4 h-10 text-base text-gray-current"
+  on:click={() => connectWallet()}
+>
+  {buttonText}
+</button>

docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte

@@ -1,104 +1,17 @@
 <script lang="ts">
-  import { Chip } from '@svelteness/kit-docs'
+  import { onMount } from 'svelte'
 
-  import Onboard from '@web3-onboard/core'
-  import injectedModule from '@web3-onboard/injected-wallets'
+  import getOnboard from '$lib/services/onboard.js'
+  import ConnectWalletButton from '../../ConnectWalletButton.svelte'
+  let onboard: OnboardAPI
 
-  const INFURA_ID = '8b60d52405694345a99bcb82e722e0af'
-
-  const injected = injectedModule()
-
-  const onboard = Onboard({
-    wallets: [injected],
-    chains: [
-      {
-        id: '0x1',
-        token: 'ETH',
-        label: 'Ethereum Mainnet',
-        rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
-      },
-      {
-        id: '0x3',
-        token: 'tROP',
-        label: 'Ethereum Ropsten Testnet',
-        rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}`
-      }
-    ],
-    appMetadata: {
-      name: 'Documentation',
-      icon: '<svg></svg>',
-      description: 'Example showcasing how to connect a wallet.',
-      recommendedInjectedWallets: [
-        { name: 'MetaMask', url: 'https://metamask.io' },
-        { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
-      ]
-    },
-    accountCenter: { desktop: { enabled: false }, mobile: { enabled: false } }
-  })
-
-  const trunc = (address: string) =>
-    address ? address.slice(0, 6) + '...' + address.slice(-6) : null
-
-  let connecting = false
-
-  // Subscribe to wallet updates
-  const wallets$ = onboard.state.select('wallets')
-
-  // The first wallet in the array of connected wallets
-  $: connectedAccount = $wallets$?.[0]?.accounts?.[0]
-
-  async function connectWallet() {
-    if ($wallets$?.[0]?.provider) {
-      onboard.disconnectWallet({ label: $wallets$?.[0]?.label })
-    } else {
-      connecting = true
-      await onboard.connectWallet()
-      connecting = false
+  onMount(async () => {
+    if (!onboard) {
+      onboard = await getOnboard()
     }
-  }
-
-  $: buttonText = $wallets$?.[0]?.provider ? 'Disconnect' : connecting ? 'Connecting' : 'Connect'
-
-  $: account = connectedAccount?.ens?.name
-    ? {
-        ens: connectedAccount?.ens,
-        address: trunc(connectedAccount?.address)
-      }
-    : { address: trunc(connectedAccount?.address) }
+  })
 </script>
 
 <div class="flex items-center justify-center border-gray-divider border rounded-md h-40 p-4">
-  {#if $wallets$?.[0]?.provider}
-    <div
-      class="flex items-center w-full px-3 py-2 border border-gray-divider bg-gray-elevate text-gray-inverse rounded-md"
-    >
-      <div class="w-9 h-9 rounded-full overflow-hidden mr-2">
-        {#if account?.ens?.avatar?.url}
-          <img src={account?.ens?.avatar?.url} alt="" />
-        {:else}
-          <div class="bg-gradient-to-r from-cyan-500 to-blue-500 w-full h-full" />
-        {/if}
-      </div>
-      <div>
-        <div class="">
-          {account?.ens ? `${account?.ens?.name} (${account?.address})` : `${account?.address}`}
-        </div>
-        <div class=" text-sm">Connected to <Chip>{$wallets$?.[0]?.label}</Chip></div>
-      </div>
-
-      <button
-        class="ml-auto rounded-lg bg-gray-inverse hover:bg-gray-hover hover:text-gray-inverse transition-all px-4 h-10 text-base text-gray-current"
-        on:click={connectWallet}
-      >
-        {buttonText}
-      </button>
-    </div>
-  {:else}
-    <button
-      class=" rounded-lg bg-gray-inverse hover:bg-gray-hover hover:text-gray-inverse transition-all px-4 h-10 text-base text-gray-current"
-      on:click={connectWallet}
-    >
-      {buttonText}
-    </button>
-  {/if}
+    <ConnectWalletButton />
 </div>

docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md

@@ -6,26 +6,116 @@ Import the libraries and any wallets you would like to use. For this example, we
 ```js title="App.tsx"|copy
 import { Web3OnboardProvider, init } from '@web3-onboard/react'
 import injectedModule from '@web3-onboard/injected-wallets'
+import fortmaticModule from '@web3-onboard/fortmatic'
+import gnosisModule from '@web3-onboard/gnosis'
+import injectedModule from '@web3-onboard/injected-wallets'
+import keepkeyModule from '@web3-onboard/keepkey'
+import keystoneModule from '@web3-onboard/keystone'
+import ledgerModule from '@web3-onboard/ledger'
+import portisModule from '@web3-onboard/portis'
+import torusModule from '@web3-onboard/torus'
+import trezorModule from '@web3-onboard/trezor'
+import walletConnectModule from '@web3-onboard/walletconnect'
+import coinbaseModule from '@web3-onboard/coinbase'
+import magicModule from '@web3-onboard/magic'
+import web3authModule from '@web3-onboard/web3auth'
+import dcentModule from '@web3-onboard/dcent'
+import sequenceModule from '@web3-onboard/sequence'
+import tallyHoModule from '@web3-onboard/tallyho'
 
 const INFURA_KEY = ''
 
-const ethereumRopsten = {
-  id: '0x3',
-  token: 'rETH',
-  label: 'Ethereum Ropsten',
-  rpcUrl: `https://ropsten.infura.io/v3/${INFURA_KEY}`
-}
+const injected = injectedModule()
+const coinbase = coinbaseModule()
+const dcent = dcentModule()
+const walletConnect = walletConnectModule()
+
+const portis = portisModule({
+  apiKey: 'apiKey'
+})
+
+const fortmatic = fortmaticModule({
+  apiKey: 'apiKey'
+})
+
+const ledger = ledgerModule()
+const keystone = keystoneModule()
+const keepkey = keepkeyModule()
+const gnosis = gnosisModule()
+const sequence = sequenceModule()
+const tally = tallyModule()
 
-const polygonMainnet = {
-  id: '0x89',
-  token: 'MATIC',
-  label: 'Polygon',
-  rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
+const trezorOptions = {
+  email: '[email protected]',
+  appUrl: 'https://www.blocknative.com'
 }
 
-const chains = [ethereumRopsten, polygonMainnet]
+const trezor = trezorModule(trezorOptions)
 
-const wallets = [injectedModule()]
+const magic = magicModule({
+  apiKey: 'apiKey'
+})
+
+const enkrypt = enkryptModule()
+const mewWallet = mewWalletModule()
+
+const wallets = [
+  keepkey,
+  sequence,
+  injected,
+  tally,
+  ledger,
+  coinbase,
+  dcent,
+  trezor,
+  walletConnect,
+  enkrypt,
+  mewWallet,
+  gnosis,
+  magic,
+  fortmatic,
+  keystone,
+  portis
+]
+
+const chains = [
+  {
+    id: '0x1',
+    token: 'ETH',
+    label: 'Ethereum Mainnet',
+    rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
+  },
+  {
+    id: '0x5',
+    token: 'ETH',
+    label: 'Goerli',
+    rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}`
+  },
+  {
+    id: '0x13881',
+    token: 'MATIC',
+    label: 'Polygon - Mumbai',
+    rpcUrl: 'https://matic-mumbai.chainstacklabs.com'
+  },
+  {
+    id: '0x38',
+    token: 'BNB',
+    label: 'Binance',
+    rpcUrl: 'https://bsc-dataseed.binance.org/'
+  },
+  {
+    id: '0xA',
+    token: 'OETH',
+    label: 'Optimism',
+    rpcUrl: 'https://mainnet.optimism.io'
+  },
+  {
+    id: '0xA4B1',
+    token: 'ARB-ETH',
+    label: 'Arbitrum',
+    rpcUrl: 'https://rpc.ankr.com/arbitrum'
+  }
+]
 
 const appMetadata = {
   name: 'Connect Wallet Example',