Vatom experience SDK

This sdk will help you build experiences for the Vatom ecosystem using react.

The proccess begins when a Vatom user opens your business. the app will look at your experience url configured through studio and launch your website in a webview.

Assumptions

You have already created a React app that represents the experience that you wish to embed into the Vatom wallet as a micro web site.

Installation

npm

  npm i -s "@vatom/experience-sdk" "react-router-dom"

yarn

  yarn add "@vatom/experience-sdk" "react-router-dom"

Developing locally

Since the Wallet needs to reach your website (your react app) you will need to expose it through a secure tunnel. This can be easily done with tools like ngrok or localXpose.

https://ngrok.com/

https://localxpose.com/

Assuming your app is exposed through localhost:3000

ngrok

ngrok http 3000

localXpose

loclx tunnel http --to localhost:3000

After this you should get access to an url which should be passed to the campaign through studio so the app is able to reach your local stack.

Usage/Examples

Once the app loads you should wrap your app or the react tree that should be able to leverage the sdk features with the ExperienceProvider inside of the BrowserRouter that's all the setup needed. Now your web app should be able to talk with the vatom ecosystem.

import { BrowserRouter } from 'react-router-dom'
import { ExperienceProvider, useBusiness, useExperience, useUser } from '@vatom/experience-sdk'

function App() {
  return (
    <BrowserRouter basename="/">
      <ExperienceProvider>
        <Component />
      </ExperienceProvider>
    </BrowserRouter>
  )
}

function Component() {
  const { openSpace } = useExperience()
  const { user } = useUser()
  const { business } = useBusiness()

  if (!business || !user) return <div>loading...</div>

  return (
    <div>
      <h1>Hello {user.name}</h1>
      <button
        onClick={() => {
          openSpace('@mySpace')
        }}
      >
        Join {business.displayName} space
      </button>
    </div>
  )
}

Debugging your app

Android

Connect your phone to your computer and allow remote debugging

Then inside google chrome navigate to chrome://inspect/#devices. Now you should see your devices with the different webviews.

Search for your experience and click inspect. Now you should have opened a chrome devtools tab connected to your experience running in your mobile device.

If you rather work on emulator the same steps should work.

See https://developer.chrome.com/docs/devtools/remote-debugging/ for more info

iOS

TBD