Doug Richar drichar

NFDomains Vault Example

In this guide we will provide an example of how to use the NFDomains API to send assets to and from an NFD's vault, as a reference for adding Vault support in your own application.

Overview

A vault is an Algorand account controlled by an NFD's smart contract that can automatically opt-in to assets it receives.

Vaults are locked by default, meaning only the NFD's owner can send assets to it. When the owner unlocks the vault, anyone can send assets to it. The owner can lock or unlock the vault at any time.

	import { CHAIN_NAMESPACES, IBaseProvider } from '@web3auth/base'
	import { CommonPrivateKeyProvider } from '@web3auth/base-provider'
	import { Web3Auth, SDK_MODE } from '@web3auth/single-factor-auth'
	import algosdk from 'algosdk'

	// Create an in-memory storage that doesn't persist between app sessions
	// This prevents automatic session restoration while satisfying Web3Auth's storage requirement
	class InMemoryStorage {
	private storage: Map<string, string> = new Map()

	// Deflex API responses
	interface QuoteResponse {
	quote: string \| number
	profit: {
	amount: number
	asa: {
	id: number
	}
	}
	priceBaseline: number

	import { AccountInformation } from '@algorandfoundation/algokit-utils/types/account'
	import { useMutation } from '@tanstack/react-query'
	import algosdk from 'algosdk'
	import { ALGORAND_ASSET_ID } from '@/constants/assets'
	import { useAccountInfo } from '@/hooks/useAccountInfo'
	import { algorand } from '@/lib/algorand'
	import { useAuth } from '@/lib/auth'
	import {
	DeflexQuote,
	DeflexTransaction,

	import { useQuery, useQueryClient } from '@tanstack/react-query'
	import { useSingleAssetMarketData } from '@/hooks/useAssetMarketData'
	import { useDebounce } from '@/hooks/useDebounce'
	import { fetchDeflexQuote } from '@/lib/deflex'
	import { addBreadcrumb } from '@/lib/sentry/config'
	import { calculateAssetInAmount } from '@/utils/amount'
	import { AssetAmount } from '@/utils/asset-amount'

	type Asset = {
	id: bigint // ASA ID

	import * as React from 'react'
	import { NfdRecord } from '@/api/api-client'
	import { useNfdCacheUpdate } from '@/api/hooks/useNfd'
	import { usePostContractLock } from '@/api/hooks/usePostContractLock'

	interface ManageContractProps {
	nfd: NfdRecord
	}

	export function ManageContract({ nfd }: ManageContractProps) {