feat: quick prototype for apps in the sidebar (wip)

getAlby · Sep 24, 2024 · 629010e · 629010e
1 parent f14a828
commit 629010e
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 2 deletions.
diff --git a/frontend/src/assets/suggested-apps/bitrefill.png b/frontend/src/assets/suggested-apps/bitrefill.png
diff --git a/frontend/src/components/SuggestedAppData.tsx b/frontend/src/components/SuggestedAppData.tsx
@@ -1,6 +1,7 @@
 import albyGo from "src/assets/suggested-apps/alby-go.png";
 import alby from "src/assets/suggested-apps/alby.png";
 import amethyst from "src/assets/suggested-apps/amethyst.png";
+import bitrefill from "src/assets/suggested-apps/bitrefill.png";
 import buzzpay from "src/assets/suggested-apps/buzzpay.png";
 import damus from "src/assets/suggested-apps/damus.png";
 import hablanews from "src/assets/suggested-apps/habla-news.png";
@@ -199,4 +200,13 @@ export const suggestedApps: SuggestedApp[] = [
     logo: albyGo,
     internal: true,
   },
+  {
+    id: "bitrefill",
+    title: "Bitrefill",
+    description:
+      "Live on Bitcoin - Shop for Gift Cards, eSIMs, and Mobile Recharges",
+    webLink: "https://bitrefill.com",
+    logo: bitrefill,
+    internal: true,
+  },
 ].sort((a, b) => (a.title.toUpperCase() > b.title.toUpperCase() ? 1 : -1));
diff --git a/frontend/src/components/layouts/AppLayout.tsx b/frontend/src/components/layouts/AppLayout.tsx
@@ -47,6 +47,8 @@ import {
 } from "src/components/ui/tooltip";
 import { useAlbyMe } from "src/hooks/useAlbyMe";
 
+import bitrefill from "src/assets/suggested-apps/bitrefill.png";
+import { Badge } from "src/components/ui/badge";
 import { useAlbyInfo } from "src/hooks/useAlbyInfo";
 import { useInfo } from "src/hooks/useInfo";
 import { useRemoveSuccessfulChannelOrder } from "src/hooks/useRemoveSuccessfulChannelOrder";
@@ -146,6 +148,12 @@ export default function AppLayout() {
           <Store className="h-4 w-4" />
           App Store
         </MenuItem>
+        <div className="ml-6 mt-2">
+          <MenuItem to="/internal-apps/bitrefill">
+            <img src={bitrefill} className="h-4 w-4 rounded" />
+            Bitrefill <Badge variant="destructive">NEW</Badge>
+          </MenuItem>
+        </div>
       </>
     );
   }

diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx
@@ -34,6 +34,7 @@ import { FirstChannel } from "src/screens/channels/first/FirstChannel";
 import { OpenedFirstChannel } from "src/screens/channels/first/OpenedFirstChannel";
 import { OpeningFirstChannel } from "src/screens/channels/first/OpeningFirstChannel";
 import { AlbyGo } from "src/screens/internal-apps/AlbyGo";
+import { Bitrefill } from "src/screens/internal-apps/Bitrefill";
 import { BuzzPay } from "src/screens/internal-apps/BuzzPay";
 import { UncleJim } from "src/screens/internal-apps/UncleJim";
 import BuyBitcoin from "src/screens/onchain/BuyBitcoin";
@@ -221,6 +222,10 @@ const routes = [
             path: "alby-go",
             element: <AlbyGo />,
           },
+          {
+            path: "bitrefill",
+            element: <Bitrefill />,
+          },
         ],
       },
       {

diff --git a/frontend/src/screens/internal-apps/Bitrefill.tsx b/frontend/src/screens/internal-apps/Bitrefill.tsx
@@ -0,0 +1,47 @@
+import { Link } from "react-router-dom";
+import AppHeader from "src/components/AppHeader";
+import { NostrWalletConnectIcon } from "src/components/icons/NostrWalletConnectIcon";
+import { suggestedApps } from "src/components/SuggestedAppData";
+import { Button } from "src/components/ui/button";
+
+const BITREFILL_APP_ID = "bitrefill";
+
+export function Bitrefill() {
+  const app = suggestedApps.find((x) => x.id === BITREFILL_APP_ID);
+
+  return (
+    <div className="grid gap-5">
+      <AppHeader
+        title={
+          <>
+            <div className="flex flex-row items-center">
+              <img src={app?.logo} className="w-14 h-14 rounded-lg mr-4" />
+              <div className="flex flex-col">
+                <div>{app?.title}</div>
+                <div className="text-sm font-normal text-muted-foreground">
+                  {app?.description}
+                </div>
+              </div>
+            </div>
+          </>
+        }
+        description=""
+        contentRight={
+          <Link to={`/apps/new?app=${app?.id}`}>
+            <Button variant="outline">
+              <NostrWalletConnectIcon className="w-4 h-4 mr-2" />
+              Connect to {app?.title}
+            </Button>
+          </Link>
+        }
+      />
+      <iframe
+        className="w-full rounded-lg flex-1"
+        width="375"
+        height="667"
+        src="https://embed.bitrefill.com/?showPaymentInfo=true"
+        sandbox="allow-same-origin allow-popups allow-scripts allow-forms"
+      ></iframe>
+    </div>
+  );
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -85,8 +85,7 @@ const insertDevCSPPlugin: Plugin = {
       return html.replace(
         "<head>",
         `<head>
-        <!-- DEV-ONLY CSP - when making changes here, also update the CSP header in http_service.go (without the nonce!) -->
-        <meta http-equiv="Content-Security-Policy" content="default-src 'self' ${DEVELOPMENT_NONCE}; img-src 'self' https://uploads.getalby-assets.com https://getalby.com; connect-src 'self' https://api.getalby.com"/>`
+        <!-- DEV-ONLY CSP - when making changes here, also update the CSP header in http_service.go (without the nonce!) -->`
       );
     },
   },