Releases · reown-com/appkit

28 Jul 17:19

github-actions

@reown/appkit@1.7.17

f5a4040

@reown/appkit@1.7.17

Patch Changes

#4688 a457e61 Thanks @magiziz! - Upgraded wallet button to support multichain via the namespace prop

Example usage with Components

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'

const wallets = [
  { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
  { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
  { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
]

export function WalletButtons() {
  return (
    <>
      {wallets.map(({ wallet, namespace, label }) => (
        <AppKitWalletButton
          key={`${wallet}-${namespace}`}
          wallet={wallet}
          namespace={namespace}
        />
      ))}
    </>
  )
}

Example usage with Hooks

import { useAppKitWallet } from '@reown/appkit-wallet-button/react'

export function YourApp() {
  const { data, error, isPending, isSuccess, isError, connect } = useAppKitWallet({
    namespace: 'eip155', // Use 'solana' or 'bip122' for other chains
    onError: err => {
      // ...
    },
    onSuccess: data => {
      // ...
    }
  })

  return (
    <>
      <button onClick={() => connect('walletConnect')}>Open QR modal</button>
      <button onClick={() => connect('metamask')}>Connect to MetaMask</button>
      <button onClick={() => connect('google')}>Connect to Google</button>
    </>
  )
}

Example usage with Vanilla JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import '@reown/appkit-wallet-button'
      import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

      const wallet = createAppKitWalletButton({ namespace: 'eip155' })

      wallet.subscribeIsReady(({ isReady }) => {
        if (!isReady) return

        document.querySelectorAll('button[data-wallet]').forEach(button => {
          button.disabled = false
          button.onclick = () => {
            const id = button.getAttribute('data-wallet')
            wallet.connect(id)
          }
        })
      })
    </script>
  </head>
  <body>
    <appkit-wallet-button wallet="metamask" namespace="eip155"></appkit-wallet-button>

    <button data-wallet="walletConnect" disabled>Open QR modal</button>
    <button data-wallet="metamask" disabled>Connect to MetaMask</button>
    <button data-wallet="google" disabled>Connect to Google</button>
  </body>
</html>

#4696 2863286 Thanks @magiziz! - Introduced AppKitProvider React component for easy AppKit integration in React apps

Example usage

import { AppKitProvider } from '@reown/appkit/react'

function App() {
  return (
    <AppKitProvider
      projectId="YOUR_PROJECT_ID"
      networks={
        [
          /* Your Networks */
        ]
      }
    >
      {/* Your App */}
    </AppKitProvider>
  )
}

#4690 974c73f Thanks @tomiir! - Adds sui and stacks as predefined networks.
Exports AVAILABLE_NAMESPACES constant from networks and common packages.
#4646 f9e9842 Thanks @tomiir! - Fixes issue where rpc url would not be overriden on secure site on some connections
#4704 5391a12 Thanks @magiziz! - Fixed an issue where the update email view would not open when using the useAppKitUpdateEmail hook

#4687 43e56fc Thanks @enesozturk! - Introduces AppKit React components. React users can now use the new components instead of HTML elements.

Example

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'
import { AppKitButton, AppKitNetworkButton } from '@reown/appkit/react'

export function AppKitButtons() {
  return (
    <div>
      {/* Default */}
      <AppkitButton />
      <AppKitNetworkButton />
      <AppKitWalletButton wallet="metamask" />
      {/* With parameters */}
      <AppkitButton namespace="eip155" />
    </div>
  )
}

#4449 fde2340 Thanks @zoruka! - Add DataCapture views enabling integrating email collection for ReownAuthentication.
#4605 e845518 Thanks @enesozturk! - Updates ChainController and AccountController utils, adds testing utils for controllers
#4686 2a953de Thanks @enesozturk! - Updates error messages and adds error codes
#4708 a5410b9 Thanks @magiziz! - Fixed an issue where the modal would close automatically after disconnecting a wallet from the profile view
#4709 7d41aa6 Thanks @zoruka! - Fix email capture flow for embedded wallet that was skiping due to one click auth
Updated dependencies [a457e61, 2863286, 974c73f, f9e9842, 5391a12, 43e56fc, fde2340, e845518, da6d268, 2a953de, a5410b9, 7d41aa6]:
- @reown/appkit-controllers@1.7.17
- @reown/appkit-scaffold-ui@1.7.17
- @reown/appkit-utils@1.7.17
- @reown/appkit-common@1.7.17
- @reown/appkit-pay@1.7.17
- @reown/appkit-polyfills@1.7.17
- @reown/appkit-ui@1.7.17
- @reown/appkit-wallet@1.7.17

Assets 2

28 Jul 17:20

github-actions

@reown/appkit-wallet@1.7.17

f5a4040

@reown/appkit-wallet@1.7.17

Patch Changes

#4688 a457e61 Thanks @magiziz! - Upgraded wallet button to support multichain via the namespace prop

Example usage with Components

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'

const wallets = [
  { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
  { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
  { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
]

export function WalletButtons() {
  return (
    <>
      {wallets.map(({ wallet, namespace, label }) => (
        <AppKitWalletButton
          key={`${wallet}-${namespace}`}
          wallet={wallet}
          namespace={namespace}
        />
      ))}
    </>
  )
}

Example usage with Hooks

import { useAppKitWallet } from '@reown/appkit-wallet-button/react'

export function YourApp() {
  const { data, error, isPending, isSuccess, isError, connect } = useAppKitWallet({
    namespace: 'eip155', // Use 'solana' or 'bip122' for other chains
    onError: err => {
      // ...
    },
    onSuccess: data => {
      // ...
    }
  })

  return (
    <>
      <button onClick={() => connect('walletConnect')}>Open QR modal</button>
      <button onClick={() => connect('metamask')}>Connect to MetaMask</button>
      <button onClick={() => connect('google')}>Connect to Google</button>
    </>
  )
}

Example usage with Vanilla JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import '@reown/appkit-wallet-button'
      import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

      const wallet = createAppKitWalletButton({ namespace: 'eip155' })

      wallet.subscribeIsReady(({ isReady }) => {
        if (!isReady) return

        document.querySelectorAll('button[data-wallet]').forEach(button => {
          button.disabled = false
          button.onclick = () => {
            const id = button.getAttribute('data-wallet')
            wallet.connect(id)
          }
        })
      })
    </script>
  </head>
  <body>
    <appkit-wallet-button wallet="metamask" namespace="eip155"></appkit-wallet-button>

    <button data-wallet="walletConnect" disabled>Open QR modal</button>
    <button data-wallet="metamask" disabled>Connect to MetaMask</button>
    <button data-wallet="google" disabled>Connect to Google</button>
  </body>
</html>

#4696 2863286 Thanks @magiziz! - Introduced AppKitProvider React component for easy AppKit integration in React apps

Example usage

import { AppKitProvider } from '@reown/appkit/react'

function App() {
  return (
    <AppKitProvider
      projectId="YOUR_PROJECT_ID"
      networks={
        [
          /* Your Networks */
        ]
      }
    >
      {/* Your App */}
    </AppKitProvider>
  )
}

#4690 974c73f Thanks @tomiir! - Adds sui and stacks as predefined networks.
Exports AVAILABLE_NAMESPACES constant from networks and common packages.
#4646 f9e9842 Thanks @tomiir! - Fixes issue where rpc url would not be overriden on secure site on some connections
#4704 5391a12 Thanks @magiziz! - Fixed an issue where the update email view would not open when using the useAppKitUpdateEmail hook

#4687 43e56fc Thanks @enesozturk! - Introduces AppKit React components. React users can now use the new components instead of HTML elements.

Example

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'
import { AppKitButton, AppKitNetworkButton } from '@reown/appkit/react'

export function AppKitButtons() {
  return (
    <div>
      {/* Default */}
      <AppkitButton />
      <AppKitNetworkButton />
      <AppKitWalletButton wallet="metamask" />
      {/* With parameters */}
      <AppkitButton namespace="eip155" />
    </div>
  )
}

#4449 fde2340 Thanks @zoruka! - Add DataCapture views enabling integrating email collection for ReownAuthentication.
#4605 e845518 Thanks @enesozturk! - Updates ChainController and AccountController utils, adds testing utils for controllers
#4686 2a953de Thanks @enesozturk! - Updates error messages and adds error codes
#4708 a5410b9 Thanks @magiziz! - Fixed an issue where the modal would close automatically after disconnecting a wallet from the profile view
#4709 7d41aa6 Thanks @zoruka! - Fix email capture flow for embedded wallet that was skiping due to one click auth
Updated dependencies [a457e61, 2863286, 974c73f, 5391a12, 43e56fc, fde2340, e845518, 2a953de, a5410b9, 7d41aa6]:
- @reown/appkit-common@1.7.17
- @reown/appkit-polyfills@1.7.17

Assets 2

28 Jul 17:20

github-actions

@reown/appkit-wallet-button@1.7.17

f5a4040

@reown/appkit-wallet-button@1.7.17

Patch Changes

#4688 a457e61 Thanks @magiziz! - Upgraded wallet button to support multichain via the namespace prop

Example usage with Components

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'

const wallets = [
  { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
  { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
  { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
]

export function WalletButtons() {
  return (
    <>
      {wallets.map(({ wallet, namespace, label }) => (
        <AppKitWalletButton
          key={`${wallet}-${namespace}`}
          wallet={wallet}
          namespace={namespace}
        />
      ))}
    </>
  )
}

Example usage with Hooks

import { useAppKitWallet } from '@reown/appkit-wallet-button/react'

export function YourApp() {
  const { data, error, isPending, isSuccess, isError, connect } = useAppKitWallet({
    namespace: 'eip155', // Use 'solana' or 'bip122' for other chains
    onError: err => {
      // ...
    },
    onSuccess: data => {
      // ...
    }
  })

  return (
    <>
      <button onClick={() => connect('walletConnect')}>Open QR modal</button>
      <button onClick={() => connect('metamask')}>Connect to MetaMask</button>
      <button onClick={() => connect('google')}>Connect to Google</button>
    </>
  )
}

Example usage with Vanilla JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import '@reown/appkit-wallet-button'
      import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

      const wallet = createAppKitWalletButton({ namespace: 'eip155' })

      wallet.subscribeIsReady(({ isReady }) => {
        if (!isReady) return

        document.querySelectorAll('button[data-wallet]').forEach(button => {
          button.disabled = false
          button.onclick = () => {
            const id = button.getAttribute('data-wallet')
            wallet.connect(id)
          }
        })
      })
    </script>
  </head>
  <body>
    <appkit-wallet-button wallet="metamask" namespace="eip155"></appkit-wallet-button>

    <button data-wallet="walletConnect" disabled>Open QR modal</button>
    <button data-wallet="metamask" disabled>Connect to MetaMask</button>
    <button data-wallet="google" disabled>Connect to Google</button>
  </body>
</html>

#4696 2863286 Thanks @magiziz! - Introduced AppKitProvider React component for easy AppKit integration in React apps

Example usage

import { AppKitProvider } from '@reown/appkit/react'

function App() {
  return (
    <AppKitProvider
      projectId="YOUR_PROJECT_ID"
      networks={
        [
          /* Your Networks */
        ]
      }
    >
      {/* Your App */}
    </AppKitProvider>
  )
}

#4690 974c73f Thanks @tomiir! - Adds sui and stacks as predefined networks.
Exports AVAILABLE_NAMESPACES constant from networks and common packages.
#4704 5391a12 Thanks @magiziz! - Fixed an issue where the update email view would not open when using the useAppKitUpdateEmail hook

#4687 43e56fc Thanks @enesozturk! - Introduces AppKit React components. React users can now use the new components instead of HTML elements.

Example

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'
import { AppKitButton, AppKitNetworkButton } from '@reown/appkit/react'

export function AppKitButtons() {
  return (
    <div>
      {/* Default */}
      <AppkitButton />
      <AppKitNetworkButton />
      <AppKitWalletButton wallet="metamask" />
      {/* With parameters */}
      <AppkitButton namespace="eip155" />
    </div>
  )
}

#4449 fde2340 Thanks @zoruka! - Add DataCapture views enabling integrating email collection for ReownAuthentication.
#4605 e845518 Thanks @enesozturk! - Updates ChainController and AccountController utils, adds testing utils for controllers
#4686 2a953de Thanks @enesozturk! - Updates error messages and adds error codes
#4708 a5410b9 Thanks @magiziz! - Fixed an issue where the modal would close automatically after disconnecting a wallet from the profile view
#4709 7d41aa6 Thanks @zoruka! - Fix email capture flow for embedded wallet that was skiping due to one click auth
Updated dependencies [a457e61, 2863286, 974c73f, 5391a12, 43e56fc, fde2340, e845518, 2a953de, a5410b9, 7d41aa6]:
- @reown/appkit-controllers@1.7.17
- @reown/appkit-utils@1.7.17
- @reown/appkit-common@1.7.17
- @reown/appkit-ui@1.7.17

Assets 2

28 Jul 17:20

github-actions

@reown/appkit-utils@1.7.17

f5a4040

@reown/appkit-utils@1.7.17

Patch Changes

#4688 a457e61 Thanks @magiziz! - Upgraded wallet button to support multichain via the namespace prop

Example usage with Components

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'

const wallets = [
  { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
  { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
  { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
]

export function WalletButtons() {
  return (
    <>
      {wallets.map(({ wallet, namespace, label }) => (
        <AppKitWalletButton
          key={`${wallet}-${namespace}`}
          wallet={wallet}
          namespace={namespace}
        />
      ))}
    </>
  )
}

Example usage with Hooks

import { useAppKitWallet } from '@reown/appkit-wallet-button/react'

export function YourApp() {
  const { data, error, isPending, isSuccess, isError, connect } = useAppKitWallet({
    namespace: 'eip155', // Use 'solana' or 'bip122' for other chains
    onError: err => {
      // ...
    },
    onSuccess: data => {
      // ...
    }
  })

  return (
    <>
      <button onClick={() => connect('walletConnect')}>Open QR modal</button>
      <button onClick={() => connect('metamask')}>Connect to MetaMask</button>
      <button onClick={() => connect('google')}>Connect to Google</button>
    </>
  )
}

Example usage with Vanilla JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import '@reown/appkit-wallet-button'
      import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

      const wallet = createAppKitWalletButton({ namespace: 'eip155' })

      wallet.subscribeIsReady(({ isReady }) => {
        if (!isReady) return

        document.querySelectorAll('button[data-wallet]').forEach(button => {
          button.disabled = false
          button.onclick = () => {
            const id = button.getAttribute('data-wallet')
            wallet.connect(id)
          }
        })
      })
    </script>
  </head>
  <body>
    <appkit-wallet-button wallet="metamask" namespace="eip155"></appkit-wallet-button>

    <button data-wallet="walletConnect" disabled>Open QR modal</button>
    <button data-wallet="metamask" disabled>Connect to MetaMask</button>
    <button data-wallet="google" disabled>Connect to Google</button>
  </body>
</html>

#4696 2863286 Thanks @magiziz! - Introduced AppKitProvider React component for easy AppKit integration in React apps

Example usage

import { AppKitProvider } from '@reown/appkit/react'

function App() {
  return (
    <AppKitProvider
      projectId="YOUR_PROJECT_ID"
      networks={
        [
          /* Your Networks */
        ]
      }
    >
      {/* Your App */}
    </AppKitProvider>
  )
}

#4690 974c73f Thanks @tomiir! - Adds sui and stacks as predefined networks.
Exports AVAILABLE_NAMESPACES constant from networks and common packages.
#4704 5391a12 Thanks @magiziz! - Fixed an issue where the update email view would not open when using the useAppKitUpdateEmail hook

#4687 43e56fc Thanks @enesozturk! - Introduces AppKit React components. React users can now use the new components instead of HTML elements.

Example

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'
import { AppKitButton, AppKitNetworkButton } from '@reown/appkit/react'

export function AppKitButtons() {
  return (
    <div>
      {/* Default */}
      <AppkitButton />
      <AppKitNetworkButton />
      <AppKitWalletButton wallet="metamask" />
      {/* With parameters */}
      <AppkitButton namespace="eip155" />
    </div>
  )
}

#4449 fde2340 Thanks @zoruka! - Add DataCapture views enabling integrating email collection for ReownAuthentication.
#4605 e845518 Thanks @enesozturk! - Updates ChainController and AccountController utils, adds testing utils for controllers
#4686 2a953de Thanks @enesozturk! - Updates error messages and adds error codes
#4708 a5410b9 Thanks @magiziz! - Fixed an issue where the modal would close automatically after disconnecting a wallet from the profile view
#4709 7d41aa6 Thanks @zoruka! - Fix email capture flow for embedded wallet that was skiping due to one click auth
Updated dependencies [a457e61, 2863286, 974c73f, f9e9842, 5391a12, 43e56fc, fde2340, e845518, 2a953de, a5410b9, 7d41aa6]:
- @reown/appkit-controllers@1.7.17
- @reown/appkit-common@1.7.17
- @reown/appkit-polyfills@1.7.17
- @reown/appkit-wallet@1.7.17

Assets 2

28 Jul 17:20

github-actions

@reown/appkit-universal-connector@1.7.17

f5a4040

@reown/appkit-universal-connector@1.7.17

Patch Changes

#4704 5391a12 Thanks @magiziz! - Fixed an issue where the update email view would not open when using the useAppKitUpdateEmail hook
#4703 3ad29e2 Thanks @tomiir! - Adds react export with UniversalConnectorProvider
#4708 a5410b9 Thanks @magiziz! - Fixed an issue where the modal would close automatically after disconnecting a wallet from the profile view
#4709 7d41aa6 Thanks @zoruka! - Fix email capture flow for embedded wallet that was skiping due to one click auth
Updated dependencies [a457e61, 2863286, 974c73f, f9e9842, 5391a12, 43e56fc, fde2340, e845518, 2a953de, a5410b9, 7d41aa6]:
- @reown/appkit@1.7.17
- @reown/appkit-common@1.7.17

Assets 2

28 Jul 17:20

github-actions

@reown/appkit-ui@1.7.17

f5a4040

@reown/appkit-ui@1.7.17

Patch Changes

#4688 a457e61 Thanks @magiziz! - Upgraded wallet button to support multichain via the namespace prop

Example usage with Components

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'

const wallets = [
  { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
  { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
  { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
]

export function WalletButtons() {
  return (
    <>
      {wallets.map(({ wallet, namespace, label }) => (
        <AppKitWalletButton
          key={`${wallet}-${namespace}`}
          wallet={wallet}
          namespace={namespace}
        />
      ))}
    </>
  )
}

Example usage with Hooks

import { useAppKitWallet } from '@reown/appkit-wallet-button/react'

export function YourApp() {
  const { data, error, isPending, isSuccess, isError, connect } = useAppKitWallet({
    namespace: 'eip155', // Use 'solana' or 'bip122' for other chains
    onError: err => {
      // ...
    },
    onSuccess: data => {
      // ...
    }
  })

  return (
    <>
      <button onClick={() => connect('walletConnect')}>Open QR modal</button>
      <button onClick={() => connect('metamask')}>Connect to MetaMask</button>
      <button onClick={() => connect('google')}>Connect to Google</button>
    </>
  )
}

Example usage with Vanilla JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import '@reown/appkit-wallet-button'
      import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

      const wallet = createAppKitWalletButton({ namespace: 'eip155' })

      wallet.subscribeIsReady(({ isReady }) => {
        if (!isReady) return

        document.querySelectorAll('button[data-wallet]').forEach(button => {
          button.disabled = false
          button.onclick = () => {
            const id = button.getAttribute('data-wallet')
            wallet.connect(id)
          }
        })
      })
    </script>
  </head>
  <body>
    <appkit-wallet-button wallet="metamask" namespace="eip155"></appkit-wallet-button>

    <button data-wallet="walletConnect" disabled>Open QR modal</button>
    <button data-wallet="metamask" disabled>Connect to MetaMask</button>
    <button data-wallet="google" disabled>Connect to Google</button>
  </body>
</html>

#4696 2863286 Thanks @magiziz! - Introduced AppKitProvider React component for easy AppKit integration in React apps

Example usage

import { AppKitProvider } from '@reown/appkit/react'

function App() {
  return (
    <AppKitProvider
      projectId="YOUR_PROJECT_ID"
      networks={
        [
          /* Your Networks */
        ]
      }
    >
      {/* Your App */}
    </AppKitProvider>
  )
}

#4690 974c73f Thanks @tomiir! - Adds sui and stacks as predefined networks.
Exports AVAILABLE_NAMESPACES constant from networks and common packages.
#4704 5391a12 Thanks @magiziz! - Fixed an issue where the update email view would not open when using the useAppKitUpdateEmail hook

#4687 43e56fc Thanks @enesozturk! - Introduces AppKit React components. React users can now use the new components instead of HTML elements.

Example

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'
import { AppKitButton, AppKitNetworkButton } from '@reown/appkit/react'

export function AppKitButtons() {
  return (
    <div>
      {/* Default */}
      <AppkitButton />
      <AppKitNetworkButton />
      <AppKitWalletButton wallet="metamask" />
      {/* With parameters */}
      <AppkitButton namespace="eip155" />
    </div>
  )
}

#4449 fde2340 Thanks @zoruka! - Add DataCapture views enabling integrating email collection for ReownAuthentication.
#4605 e845518 Thanks @enesozturk! - Updates ChainController and AccountController utils, adds testing utils for controllers
#4686 2a953de Thanks @enesozturk! - Updates error messages and adds error codes
#4708 a5410b9 Thanks @magiziz! - Fixed an issue where the modal would close automatically after disconnecting a wallet from the profile view
#4709 7d41aa6 Thanks @zoruka! - Fix email capture flow for embedded wallet that was skiping due to one click auth
Updated dependencies [a457e61, 2863286, 974c73f, f9e9842, 5391a12, 43e56fc, fde2340, e845518, 2a953de, a5410b9, 7d41aa6]:
- @reown/appkit-controllers@1.7.17
- @reown/appkit-common@1.7.17
- @reown/appkit-wallet@1.7.17

Assets 2

28 Jul 17:20

github-actions

@reown/appkit-testing@1.7.17

f5a4040

@reown/appkit-testing@1.7.17

Patch Changes

#4688 a457e61 Thanks @magiziz! - Upgraded wallet button to support multichain via the namespace prop

Example usage with Components

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'

const wallets = [
  { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
  { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
  { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
]

export function WalletButtons() {
  return (
    <>
      {wallets.map(({ wallet, namespace, label }) => (
        <AppKitWalletButton
          key={`${wallet}-${namespace}`}
          wallet={wallet}
          namespace={namespace}
        />
      ))}
    </>
  )
}

Example usage with Hooks

import { useAppKitWallet } from '@reown/appkit-wallet-button/react'

export function YourApp() {
  const { data, error, isPending, isSuccess, isError, connect } = useAppKitWallet({
    namespace: 'eip155', // Use 'solana' or 'bip122' for other chains
    onError: err => {
      // ...
    },
    onSuccess: data => {
      // ...
    }
  })

  return (
    <>
      <button onClick={() => connect('walletConnect')}>Open QR modal</button>
      <button onClick={() => connect('metamask')}>Connect to MetaMask</button>
      <button onClick={() => connect('google')}>Connect to Google</button>
    </>
  )
}

Example usage with Vanilla JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import '@reown/appkit-wallet-button'
      import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

      const wallet = createAppKitWalletButton({ namespace: 'eip155' })

      wallet.subscribeIsReady(({ isReady }) => {
        if (!isReady) return

        document.querySelectorAll('button[data-wallet]').forEach(button => {
          button.disabled = false
          button.onclick = () => {
            const id = button.getAttribute('data-wallet')
            wallet.connect(id)
          }
        })
      })
    </script>
  </head>
  <body>
    <appkit-wallet-button wallet="metamask" namespace="eip155"></appkit-wallet-button>

    <button data-wallet="walletConnect" disabled>Open QR modal</button>
    <button data-wallet="metamask" disabled>Connect to MetaMask</button>
    <button data-wallet="google" disabled>Connect to Google</button>
  </body>
</html>

#4696 2863286 Thanks @magiziz! - Introduced AppKitProvider React component for easy AppKit integration in React apps

Example usage

import { AppKitProvider } from '@reown/appkit/react'

function App() {
  return (
    <AppKitProvider
      projectId="YOUR_PROJECT_ID"
      networks={
        [
          /* Your Networks */
        ]
      }
    >
      {/* Your App */}
    </AppKitProvider>
  )
}

#4690 974c73f Thanks @tomiir! - Adds sui and stacks as predefined networks.
Exports AVAILABLE_NAMESPACES constant from networks and common packages.
#4704 5391a12 Thanks @magiziz! - Fixed an issue where the update email view would not open when using the useAppKitUpdateEmail hook

#4687 43e56fc Thanks @enesozturk! - Introduces AppKit React components. React users can now use the new components instead of HTML elements.

Example

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'
import { AppKitButton, AppKitNetworkButton } from '@reown/appkit/react'

export function AppKitButtons() {
  return (
    <div>
      {/* Default */}
      <AppkitButton />
      <AppKitNetworkButton />
      <AppKitWalletButton wallet="metamask" />
      {/* With parameters */}
      <AppkitButton namespace="eip155" />
    </div>
  )
}

#4449 fde2340 Thanks @zoruka! - Add DataCapture views enabling integrating email collection for ReownAuthentication.
#4605 e845518 Thanks @enesozturk! - Updates ChainController and AccountController utils, adds testing utils for controllers
#4686 2a953de Thanks @enesozturk! - Updates error messages and adds error codes
#4708 a5410b9 Thanks @magiziz! - Fixed an issue where the modal would close automatically after disconnecting a wallet from the profile view
#4709 7d41aa6 Thanks @zoruka! - Fix email capture flow for embedded wallet that was skiping due to one click auth
Updated dependencies [a457e61, 2863286, 974c73f, f9e9842, 5391a12, 43e56fc, fde2340, e845518, 2a953de, a5410b9, 7d41aa6]:
- @reown/appkit@1.7.17

Assets 2

28 Jul 17:20

github-actions

@reown/appkit-siwx@1.7.17

f5a4040

@reown/appkit-siwx@1.7.17

Patch Changes

#4688 a457e61 Thanks @magiziz! - Upgraded wallet button to support multichain via the namespace prop

Example usage with Components

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'

const wallets = [
  { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
  { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
  { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
]

export function WalletButtons() {
  return (
    <>
      {wallets.map(({ wallet, namespace, label }) => (
        <AppKitWalletButton
          key={`${wallet}-${namespace}`}
          wallet={wallet}
          namespace={namespace}
        />
      ))}
    </>
  )
}

Example usage with Hooks

import { useAppKitWallet } from '@reown/appkit-wallet-button/react'

export function YourApp() {
  const { data, error, isPending, isSuccess, isError, connect } = useAppKitWallet({
    namespace: 'eip155', // Use 'solana' or 'bip122' for other chains
    onError: err => {
      // ...
    },
    onSuccess: data => {
      // ...
    }
  })

  return (
    <>
      <button onClick={() => connect('walletConnect')}>Open QR modal</button>
      <button onClick={() => connect('metamask')}>Connect to MetaMask</button>
      <button onClick={() => connect('google')}>Connect to Google</button>
    </>
  )
}

Example usage with Vanilla JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import '@reown/appkit-wallet-button'
      import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

      const wallet = createAppKitWalletButton({ namespace: 'eip155' })

      wallet.subscribeIsReady(({ isReady }) => {
        if (!isReady) return

        document.querySelectorAll('button[data-wallet]').forEach(button => {
          button.disabled = false
          button.onclick = () => {
            const id = button.getAttribute('data-wallet')
            wallet.connect(id)
          }
        })
      })
    </script>
  </head>
  <body>
    <appkit-wallet-button wallet="metamask" namespace="eip155"></appkit-wallet-button>

    <button data-wallet="walletConnect" disabled>Open QR modal</button>
    <button data-wallet="metamask" disabled>Connect to MetaMask</button>
    <button data-wallet="google" disabled>Connect to Google</button>
  </body>
</html>

#4696 2863286 Thanks @magiziz! - Introduced AppKitProvider React component for easy AppKit integration in React apps

Example usage

import { AppKitProvider } from '@reown/appkit/react'

function App() {
  return (
    <AppKitProvider
      projectId="YOUR_PROJECT_ID"
      networks={
        [
          /* Your Networks */
        ]
      }
    >
      {/* Your App */}
    </AppKitProvider>
  )
}

#4690 974c73f Thanks @tomiir! - Adds sui and stacks as predefined networks.
Exports AVAILABLE_NAMESPACES constant from networks and common packages.
#4704 5391a12 Thanks @magiziz! - Fixed an issue where the update email view would not open when using the useAppKitUpdateEmail hook

#4687 43e56fc Thanks @enesozturk! - Introduces AppKit React components. React users can now use the new components instead of HTML elements.

Example

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'
import { AppKitButton, AppKitNetworkButton } from '@reown/appkit/react'

export function AppKitButtons() {
  return (
    <div>
      {/* Default */}
      <AppkitButton />
      <AppKitNetworkButton />
      <AppKitWalletButton wallet="metamask" />
      {/* With parameters */}
      <AppkitButton namespace="eip155" />
    </div>
  )
}

#4449 fde2340 Thanks @zoruka! - Add DataCapture views enabling integrating email collection for ReownAuthentication.
#4605 e845518 Thanks @enesozturk! - Updates ChainController and AccountController utils, adds testing utils for controllers
#4686 2a953de Thanks @enesozturk! - Updates error messages and adds error codes
#4708 a5410b9 Thanks @magiziz! - Fixed an issue where the modal would close automatically after disconnecting a wallet from the profile view
#4709 7d41aa6 Thanks @zoruka! - Fix email capture flow for embedded wallet that was skiping due to one click auth
Updated dependencies [a457e61, 2863286, 974c73f, 5391a12, 43e56fc, fde2340, e845518, 2a953de, a5410b9, 7d41aa6]:
- @reown/appkit-controllers@1.7.17
- @reown/appkit-scaffold-ui@1.7.17
- @reown/appkit-utils@1.7.17
- @reown/appkit-common@1.7.17
- @reown/appkit-ui@1.7.17

Assets 2

28 Jul 17:20

github-actions

@reown/appkit-siwe@1.7.17

f5a4040

@reown/appkit-siwe@1.7.17

Patch Changes

#4688 a457e61 Thanks @magiziz! - Upgraded wallet button to support multichain via the namespace prop

Example usage with Components

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'

const wallets = [
  { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
  { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
  { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
]

export function WalletButtons() {
  return (
    <>
      {wallets.map(({ wallet, namespace, label }) => (
        <AppKitWalletButton
          key={`${wallet}-${namespace}`}
          wallet={wallet}
          namespace={namespace}
        />
      ))}
    </>
  )
}

Example usage with Hooks

import { useAppKitWallet } from '@reown/appkit-wallet-button/react'

export function YourApp() {
  const { data, error, isPending, isSuccess, isError, connect } = useAppKitWallet({
    namespace: 'eip155', // Use 'solana' or 'bip122' for other chains
    onError: err => {
      // ...
    },
    onSuccess: data => {
      // ...
    }
  })

  return (
    <>
      <button onClick={() => connect('walletConnect')}>Open QR modal</button>
      <button onClick={() => connect('metamask')}>Connect to MetaMask</button>
      <button onClick={() => connect('google')}>Connect to Google</button>
    </>
  )
}

Example usage with Vanilla JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import '@reown/appkit-wallet-button'
      import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

      const wallet = createAppKitWalletButton({ namespace: 'eip155' })

      wallet.subscribeIsReady(({ isReady }) => {
        if (!isReady) return

        document.querySelectorAll('button[data-wallet]').forEach(button => {
          button.disabled = false
          button.onclick = () => {
            const id = button.getAttribute('data-wallet')
            wallet.connect(id)
          }
        })
      })
    </script>
  </head>
  <body>
    <appkit-wallet-button wallet="metamask" namespace="eip155"></appkit-wallet-button>

    <button data-wallet="walletConnect" disabled>Open QR modal</button>
    <button data-wallet="metamask" disabled>Connect to MetaMask</button>
    <button data-wallet="google" disabled>Connect to Google</button>
  </body>
</html>

#4696 2863286 Thanks @magiziz! - Introduced AppKitProvider React component for easy AppKit integration in React apps

Example usage

import { AppKitProvider } from '@reown/appkit/react'

function App() {
  return (
    <AppKitProvider
      projectId="YOUR_PROJECT_ID"
      networks={
        [
          /* Your Networks */
        ]
      }
    >
      {/* Your App */}
    </AppKitProvider>
  )
}

#4690 974c73f Thanks @tomiir! - Adds sui and stacks as predefined networks.
Exports AVAILABLE_NAMESPACES constant from networks and common packages.
#4646 f9e9842 Thanks @tomiir! - Fixes issue where rpc url would not be overriden on secure site on some connections
#4704 5391a12 Thanks @magiziz! - Fixed an issue where the update email view would not open when using the useAppKitUpdateEmail hook

#4687 43e56fc Thanks @enesozturk! - Introduces AppKit React components. React users can now use the new components instead of HTML elements.

Example

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'
import { AppKitButton, AppKitNetworkButton } from '@reown/appkit/react'

export function AppKitButtons() {
  return (
    <div>
      {/* Default */}
      <AppkitButton />
      <AppKitNetworkButton />
      <AppKitWalletButton wallet="metamask" />
      {/* With parameters */}
      <AppkitButton namespace="eip155" />
    </div>
  )
}

#4449 fde2340 Thanks @zoruka! - Add DataCapture views enabling integrating email collection for ReownAuthentication.
#4605 e845518 Thanks @enesozturk! - Updates ChainController and AccountController utils, adds testing utils for controllers
#4686 2a953de Thanks @enesozturk! - Updates error messages and adds error codes
#4708 a5410b9 Thanks @magiziz! - Fixed an issue where the modal would close automatically after disconnecting a wallet from the profile view
#4709 7d41aa6 Thanks @zoruka! - Fix email capture flow for embedded wallet that was skiping due to one click auth
Updated dependencies [a457e61, 2863286, 974c73f, f9e9842, 5391a12, 43e56fc, fde2340, e845518, 2a953de, a5410b9, 7d41aa6]:
- @reown/appkit-controllers@1.7.17
- @reown/appkit-utils@1.7.17
- @reown/appkit-common@1.7.17
- @reown/appkit-ui@1.7.17
- @reown/appkit-wallet@1.7.17

Assets 2

28 Jul 17:20

github-actions

@reown/appkit-scaffold-ui@1.7.17

f5a4040

@reown/appkit-scaffold-ui@1.7.17

Patch Changes

#4688 a457e61 Thanks @magiziz! - Upgraded wallet button to support multichain via the namespace prop

Example usage with Components

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'

const wallets = [
  { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
  { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
  { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
]

export function WalletButtons() {
  return (
    <>
      {wallets.map(({ wallet, namespace, label }) => (
        <AppKitWalletButton
          key={`${wallet}-${namespace}`}
          wallet={wallet}
          namespace={namespace}
        />
      ))}
    </>
  )
}

Example usage with Hooks

import { useAppKitWallet } from '@reown/appkit-wallet-button/react'

export function YourApp() {
  const { data, error, isPending, isSuccess, isError, connect } = useAppKitWallet({
    namespace: 'eip155', // Use 'solana' or 'bip122' for other chains
    onError: err => {
      // ...
    },
    onSuccess: data => {
      // ...
    }
  })

  return (
    <>
      <button onClick={() => connect('walletConnect')}>Open QR modal</button>
      <button onClick={() => connect('metamask')}>Connect to MetaMask</button>
      <button onClick={() => connect('google')}>Connect to Google</button>
    </>
  )
}

Example usage with Vanilla JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import '@reown/appkit-wallet-button'
      import { createAppKitWalletButton } from '@reown/appkit-wallet-button'

      const wallet = createAppKitWalletButton({ namespace: 'eip155' })

      wallet.subscribeIsReady(({ isReady }) => {
        if (!isReady) return

        document.querySelectorAll('button[data-wallet]').forEach(button => {
          button.disabled = false
          button.onclick = () => {
            const id = button.getAttribute('data-wallet')
            wallet.connect(id)
          }
        })
      })
    </script>
  </head>
  <body>
    <appkit-wallet-button wallet="metamask" namespace="eip155"></appkit-wallet-button>

    <button data-wallet="walletConnect" disabled>Open QR modal</button>
    <button data-wallet="metamask" disabled>Connect to MetaMask</button>
    <button data-wallet="google" disabled>Connect to Google</button>
  </body>
</html>

#4696 2863286 Thanks @magiziz! - Introduced AppKitProvider React component for easy AppKit integration in React apps

Example usage

import { AppKitProvider } from '@reown/appkit/react'

function App() {
  return (
    <AppKitProvider
      projectId="YOUR_PROJECT_ID"
      networks={
        [
          /* Your Networks */
        ]
      }
    >
      {/* Your App */}
    </AppKitProvider>
  )
}

#4690 974c73f Thanks @tomiir! - Adds sui and stacks as predefined networks.
Exports AVAILABLE_NAMESPACES constant from networks and common packages.
#4704 5391a12 Thanks @magiziz! - Fixed an issue where the update email view would not open when using the useAppKitUpdateEmail hook

#4687 43e56fc Thanks @enesozturk! - Introduces AppKit React components. React users can now use the new components instead of HTML elements.

Example

import { AppKitWalletButton } from '@reown/appkit-wallet-button/react'
import { AppKitButton, AppKitNetworkButton } from '@reown/appkit/react'

export function AppKitButtons() {
  return (
    <div>
      {/* Default */}
      <AppkitButton />
      <AppKitNetworkButton />
      <AppKitWalletButton wallet="metamask" />
      {/* With parameters */}
      <AppkitButton namespace="eip155" />
    </div>
  )
}

#4449 fde2340 Thanks @zoruka! - Add DataCapture views enabling integrating email collection for ReownAuthentication.
#4605 e845518 Thanks @enesozturk! - Updates ChainController and AccountController utils, adds testing utils for controllers
#4686 2a953de Thanks @enesozturk! - Updates error messages and adds error codes
#4708 a5410b9 Thanks @magiziz! - Fixed an issue where the modal would close automatically after disconnecting a wallet from the profile view
#4709 7d41aa6 Thanks @zoruka! - Fix email capture flow for embedded wallet that was skiping due to one click auth
Updated dependencies [a457e61, 2863286, 974c73f, f9e9842, 5391a12, 43e56fc, fde2340, e845518, 2a953de, a5410b9, 7d41aa6]:
- @reown/appkit-controllers@1.7.17
- @reown/appkit-utils@1.7.17
- @reown/appkit-common@1.7.17
- @reown/appkit-ui@1.7.17
- @reown/appkit-wallet@1.7.17

Assets 2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Patch Changes

Example

Uh oh!

Patch Changes

Example

Uh oh!

Patch Changes

Example

Uh oh!

Patch Changes

Example

Uh oh!

Patch Changes

Uh oh!

Patch Changes

Example

Uh oh!

Patch Changes

Example

Uh oh!

Patch Changes

Example

Uh oh!

Patch Changes

Example

Uh oh!

Patch Changes

Example

Uh oh!

Releases: reown-com/appkit

@reown/appkit@1.7.17

Patch Changes

Example

Uh oh!

@reown/appkit-wallet@1.7.17

Patch Changes

Example

Uh oh!

@reown/appkit-wallet-button@1.7.17

Patch Changes

Example

Uh oh!

@reown/appkit-utils@1.7.17

Patch Changes

Example

Uh oh!

@reown/appkit-universal-connector@1.7.17

Patch Changes

Uh oh!

@reown/appkit-ui@1.7.17

Patch Changes

Example

Uh oh!

@reown/appkit-testing@1.7.17

Patch Changes

Example

Uh oh!

@reown/appkit-siwx@1.7.17

Patch Changes

Example

Uh oh!

@reown/appkit-siwe@1.7.17

Patch Changes

Example

Uh oh!

@reown/appkit-scaffold-ui@1.7.17

Patch Changes

Example

Uh oh!