Merge pull request #603 from haqq-network/dev

release
haqq-network · Dec 26, 2023 · 21dbb8b · 21dbb8b
2 parents dc5f657 + 181c348
commit 21dbb8b
Show file tree

Hide file tree

Showing 14 changed files with 535 additions and 21 deletions.
diff --git a/.env.example b/.env.example
@@ -11,9 +11,6 @@ NX_VESTING_SENTRY_DSN=example_sentry_dsn
 
 NX_WALLETCONNECT_PROJECT_ID=example_wallet_connect_project_id
 
-SENDGRID_API_KEY=example_sendgrid_api_key
-SENDGRID_LIST_ID=example_sendgrid_list_id
-
 HAQQ_STORYBLOK_ACCESS_TOKEN=example_storyblock_token
 ISLAMIC_STORYBLOK_ACCESS_TOKEN=example_storyblock_token
 

diff --git a/.gitignore b/.gitignore
@@ -52,3 +52,6 @@ package-lock.json
 # Next.js
 .next
 .nx/cache
+
+# Sentry Config File
+.sentryclirc
diff --git a/apps/islamic-website/app/[locale]/sentry-test/page.tsx b/apps/islamic-website/app/[locale]/sentry-test/page.tsx
@@ -0,0 +1,87 @@
+import Head from 'next/head';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+  return (
+    <div>
+      <Head>
+        <title>Sentry Onboarding</title>
+        <meta name="description" content="Test Sentry for your Next.js app!" />
+      </Head>
+
+      <main
+        style={{
+          minHeight: '100vh',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <h1 style={{ fontSize: '4rem', margin: '14px 0' }}>
+          <svg
+            style={{
+              height: '1em',
+            }}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 200 44"
+          >
+            <path
+              fill="currentColor"
+              d="M124.32,28.28,109.56,9.22h-3.68V34.77h3.73V15.19l15.18,19.58h3.26V9.22h-3.73ZM87.15,23.54h13.23V20.22H87.14V12.53h14.93V9.21H83.34V34.77h18.92V31.45H87.14ZM71.59,20.3h0C66.44,19.06,65,18.08,65,15.7c0-2.14,1.89-3.59,4.71-3.59a12.06,12.06,0,0,1,7.07,2.55l2-2.83a14.1,14.1,0,0,0-9-3c-5.06,0-8.59,3-8.59,7.27,0,4.6,3,6.19,8.46,7.52C74.51,24.74,76,25.78,76,28.11s-2,3.77-5.09,3.77a12.34,12.34,0,0,1-8.3-3.26l-2.25,2.69a15.94,15.94,0,0,0,10.42,3.85c5.48,0,9-2.95,9-7.51C79.75,23.79,77.47,21.72,71.59,20.3ZM195.7,9.22l-7.69,12-7.64-12h-4.46L186,24.67V34.78h3.84V24.55L200,9.22Zm-64.63,3.46h8.37v22.1h3.84V12.68h8.37V9.22H131.08ZM169.41,24.8c3.86-1.07,6-3.77,6-7.63,0-4.91-3.59-8-9.38-8H154.67V34.76h3.8V25.58h6.45l6.48,9.2h4.44l-7-9.82Zm-10.95-2.5V12.6h7.17c3.74,0,5.88,1.77,5.88,4.84s-2.29,4.86-5.84,4.86Z M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z"
+            ></path>
+          </svg>
+        </h1>
+
+        <p>Get started by sending us a sample error:</p>
+        <button
+          type="button"
+          style={{
+            padding: '12px',
+            cursor: 'pointer',
+            backgroundColor: '#AD6CAA',
+            borderRadius: '4px',
+            border: 'none',
+            color: 'white',
+            fontSize: '14px',
+            margin: '18px',
+          }}
+          onClick={async () => {
+            const transaction = Sentry.startTransaction({
+              name: 'Example Frontend Transaction',
+            });
+
+            Sentry.configureScope((scope) => {
+              scope.setSpan(transaction);
+            });
+
+            try {
+              const res = await fetch('/api/sentry-example-api');
+              if (!res.ok) {
+                throw new Error('Sentry Example Frontend Error');
+              }
+            } finally {
+              transaction.finish();
+            }
+          }}
+        >
+          Throw error!
+        </button>
+
+        <p>
+          Next, look for the error on the{' '}
+          <a href="https://haqq-network.sentry.io/issues/?project=4506433008041984">
+            Issues Page
+          </a>
+          .
+        </p>
+        <p style={{ marginTop: '24px' }}>
+          For more information, see{' '}
+          <a href="https://docs.sentry.io/platforms/javascript/guides/nextjs/">
+            https://docs.sentry.io/platforms/javascript/guides/nextjs/
+          </a>
+        </p>
+      </main>
+    </div>
+  );
+}
diff --git a/apps/islamic-website/app/api/sentry-test/route.ts b/apps/islamic-website/app/api/sentry-test/route.ts
@@ -0,0 +1,5 @@
+// A faulty API route to test Sentry's error monitoring
+export async function GET() {
+  // throw new Error('Sentry Example API Route Error');
+  return Response.json({ data: null });
+}
diff --git a/apps/islamic-website/app/error.tsx b/apps/islamic-website/app/error.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { useEffect } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function ErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to Sentry
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={() => {
+          reset();
+        }}
+      >
+        Try again
+      </button>
+    </div>
+  );
+}
diff --git a/apps/islamic-website/app/global-error.tsx b/apps/islamic-website/app/global-error.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import * as Sentry from '@sentry/nextjs';
+import NextError from 'next/error';
+import { useEffect } from 'react';
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        <h2>Something went wrong!</h2>
+        {/* This is the default Next.js error component but it doesn't allow omitting the statusCode property yet. */}
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        <NextError statusCode={undefined as any} />
+        <button
+          onClick={() => {
+            reset();
+          }}
+        >
+          Try again
+        </button>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/islamic-website/next.config.js b/apps/islamic-website/next.config.js
@@ -2,7 +2,7 @@
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { composePlugins, withNx } = require('@nx/next');
-
+const { withSentryConfig } = require('@sentry/nextjs');
 const withNextIntl = require('next-intl/plugin')(
   // This is the default (also the `src` folder is supported out of the box)
   './i18n.ts',
@@ -33,6 +33,31 @@ const nextConfig = {
       },
     ],
   },
+  sentry: {
+    // For all available options, see:
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+    // Upload a larger set of source maps for prettier stack traces (increases build time)
+    widenClientFileUpload: true,
+
+    // Transpiles SDK to be compatible with IE11 (increases bundle size)
+    transpileClientSDK: true,
+
+    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+    tunnelRoute: '/monitoring',
+
+    // Hides source maps from generated client bundles
+    hideSourceMaps: true,
+
+    // Automatically tree-shake Sentry logger statements to reduce bundle size
+    disableLogger: true,
+
+    // Enables automatic instrumentation of Vercel Cron Monitors.
+    // See the following for more information:
+    // https://docs.sentry.io/product/crons/
+    // https://vercel.com/docs/cron-jobs
+    automaticVercelMonitors: true,
+  },
 };
 
 const plugins = [
@@ -41,4 +66,25 @@ const plugins = [
   withNextIntl,
 ];
 
-module.exports = composePlugins(...plugins)(nextConfig);
+const sentryWebpackPluginOptions = {
+  // Additional config options for the Sentry webpack plugin. Keep in mind that
+  // the following options are set automatically, and overriding them is not
+  // recommended:
+  //   release, url, configFile, stripPrefix, urlPrefix, include, ignore
+
+  org: 'haqq-network',
+  project: 'islamic-website',
+
+  // An auth token is required for uploading source maps.
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+
+  silent: true, // Suppresses all logs
+
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options.
+};
+
+module.exports = withSentryConfig(
+  composePlugins(...plugins)(nextConfig),
+  sentryWebpackPluginOptions,
+);
diff --git a/apps/islamic-website/sentry.client.config.js b/apps/islamic-website/sentry.client.config.js
@@ -0,0 +1,30 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  replaysOnErrorSampleRate: 1.0,
+
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
+  integrations: [
+    new Sentry.Replay({
+      // Additional Replay configuration goes in here, for example:
+      maskAllText: true,
+      blockAllMedia: true,
+    }),
+  ],
+});
diff --git a/apps/islamic-website/sentry.edge.config.js b/apps/islamic-website/sentry.edge.config.js
@@ -0,0 +1,16 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});
diff --git a/apps/islamic-website/sentry.server.config.js b/apps/islamic-website/sentry.server.config.js
@@ -0,0 +1,15 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});
diff --git a/libs/islamic-website/academy-page/src/components/lessons/modules.json b/libs/islamic-website/academy-page/src/components/lessons/modules.json
@@ -50,6 +50,35 @@
             "quiz_link": "https://galxe.com/IslamicCoin/campaign/GCnnVttqBf"
           }
         ]
+      },
+      {
+        "name": "Module 3",
+        "lessons": [
+          {
+            "name": "Lesson 3.1",
+            "title": "Understanding Cryptocurrency",
+            "duration": "3 minutes",
+            "video_link": "https://www.youtube.com/embed/CfpCuIMbA0I",
+            "description": "In today's lesson, we're getting up close with cryptocurrencies - the new digital frontier for money. Say goodbye to the days of physical cash; cryptocurrencies like Bitcoin and Ethereum are strictly digital, living in wallets online and zipping across the internet for transactions. We're breaking down the 'crypto' part today, which is all about keeping your digital dough safe through cryptography. It's like your personal financial secret code, making sure your transactions are for your eyes only. And remember how we talked about blockchain? Well, cryptocurrencies are the stars of that show, running on a network that's spread across the globe, making them independent of any central bank's whims. We're also looking at the perks of going crypto: think lower fees, more privacy, and a thumbs-up to saying no to central bank shenanigans. But it's not all smooth sailing – there's the rough sea of market ups and downs and the tides of changing regulations to navigate. Cryptocurrencies aren't just about spending or saving; they're about reshaping our financial world. They challenge old systems and open doors to innovative possibilities for how we handle and think about money.",
+            "quiz_link": "https://galxe.com/IslamicCoin/campaign/GCXaQttX6o"
+          },
+          {
+            "name": "Lesson 3.2",
+            "title": "Different Types of Cryptocurrencies",
+            "duration": "4 minutes",
+            "video_link": "https://www.youtube.com/embed/gUyc-7Ft2Io",
+            "description": "In this lesson, we focus on the diverse landscape of cryptocurrencies, each with its unique attributes and potential for transforming digital transactions. Bitcoin is our starting point, the pioneering currency introduced by the enigmatic Satoshi Nakamoto in 2008. It set the precedent for decentralized digital cash, operating on a transparent and immutable ledger known as the blockchain. Moving beyond Bitcoin, we have altcoins, which include any cryptocurrency other than Bitcoin. Many of these are built on Bitcoin's open-source protocol with significant modifications, while others originate from entirely new frameworks. Among them is Islamic Coin, which is designed to align with Shariah principles, highlighting the adaptability of cryptocurrencies to cultural and ethical considerations. Ethereum earns a special mention for introducing smart contracts to the blockchain, expanding the technology's use beyond simple transactions to more complex, programmable operations. Stablecoins present a different angle, aiming to offer a digitized currency with stable value, tied to existing assets like gold or fiat currencies, to counteract the volatility typically associated with cryptocurrencies. We also examine Central Bank Digital Currencies (CBDCs), a hybrid concept where central banks create their own digital versions of money. With CBDCs like China's digital yuan, we encounter the blend of crypto efficiency with traditional currency stability, but not without raising debates about privacy and control.",
+            "quiz_link": "https://galxe.com/IslamicCoin/campaign/GC7uQttxkV"
+          },
+          {
+            "name": "Lesson 3.3",
+            "title": "Use Cases and Utilities Of Crypto",
+            "duration": "2 minutes",
+            "video_link": "https://www.youtube.com/embed/WoDBXHNVjgQ",
+            "description": "In this lesson, we explore the digital marketplaces where cryptocurrencies change hands: exchanges. We look at Centralized Exchanges (CEX), such as Coinbase and Binance, which are operated by companies and offer an array of services with ease of use, making them a good starting point for newcomers. Then there are Decentralized Exchanges (DEX), like Uniswap and SushiSwap, where trading is facilitated by smart contracts on the blockchain without intermediaries. DEXs provide greater privacy and control over funds but may present a steeper learning curve and less trading variety. Understanding the mechanics, risks, and fees associated with each type of exchange is crucial for anyone entering the crypto trade. We also stress the importance of security and using reputable platforms to protect your assets.",
+            "quiz_link": "https://galxe.com/IslamicCoin/campaign/GCS6QttfGC"
+          }
+        ]
       }
     ]
   }