Muffin SDK

This package can be used to interact with Muffin Network in your websites and APIs.

Getting started

yarn add muffin-sdk

# OR

npm i muffin-sdk

Sign In with Muffin

The Sign In component generates a QR Code that users can scan to sign in on your app with their Muffin ID.

Props

| Prop | Type | Default value | Description | | ----------- | ------------------ | ------------- | ------------------------------------------------------------------------- | | callbackUrl | string | null | URL to which informations about the Muffin ID will be sent to | | otherData | {[x: string]: any} | null | Data you want to add to the payload that will be sent to the callback URL | | firstname | boolean | false | Ask for the user's firstname | | middlename | boolean | false | Ask for the user's middlename | | lastname | boolean | false | Ask for the user's lastname | | birthdate | boolean | false | Ask for the user's birthdate | | email | boolean | false | Ask for the user's email address | | username | boolean | false | Ask for the user's username | | picture | boolean | false | Ask for the user's picture URL |

Payload

This is the structure of the payload that will be sent to the callback URL:

interface Payload {
  muffinAddress: `mx${string}`
  keys: {
    [field: string]: string
  }
  signature: { signature: string; recovery: 0 | 1 }
  [otherDataField: string]: any
}

Example

App.tsx

import React from 'react'
import { SignIn } from' muffin-sdk'

export default class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props)
  }

  render() {
    return (
      <>
        <SignIn
          username
          email
          picture
          callbackUrl={'http://example.com/api/signin'}
          otherData={{
            token: '1234',
          }}
        />
    )
  }
}

Fetch a Muffin ID

Once you've received the payload you must pass the keys to the fetchMuffinID function to decrypt the information you need.

Params

fetchMuffinID(
  muffinAddress: string,
  keys: {[field: string]: string},
  nodeUrl: string
): Promise<{[field: string]: string}>

Example in API

api/signin.ts

import { fetchMuffinID } from "muffin-sdk"

export default async function handler(req: any, res: any) {
  const { muffinAddress, keys, token } = req.body

  const muffinID = await fetchMuffinID(
    muffinAddress,
    keys,
    "https://mynode.example.com"
  )

  console.log(muffinID)
}

Authenticate a Muffin ID

Some people could steal some Muffin ID field encryption keys to pretend to be somebody else.

To avoid this, you can use the authenticateMuffinID function to know if a Sign In request has been made by the true owner of the Muffin ID.

Params

authenticateMuffinID(
  muffinAddress: `mx${string}`,
  signature: { signature: `0x${string}`; recovery: 0 | 1 },
  nodeUrl: string
): Promise<boolean>

Example in API

api/signin.ts

import { authenticateMuffinID } from "muffin-sdk"

export default async function handler(req: any, res: any) {
  const { muffinAddress, signature, token } = req.body

  const isAuthenticated = await authenticateMuffinID(
    muffinAddress,
    signature,
    "https://mynode.example.com"
  )

  if (!isAuthenticated) {
    console.log("You're not the owner of this Muffin ID!")
    return
  }

  console.log("You are the owner of this Muffin ID")
}

Pay with Muffin

You can use muffin-sdk to generate QR Codes that users can scan with Floater Wallet to make a payment.

Props

| Prop | Type | mandatory | Description | | ------ | -------------- | --------- | ----------------------------------- | | to | `0x${string}` | true | Receiver's address | | amount | number | true | Amount of the transaction in Floats | | data | string | false | Transaction data |

Example

App.tsx

import React from "react"
import { Pay } from " muffin-sdk"

export default class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props)
  }

  render() {
    return <Pay to={"0x1"} amount={100} data={`mint({})`} />
  }
}

Interact with contracts

muffin-sdk allows you to read data from contracts and generate transaction data to generate payment QR Codes with the Pay component.

Read data from contract

import { Contract } from "muffin-sdk"

const contract = new Contract({ nodeUrl: "https://mynode.net/" })
  .to("0x0")
  .useMethod("balanceOf")
  .setParams("0x71C7656EC7ab88b098defB751B7401B5f6d8976F")

const { res, timestamp, address } = await contract.get()

console.log(res)

Generate data for payment

import React from "react"
import { Contract, Pay } from " muffin-sdk"

export default class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props)

    const contract = new Contract({ nodeUrl: "https://mynode.net/" })
      .to("0x0")
      .useMethod("mint")
      .setParams("0x71C7656EC7ab88b098defB751B7401B5f6d8976F", 1)

    this.data = contract.generateTxData()
  }

  render() {
    return <Pay to={"0x0"} amount={1000} data={this.data} />
  }
}

License

MIT