-
Notifications
You must be signed in to change notification settings - Fork 513
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add wallet connect btn to navbar of Docs (#1396)
* Working with the exception of a few wallets * Checking uauth issue * Updated uauath wallet usage but still needs joi fix * Committing with a couple of issues * Connect example with icon * Add o2 service for consistency when wallet is connected * Refactor to simplify * Add gas to optimizeDeps arr * Add ga package back into deps * Update versions to latest * Everything working except torus * All packages working, sveltekit config updated, w3o packages updated * Add more build infor for create react app projects * Add falsback to webpack config * Add build env links to wallet modules and build env info to module docs * Add build info to TP docs
- Loading branch information
Showing
33 changed files
with
6,419 additions
and
288 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
105 changes: 9 additions & 96 deletions
105
docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
e06539fThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
web3-onboard-docs – ./
web3-onboard-docs-git-docs-develop-blocknative.vercel.app
web3-onboard-docs-blocknative.vercel.app
web3-onboard-beta.vercel.app