widget api provider

frontend/src/Widget.jsx

@@ -10,9 +10,9 @@ 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 { EventDirection, WidgetEventCapability } from 'matrix-widget-api';
+import { EventDirection, WidgetEventCapability } from 'matrix-widget-api';
 // import { MuiCapabilitiesGuard } from '@matrix-widget-toolkit/mui';
-// import { useWidgetApi } from '@matrix-widget-toolkit/react';
+import { useWidgetApi } from '@matrix-widget-toolkit/react';
 
 import useList from './utils/List';
 import { getContractAddressByChainId } from './utils/contract-config';
@@ -49,7 +49,7 @@ function Widget() {
   const [showAddPost, setShowAddPost] = useState(false);
   const [showViewPost, setShowViewPost] = useState(false);
   const [viewPost, setViewPost] = useState({});
-  // const widgetApi = useWidgetApi();
+  const widgetApi = useWidgetApi();
   const web3ProviderValue = useMemo(() => ({
     provider,
     DAO,
@@ -333,15 +333,15 @@ function Widget() {
   }, [setViewPost, setShowViewPost]);
 
   // TODO: Sign and send a message to the forum-api bot / to a room in matrix
-  // const registerMatrixIdentity = async () => {
-  //   await widgetApi.requestCapabilities([
-  //     WidgetEventCapability.forRoomEvent(
-  //       EventDirection.Send,
-  //       'm.message',
-  //     ),
-  //   ]);
-  //   widgetApi.sendRoomEvent('m.message', 'test message');
-  // };
+  const registerMatrixIdentity = async () => {
+    await widgetApi.requestCapabilities([
+      WidgetEventCapability.forRoomEvent(
+        EventDirection.Send,
+        'm.message',
+      ),
+    ]);
+    widgetApi.sendRoomEvent('m.message', 'test message');
+  };
 
   /* -------------------------------------------------------------------------------- */
   /* --------------------------- END UI ACTIONS ------------------------------------- */
@@ -394,20 +394,9 @@ function Widget() {
                   <div>
                     <Button onClick={() => disconnect()}>Disconnect</Button>
                     <Button onClick={() => watchReputationToken()}>Watch REP in MetaMask</Button>
-                    {/*
-                    <MuiCapabilitiesGuard
-                      capabilities={[
-                        WidgetEventCapability.forRoomEvent(
-                          EventDirection.Send,
-                          'm.message',
-                        ),
-                      ]}
-                    >
-                      <Button onClick={() => registerMatrixIdentity()}>
-                        Register Matrix Identity
-                      </Button>
-                    </MuiCapabilitiesGuard>
-                    */}
+                    <Button onClick={() => registerMatrixIdentity()}>
+                      Register Matrix Identity
+                    </Button>
                   </div>
                 </Stack>
               </Col>

frontend/src/main.jsx

@@ -9,10 +9,11 @@ import {
 } from 'react-router-dom';
 import { WidgetApiImpl } from '@matrix-widget-toolkit/api';
 
+import { WidgetApiProvider } from '@matrix-widget-toolkit/react';
 import WebApp from './WebApp';
 import Widget from './Widget';
 
-window.widgetApiPromise = WidgetApiImpl.create();
+const widgetApiPromise = WidgetApiImpl.create();
 
 const router = createBrowserRouter([
   {
@@ -21,7 +22,10 @@ const router = createBrowserRouter([
   },
   {
     path: 'widget/',
-    element: <Widget />,
+    element:
+  <WidgetApiProvider widgetApiPromise={widgetApiPromise}>
+    <Widget />
+  </WidgetApiProvider>,
   },
 ]);