NFT

NFT 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 an NFT using a credit / debit card. See the NFT Checkout integration guidelines for more details about this feature.

Parameters​

NameTypeRequiredDescription

nftId

String

βœ”οΈ

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

onError

(error: string) => void

The error that was generated

onSuccess

(txHash: string) => void

Transaction Hash

onClose

() => void

null

Usage Example​​

<Widget.Nft.BuyWithFiat nftId="1">

Send to user​

Description​

Send an NFT to another user on the platform by its user ID. The user will get a Sign Transaction widget to approve the transaction.

Parameters​

NameTypeRequiredDefaultDescription

blockchainId

String

βœ”οΈ

Blockchain

tokenAddress

String

βœ”οΈ

NFT contract address

onClose

() => void

Close callback

onError

(error: string) => void

Error callback

onSuccess

(txHash: string) => void

Success callback

tokenId

String

βœ”οΈ

NFT token id

userId

String

βœ”οΈ

Id of user to send NFT to

Usage Example​​

<Widget.Nft.SendToUser
  blockchainId='ethereum'
  tokenAddress='0x36436b6326a893d600aa9ad99317cc9d53b430c5'
  tokenId='123'
  userId='1'
/>

Send to wallet​

Description​

Send an NFT to another wallet by its wallet address. The user will get a Sign Transaction widget to approve the transaction.

Parameters​

NameTypeRequiredDefaultDescription

blockchainId

String

βœ”οΈ

Blockchain

tokenAddress

String

βœ”οΈ

NFT contract address

onClose

() => void

Close callback

onError

(error: string) => void

Error callback

onSuccess

(txHash: string) => void

Success callback

tokenId

String

βœ”οΈ

NFT token id

walletAddress

String

βœ”οΈ

Address of wallet to send NFT to

Usage Example​​

<Widget.Nft.SendToWallet
  blockchain='ethereum'
  tokenAddress='0x36436b6326a893d600aa9ad99317cc9d53b430c5'
  tokenId='123'
  walletAddress='0x15b895d74582daea01be8e5be264243d8c9d7bb1'
/>

Post Method Widgets and Modals

Mutation Parameters

NameTypeRequiredDefaultDescription

widget parameters

Widget parameters

Usage Example​​

const [sendCoin] = hooks.useSendCoinToUser({
  callbacks: {
    onSuccess: (txHash: string) => {
      console.log(`Successful transaction: ${txHash}`)
    },
    onError: (error: string) => {
      console.log(`Error: ${error}`)
    },
    settings: {
      preventClose: true,
    },
  },
})

Send NFT to user​

Description​

Displays a modal for sending a NFT to a user with a specified address and amount, by using your internal user ID.

Callback Parameters​

NameTypeRequiredDefaultDescription

blockchainId

String

βœ”οΈ

Blockchain

contractAddress

String

βœ”οΈ

NFT contract address

tokenId

String

βœ”οΈ

NFT token Id

userId

String

βœ”οΈ

Id of user to send crypto to

Usage Example​​

const [sendNFT] = hooks.useSendNftToUser()

sendNFT({
  blockchainId: 'ethereum',
  tokenAddress: '0x90fcab7b307128ceb4a678bdb5240f4bcf950875',
  tokenId: '1',
  userId: '1',
})

Send NFT to wallet​

Description​

Displays a modal for sending coins to an address with a specified amount.

Callback Parameters​

NameTypeRequiredDefaultDescription

blockchainId

String

βœ”οΈ

Blockchain

tokenAddress

String

βœ”οΈ

NFT contract address

tokenId

String

βœ”οΈ

NFT token Id

walletAddress

String

βœ”οΈ

address of wallet to send crypto to

Usage Example​

const [sendNft] = hooks.useSendNftToWallet()

sendNft({
  blockchainId: 'ethereum',
  tokenAddress: '0x90fcab7b307128ceb4a678bdb5240f4bcf950875',
  tokenId: '1',
  walletAddress: '0x15b895d74582daea01be8e5be264243d8c9d7bb1',
})

Last updated