CAIP-295: Browser Wallet Messaging for Iframes

interface WalletMapEntry {
  data: WalletAnnounceRequestParams;
  targets: {
    type: <caip-id-for-target-origin>;
    value: <target-origin>
  }[]
}

const wallets: Record<string, WalletMapEntry> = {}

// Blockchain Library starts listening on init
window.addEventListener("message", (event) => {
  if (event.data.method === 'wallet_announce') {
    // when an announce message was received then the library can index it by uuid
    wallets[event.data.params.uuid] = {
      params: event.data.params,
      targetOrigin: event.target.value
    }
  }
});

// Blockchain Library publishes on init
window.postMessage({
  id: 1,
  jsonrpc: "2.0"
  method: "wallet_prompt",
  params: {
    // optionally the Blockchain Library can prompt wallets to announce matching only the chains
    chains: []  // optional
    //  if the Blockchain Library supports CAIP-275 then it can include a name
    authName: "", // optional
  },
});

// Wallet Provider sets data on init
const walletData = { ... }

// Wallet Provider publishes on init
window.postMessage({
  id: 2,
  jsonrpc: "2.0"
  method: "wallet_announce",
  params: walletData
});


// Wallet Providers starts listenning on init
window.addEventListener("message", (event) => {
  if (event.data.method === 'wallet_prompt') {
    // when a prompt message was received then the wallet will announces again
    window.postMessage({
      id: 2,
      jsonrpc: "2.0"
      method: "wallet_announce",
      params: walletData
    });
  }
});

// 1. Blockchain Library initializes by listening to wallet_announce messages and
// also by posting a prompt message
interface WalletMapEntry {
  data: WalletAnnounceRequestParams;
  targets: {
    type: <caip-id-for-target-origin>;
    value: <target-origin>
  }[]
}

const wallets: Record<string, WalletMapEntry> = {}

window.addEventListener("message", (event) => {
  if (event.data.method === 'wallet_announce') {
    // when an announce message was received then the library can index it by uuid
    wallets[event.data.params.uuid] = {
      params: event.data.params,
      targetOrigin: event.targets.find(({ type }) => type === "caip295")?.value
    }
  }
});

window.postMessage({
  id: 1,
  jsonrpc: "2.0"
  method: "wallet_prompt",
  params: {},
});

// 2. User presses "Connect Wallet" and the library display the discovered wallets

const selected_uuid = "350670db-19fa-4704-a166-e52e178b59d2"

// 3. User selects a Wallet with UUID = "350670db-19fa-4704-a166-e52e178b59d2" and
// Blockchain Library will send a CAIP-25 request to establish a wallet connection

const sessionRequest = {
  id: 123,
  jsonrpc: "2.0",
  method: "wallet_createSession",
  params: {
    scopes: {
      "chain:777": {
        methods: ["chain_signMessage", "chain_sendTransaction"],
        notifications: ["accountsChanged"],
      },
    },
    properties: {
      expiry: "2024-06-06T13:10:48.155Z",
    },
  },
};

let sessionResult = {}

window.addEventListener("message", (event) => {
  if (event.targets.find(({ type }) => type === "caip295")?.value !== wallets[selected_uuid].targetOrigin) return;
  if (event.data.id === sessionRequest.id) {
    // Get JSON-RPC response
    if (event.data.error) {
      console.error(event.data.error.message);
    } else {
      sessionResult = event.data.result
    }
  }
});


window.postMessage(sessionRequest, wallets[selected_uuid].targetOrigin);


// 4. After the response was received by the Blockchain Library from the wallet
// provider then the session is established with a sessionId matchin the UUID
// thus signing requests can be using a CAIP-27 request to the wallet user
const signingRequest = {
  id: 456,
  jsonrpc: "2.0",
  method: "wallet_requestMethod",
  params: {
    // UUID from WalletData is used as SessionId
    sessionId: walletData.info.uuid,
    scope: "chain:777",
    request: {
      method: "chain_signMessage",
      params: [
        "Verifying my wallet with this message",
        "0xa89Df33a6f26c29ea23A9Ff582E865C03132b140",
      ],
    },
  },
};

let signingResult = {}

window.addEventListener("message", (event) => {
  if (event.targets.find(({ type }) => type === "caip295")?.value !== wallets[selected_uuid].targetOrigin) return;
  if (event.data.id === signingRequest.id) {
    // Get JSON-RPC response
    if (event.data.error) {
      console.error(event.data.error.message);
    } else {
      signingResult = event.data.result
    }
  }
});

window.postMessage(signingRequest, wallets[selected_uuid].targetOrigin);

// 1. Wallet Provider sets their WalletData and then listens to prompt_wallet message
// and also immediatelly posts a message with the WalletData as wallet_announce type
const walletData = {
  info {
    uuid: generateUUID(); // eg. "350670db-19fa-4704-a166-e52e178b59d2"
    name: "Example Wallet",
    icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",
    rdns: "com.example.wallet",
  },
  scopes: {
    "chain:777": {
      methods: ["chain_signMessage", "chain_sendTransaction"],
      notifications: ["accountsChanged"],
    },
  }
}

window.postMessage({
  id: 2,
  jsonrpc: "2.0"
  method: "wallet_announce",
  params: walletData
});

window.addEventListener("message", (event) => {
  if (event.data.method === 'wallet_prompt') {
    // when a prompt message was received then the wallet will announces again
    window.postMessage({
      id: 2,
      jsonrpc: "2.0"
      method: "wallet_announce",
      params: walletData
    });
  }
});

// 2. User presses "Connect Wallet" on the application webpage which will select UUID

const selected_uuid = "350670db-19fa-4704-a166-e52e178b59d2"

// 3. Wallet Provider receives a CAIP-25 request to establish a wallet connection
// prompts the user to approve and once its approved it can respond back to app
// Wallet Provider listens for request
let sessionRequest = {}
let sessionOrigin = ""

window.addEventListener("message", (event) => {
  if (event.data.method === "wallet_createSession") {
    sessionRequest = event.data
    // if incoming requests match the WalletData UUID
    if (checkSupportedScopes(event.data.params)) {
        // prompt user to approve session
        // persist the targetOrigin for sessionRequest
        sessionOrigin = event.targets.find(({ type }) => type === "caip295")?.value
    }
  }
});

const sessionResponse = {
  id: sessionRequest.id, // 123
  jsonrpc: "2.0",
  result: {
    sessionId: walletData.info.uuid, // "350670db-19fa-4704-a166-e52e178b59d2"
    wallet: {
      info: {
        uuid:  "350670db-19fa-4704-a166-e52e178b59d2",
        name: "Example Wallet",
        icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",
        rdns: "com.example.wallet",
      },
      methods: ["wallet_pay"],
      notifications: [],
      capabilties: {}
    }
    scopes: {
      "eip155:1": {
        methods: ["eth_sendTransaction", "personal_sign"],
        notifications: ["accountsChanged", "chainChanged"],
        accounts: ["0x43e3ca49c7be4f429abce408da6b738f879d02a0",
        ],
        capabilities: {}
      },
    },
    properties: {
      expiry: "2024-06-06T13:10:48.155Z",
    }
  }
}
window.postMessage(sessionResponse, sessionOrigin);

// 4. Once the connection is established then the Wallet Provider can receive
// incoming CAIP-27 requests which will be prompted to the user to sign and
// once signed the response is sent back to the dapp with the expected result
let signingRequest = {}

window.addEventListener("message", (event) => {
  if (event.targets.find(({ type }) => type === "caip295")?.value !== sessionOrigin) return;
  if (event.data.method === "wallet_createSession" && event.data.params.sessionId === walletData.info.uuid) {
    signingRequest = event.data.params
  }
});

const signingResponse = {
  id: signingRequest.id // 456
  jsonrpc: "2.0",
  result: "0xe670ec64341771606e55d6b4ca35a1a6b75ee3d5145a99d05921026d1527331"
}

window.postMessage(signingResponse, sessionOrigin);