This package can be used to interact with Muffin Network in your websites and APIs.
yarn add muffin-sdk # OR npm i muffin-sdk
The Sign In component generates a QR Code that users can scan to sign in on your app with their Muffin ID.
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 |
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 }
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', }} /> ) } }
Once you've received the payload you must pass the keys to the fetchMuffinID function to decrypt the information you need.
fetchMuffinID( muffinAddress: string, keys: {[field: string]: string}, nodeUrl: string ): Promise<{[field: string]: string}>
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) }
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.
authenticateMuffinID( muffinAddress: `mx${string}`, signature: { signature: `0x${string}`; recovery: 0 | 1 }, nodeUrl: string ): Promise<boolean>
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") }
You can use muffin-sdk to generate QR Codes that users can scan with Floater Wallet to make a payment.
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 |
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({})`} /> } }
muffin-sdk allows you to read data from contracts and generate transaction data to generate payment QR Codes with the Pay component.
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)
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} /> } }