Communication System for EMBED/ External App

[crypto-fans]

In order to improve Embed functionality , we could implement bidirectional communication between external webpage (Web2) and the Dexkit dApp (Web3) embedded in an iframe.

This will allow to control better the integration of dexkit dApp in an external web page page and receive real-time information from it.
In "My Widgets", we could add a input for "allowed external URL" and the different parameters for Conection -

Technical Requirements
This feature relies on the window.postMessage() API, the standard and secure way for browser windows from different domains to communicate with each other.

1. From the iframe to the Parent Page (Web3 to Web2)
   The Dexkit dApp must send a message to the main page after key events.

Actions that trigger the message:

Wallet Connection: When the user successfully connects their wallet via Metamask.

Token Verification: After checking if the user holds the necessary tokens or NFTs.

Transactions: When an NFT or membership purchase transaction is completed or fails.

Code Example:

JavaScript

// This code runs in the Dexkit dApp (inside the iframe)
const message = {
type: 'WALLET_INFO', // Message identifier
isConnected: true,
address: '0x123...',
hasTokenAccess: true
};
window.parent.postMessage(message, 'https://your-main-page.com');

2. From the Parent Page to the iframe (Web2 to Web3)
   The Dexkit dApp must have an event listener to receive messages from the external page.

Actions the iframe should be able to execute:

Navigation: Change the iframe's internal URL to display a specific Url like a change to contract form.

Parameters: Receive parameters to pre-configure a contract form, such as the contract address and the function to execute (mint, transfer, etc.).

Code Example:

JavaScript

// This code runs in the Dexkit dApp (inside the iframe)
window.addEventListener('message', (event) => {
// It's crucial to verify the message origin for security
if (event.origin !== 'https://your-main-page.com') {
return;
}
const data = event.data;
if (data.type === 'NAVIGATE_TO_CONTRACT_FORM') {
// Redirect the iframe's navigation to the contract URL
window.location.href = https://dapp.dexkit.com/forms?contract=${data.payload.contractAddress};
}
});

Summary and Benefits
Not a Static iframe: This feature transforms the static iframe into a dynamic component that we can control.

User Experience: It allows for a seamless and consistent user experience, where Web3 interactions are integrated smoothly into Web2 site's interface.

Modularity: the external site handles the business logic and UI, while the Dexkit dApp manages all the Web3 logic (wallet connection, contract interaction, etc.).

Implementing this postMessage communication is the industry-standard solution and will allow us to create a robust and secure integration.