Package Exports

@nasdf/wagmi-magic-connector
@nasdf/wagmi-magic-connector/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nasdf/wagmi-magic-connector) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

wagmi-magic-connector

Wagmi connector for Magic Auth

Install

npm install @nasdf/wagmi-magic-connector
yarn add @nasdf/wagmi-magic-connector
pnpm add @nasdf/wagmi-magic-connector

Usage

Choose Ethereum Mainnet

import { MagicConnector } from '@nasdf/wagmi-magic-connector'

const connector = new MagicConnector({
  options: {
    apiKey: 'YOUR_PUBLISHABLE_API_KEY',
    network: 'mainnet', 
  }
})

Configure Custom Nodes

import { MagicConnector } from '@nasdf/wagmi-magic-connector'

const network = {
  rpcUrl: 'http://127.0.0.1:7545', // Your own node URL
  chainId: 1011, // Your own node's chainId
}

const connector = new MagicConnector({
  options: {
    apiKey: 'YOUR_PUBLISHABLE_API_KEY',
    network,
  }
})

Connect With Magic Link

import { useState } from 'react'
import { useConnect } from 'wagmi'

export default function SignIn() {
  const [email, setEmail] = useState('')

  const { connect, connectors } = useConnect()
  const connector = connectors.find(c => c.id === 'magic')

  const onSubmit = (event) => {
    event.preventDefault()
    connector.loginWithMagicLink({ email, showUI: true })
    connect({ connector })
  }

  return (
    <form onSubmit={onSubmit}>
      <label>Email</label>
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <button type="submit">Send Magic Link</button>
    </form>
  )
}