Token

Token React Widgets and Modals


Get Method Widgets and Modals

To use the widgets in React components you need to import the Widget component:

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

Every widget has an optional parameter called settings.

NameTypeRequiredDefaultDescription

fullScreen

Boolean

true

Should widget be shown fullscreen

hideMenu

Boolean

true

Deprecated

preventClose

Boolean

true

Hides close button

You can provide them to the widget like this:

<Widget settings={{hideMenu: false}}>

Buy​ with Fiat

Description​

Returns a URL of a widget where the user can buy a Token using a credit / debit card. See the Token Checkout integration guidelines for more details about this feature.

Parameters​

NameTypeRequiredDefaultDescription

tokenID

String

βœ”οΈ

The ID of the Token, the widget will collect the data to present the Token from the backend

amount

String

1

The default amount of the Token displayed on the widget. The user can modify this value.

Usage Example​

<Widget.Token.Buy tokenId="1" amount="1">

Send to user​

Description​

Sends a token to other user in the platform by its user ID. The user will get a Sign Transaction widget to approve the transaction.

Parameters​

NameTypeRequiredDefaultDescription

blockchainId

String

βœ”οΈ

Blockchain

value

String

βœ”οΈ

Amount of crypto

tokenAddress

String

βœ”οΈ

The contract address of the token

onClose

() => void

Close callback

onError

() => void

Error callback

onSuccess

() => void

Success callback

userId

String

βœ”οΈ

Id of user to send crypto to

Usage Example​

const App = () => (
  <Widget.Coin.SendToUser
    blockchainId='ethereum'
    value='1.23'
    tokenAddress='0x7d1afa7b718fb893db30a3abc0cfc608aacfebb0'
    userId='1'
  />
)

Send to wallet​

Description​

Sends a token to another wallet by its wallet address. The user will get a Sign Transaction widget to approve the transaction.

Parameters​

NameTypeRequiredDefaultDescription

blockchainId

String

βœ”οΈ

Blockchain

value

String

βœ”οΈ

Amount of crypto

tokenAddress

String

βœ”οΈ

Contract address of a token

onClose

() => void

Close callback

onError

() => void

Error callback

onSuccess

() => void

Success callback

walletAddress

String

βœ”οΈ

Address of wallet to send crypto to

Usage Example​

const App = () => (
  <Widget.Coin.SendToWallet
    blockchainId='ethereum'
    value='1.23'
    tokenAddress='0x7d1afa7b718fb893db30a3abc0cfc608aacfebb0'
    walletAddress='0x15b895d74582daea01be8e5be264243d8c9d7bb1'
  />
)

Post Method Widgets and Modals

Mutation Parameters

NameTypeRequiredDefaultDescription

widget parameters

Widget parameters

Usage Example​

const [sendCoin] = hooks.useSendCoinToUser({
  callbacks: {
    onSuccess: () => {
      console.log('Success')
    },
    onError: () => {
      console.log('Error')
    },
    settings: {
      preventClose: true,
    },
  },
})

Send token to user​

Description​

Show modal for sending token to user with specified address and amount, by using your internal user id.

Callback Parameters​

NameTypeRequiredDefaultDescription

blockchainId

String

βœ”οΈ

Blockchain

value

String

βœ”οΈ

Amount of crypto

tokenAddress

String

βœ”οΈ

The contract address of the token

userId

String

βœ”οΈ

Id of user to send crypto to

Usage Example​

const [sendToken] = hooks.useSendTokenToUser()

sendToken({
  blockchainId: 'ethereum',
  value: '1.2',
  tokenAddress: '0x7d1afa7b718fb893db30a3abc0cfc608aacfebb0',
  userId: '1',
})

Send token to wallet​

Description​

Show modal for sending token to address with specified amount.

Callback Parameters​

NameTypeRequiredDefaultDescription

blockchainId

String

βœ”οΈ

Blockchain

value

String

βœ”οΈ

Amount of crypto

tokenAddress

String

βœ”οΈ

The contract address of the token

walletAddress

String

βœ”οΈ

address of wallet to send crypto to

Usage Example​

const [sendToken] = hooks.useSendTokenToWallet()

sendToken({
  blockchainId: 'ethereum',
  value: '0.1',
  walletAddress: '0x15b895d74582daea01be8e5be264243d8c9d7bb1',
})

Last updated