import { createContractPermission, createExplicitSession, useExplicitSessions, type Permission, type Session } from '@0xsequence/connect'
import { useEffect, useState } from 'react'
import { parseUnits } from 'viem'
function App() {
const {
isLoading,
error,
addExplicitSession,
getExplicitSessions
} = useExplicitSessions()
const [sessions, setSessions] = useState<Session[]>([])
// Load existing sessions
useEffect(() => {
const loadSessions = async () => {
try {
const existingSessions = await getExplicitSessions()
setSessions(existingSessions)
} catch (err) {
console.error('Failed to load sessions:', err)
}
}
loadSessions()
}, [getExplicitSessions])
// Function to handle modifying an existing explicit session
const handleModifySession = () => {
const newPermission = createContractPermission({
address: '0x...',
functionSignature: 'function testContract() public'
})
const currentSession = sessions[0];
const modifiedSession = { ...currentSession, permissions: [...currentSession.permissions!, newPermission] }
modifyExplicitSession(modifiedSession)
}
// Handle creating a new explicit session
const handleCreateSession = async () => {
try {
const tokenSpendingSession = createExplicitSession({
chainId: 42161,
nativeTokenSpending: {
valueLimit: 0n,
},
expiresIn: {
days: 3
},
permissions: [
createContractPermission({
address: '0x...',
functionSignature: 'function transfer(address to, uint256 amount)',
rules: [
{
param: 'amount',
type: 'uint256',
condition: 'LESS_THAN_OR_EQUAL',
value: parseUnits('100', 6), // Max cumulative amount of 100 USDC
cumulative: true
}
]
})
]
})
await addExplicitSession(42161, tokenSpendingSession)
// Refresh sessions after creating a new one
const updatedSessions = await getExplicitSessions()
setSessions(updatedSessions)
} catch (err) {
console.error('Failed to create session:', err)
}
}
if (isLoading) {
return <div>Creating session...</div>
}
if (error) {
return <div>Error: {error.message}</div>
}
return (
<div>
<h2>Explicit Sessions</h2>
<button onClick={handleCreateSession}>
Create New Session
</button>
<button onClick={handleModifySession}>
Modify Session
</button>
<div>
<h3>Existing Sessions ({sessions.length})</h3>
{sessions.map((session, index) => (
<div key={index}>
<p>Session Address: {session.address}</p>
<p>Chain ID: {session.chainId}</p>
<p>Is Implicit: {session.isImplicit ? 'Yes' : 'No'}</p>
<p>Permissions: {session.permissions?.permissions?.map((permission: Permission) => permission.target).join(', ')}</p>
</div>
))}
</div>
</div>
)
}