3️Integrate Frontend SDK

We support JavaScript, React, React Native and Unity Bridge

The JavaScript SDK is the core Tweed SDK - all of the logic lives here. You can integrate the Frontend SDK in JavaScript, or in React or React native, using a provider.

The React SDK is the Core Javascript SDK wrapped with React. We built custom functions for React so the Tweed SDK will fit with React syntax. For each JavaScript SDK function, we created a React hook.

---

Frontend SDK Installation and Setup

Step 1: Installation

🔗 Click to jump to section

Step 2: Setup

🔗 Click to jump to section

Usage Examples

🔗 Click to jump to section

---

Step 1: Installation

JavaScript

JavaScript

The SDK can be installed using either npm or yarn.

npm

npm install --save @paytweed/frontend-sdk

yarn

yarn add @paytweed/frontend-sdk

React

React

The SDK can be installed using either npm or yarn.

npm

npm install --save @paytweed/frontend-sdk-react

yarn

yarn add @paytweed/frontend-sdk-react

React Native

React Native

The SDK can be installed using either npm or yarn.

npm

npm install --save @paytweed/frontend-sdk-react-native

yarn

yarn add @paytweed/frontend-sdk-react-native

---

Step 2: Setup

JavaScript

JavaScript

The only thing required to set up the frontend SDK is implementing the function sendMessageToBackend, which will pass a message from the frontend SDK to the backend SDK.

This example uses HTTP endpoint /message to pass the message:

import { TweedFrontendSDK } from '@paytweed/frontend-sdk'

const frontendSDK = TweedFrontendSDK.setup({
  defaultBlockchainIds: ['ethereumSepolia', 'polygonMumbai'],
  sendMessageToBackend: async (message) => {
    const response = await fetch('http://your-server.com/message', {
      body: JSON.stringify({ message }),
      headers: { 'Content-Type': 'application/json' },
      method: 'POST',
    })
    const { answer } = await response.json()
    return answer
  },
})

React

React

To set up the ReactJS SDK, you need to wrap your app with TweedFrontendSdkProvider and implement the function sendMessageToBackend,which will send a message to the backend SDK.

This example uses the HTTP endpoint /message to send the message

import Application from './Application'
import { Blockchain } from '@paytweed/frontend-sdk'
import { TweedFrontendSdkProvider } from '@paytweed/frontend-sdk-react'
import { useCallback } from 'react'

export default () => {
  const sendMessageToBackend = useCallback(async (message: string) => {
    const response = await fetch('http://your-server.com/message', {
      body: JSON.stringify({ message }),
      headers: { 'Content-Type': 'application/json' },
      method: 'POST',
    })
    const { answer } = await response.json()
    return answer
  }, [])

  return (
    <TweedFrontendSdkProvider
      defaultBlockchainIds={['ethereumSepolia', 'polygonMumbai']}
      sendMessageToBackend={sendMessageToBackend}>
      theme={'light'}
      <Application />
    </TweedFrontendSdkProvider>
  )
}

React Native

React Native

To set up the React Native SDK, you need to wrap your app with TweedFrontendMobileSdkProvider and implement the function sendMessageToBackend,which will send a message to the backend SDK.

Initialization Parameters​

These are the parameters that you can pass in the initialization of the frontend SDK (in React only).

Name	Type	Required	Default	Description
defaultBlockchainIds	String[]	✔️		Default blockchains to use
sendMessageToBackend	String => Promise<String>	✔️		Function that sends a message to backend and returns an answer from it
walletConnect	{onConnect?: (connection: WalletConnectConnection) => void, onDisconnect?: (connection: WalletConnectConnection) => void}}			Wallet connect event listeners
theme	'light' | 'dark'		light	Enabling to alternate between a light and dark color scheme

Setup Example

This example uses the HTTP endpoint /message to send the message:

import Application from './Application'
import { Blockchain } from '@paytweed/frontend-sdk'
import { TweedFrontendSdkProvider } from '@paytweed/frontend-sdk-react'
import { useCallback } from 'react'

export default () => {
  const sendMessageToBackend = useCallback(async (message: string) => {
    const response = await fetch('http://your-server.com/message', {
      body: JSON.stringify({ message }),
      headers: { 'Content-Type': 'application/json' },
      method: 'POST',
    })
    const { answer } = await response.json()
    return answer
  }, [])

  return (
    <TweedFrontendSdkProvider
      defaultBlockchainIds={['ethereumSepolia', 'polygonMumbai']}
      sendMessageToBackend={sendMessageToBackend}>
      theme={'light'}
      <Application />
    </TweedFrontendSdkProvider>
  )
}

---

Usage Examples

JavaScript

JavaScript

import { TweedFrontendSDK } from '@paytweed/frontend-sdk'

// Check if wallet exists
const walletExists = await frontendSDK.wallet.exists()
if (walletExists) {
  // Get the balance of the wallet
  const balance = await frontendSDK.crypto.getBalance()

  // Show the wallet address embed in a QR code
  await frontendSDK.wallet.showAddress({ blockchainId: 'ethereum' })
} else {
  // Show the wallet creation modal if the wallet doesn't exist
  await frontendSDK.wallet.create()
}

React

React

Hooks to fetch the returning data:

import { hooks } from '@paytweed/frontend-sdk-react'

const BalanceView = () => {
  const { data, error, loading } = hooks.useCryptoBalance()
  if (loading) return <div>Loading</div>
  if (error) return <div>Error: {error}</div>
  return <div>{data}</div>
}

The components for the actions:

import { Widget } from '@paytweed/frontend-sdk-react'

const BuyPage = () => (
  <div>
    <Widget.Coin.Buy />
  </div>
)

React Native

React Native

Hooks to fetch the returning data:

import { hooks } from '@paytweed/frontend-sdk-react-native'

const BalanceView = () => {
  const { data, error, loading } = hooks.useCryptoBalance()
  if (loading) return <div>Loading</div>
  if (error) return <div>Error: {error}</div>
  return <div>{data}</div>
}

The widget actions:

import { hooks } from '@paytweed/frontend-sdk-react-native'
import { useCallback } from 'react'

const frontendSdk = hooks.useTweedFrontendSDK()
const onPress = useCallback(() => {
  frontendSDK.wallet.showAddress({ blockchainId: 'ethereumSepolia' })
}, [frontendSdk])