WalletConnect Auth

Authorize transactions with WalletConnect.


Wallet Connect can be used as a form of authentication for Fun Wallet.

Wallet Connect will be done through a frontend interface. See an example project here.

The following shows creating a Fun Wallet with Wallet Connect in a react app. When the Wallet Connect button is clicked, users will be prompted to connect their wallet through the Wallet Connect modal. After they connect their wallet, the eoa from their wallet is used to create a Fun Wallet.

,
connect.js
import { FunWallet, configureEnvironment from "fun-wallet"
import { MultiAuthEoa } from "fun-wallet/auth"
import { useAccount, useConnect, useSigner, useDisconnect } from 'wagmi'
import { useEffect, useState } from "react"
const Connect = () => {
const { connector, isConnected } = useAccount()
const { data: signer } = useSigner()
const { connect, connectors, error, isLoading, pendingConnector } = useConnect()
const [funWalletAddr, setFunWalletAddr] = useState("")
const { disconnect } = useDisconnect()
useEffect(() => {
const configureFunWalletEnv = async () => {
const options = {
chain: 5, // 5 for Goerli, 1 for Mainnet
apiKey: "MYny3w7xJh6PRlRgkJ9604sHouY2MTke6lCPpSHq"
}
await configureEnvironment(options)
}
configureFunWalletEnv()
})
useEffect(() => {
async function connectEOA() {
let provider = await connector.getProvider({ chainId: 5 })
if (signer && provider) {
const eoaAddr = await signer.getAddress();
connectFunWallet(eoaAddr, provider, eoaAddr);
}
}
if (connector) {
connectEOA()
}
}, [signer, connector])
async function connectFunWallet(authId, provider, publicKey) {
console.log("publicKey: ", publicKey)
const auth = new MultiAuthEoa({ provider, authIds: [[authId, publicKey]] })
const uniqueId = await auth.getUniqueId()
const funWallet = new FunWallet({ uniqueId, index: 0 }) // No.0 wallet for the uniqueId
setFunWalletAddr(await funWallet.getAddress())
}
if (isConnected) {
return (
<div>
<div>The Fun Wallet is generated at: {funWalletAddr}</div>
<button onClick={disconnect}>Disconnect</button>
</div>
)
}
return (
<div>
{connectors.map((connector) => (
<button
disabled={!connector.ready}
key={connector.id}
onClick={() => connect({ connector })}
>
{connector.name}
{!connector.ready && ' (unsupported)'}
{isLoading &&
connector.id === pendingConnector?.id &&
' (connecting)'}
</button>
))}
{error && <div>{error.message}</div>}
</div>
)
}
export default Connect;
On this page