Token

Token React Widgets and Modals

Get Method Widgets and Modals

🔗 Click to jump to section

Post Method Widgets and Modals

🔗 Click to jump to section

---

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.

Name	Type	Required	Default	Description
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​

Name	Type	Required	Default	Description
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​

Name	Type	Required	Default	Description
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​

Name	Type	Required	Default	Description
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

Name	Type	Required	Default	Description
widget parameters	WidgetParameters			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​

Name	Type	Required	Default	Description
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​

Name	Type	Required	Default	Description
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',
})