Authenticated user:
{JSON.stringify(user, null, 2)})}
Your JWT is: {JWT}
}Choose which type of key you want to reveal from the embedded wallet
{result}Please log in to continue.
}Devices
{JSON.stringify(userDevices, null, 2)}
Backup Codes
{codes.map((code) => ({code}
))} > ); const LogIn = () => ( <>User not logged in!
Secret: {data.secret}
> ); }; const OTPView = ({ onSubmit }: { onSubmit: (code: string) => void }) => ( ); ``` **Explanation:** * **BackupCodesView:** * Displays the backup codes and provides an "Accept" button to acknowledge them. * **LogIn:** * Displays a message indicating that the user is not logged in and shows the `DynamicWidget` for login. * **QRCodeView:** * Displays the QR code for MFA setup and the secret key. Provides a "Continue" button to proceed to the OTP view. * **OTPView:** * Provides a form for the user to enter the OTP. On form submission, it calls the `onSubmit` function with the entered OTP. ### Step 5: Create the Main `HeadlessMfaView` Component This component checks if the user is logged in and displays the appropriate view. ```typescript export const HeadlessMfaView: FC = () => { const { user, userWithMissingInfo } = useDynamicContext(); return (Authenticated user:
{JSON.stringify(user, null, 2)})}
Log in or sign up
{isProcessing && Processing...} {error && {error.message}}user: {user?.email}
> ); }; export const HeadlessSocialSignInView: FC = () => { const { user } = useDynamicContext(); return (First name: {user.firstName}
} {user?.email &&E-Mail: {user.email}
} {user?.alias &&Alias: {user.alias}
} {user?.lastName &&Last name: {user.lastName}
} {user?.jobTitle &&Job: {user.jobTitle}
} {user?.phoneNumber &&Phone: {user.phoneNumber}
} {user?.tShirtSize &&Tshirt size: {user.tShirtSize}
} {user?.team &&Team: {user.team}
} {user?.country &&Country: {user.country}
} {user?.username &&Username: {user.username}
}{connectedAccountInfo?.publicIdentifier ?? provider}
{balance}
; ``` #### Show all tokens and balances How: Mapping return from usetokenbalances hook Hook/Component: [https://docs.dynamic.xyz/react-sdk/hooks/usetokenbalances](https://docs.dynamic.xyz/react-sdk/hooks/usetokenbalances) Notes: Multi-asset is only supported on the following networks - Ethereum, Optimism, Polygon, Arbitrum, and Base. ```jsx import { useTokenBalances } from "@dynamic-labs/sdk-react-core"; const TokenBalances = () => { const tokenBalances = useTokenBalances(); return ({token.symbol}
{token.balance}
{wallet.address}
))}Mint NFT