v1.7.1

• Social and Near API updated with new features provided for VM release 2.4.0;
• Added BOSComponent and useBOSComponent. They are used to load a BOS Component passing its props and inject it inside the React App. It doesn't need to be wrapped by NearSocialBridgeProvider. Tested using CSR only.

Usage:

BOSComponent

import { BOSComponent } from 'near-social-bridge/components'

const MyComponent = () => {
  return (
    <>
      <BOSComponent
          src="wendersonpires.near/widget/HelloWorld"
          fullWidth
          height={400}
          props={{ username:"Ricardo Goulard" age:"23" }}
        />
    </>
  )
}

useBOSComponent

import { useBOSComponent } from 'near-social-bridge/hooks'

const MyComponent = () => {
  const HelloWorld = useBOSComponent({
    src: 'wendersonpires.near/widget/HelloWorld',
    fullWidth: true,
    height: 500,
  })

  return (
    <>
      <HelloWorld username="Ricardo Goulard" age="23" />
    </>
  )
}

v1.7.0

• Now, all the API resources are going to be processed over a queue to guarantee there's no concurrency issue;
• Added database feature where you can create the App's database which stores data using Social API.

This feature allows tables to be created for each database key. The Social API is used under the hood.

Table

Tables must be simple class with default values, empty or not. This class will be used as a reference to create the table's fields.

When it's time to persist the table's data on the chain, just call the persit database function.

// Greeting Table
class GreetingTable {
  public greeting = 'Hi'
}

import { connect } from 'chain-db-ts'
import { GreetingTable } from './tables'

const main async () {
  // db-name | user | password
  const db = connect('test-db', 'root', '1234')

  // Initialize the "greeting" table using the "GreetingTable"
  // class as a template. If there is already any data saved in
  // the chain, this data will be populated in the table instance.
  const greetingTable = await db.get_table('Greeting', new GreetingTable())
  console.log(greetingTable.table) // { greeting: 'Hi' }

  // Mutating data
  greetingTable.table.greeting = "Hello my dear!"
  await greetingTable.persist() // Data is persisted on the blockchain

  // See the most updated values of the table
  console.log(greetingTable.table) // { greeting: 'Hello my dear!' }

  // Get the last 100 changes
  const greetingHistory = await greetingTable.getHistory(100)
  console.log(greetingHistory)
  // [
  //   { greeting: 'Hello my dear!' },
  //   { greeting: 'Hi' },
  //   { greeting: 'Ei, sou eu :D' },
  //   { greeting: 'Heyo' },
  //   ...
  // ]
}
main()

v1.6.0

• Added useConnectionStatus hook;

Connection status. There are three possible values: "pending", "waiting-for-viewer-signal", "connected".
This feature can be used outside the NearSocialBridgeProvider component.

import { useConnectionStatus } from 'near-social-bridge'

const App = () => {
  const status = useConnectionStatus() // "pending" | "waiting-for-viewer-signal" | "connected"

  return <NearSocialBridgeProvider>{/* ... */}</NearSocialBridgeProvider>
}

• Added Container. This component is beneficial as it'll automatically sync the VM iframe's height according to its content height.

This component is beneficial as it'll automatically sync the VM iframe's height according to its content height.

import Container from 'near-social-bridge/Container'

const MyPage = () => {
  return (
    <Container>
      <p>My nice content</p>
    </Container>
  )
}

• Fixed the issue where the window.history state was being affected by NavigationProvider;
• Screen props: iframeHeight and autoHeightSync were removed. The VM iframe's height is going to be updated automatically while using it (Screen).

v1.5.1

• Live tests;
• Storage API - Fixed bug where sometimes values were not being persisted (Storage.set & Storage.privateSet);
• Social API - Fixed bug where sometimes calls were not completing (Social.get, Social.getr, Social.keys & Social.index);
• Fixed error in the Navigator component where the autoHeightSync property was being statically set to true;
• Screen.navigation, useNavigation() updated. It is now possible to call the replace function which will clear the current history by pointing the route to the new passed route value;
• Navigator has a new property called defaultRoute. If you use Navigator with defaultRoute, this route is going to be set every time the app reloads. If not used, the last seen route is going to be shown;

return (
  <Navigator autoHeightSync defaultRoute="Home">
    <Screen name="Home" component={Home} iframeHeight={420} />
    <Screen name="Profile" component={Profile} />
  </Navigator>
)

• Navigation history is now persisted using the Storage API;
• createStackNavigator now needs to wait for the history of the navigation to be ready;
• Fixed useSessionStoragehook. When used, the initial storage data was not being loaded;
• Added Test API to say when the tests are passing;
• NearSocialBridgeCore updated;
• Added new API: Fetch; Regular / Vanilla Fetch API won't work while your React App is running within BOS. You need to use this feature in order to make API calls from inside the BOS.

import { fetch } from 'near-social-bridge/api'

fetch<any>('https://rpc.mainnet.near.org/status').then((response) => console.log(response))
//{ "ok":true, "status":200, "contentType":"application/json", "body":{...}}

v1.5.0

• Fixed issue with bridge-service.ts where the webpack was sending a message first and making the app to freeze;
• Added some BOS APIs to be used inside the React app: NEAR, Social and Storage.

Near API

A convenient API to interact with the NEAR blockchain. Complete Docs Here.

Near.view

This will conduct a call to a smart contract that will get a stored message onchain.

import { Near } from 'near-social-bridge/api'

// Contract
const CONTRACT_ID = 'nearsocialexamples.near'

Near.view<string>(CONTRACT_ID, 'get_greeting').then((response) => console.log(response))
// {message: "The most recent stored greeting message"}

Near.call

This will conduct a call to a smart contract that will store a message onchain.

import { Near } from 'near-social-bridge/api'

// Contract
const CONTRACT_ID = 'nearsocialexamples.near'

// Set data
Near.call<{ message: string }>(CONTRACT_ID, 'set_greeting', { message: greeting })

Social API

A convenient API to get data from the SocialDB contract. Complete Docs Here.

Social.get

import { Social } from 'near-social-bridge/api'

Social.get('wendersonpires.testnet/widget/*').then((response) => console.log(res))
// {HelloWorld: '...', Chat: '...', ChatV2: '...'}

Social.getr

Social.getr('wendersonpires.testnet/profile').then((response) => console.log(res))
// {name: 'Wenderson Pires'}

Social.index

Social.index('widget-chatv2-dev', 'room', {
  limit: 1000,
  order: 'desc',
}).then((response) => console.log(res))
// [{accountId: 'xyz', blockHeight: 99, value: 'xyz'}, {...}, {...}, {...}]

Social.set

const data = { experimental: { test: 'test' } }
Social.set(data).then((response) => console.log(res))
// If Success: {wendersonpires.testnet: {experimental: {...}}}
// If Canceled: {error: 'the action was canceled'}

Social.keys

Social.keys('wendersonpires.testnet/experimental').then((response) => console.log(res))
// {wendersonpires.testnet: {experimental: {...}}}

Storage API

Storage object to store data for components that is persistent across refreshes. Complete Docs Here.

Storage.set

Storage.set(key, value) - sets the public value for a given key under the current widget. The value will be public, so other widgets can read it.

import { Storage } from 'near-social-bridge/api'

Storage.set('my-storage-key', JSON.stringify({ age: 33, name: 'Wendz' })).then((response) => console.log(response))
// {ok: true}

Storage.get

Storage.get(key, widgetSrc?) - returns the public value for a given key under the given widgetSrc or the current component if widgetSrc is omitted. Can only read public values.

Storage.get('my-storage-key').then((response) => console.log(response))
// {"age":33,"name":"Wendz"}

Storage.privateSet

Storage.privateSet(key, value) - sets the private value for a given key under the current component. The value is private, only the current component can read it.

Storage.privateSet('my-private-key', JSON.stringify({ age: 18, name: 'Wendz Private' })).then((response) =>
  console.log(response)
)
// {ok: true}

Storage.privateGet

Storage.privateGet(key) - returns the private value for a given key under the current component.

Storage.privateGet('my-private-key').then((response) => console.log(response))
// {"age":18,"name":"Wendz Private"}

v1.4.1

• Fixed issue where a Screen's parameter was not getting updated

v1.4.0

• Added overrideLocalStorage: This is a feature that overrides the window.localStorage with the Widget's Storage, so that, you can keep using window.localStorage but the Widget's Storage is going to be the source of data.

If using CSR:

import { overrideLocalStorage } from 'near-social-bridge/utils'

// using `sessionStorage` under the hood
overrideLocalStorage()

// The Widget won't break
localStorage.setItem('name', 'Wenderson')
localStorage.getItem('name') // "Wenderson"

If using SSR:

// Page or index.tsx
import { useEffect } from 'react'
import { NearSocialBridgeProvider, overrideLocalStorage } from 'near-social-bridge'
import MyComponent from './MyComponent'
import MyComponent2 from './MyComponent2'

overrideLocalStorage()

const SSRApp = () => {
  useEffect(() => {
    localStorage.setItem('name', 'Wenderson')
  }, [])

  return (
    <NearSocialBridgeProvider waitForStorage>
      <MyComponent />
      <MyComponent2 />
    </NearSocialBridgeProvider>
  )
}

export default SSRApp

// MyComponent
const MyComponent = () => {
  console.log(localStorage.getItem('name')) // "Wenderson"
}

// MyComponent2
import { sessionStorage } from 'near-social-bridge'
const MyComponent2 = () => {
  console.log(sessionStorage.getItem('name')) // "Wenderson"
}

• Now it's possible to wait for storage to be hydrated before rendering the children. You just need to set NearSocialBridgeProvider.waitForStorage as true;

import { NearSocialBridgeProvider } from 'near-social-bridge'
import 'near-social-bridge/near-social-bridge.css'

const App = () => {
  return (
    <NearSocialBridgeProvider waitForStorage>
      <Components />
    </NearSocialBridgeProvider>
  )
}

v1.3.6

• fixed the issue with AuthProvider where the initial accountId was not being set when the bridge connection had already been established

v1.3.5

• Fixed an issue where the auth.user object was defined even when the user was not logged in.

v1.3.4

• Minor adjustment for createStackNavigator. The content's height can be synced without watching auth.ready.