NFT

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

Parameters​

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

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

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

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

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

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