import { useEmbeddedWallet, useDynamicContext } from "@dynamic-labs/sdk-react-core"
import { isEthereumWallet } from "@dynamic-labs/ethereum"
// component declaration and all other logic you might need
const {
createOrRestoreSession,
isSessionActive,
sendOneTimeCode,
userHasEmbeddedWallet
} = useEmbeddedWallet();
const { primaryWallet } = useDynamicContext();
const oneTimeCodeSent = useRef(false);
useEffect(() => {
const startSession = () => {
try {
if (isSessionActive) return;
createOrRestoreSession();
} catch (err) {
return;
}
};
startSession();
}, []);
const onSendOneTimeCodeHandler = async () => {
if(!isSessionActive) {
try {
await sendOneTimeCode();
oneTimeCodeSent.current = true;
return;
} catch(e) {
console.error(e)
}
}
else return;
}
const onCreateSessionHandler: FormEventHandler<HTMLFormElement> = async (event) => {
try {
event.stopPropagation();
event.preventDefault();
if (!primaryWallet || !userHasEmbeddedWallet()) return;
const otc = event.currentTarget.otc.value;
await createOrRestoreSession({oneTimeCode: otc})
.then((result) => setResult(result))
.catch((error) => setResult(JSON.stringify(error, null, 2)));
} catch (err) {
logger.error(err);
}
};
const handleTransaction = async () => {
if(!isEthereumWallet(primaryWallet)) return;
const provider = await primaryWallet.getWalletClient();
const transaction = {
account: primaryWallet.address as Hex,
chain: getChain(await provider.getChainId()),
to: address as Hex,
value: amount ? parseEther(amount) : undefined,
};
const hash = await provider.sendTransaction(transaction);
const client =
await primaryWallet.getPublicClient();
const { transactionHash } = await client.getTransactionReceipt({
hash,
});
console.log('Transaction: ' + transactionHash);
}
return (
<>
{!isSessionActive && (
<div>
{!oneTimeCodeSent.current && <button onClick={onSendOneTimeCodeHandler}>Start session</button>}
{oneTimeCodeSent.current && (
<form onSubmit={onCreateSessionHandler} className='create-session-method'>
<p>
Enter one-time code sent to email to create a session
</p>
<input required name='otc' type='text' placeholder='One-time code' />
<br />
<button type='submit'>Create session</button>
</form>
)}
<div>
)}
{isSessionActive && (
<div>
<button type='submit' onClick={handleTransaction}>Send transaction</button>
<div>
)}
</>
)
import { useEmbeddedWallet, useDynamicContext } from “@dynamic-labs/sdk-react-core”
// component declaration and all other logic you might need
const { primaryWallet } = useDynamicContext();
const handleTransaction = async () => {
if (!isEthereumWallet(primaryWallet)) return;
const provider = await primaryWallet.getWalletClient();
const transaction = {
account: primaryWallet.address as Hex,
chain: getChain(await provider.getChainId()),
to: address as Hex,
value: amount ? parseEther(amount) : undefined,
};
const hash = await provider.sendTransaction(transaction);
const client =
await primaryWallet.getPublicClient();
const { transactionHash } = await client.getTransactionReceipt({
hash,
});
console.log('Transaction: ' + transactionHash);
}
return (
<>
<button type='submit' onClick={handleTransaction}>Send transaction</button>
</>
);
Note: getWalletVersion is only available in 3.0.0-alpha.30 and above
import { useEmbeddedWallet, useDynamicContext } from “@dynamic-labs/sdk-react-core”
// component declaration and all other logic you might need
const {
createOrRestoreSession,
isSessionActive,
sendOneTimeCode,
userHasEmbeddedWallet,
getWalletVersion,
} = useEmbeddedWallet();
const { primaryWallet } = useDynamicContext();
const version = getWalletVersion();
const oneTimeCodeSent = useRef(false);
useEffect(() => {
if (version === EmbeddedWalletVersion.V1) {
const startSession = () => {
try {
if (isSessionActive) return;
createOrRestoreSession();
} catch (err) {
return;
}
};
startSession();
}
}, [version]);
const onSendOneTimeCodeHandler = async () => {
if(!isSessionActive) {
try {
await sendOneTimeCode();
oneTimeCodeSent.current = true;
return;
} catch(e) {
console.error(e)
}
}
else return;
}
const onCreateSessionHandler: FormEventHandler<HTMLFormElement> = async (event) => {
try {
event.stopPropagation();
event.preventDefault();
if (!primaryWallet || !userHasEmbeddedWallet()) return;
const otc = event.currentTarget.otc.value;
await createOrRestoreSession({oneTimeCode: otc})
.then((result) => setResult(result))
.catch((error) => setResult(JSON.stringify(error, null, 2)));
} catch (err) {
logger.error(err);
}
};
const handleTransaction = async () => {
if (!isEthereumWallet(primaryWallet)) return;
const provider = await primaryWallet.getWalletClient();
const transaction = {
account: primaryWallet.address as Hex,
chain: getChain(await provider.getChainId()),
to: address as Hex,
value: amount ? parseEther(amount) : undefined,
};
const hash = await provider.sendTransaction(transaction);
const client =
await primaryWallet.getPublicClient();
const { transactionHash } = await client.getTransactionReceipt({
hash,
});
console.log('Transaction: ' + transactionHash);
}
return (
<>
{!isSessionActive && version === EmbeddedWalletVersion.V1 && (
<div>
{!oneTimeCodeSent.current && <button onClick={onSendOneTimeCodeHandler}>Start session</button>}
{oneTimeCodeSent.current && (
<form onSubmit={onCreateSessionHandler} className='create-session-method'>
<p>
Enter one-time code sent to email to create a session
</p>
<input required name='otc' type='text' placeholder='One-time code' />
<br />
<button type='submit'>Create session</button>
</form>
)}
<div>
)}
{isSessionActive || version === EmbeddedWalletVersion.V2 (
<div>
<button type='submit' onClick={handleTransaction}>Send transaction</button>
<div>
)}
</>
);
Was this page helpful?