[v3] networks view (#1231)

apps/gallery/package.json

@@ -10,15 +10,15 @@
   "dependencies": {
     "@web3modal/ui": "3.0.0",
     "lit": "2.7.6",
-    "storybook": "7.1.0"
+    "storybook": "7.1.1"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.1.0",
-    "@storybook/addon-links": "7.1.0",
-    "@storybook/blocks": "7.1.0",
-    "@storybook/theming": "7.1.0",
-    "@storybook/web-components": "7.1.0",
-    "@storybook/web-components-vite": "7.1.0",
+    "@storybook/addon-essentials": "7.1.1",
+    "@storybook/addon-links": "7.1.1",
+    "@storybook/blocks": "7.1.1",
+    "@storybook/theming": "7.1.1",
+    "@storybook/web-components": "7.1.1",
+    "@storybook/web-components-vite": "7.1.1",
     "file-system-cache": "2.4.2"
   }
 }

apps/gallery/stories/components/wui-text.stories.ts

@@ -2,7 +2,8 @@ import type { Meta } from '@storybook/web-components'
 import '@web3modal/ui/src/components/wui-text'
 import type { WuiText } from '@web3modal/ui/src/components/wui-text'
 import { html } from 'lit'
-import { colorOptions, textOptions } from '../../utils/PresetUtils'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { colorOptions, textAlignOptions, textOptions } from '../../utils/PresetUtils'
 
 type Component = Meta<WuiText>
 
@@ -20,13 +21,18 @@ export default {
     color: {
       options: colorOptions,
       control: { type: 'select' }
+    },
+    align: {
+      options: textAlignOptions,
+      control: { type: 'select' }
     }
   }
 } as Component
 
 export const Default: Component = {
-  render: args =>
-    html`<wui-text variant=${args.variant} color=${args.color}
-      >The fox jumped over the lazy dog</wui-text
-    >`
+  render: args => html`
+    <wui-text variant=${args.variant} color=${args.color} align=${ifDefined(args.align)}>
+      The fox jumped over the lazy dog
+    </wui-text>
+  `
 }

apps/gallery/stories/composites/wui-card-select.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta } from '@storybook/web-components'
 import '@web3modal/ui/src/composites/wui-card-select'
-import '../../components/gallery-container'
 import type { WuiCardSelect } from '@web3modal/ui/src/composites/wui-card-select'
 import { html } from 'lit'
+import '../../components/gallery-container'
 import { cardSelectOptions, walletImageSrc } from '../../utils/PresetUtils'
 
 type Component = Meta<WuiCardSelect>
@@ -13,7 +13,8 @@ export default {
     imageSrc: walletImageSrc,
     name: 'Rainbow',
     disabled: false,
-    type: 'wallet'
+    type: 'wallet',
+    selected: false
   },
   argTypes: {
     type: {
@@ -28,9 +29,10 @@ export const Default: Component = {
     <gallery-container width="76"
       ><wui-card-select
         type=${args.type}
-        imageSrc=${args.imageSrc}
+        .imageSrc=${args.imageSrc}
         ?disabled=${args.disabled}
         name=${args.name}
+        .selected=${args.selected}
       ></wui-card-select>
     </gallery-container>
   `

apps/gallery/stories/composites/wui-network-image.stories.ts

@@ -10,11 +10,16 @@ export default {
   title: 'Composites/wui-network-image',
   args: {
     imageSrc: networkImageSrc,
-    name: 'Ethereum'
+    name: 'Ethereum',
+    selected: false
   }
 } as Component
 
 export const Default: Component = {
   render: args =>
-    html`<wui-network-image .imageSrc=${args.imageSrc} alt=${args.name}></wui-network-image>`
+    html`<wui-network-image
+      .imageSrc=${args.imageSrc}
+      alt=${args.name}
+      .selected=${args.selected}
+    ></wui-network-image>`
 }

apps/gallery/utils/PresetUtils.ts

@@ -20,6 +20,7 @@ import type {
   PlacementType,
   SpacingType,
   TagType,
+  TextAlign,
   TextType,
   ThemeType,
   TransactionType
@@ -52,6 +53,8 @@ export const textOptions: TextType[] = [
   'large-700'
 ]
 
+export const textAlignOptions: TextAlign[] = ['center', 'left', 'right']
+
 export const flexDirectionOptions: FlexDirectionType[] = [
   'column-reverse',
   'column',

apps/laboratory/package.json

@@ -12,7 +12,7 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "next": "13.4.12",
-    "framer-motion": "10.13.0",
+    "framer-motion": "10.13.1",
     "wagmi": "1.3.9",
     "viem": "1.4.1"
   }

apps/laboratory/src/components/ConnectButton.tsx

@@ -1,21 +1,17 @@
-import type { ButtonProps } from '@chakra-ui/react'
-import { Button, VStack } from '@chakra-ui/react'
+import { Button } from '@chakra-ui/react'
 import { useAccount, useDisconnect } from 'wagmi'
+import { modal } from '../pages/index'
 
-interface Props {
-  onConnect: ButtonProps['onClick']
-}
-
-export function ConnectButton({ onConnect }: Props) {
+export function ConnectButton() {
   const { isConnected, address } = useAccount()
   const { disconnect } = useDisconnect()
 
   return isConnected ? (
-    <VStack gap={4}>
-      <Button onClick={onConnect}>{address}</Button>
+    <>
+      <Button onClick={() => modal.open()}>{address}</Button>
       <Button onClick={() => disconnect()}>Disconnect</Button>
-    </VStack>
+    </>
   ) : (
-    <Button onClick={onConnect}>Connect Wallet</Button>
+    <Button onClick={() => modal.open()}>Connect Wallet</Button>
   )
 }

apps/laboratory/src/components/NetworksButton.tsx

@@ -0,0 +1,11 @@
+import { Button } from '@chakra-ui/react'
+import { useNetwork } from 'wagmi'
+import { modal } from '../pages/index'
+
+export function NetworksButton() {
+  const { chain } = useNetwork()
+
+  return (
+    <Button onClick={() => modal.open({ view: 'Networks' })}>{chain?.name ?? 'Networks'}</Button>
+  )
+}

apps/laboratory/src/pages/index.tsx

@@ -1,12 +1,14 @@
-import { Center } from '@chakra-ui/react'
+import { Center, VStack } from '@chakra-ui/react'
 import { Web3Modal } from '@web3modal/wagmi'
 import { useEffect, useState } from 'react'
-import { WagmiConfig, configureChains, createConfig, mainnet } from 'wagmi'
+import { WagmiConfig, configureChains, createConfig } from 'wagmi'
+import { arbitrum, avalanche, gnosis, mainnet, optimism, polygon } from 'wagmi/chains'
 import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'
 import { InjectedConnector } from 'wagmi/connectors/injected'
 import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
 import { publicProvider } from 'wagmi/providers/public'
 import { ConnectButton } from '../components/ConnectButton'
+import { NetworksButton } from '../components/NetworksButton'
 
 // 1. Get projectId
 const projectId = process.env.NEXT_PUBLIC_PROJECT_ID
@@ -15,7 +17,10 @@ if (!projectId) {
 }
 
 // 2. Create wagmiConfig
-const { chains, publicClient } = configureChains([mainnet], [publicProvider()])
+const { chains, publicClient } = configureChains(
+  [mainnet, arbitrum, avalanche, polygon, gnosis, optimism],
+  [publicProvider()]
+)
 const wagmiConfig = createConfig({
   autoConnect: true,
   connectors: [
@@ -27,24 +32,23 @@ const wagmiConfig = createConfig({
 })
 
 // 3. Create Web3Modal
-const modal = new Web3Modal({ wagmiConfig, projectId })
+export const modal = new Web3Modal({ wagmiConfig, projectId, chains })
 
 // 4. Create Home page
 export default function Home() {
   const [ready, setReady] = useState(false)
 
-  async function openModal() {
-    await modal.open()
-  }
-
   useEffect(() => {
     setReady(true)
   }, [])
 
   return ready ? (
     <WagmiConfig config={wagmiConfig}>
       <Center h="100vh">
-        <ConnectButton onConnect={openModal} />
+        <VStack gap={4}>
+          <ConnectButton />
+          <NetworksButton />
+        </VStack>
       </Center>
     </WagmiConfig>
   ) : null