143 lines
4.1 KiB
JavaScript
143 lines
4.1 KiB
JavaScript
import {
|
|
useCallback, useEffect, useRef,
|
|
} from 'react';
|
|
import Button from 'react-bootstrap/Button';
|
|
import Container from 'react-bootstrap/Container';
|
|
import Row from 'react-bootstrap/Row';
|
|
import Col from 'react-bootstrap/Col';
|
|
import Stack from 'react-bootstrap/Stack';
|
|
import {
|
|
WidgetApi, EventDirection, WidgetEventCapability,
|
|
} from 'matrix-widget-api';
|
|
|
|
import MainTabs from './components/tabs';
|
|
import useMainContext from './contexts/useMainContext';
|
|
|
|
function Widget() {
|
|
const {
|
|
sdk, connected, provider, chainId, account, balanceEther, reputation, totalReputation,
|
|
} = useMainContext();
|
|
|
|
const widgetApi = useRef();
|
|
|
|
useEffect(() => {
|
|
const { searchParams } = new URL(window.location.href);
|
|
const widgetId = searchParams.get('widgetId');
|
|
|
|
widgetApi.current = widgetApi.current ?? new WidgetApi(widgetId, '*');
|
|
|
|
widgetApi.current.on('ready', () => {
|
|
const sendMessageCapability = WidgetEventCapability.forRoomEvent(
|
|
EventDirection.Send,
|
|
'm.room.message',
|
|
);
|
|
const sendRegisterIdentityCapability = WidgetEventCapability.forRoomEvent(
|
|
EventDirection.Send,
|
|
'io.dgov.identity.register',
|
|
);
|
|
widgetApi.current.requestCapability(sendMessageCapability.raw);
|
|
widgetApi.current.requestCapability(sendRegisterIdentityCapability.raw);
|
|
widgetApi.current.updateRequestedCapabilities();
|
|
});
|
|
|
|
widgetApi.current.start();
|
|
}, []);
|
|
|
|
/* -------------------------------------------------------------------------------- */
|
|
/* --------------------------- BEGIN UI ACTIONS ----------------------------------- */
|
|
/* -------------------------------------------------------------------------------- */
|
|
|
|
const connect = useCallback(async () => {
|
|
try {
|
|
await sdk?.connect();
|
|
} catch (err) {
|
|
console.warn('failed to connect..', err);
|
|
}
|
|
}, [sdk]);
|
|
|
|
const disconnect = useCallback(async () => {
|
|
try {
|
|
sdk?.terminate();
|
|
} catch (err) {
|
|
console.warn('failed to disconnect..', err);
|
|
}
|
|
}, [sdk]);
|
|
|
|
// Sign and send a message
|
|
const registerMatrixIdentity = useCallback(async () => {
|
|
const message = new Date().toISOString();
|
|
|
|
const signature = await provider.request({
|
|
method: 'personal_sign',
|
|
params: [message, account],
|
|
});
|
|
|
|
await widgetApi.current.sendRoomEvent('io.dgov.identity.register', {
|
|
message,
|
|
signature,
|
|
});
|
|
}, [provider, account]);
|
|
|
|
/* -------------------------------------------------------------------------------- */
|
|
/* --------------------------- END UI ACTIONS ------------------------------------- */
|
|
/* -------------------------------------------------------------------------------- */
|
|
|
|
return (
|
|
<>
|
|
{!connected && <Button onClick={() => connect()}>Connect</Button>}
|
|
|
|
{connected && (
|
|
<>
|
|
<Container>
|
|
<Row>
|
|
<Col>
|
|
{chainId !== '0xaa36a7' && (
|
|
<div>
|
|
Please switch MetaMask to Sepolia testnet!
|
|
</div>
|
|
|
|
)}
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col>
|
|
<Stack>
|
|
<div>
|
|
{chainId && `Chain ID: ${chainId}`}
|
|
</div>
|
|
<div>
|
|
{`Account: ${account}`}
|
|
</div>
|
|
<div>
|
|
{`Balance: ${balanceEther} ETH`}
|
|
</div>
|
|
</Stack>
|
|
</Col>
|
|
<Col>
|
|
<Stack>
|
|
<div>
|
|
{`Your REP: ${reputation?.toString()}`}
|
|
</div>
|
|
<div>
|
|
{`Total REP: ${totalReputation?.toString()}`}
|
|
</div>
|
|
<div>
|
|
<Button onClick={() => disconnect()}>Disconnect</Button>
|
|
<Button onClick={() => registerMatrixIdentity()}>
|
|
Register Matrix Identity
|
|
</Button>
|
|
</div>
|
|
</Stack>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
|
|
<MainTabs />
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Widget;
|