npm create vite@latest my-counter-frontend -- --template react-ts

npm install @sei-js/core @sei-js/react

import { SeiWalletProvider } from '@sei-js/react';
import './App.css';
import Home from './Home.tsx';
 
function App() {
	return (
		// Set up SeiWalletProvider for easy wallet connection and to use hooks in @sei-js/react
		<SeiWalletProvider
			chainConfiguration={{
				chainId: 'arctic-1',
				restUrl: 'https://rest.arctic-1.seinetwork.io',
				rpcUrl: 'https://rpc.arctic-1.seinetwork.io'
			}}
			wallets={['compass', 'fin']}>
			<Home />
		</SeiWalletProvider>
	);
}
 
export default App;

import { useCallback, useEffect, useState } from 'react';
import { useCosmWasmClient, useSigningCosmWasmClient, useWallet, WalletConnectButton } from '@sei-js/react';
 
// arctic-1 example contract
const CONTRACT_ADDRESS = 'sei14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9sh9m79m';
 
function Home() {
	const [count, setCount] = useState<number | undefined>();
	const [error, setError] = useState<string>('');
	const [isIncrementing, setIsIncrementing] = useState<boolean>(false);
 
	// Helpful hook for getting the currently connected wallet and chain info
	const { connectedWallet, accounts } = useWallet();
 
	// For querying cosmwasm smart contracts
	const { cosmWasmClient: queryClient } = useCosmWasmClient();
 
	// For executing messages on cosmwasm smart contracts
	const { signingCosmWasmClient: signingClient } = useSigningCosmWasmClient();
 
	const fetchCount = useCallback(async () => {
		const response = await queryClient?.queryContractSmart(CONTRACT_ADDRESS, {
			get_count: {}
		});
		return response?.count;
	}, [queryClient]);
 
	useEffect(() => {
		fetchCount().then(setCount);
	}, [connectedWallet, fetchCount]);
 
	const incrementCounter = async () => {
		setIsIncrementing(true);
		try {
			const senderAddress = accounts[0].address;
 
			// Build message content
			const msg = { increment: {} };
 
			// Define gas price and limit
			const fee = {
				amount: [{ amount: '20000', denom: 'usei' }],
				gas: '200000'
			};
 
			// Call smart contract execute msg
			await signingClient?.execute(senderAddress, CONTRACT_ADDRESS, msg, fee);
 
			// Updates the counter state again
			const updatedCount = await fetchCount();
			setCount(updatedCount);
 
			setIsIncrementing(false);
			setError('');
		} catch (error) {
			if (error instanceof Error) {
				setError(error.message);
			} else {
				setError('unknown error');
			}
			setIsIncrementing(false);
		}
	};
 
	// Helpful component for wallet connection
	if (!connectedWallet) return <WalletConnectButton />;
 
	return (
		<div>
			<h1>Count is: {count ? count : '---'}</h1>
			<button disabled={isIncrementing} onClick={incrementCounter}>
				{isIncrementing ? 'incrementing...' : 'increment'}
			</button>
			{error && <p style={{ color: 'red' }}>{error}</p>}
		</div>
	);
}
 
export default Home;

async function discoverContractMethods(contractAddress: string) {
	// We intentionally send an invalid query - the contract will respond with valid methods
	const invalidQuery = { a: 'b' };
 
	try {
		await contract.query(contractAddress, toUtf8Bytes(JSON.stringify(invalidQuery)));
		// If we reach here, something unexpected happened
		console.log('Unexpected success - contract accepted invalid query');
		return null;
	} catch (error) {
		if (error.data) {
			const errorMessage = toUtf8String(error.data);
 
			// The error message contains a list of valid methods
			// Format: "expected one of method1, method2, method3: query wasm contract failed"
			const match = errorMessage.match(/expected one of (.+): query wasm contract failed/);
			if (match) {
				const validMethods = match[1]
					.replace(/`/g, '')
					.split(', ')
					.map((method) => method.trim());
				console.log('Valid query methods:', validMethods);
				return validMethods;
			}
		}
		console.error('Unexpected error structure:', error);
		return null;
	}
}

[
	'owner_of', // Query the owner of a specific token
	'approval', // Check if an address is approved for a token
	'approvals', // List all approvals for a token
	'operator', // Check if an address is an operator
	'all_operators', // List all operators
	'num_tokens', // Get total supply of tokens
	'contract_info', // Get contract metadata
	'nft_info', // Get metadata for a specific token
	'all_nft_info', // Get all info for a specific token
	'tokens', // List tokens owned by an address
	'all_tokens', // List all tokens in the collection
	'minter', // Get the minting authority
	'extension', // Access CW721 extensions
	'ownership' // Query contract ownership
];

function NFTViewer() {
	const [methods, setMethods] = useState<string[]>([]);
	const [collectionOwner, setCollectionOwner] = useState<string>();
const [tokenOwner, setTokenOwner] = useState<string>();
const [contract, setContract] = useState<Contract>();
const [tokenId, setTokenId] = useState<string>('1');
const [isLoading, setIsLoading] = useState(false);
 
const NFT_CONTRACT_ADDRESS = "sei1g2a0q3tddzs7vf7lk45c2tgufsaqerxmsdr2cprth3mjtuqxm60qdmravc";
 
// Query collection ownership
const queryCollectionOwner = async () => {
	try {
		// The ownership query returns collection-level ownership information
		const queryMsg = { ownership: {} };
		const queryResponse = await contract.query(
			NFT_CONTRACT_ADDRESS,
			toUtf8Bytes(JSON.stringify(queryMsg))
		);
		const responseData = JSON.parse(toUtf8String(queryResponse));
 
		// Handle different response formats - some contracts nest data differently
		const owner = responseData.data?.owner || responseData.owner;
		setCollectionOwner(owner);
	} catch (error) {
		console.error('Error querying collection owner:', error);
	}
};
 
// Query specific token ownership
const queryTokenOwner = async (tokenId: string) => {
	try {
		setIsLoading(true);
		// The owner_of query returns ownership information for a specific token
		const queryMsg = { owner_of: { token_id: tokenId } };
		const queryResponse = await contract.query(
			NFT_CONTRACT_ADDRESS,
			toUtf8Bytes(JSON.stringify(queryMsg))
		);
		const responseData = JSON.parse(toUtf8String(queryResponse));
		const owner = responseData.data?.owner || responseData.owner;
		setTokenOwner(owner);
	} catch (error) {
		console.error('Error querying token owner:', error);
	} finally {
		setIsLoading(false);
	}
};
 
// Discover available methods when component mounts or contract changes
useEffect(() => {
	if (!contract) return;
	discoverContractMethods(NFT_CONTRACT_ADDRESS)
		.then(setMethods);
}, [contract]);
 
return (
	<div className="nft-viewer">
		<h2>NFT Collection Info</h2>
		<div>
			<p>Collection Address: {NFT_CONTRACT_ADDRESS}</p>
			<p>Collection Owner: {collectionOwner || 'Loading...'}</p>
			<p>Available Methods: {methods?.join(', ') || 'Loading...'}</p>
		</div>
 
		<div className="token-lookup">
			<h3>Token Ownership Lookup</h3>
			<div className="input-group">
				<input
					type="text"
					value={tokenId}
					onChange={(e) => setTokenId(e.target.value)}
					placeholder="Enter token ID"
				/>
				<button
					onClick={() => queryTokenOwner(tokenId)}
					disabled={isLoading}
				>
					{isLoading ? 'Searching...' : 'Look Up Token'}
				</button>
			</div>
			{tokenOwner && (
				<div className="token-result">
					<p>Token {tokenId} Owner: {tokenOwner}</p>
				</div>
			)}
		</div>
	</div>
);
}

const owner = responseData.data?.owner || responseData.owner;

async function queryContract(address: string, queryMsg: object) {
	try {
		const response = await contract.query(address, toUtf8Bytes(JSON.stringify(queryMsg)));
 
		const result = JSON.parse(toUtf8String(response));
		// Handle both nested and direct data structures
		return result.data ?? result;
	} catch (error) {
		if (error.data) {
			const errorMessage = toUtf8String(error.data);
			// Check if this is a method discovery error
			if (errorMessage.includes('expected one of')) {
				console.log('Available methods:', errorMessage);
			}
		}
		throw error;
	}
}

try {
	const result = await queryContract(address, queryMsg);
	// Handle success
} catch (error) {
	if (error.data) {
		const errorMessage = toUtf8String(error.data);
		if (errorMessage.includes('expected one of')) {
			// This is a method discovery error - might be useful!
			console.log('Valid methods:', errorMessage);
		} else if (errorMessage.includes('not found')) {
			// Handle non-existent tokens or resources
			console.log('Resource not found');
		} else {
			// Handle other contract-specific errors
			console.log('Contract error:', errorMessage);
		}
	} else {
		// Handle network or other errors
		console.error('Network or system error:', error);
	}
}

import { Buffer } from 'buffer';
 
// Polyfill self for browser and global for Node.js
const globalObject = typeof self !== 'undefined' ? self : global;
 
Object.assign(globalObject, {
  process: process,
  Buffer: Buffer
});

yarn add -D node-polyfill-webpack-plugin

import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
 
... // the rest of your webpack config
plugins: [
    ...
    new NodePolyfillPlugin(),
    ...
],
...