feat: Add Lightning tab to web clients

Dockerfile.drawbridge

@@ -12,8 +12,10 @@ COPY packages/ ./packages/
 RUN npm ci
 RUN npm run build
 
+COPY services/gatekeeper/client ./gatekeeper/client/
 COPY services/drawbridge ./drawbridge/
 
+RUN cd gatekeeper/client && npm ci && npm run build
 RUN cd drawbridge/server && npm ci && npm run build
 
 WORKDIR /app/drawbridge

apps/chrome-extension/package.json

@@ -34,5 +34,8 @@
     "webpack": "^5.103.0",
     "webpack-cli": "^6.0.1",
     "webpack-merge": "^6.0.1"
+  },
+  "dependencies": {
+    "qrcode.react": "^4.2.0"
   }
 }

apps/chrome-extension/src/components/BrowserContent.tsx

@@ -4,6 +4,7 @@ import { TabContext, TabList, TabPanel } from "@mui/lab";
 import {
     AccountBalanceWallet,
     Badge,
+    Bolt,
     Email,
     List,
     ManageSearch,
@@ -26,13 +27,14 @@ import { createTheme, ThemeProvider } from "@mui/material/styles";
 import AliasedDIDs from "./AliasedDIDs";
 import AssetsTab from "./AssetsTab";
 import DmailTab from "./DmailTab";
+import LightningTab from "./LightningTab";
 import PollTab from "./PollTab";
 
 function BrowserContent() {
     const [menuOpen, setMenuOpen] = useState<boolean>(false);
     const [didRun, setDidRun] = useState<boolean>(false);
     const [refresh, setRefresh] = useState<number>(0);
-    const { isBrowser } = useWalletContext();
+    const { isBrowser, hasLightning } = useWalletContext();
     const { currentId, validId } = useVariablesContext();
     const { openBrowser, setOpenBrowser } = useUIContext();
     const { darkMode } = useThemeContext();
@@ -241,6 +243,17 @@ function BrowserContent() {
                                     />
                                 )}
 
+                                {displayComponent && hasLightning && (
+                                    <Tab
+                                        icon={<Bolt />}
+                                        label={menuOpen ? "Lightning" : ""}
+                                        value="lightning"
+                                        iconPosition="start"
+                                        className="sidebarTab"
+                                        sx={{ gap: 0.25 }}
+                                    />
+                                )}
+
                                 {displayComponent && (
                                     <Tab
                                         icon={<Token />}
@@ -310,6 +323,12 @@ function BrowserContent() {
                                 </TabPanel>
                             )}
 
+                            {displayComponent && hasLightning && (
+                                <TabPanel value="lightning" sx={{ p: 0 }}>
+                                    <LightningTab />
+                                </TabPanel>
+                            )}
+
                             {displayComponent && (
                                 <TabPanel value="assets" sx={{ p: 0 }}>
                                     <AssetsTab subTab={assetSubTab} />