wallet-connect-web-examples/wallets/react-web3wallet/src/views/SessionSignModal.tsx
Gancho Radkov 7a3886073b
feat: Web3Wallet Example (#94)
* feat: v2 wallet

* feat: Web3Wallet sign integration

* chore: adds `core` to package.json

* feat: Web3Wallet Auth integration

* chore: core & web3wallet canary

* chore: rm config

* chore: force redeploy

* chore: rm core & sign-client deps

* fix: rm `sign-client` usage

* refactor: updates README

* feat: adds metadata mock obj & removes relay url param

* refactor: more url mentions

* refactor: rm v2 wallet readme references & uses web3wallet.core...

* refactor: wallet -> web3wallet

* refactor: rm wallet to web3wallet

* fix: adds async to example listeners
2022-12-22 11:19:46 +02:00

87 lines
2.5 KiB
TypeScript

import ProjectInfoCard from '@/components/ProjectInfoCard'
import RequesDetailsCard from '@/components/RequestDetalilsCard'
import RequestMethodCard from '@/components/RequestMethodCard'
import RequestModalContainer from '@/components/RequestModalContainer'
import ModalStore from '@/store/ModalStore'
import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
import { getSignParamsMessage } from '@/utils/HelperUtil'
import { web3wallet } from '@/utils/WalletConnectUtil'
import { Button, Col, Divider, Modal, Row, Text } from '@nextui-org/react'
import { Fragment } from 'react'
export default function SessionSignModal() {
// Get request and wallet data from store
const requestEvent = ModalStore.state.data?.requestEvent
const requestSession = ModalStore.state.data?.requestSession
// Ensure request and wallet are defined
if (!requestEvent || !requestSession) {
return <Text>Missing request data</Text>
}
// Get required request data
const { topic, params } = requestEvent
const { request, chainId } = params
// Get message, convert it to UTF8 string if it is valid hex
const message = getSignParamsMessage(request.params)
// Handle approve action (logic varies based on request method)
async function onApprove() {
if (requestEvent) {
const response = await approveEIP155Request(requestEvent)
await web3wallet.respondSessionRequest({
topic,
response
})
ModalStore.close()
}
}
// Handle reject action
async function onReject() {
if (requestEvent) {
const response = rejectEIP155Request(requestEvent)
await web3wallet.respondSessionRequest({
topic,
response
})
ModalStore.close()
}
}
return (
<Fragment>
<RequestModalContainer title="Sign Message">
<ProjectInfoCard metadata={requestSession.peer.metadata} />
<Divider y={2} />
<RequesDetailsCard chains={[chainId ?? '']} protocol={requestSession.relay.protocol} />
<Divider y={2} />
<Row>
<Col>
<Text h5>Message</Text>
<Text color="$gray400">{message}</Text>
</Col>
</Row>
<Divider y={2} />
<RequestMethodCard methods={[request.method]} />
</RequestModalContainer>
<Modal.Footer>
<Button auto flat color="error" onClick={onReject}>
Reject
</Button>
<Button auto flat color="success" onClick={onApprove}>
Approve
</Button>
</Modal.Footer>
</Fragment>
)
}