diff --git a/examples/nextjs/src/app/Connect.module.css b/examples/nextjs/src/app/Connect.module.css index 45a13db9..418469c1 100644 --- a/examples/nextjs/src/app/Connect.module.css +++ b/examples/nextjs/src/app/Connect.module.css @@ -1,3 +1,33 @@ +.networkGroup { + display: flex; + flex-direction: column; + align-items: center; + gap: 1em; + margin: 2em; + padding: 2em; + background-color: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.025)); + border-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); + border-style: solid; + border-width: 1px; + border-radius: 8px; +} + +.networkGroup h4 { + margin: 0; +} + +.networkGroup .activeNetwork { + text-transform: capitalize; +} + +.networkButtons { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 0.5em; +} + .walletGroup { display: flex; flex-direction: column; diff --git a/examples/nextjs/src/app/Connect.tsx b/examples/nextjs/src/app/Connect.tsx index 00df9a1b..0419480f 100644 --- a/examples/nextjs/src/app/Connect.tsx +++ b/examples/nextjs/src/app/Connect.tsx @@ -1,12 +1,19 @@ 'use client' -import { WalletId, useWallet, type Wallet } from '@txnlab/use-wallet-react' +import { NetworkId, WalletId, useWallet, type Wallet } from '@txnlab/use-wallet-react' import algosdk from 'algosdk' import * as React from 'react' import styles from './Connect.module.css' export function Connect() { - const { algodClient, activeAddress, transactionSigner, wallets } = useWallet() + const { + algodClient, + activeAddress, + activeNetwork, + setActiveNetwork, + transactionSigner, + wallets + } = useWallet() const [isSending, setIsSending] = React.useState(false) const [magicEmail, setMagicEmail] = React.useState('') @@ -73,6 +80,35 @@ export function Connect() { return (
+
+

+ Current Network: {activeNetwork} +

+
+ + + +
+
+ {wallets.map((wallet) => (

diff --git a/examples/nuxt/components/Connect.vue b/examples/nuxt/components/Connect.vue index bd9535f9..daac3a9a 100644 --- a/examples/nuxt/components/Connect.vue +++ b/examples/nuxt/components/Connect.vue @@ -1,9 +1,15 @@