🌀 web3 portals [DRAFT]

web3-portals lets you to embed and securely interact with external web3 apps directly from your own site.

Example

The example below shows how to embed a Solana-based game. All the game logic is contained in the portal but the transaction signing is done on your end.

import { SolanaPortal } from "web3-portals"

function Game() {
  const wallet = useWallet()

  return (
    <SolanaPortal
      source="https://games.gamba.so/coinflip"
      versionHash=""
      data={{
        creatorAddress: "",
        onResult: (result) => {

        }
      }}
    />
  )
}

Is it secure?

When embedding a portal app you must pass a versionHash. This will request a specific version of the app and verify that the content has not changed.

Interracting with a Portal

The portal app may allow you to control it from your end via commands. Here's an example of that:

import { SolanaPortal } from "web3-portals"

function Game() {
  const wallet = useWallet()
  const ref = useRef()

  const setVolume = (volume: number) => {
    ref.current.setVolume(volume)
  }

  return (
    <>
      <SolanaPortal
        ref={ref}
        source="https://games.gamba.so/coinflip"
      />
      <input
        type="range"
        onChange={({ target }) => setVolume(Number(target.value))}
      />
    </>
  )
}