@wanderapp/embed-sdk

Wander Embedded SDK

Dev Setup

• yarn install

  Install the project dependencies.

• yarn build:wallet-api

  The TS/JS SDK imports some shared dependencies (setupWalletSDK()) from an already built version of the main repo.

  Until we have a monorepo, this command builds the bundle with this shared dependency under wander-embedded-sdk/sdk-dist.

• yarn dev:iframe

  The Wander Embedded App should now be running at http://localhost:5173.

After this, you can use the Wander Embedded App in 2 different ways:

• As a standalone app, you can just access http://localhost:5173 and start using it. Note, however, that this is not how developers will be using it, so you might find some differences when testing some features (e.g. when running inside an iframe, we must use unpartitioned state for some features, like authentication, to work properly).

• Embedded inside an iframe (recommended). In this case, you need a "test app" that install the Wander Embedded SDK to load the app inside an iframe. The section below explains different ways to do that.

Using the Wander Embedded SDK:

The minimum setup you must do to get Wander Embedded to work on a project looks like this:

  import { WanderEmbedded } from "wander-embedded-sdk";

  // ...

  useEffect(() => {
    async function initAndTestWander() {
      const wander = new WanderEmbedded({
        clientId: "ALPHA",
      });

      // After `new WanderEmbedded`, `window.arweaveWallet` is now the Wander Embedded API, rather
      than the Wander BE one.

      // Calling API methods will open/highlight the Wander Embedded iframe (popup/modal) if
      // authentication and/or authorization is needed:

      await window.arweaveWallet.connect(["SIGNATURE"]);

      const tx = ...;

      await window.arweaveWallet.sign(tx);

      // You can also manually open the popup/modal:
      wander.open();
    }

    initAndTestWander();
  }, []);

You can play around with Wander Embedded at https://playground.othent.io/, which uses:

• The latest version of the playground itself: https://playground.othent.io/
• The latest version of the Wander Embedded app: https://embed.wander.app/
• The latest version of @wanderapp/embed-sdk: https://www.npmjs.com/package/@wanderapp/embed-sdk
• The latest version of the server & tRPC API: https://embed-api.wander.app/

Most likely you need that playground to load your local version of the app, SDK, and/or server. See below the different options available.

Local Playground + Local App + Latest SDK + Local/Latest Server

App:

After running yarn dev:iframe, the Wander Embedded App should be running at http://localhost:5173.

By default, the app will point its tRPC client to http://localhost:3001 when running in development mode, or to https://embed-api.wander.app/ when running in production mode. See:

• createTRPCClient call in src/utils/embedded/embedded.utils.ts for the setup logic.
• .env / .env.example for the development values.
• Vercel's Environment variables, for the production values.

Playground & SDK:

Next, clone https://github.com/Othent/KMS-test-repo/ and run pnpm install && pnpm start. The playground should be running at http://localhost:3000, using the published version of @wanderapp/embed-sdk.

By default, the published version of @wanderapp/embed-sdk will point to the latest version of the Wander Embedded app, which in turn will point its tRPC client to the latest version of the server (https://embed-api.wander.app/).

You now need to make the SDK load http://localhost:5173, which you can do using the baseURL option. If you also need to connect to a server hosted elsewhere, you can use the baseServerURL options:

const wander = new WanderEmbedded({
  clientId: "ALPHA",
  baseURL: "http://localhost:5173",
  baseServerURL: "http://localhost:3001",
});

[!TIP] You can get an actual clientId from the Wander Dashboard by creating a Team and an Application.

Server:

Go to the embed-api repo and run:

• pnpm install

• pnpm dev - The server & tRPC API will run at http://localhost:3001 (if the Playground was already running on port 3000).

• pnpm sdk:dev - Only if you want to use a local instance of embed-api:

  • If local, then the package.json a the root of this project should say: "embed-api": "link:../embed-api/",

  • If you want to use the currently published version of embed-api, then it should say: "embed-api": "https://github.com/wanderwallet/embed-api#<SOME_HASH>",

Local Playground + Local App + Local SDK + Local/Latest Server

To use a local @wanderapp/embed-sdk, go to the playground repo and run pnpm link-embed, which changes the @wanderapp/embed-sdk dependency to:

  "@wanderapp/embed-sdk": "link:./../wander/Wander/wander-embedded-sdk/"`

You can revert this change running pnpm link-embed, which changes the wander-embedded-sdk dependency back to:

  "@wanderapp/embed-sdk": "^0.0.1"`

Then, go into wander-embedded-sdk in this repo and run pnpm install and pnpm dev.

When running in development mode, the SDK will use http://localhost:5173 as the default value for baseURL, instead of https://embed.wander.app/. See wander-embedded-sdk/src/wander-embedded.ts.

[!WARNING] Temporarily, the https://embed.wander.app/ URLs are actually https://embed-dev.wander.app/. This should be replaced before launch.