Front-end API for DApp hosted in iframe

DApp and SDM have a lot of data transmission, DApp needs to obtain SDM information, and also needs to evoke some components of SDM, take this document as an example, use postmate to establish two-way communication

DApp get RoomContexts

Functional description

Get Room context information when opening a browser from Room

Invoke method

fetchRoomContext: (roomContext) => {

 console.log('roomContext', roomContext)

}

Response

// If the returned object is empty, return null
// Room Type Judgment Logic (DM/SquadRoom/Room)
// isDirect cc
// squadId  If it is not empty, it means SquadRoom
// Others are ordinary rooms
{
    "userId": "@xxx:hs.sending.me",		      //Current UserID （Required）     	   
    "roomId": "!qvovAGEYBhZlsDCoJG:hs.sending.me", //RoomId （Required）
    "squadId": "!qvovAGEYBhZlsDCoJG:hs.sending.me", //SquadId （Optional）
    "isDirect": false // Direct Message Flag       （Required）       
}

Case

import Postmate from "postmate";  

type DAppRoomContext = {
    userId: string;
    roomId: string;
    squadId?: string; // SquadId yes means SquadRoom
    isDirect: boolean;
}

enum DAppRoomContextAction {
    fetchRoomContext = 'fetchRoomContext'
}

interface PostmateModel {
    [DAppRoomContextAction.fetchRoomContext]: (data: DAppRoomContext) => void
}

const model: PostmateModel = {
    fetchRoomContext: (roomContext) => {
        console.log('roomContext:', roomContext)
        // Here the roomContext has to be saved and changed to later functions
    },
}  

// ⚠️**Atention：This handshake must guarantee a globally unique instance**
const handshake = new Postmate.Model(model);

DApp Trigger Invitation Modal

handshake.then(parent => {
    parent.emit('message.sending.me', {
        payload: {
            action: 'view_invite',
            // The roomContext here is the roomContext obtained in the first step
            roomId: roomContext.roomId, // Support roomId or squadId
        },
    });
})

DApp triggers the event of selecting a specific wallet

handshake.then(parent => {
        parent.emit('message.sending.me', {
        payload: {
            action: 'dapp_selected_wallet_address',
            // The wallet address passed in here must be the wallet address bound to the current account
            walletAddress: '0xe56dee2a305896885fAe480bFaF872156d9e35cE'
        }
    });
})

DApp triggers the event of open Gif Selector

Open gif selector

handshake.then(parent => {
    parent.emit('message.sending.me', {
        payload: {
            action: 'emoji_show',
            // from ： dapp
            from: 'dapp'
        },
    });
})

Receive gif url

const model: PostmateModel = {s
    fetchRoomContext: (roomContext) => {
        console.log('roomContext:', roomContext)
        // Here the roomContext has to be saved and changed to later functions
    },
    receiveGif: (gifUrl) => {
        // Here the GifUrl has to be saved and changed to later functions
        console.log("gifUrl:", gifUrl)
    }
}  

// ⚠️**Atention：This handshake must guarantee a globally unique instance**
const handshake = new Postmate.Model(model);