How to connect to Solareum Wallet?

Overview

Solareum Wallet is forked from Sollet, we do have something in common. Hence if you support Sollet it might not take you long to get started with Solareum.
Currently, we're developing a Serum DEX Client, you can find a fork that we're working on here - https://github.com/solareum-app/serum-dex-ui. As you might see in Solareum Wallet, whenever users access Serum Dex client, it's connected to Solareum Wallet automatically.
Serum Dex Client (Solareum Version) interacts with Solareum Wallet via a fork version of sol-wallet-adapter - https://github.com/solareum-app/sol-wallet-adapter. You might want to checkout 2 commits below to understand what is the differences to the original version.

Support receiving data from react native app: https://bit.ly/3B47Iih
Fix connection on android: https://bit.ly/3vCEHJg

Jupiter and Solareum interact via postMessage.
Whenever Jupiter is being loaded by Solareum Wallet. It's able to access that information from global scope. We can use that information to indicate Solareum Wallet to the others.

window.solana = {
  platform: 'solareum',
  autoConnect: true,
  postMessage: (message) => {
    window.ReactNativeWebView.postMessage(JSON.stringify(message));
  },
};

Our missions

Create a product that people can trade/swap on the go, right on their phone, worry-free.
It would be nice if Jupiter connect to Solareum Wallet automatically right after it's being loaded. This action will save a ton of time for users and create a seamless mobile experience. We would like to tell our users that there is no gap between DeFi applications. And it's ready for mass adoption.

How to get connected?

Right after being load by Solareum, Jupiter need to send a postMessage that tells Solareum the application ready to connect. By sending as postMessage with structure as below.

{
  id: #number,
  method: 'connect',
}

After receiving request from DApp, Solareum will response a message as below

{
  id: #number,
  method: 'connected',
  params: {
    publicKey: '7JbGFAEiu9TaspgRzRcPaaVUhxvBtvBcFkbi5T63Z8X2',
    autoApprove: true,
    autoSettle: true,
  },
}

How to sign a transaction?

Event signTransaction

🟩 Request

{
  id: #number,
  method: 'signTransaction',
  params: {
    message: [encodedMessage]
  }
}

🟥 Response

{
  id: #number,
  result: {
    signature: '5e54VJrrpFb6z7ZcXrGfr5DxFvFubmntP1Vt1vEvXsjszqMAoXuMQ8Chw7yc7FUrRD5MGuR9ucSwZH7HYaj56brZ',
    publicKey: '7JbGFAEiu9TaspgRzRcPaaVUhxvBtvBcFkbi5T63Z8X2',
  },
}

Event signAllTransaction

🟩 Request

{
  id: #number,
  method: 'signAllTransactions',
  params: {
    messages: [encodedMessage01, encodedMessage02, ...]
  }
}

🟥 Response

result: {
  signatures: [signature01, signature02, ...],
  publicKey: '7JbGFAEiu9TaspgRzRcPaaVUhxvBtvBcFkbi5T63Z8X2',
},
id: payload.id,

Example

This is the smallest html file that shows how 2 application can collaborate to each other

<!doctype html>
<html>
  <head>
    <title>Jupiter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Jupiter</h1>
    <p>This is the smallest application that indicate how Jupiter and Solareum can work together.</p>
    <div>Key: <span id="public-key">connecting...</span></div>

    <script>
      (() => {
        setTimeout(() => {
          window.solana.postMessage({ method: "connect" });
        }, 2000);
      })();

      const isUIWebView = /\(ip.*applewebkit(?!.*(version|crios))/i.test(
        navigator.userAgent,
      );
      const receiver = isUIWebView ? window : document;
      receiver.addEventListener('message', (event) => {
				// the data returns as string object
				// hence we need to convert it into json
        const data = JSON.parse(event.data);
        document.getElementById('public-key').innerText = data.params.publicKey;
      })
    </script>
  </body>
</html>

This is a real example of above piece of code.

How Jupiter look like after integrated with Solareum?

As you can see, Serum Dex is also a web page. Right after it's being loaded by Solareum. It connect to Solareum automatically.
Jupiter will be featured on Solareum home page, that every people can reach out with a single tap.
This is a jsx file that handles all communication stuffs between Jupiter + Solareum. Hope it help

index.tsx3.4KB

If Jupiter can provide a testing environment, so We - Solareum can create a version on testflight also. That helps both teams can see and agree on the integrating process before rolling out.