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-sdkSign 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 |
| 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} />
}
}