@7quark/wallet-sdk v0.1.4-alpha

7Quark Wallet SDK

A practical way of implementing and using Web3 in your project!

Installation

NPM

npm install @7quark/wallet-sdk

Yarn

yarn add @7quark/wallet-sdk

Usage

In you layout.tsx, _app.tsx or whichever your main component is you simply put:

import { AccountProvider } from '@7quark/wallet-sdk'

const clientId = 'your_client_id'

const authConfig = {
  jwtVerifier: 'your-jwt-verifier'
}

const aaConfig = {
  clientId: 'your_client_id'
}

const RootLayout = ({
  children
}: {
  children: React.ReactNode
}) => {
  return (
    <AccountProvider clientId={clientId} authConfig={authConfig} aaConfig={aaConfig}>
      {/* inner content */}
    </AccountProvider>
  )
}

export default RootLayout

And then you could create a provider using your very own JWT login using something like this:

import React, { useEffect, useState } from 'react'
import { getAuth } from '@7quark/wallet-sdk'

const loginUrl = 'https://example.com/api/login'

const Login = () => {
  const auth                    = getAuth()
  const [email, setEmail]       = useState<string>('')
  const [password, setPassword] = useState<string>('')
  const [error, setError]       = useState<string>('')

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()

    try {
      const { token } = await fetch(loginUrl, {
        method: 'POST',
        body:   JSON.stringify({ email, password }),
        headers: {
          'Accept':       'application/json',
          'Content-Type': 'application/json'
        }
      }).then(
        res => res.json()
      ).catch(
        e => { setError(e.message) }
      )

      await auth.connect(token)

      // Now you can get all your wallets like this:
      auth.getWallets().forEach(async wallet => {
        const chain   = wallet.chain
        const key     = `${chain.chainNamespace}-${chain.chainId}`
        const address = await wallet.getAddress()

        console.log('Wallet address:', key, address)
      })
    } catch (error) {
      if (error instanceof Error) {
        setError(error.message || 'Unknown error')
      } else {
        setError('Unknown error')
      }
    }
  }

  useEffect(() => {
    const init = async () => {
      await auth.init()
    }

    init().catch(console.error)
  }, [auth])

  return (
    <div>
      <h1>Login</h1>
      {error && <p>{error}</p>}
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">Email</label>
          <input
            id="email"
            type="email"
            value={email}
            onChange={e => setEmail(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <input
            id="password"
            type="password"
            value={password}
            onChange={e => setPassword(e.target.value)}
          />
        </div>
        <button type="submit">Login</button>
      </form>
    </div>
  )
}

export default Login