Connected as: {address}
)}Connected as: {address}
)}Connected: {address.slice(0, 6)}...{address.slice(-4)}
)} {error &&{error}
}No taps yet
return (Connected as: {address}
)}Connected as: {smartAccount.address}
{message &&{message}
}Please connect your wallet.
)} Copy import { useSendTransaction } from "thirdweb/react"; import { ethers } from "ethers"; const { mutate: sendTransaction, isPending } = useSendTransaction(); const sendTokens = async () => { if (!smartAccount) { setMessage("No smart account connected."); return; } console.log("Sending 0.01 STT from:", smartAccount.address); sendTransaction( { to: "0xb6e4fa6ff2873480590c68D9Aa991e5BB14Dbf03", value: ethers.parseUnits("0.01", 18), chain: somniaTestnet, client, }, { onSuccess: (receipt) => { console.log("Transaction Success:", receipt); setMessage(`Sent 0.01 STT! TX: ${receipt.transactionHash}`); }, onError: (error) => { console.error("Transaction Failed:", error); setMessage("Transaction failed! Check console."); }, } ); }; Copy const [message, setMessage] = useState{message}
} Copy 'use client'; import { useState } from 'react'; import { ConnectButton, useActiveAccount, useSendTransaction, } from 'thirdweb/react'; import { ethers } from 'ethers'; import { client } from './client'; import { somniaTestnet } from 'viem/chain'; export default function Home() { const [message, setMessage] = useStateConnected as: {smartAccount.address}
{message &&{message}
}Please connect your wallet.
)}${price}
... ) Copy import { useEffect, useState } from 'react'; import { createPublicClient, http, parseAbi, formatUnits } from 'viem'; import { somniaTestnet } from 'viem/chains'; const client = createPublicClient({ chain: somniaTestnet, transport: http(), }); const FEEDS = { ETH: '0x604CF5063eC760A78d1C089AA55dFf29B90937f9', BTC: '0x3dF17dbaa3BA861D03772b501ADB343B4326C676', USDC: '0xA4a08Eb26f85A53d40E3f908B406b2a69B1A2441', }; const abi = parseAbi([\ 'function getLatestPrice() view returns (int256)',\ 'function getDecimals() view returns (uint8)',\ ]); export default function PriceWidget() { const [price, setPrice] = useState(''); const [selectedToken, setSelectedToken] = useState<'ETH' | 'BTC' | 'USDC'>( 'ETH' ); const fetchPrice = async () => { const contractAddress = FEEDS[selectedToken]; const [rawPrice, decimals] = await Promise.all([\ client.readContract({\ address: contractAddress,\ abi,\ functionName: 'getLatestPrice',\ }),\ client.readContract({\ address: contractAddress,\ abi,\ functionName: 'getDecimals',\ }),\ ]); const normalized = formatUnits(rawPrice, decimals); setPrice(parseFloat(normalized).toFixed(2)); }; useEffect(() => { fetchPrice(); const interval = setInterval(fetchPrice, 10000); return () => clearInterval(interval); }, [selectedToken]); return (${price}
{JSON.stringify(data, null, 2)}
)}
{JSON.stringify(info, null, 2)}
)}
Total proposals created: {totalProposals.toString()}
) : (Loading total proposals...
)}Hello, World!
[hashtag](https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth/authenticating-with-metamask#install-viem) Install Viem ------------------------------------------------------------------------------------------------------------------------------------------------------- Copy npm i viem [Viemarrow-up-right](https://viem.sh/) is a TypeScript interface for Ethereum that provides low-level stateless primitives for interacting with Ethereum. Viem sets up a “`transport`” infrastructure to connect with a node in the EVM Network and the deployed Smart Contracts. We will use some ViemJS methods to connect to your Smart Contract deployed on the Somnia Network. ViemJS has a \`createPublicClient\` and a \`createWalletClient\` method. The PublicClient is used to perform READ operations, while the WalletClient is used to perform WRITE operations. [hashtag](https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth/authenticating-with-metamask#import-methods) Import Methods ----------------------------------------------------------------------------------------------------------------------------------------------------------- The next step is to set up the React State methods and the ViemJS methods that we will require: The `http` is the transport protocol for interacting with the Node of the Somnia Blockchain via RPC. It uses the default Somnia RPC URL: [`https://dream-rpc.somnia.network`arrow-up-right](https://dream-rpc.somnia.network/) . In the future developers can use RPC providers to avoid rate limiting. [hashtag](https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth/authenticating-with-metamask#import-somnia) Import Somnia --------------------------------------------------------------------------------------------------------------------------------------------------------- Import Somnia Testnet [hashtag](https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth/authenticating-with-metamask#declare-react-states) Declare React States ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- State allows us to manage changing data in the User Interface. For this example application, we are going to manage two states: * When we can read the User's Address * When a User is connected (Authorization) Add the states inside the export statement: Now that the States are declared, we can declare a function to handle the MetaMask authentication process on Somnia Network. [hashtag](https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth/authenticating-with-metamask#connect-metamask-function) Connect MetaMask Function --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Add the function below inside the export statement: [hashtag](https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth/authenticating-with-metamask#update-the-ui) Update the UI --------------------------------------------------------------------------------------------------------------------------------------------------------- MetaMask connection is set up, and the final step is to test the connection via the User Interface. Update the `Hello, World!
` in the return statement to the following: Open your terminal and run the following command to start the app: Go to `localhost:3000` in your Web Browser to interact with the app and connect to Somnia Network via MetaMask. You can read more about using Viem to interact with the deployed Smart Contract methods on Somnia Network [here](https://docs.somnia.network/developer/development-frameworks/using-the-viem-library) . Congratulations, you have successfully connected from MetaMask to Somnia Network. 🎉 [PreviousWallet Integration and Authchevron-left](https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth) [NextAuthenticating with ConnectKitchevron-right](https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth/authenticating-with-connectkit) Last updated 6 months ago * [Start a NextJS Project](https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth/authenticating-with-metamask#start-a-nextjs-project) * [Install Viem](https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth/authenticating-with-metamask#install-viem) * [Import Methods](https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth/authenticating-with-metamask#import-methods) * [Import Somnia](https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth/authenticating-with-metamask#import-somnia) * [Declare React States](https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth/authenticating-with-metamask#declare-react-states) * [Connect MetaMask Function](https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth/authenticating-with-metamask#connect-metamask-function) * [Update the UI](https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth/authenticating-with-metamask#update-the-ui) Copy import { useState } from "react"; import { createPublicClient, http, createWalletClient, } from "viem"; Copy import { somniaTestnet } from "viem/chains"; Copy const [address, setAddress] = useStateConnected as: {address}
Loading transfers...
) : (From: {transfer.from}
To: {transfer.to}
Value: {parseFloat(transfer.value) / 1e18} STT
TX:{" "} View Transaction
Loading...
) : authenticated ? ( {walletAddress ? (Connected as: {walletAddress}
) : (No wallet address found.
)} ) : ( <> {loginError &&{loginError}
} )} } Copy const { sendTransaction } = useCrossAppAccounts(); ...... const sendSTT = async () => { if (!walletAddress) return; const txn = { to: '0xb6e4fa6ff2873480590c68D9Aa991e5BB14Dbf03', value: 1000000000000000, chainId: 50312, }; try { const tx = await sendTransaction(txn, { address: walletAddress }); console.log('TX Sent:', tx); } catch (err) { console.error('TXN Failed:', err); } }; ...... Copy 'use client'; import { usePrivy, useCrossAppAccounts, } from '@privy-io/react-auth'; import { useEffect, useState } from 'react'; import { createPublicClient, http, formatEther } from 'viem'; import { somniaTestnet } from 'viem/chains'; export default function Home() { const { ready, authenticated, user, logout } = usePrivy(); const { loginWithCrossAppAccount, sendTransaction } = useCrossAppAccounts(); const [loginError, setLoginError] = useStateLoading...
) : !authenticated ? ( <> {loginError &&{loginError}
} ) : hydrated ? (Connected as: {walletAddress}
) : (No wallet address found.
)}Balance: {balance ? `${balance} STT` : 'Loading...'}
🔄 Logging in... Please wait
)}| Player | Bet | Choice | Result | Payout | Time |
|---|---|---|---|---|---|
| {truncateHash(flip.player)} | {/* Bet amount - converted from wei to ether */}{formatEther(flip.betAmount)} STT | {/* Player's choice - color coded */}{flip.choice} | {/* Actual result - same color coding */}{flip.result} | {/* Payout - green if won, gray if lost */}{flip.payout !== '0' ? `+${formatEther(flip.payout)}` : '0' } STT | {/* Timestamp - converted to readable date */}{formatTime(flip.blockTimestamp)} |
Auto-refreshing every 5 seconds