Merge pull request #37 from dallen4/alpha

UI Tweaks & Playwright e2e

.gitignore

@@ -35,4 +35,10 @@ yarn-error.log*
 .vercel
 
 # playwright
-test-results/
+test-results/
+
+# Sentry
+.sentryclirc
+
+# Sentry
+.vercel

web/atoms/Layout.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import {
+    Anchor,
     AppShell,
     Footer,
     Header,
     Text,
     createStyles,
+    useMantineTheme,
 } from '@mantine/core';
 import { useRouter } from 'next/router';
 import { HOME_PATH } from '@config/paths';
 import Link from 'next/link';
+import { IconBrandGithub } from '@tabler/icons';
 
 const useStyles = createStyles((theme) => ({
     headerName: {
@@ -25,6 +28,7 @@ const useStyles = createStyles((theme) => ({
 const Layout = ({ children }: { children: React.ReactNode }) => {
     const router = useRouter();
     const { classes } = useStyles();
+    const theme = useMantineTheme();
 
     return (
         <AppShell
@@ -47,7 +51,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             }
             footer={
                 <Footer
-                    height={60}
+                    height={100}
                     withBorder={false}
                     styles={(theme) => ({
                         root: {
@@ -58,8 +62,18 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
                     })}
                     fixed={router.pathname !== HOME_PATH}
                 >
+                    <Anchor
+                        href={'https://github.com/dallen4/deadrop'}
+                        target={'_blank'}
+                    >
+                        <IconBrandGithub color={theme.colors.gray[5]} />
+                    </Anchor>
                     <Text size={'xs'}>
-                        Copyright &copy; Nieky Allen {new Date().getFullYear()}.
+                        Copyright &copy;{' '}
+                        <Anchor href={'https://nieky.info/'} target={'_blank'}>
+                            Nieky Allen
+                        </Anchor>{' '}
+                        {new Date().getFullYear()}.
                     </Text>
                 </Footer>
             }

web/molecules/FeaturesSection.tsx

@@ -92,7 +92,7 @@ const features = [
     {
         icon: IconUsers,
         title: 'Peer-to-peer handoff',
-        description: `Secrets are never handled by a server and are sent directly to the receiving user's device via WebRRTC.`,
+        description: `Secrets are never handled by a server and are sent directly to the receiving user's device via WebRTC.`,
     },
 ];
 

web/next.config.js

@@ -1,9 +1,13 @@
 /* eslint-disable no-undef */
 /* eslint-disable @typescript-eslint/no-var-requires */
+
 const { randomBytes } = require('crypto');
 const nextSafe = require('next-safe');
 const withTM = require('next-transpile-modules')(['shared']);
 
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+const { withSentryConfig } = require('@sentry/nextjs');
+
 const nonce = randomBytes(8).toString('base64');
 
 const peerHost = new URL(process.env.NEXT_PUBLIC_PEER_SERVER_URL).host;
@@ -19,6 +23,8 @@ const captchaDomains = ['https://hcaptcha.com', 'https://*.hcaptcha.com'].join(
     ' ',
 );
 
+const sentryDomain = 'https://*.ingest.sentry.io';
+
 const safeConfig = {
     isDev: process.env.NODE_ENV !== 'production',
     contentTypeOptions: 'nosniff',
@@ -27,7 +33,7 @@ const safeConfig = {
     frameOptions: 'DENY',
     permissionsPolicy: false,
     contentSecurityPolicy: {
-        'connect-src': `'self' ${peerDomain} ${webVitalsDomain} ${captchaDomains}`,
+        'connect-src': `'self' ${peerDomain} ${webVitalsDomain} ${captchaDomains} ${sentryDomain}`,
         'default-src': `'self'`,
         'font-src': `'self' data:`,
         'frame-src': `${vercelLiveDomain} ${captchaDomains}`,
@@ -48,7 +54,7 @@ const headers = [
 /**
  * @type {import('next').NextConfig}
  */
-module.exports = withTM({
+const configWithTranspiledModules = withTM({
     swcMinify: true,
     poweredByHeader: false,
     headers() {
@@ -63,3 +69,12 @@ module.exports = withTM({
         nonce,
     },
 });
+
+/**
+ * @type {import('next').NextConfig}
+ */
+module.exports = withSentryConfig(
+    configWithTranspiledModules,
+    { silent: true },
+    { hideSourcemaps: true },
+);

web/organisms/DropFlow.tsx

@@ -74,7 +74,7 @@ const DropFlow = () => {
                     description={isMobile && 'Drop your message'}
                 >
                     <StepCard title={'finish your deadrop'}>
-                        <Button onClick={drop}>Drop</Button>
+                        <Button id={'drop-secret-btn'} onClick={drop}>Drop</Button>
                     </StepCard>
                 </Stepper.Step>
                 <Stepper.Completed>

web/organisms/GrabFlow.tsx

@@ -35,12 +35,12 @@ const GrabFlow = () => {
             {status === GrabState.Initial ? (
                 <>
                     <Text>You are about to begin a deadrop.</Text>
-                    <Button onClick={init}>Begin</Button>
+                    <Button id={'begin-grab-btn'} onClick={init}>Begin</Button>
                 </>
             ) : status === GrabState.Confirmed ? (
                 <Box>
                     {getMode() === 'raw' ? (
-                        <Code block>
+                        <Code block id={'drop-secret-value'}>
                             {getSecret()}
                         </Code>
                     ) : (

web/package.json

@@ -20,6 +20,7 @@
         "@mantine/hooks": "^5.2.3",
         "@mantine/next": "^5.2.3",
         "@mantine/notifications": "^5.2.3",
+        "@sentry/nextjs": "^7.46.0",
         "@tabler/icons": "^1.119.0",
         "@vercel/analytics": "^0.1.8",
         "@xstate/react": "^3.0.1",

web/pages/_app.tsx

@@ -12,7 +12,7 @@ export default function MyApp(props: AppProps) {
     return (
         <>
             <DefaultSeo
-                title={'Dead Drop'}
+                title={'deadrop'}
                 description={'e2e enncrypted secret sharing'}
                 openGraph={{}}
             />

web/pages/_error.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import * as Sentry from '@sentry/nextjs';
+import NextErrorComponent from 'next/error';
+import { NextPageContext } from 'next/types';
+
+const CustomErrorComponent = (props: { statusCode: number }) => {
+  return <NextErrorComponent statusCode={props.statusCode} />;
+};
+
+CustomErrorComponent.getInitialProps = async (contextData: NextPageContext) => {
+  await Sentry.captureUnderscoreErrorException(contextData);
+  return NextErrorComponent.getInitialProps(contextData);
+};
+
+export default CustomErrorComponent;

web/pages/index.tsx

@@ -14,53 +14,80 @@ import {
 import { useRouter } from 'next/router';
 import { GRAB_PATH } from '@config/paths';
 import { Faq } from 'molecules/Faq';
+import { useMediaQuery } from '@mantine/hooks';
 
 const Home = () => {
     const router = useRouter();
     const theme = useMantineTheme();
+    const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm}px)`);
     const inputRef = useRef<HTMLInputElement>();
+
+    const submitGrab = () => {
+        const inputVal = inputRef.current!.value;
+
+        const isUrl = inputVal.includes(
+            window.location.protocol + window.location.host,
+        );
+
+        const params = isUrl
+            ? inputVal.split('?')[1]
+            : new URLSearchParams({
+                  drop: inputRef.current!.value,
+              }).toString();
+
+        router.push(`${GRAB_PATH}?${params}`);
+    };
+
     return (
         <>
             <HeroBanner />
             <FeaturesSection />
             <Center
-                style={{ minHeight: '220px', paddingTop: theme.spacing.md }}
+                style={{
+                    minHeight: '230px',
+                    paddingTop: theme.spacing.xl,
+                    paddingBottom: theme.spacing.md,
+                }}
             >
                 <Card
                     id={'start-grab-section'}
                     withBorder
                     shadow={'sm'}
                     style={{
                         width: '90%',
-                        maxWidth: '650px',
+                        maxWidth: '500px',
                         padding: theme.spacing.xl,
                     }}
                 >
                     <Title size={'h2'}>Grab a Secret</Title>
-                    <Text size={'sm'}>
+                    <Text size={'sm'} style={{ paddingTop: 2 }}>
                         Enter your drop ID (or link) that was shared with you!
                     </Text>
-                    <Group position={'left'}>
+                    <Group style={{ paddingTop: theme.spacing.md }}>
                         <TextInput
                             ref={inputRef as any}
-                            width={'100%'}
+                            styles={{
+                                root: isMobile
+                                    ? {
+                                          width: '100%',
+                                      }
+                                    : undefined,
+                            }}
+                            size={'md'}
                             variant={'filled'}
                             placeholder={'abcdef12345'}
                         />
                         <Button
-                            onClick={() => {
-                                const params = new URLSearchParams({
-                                    drop: inputRef.current!.value,
-                                });
-                                router.push(`${GRAB_PATH}?${params}`);
-                            }}
+                            size={'md'}
+                            fullWidth={isMobile}
+                            onClick={submitGrab}
                         >
                             Start
                         </Button>
                     </Group>
                 </Card>
             </Center>
-            <Faq/>
+            <Faq />
         </>
     );
 };

web/playwright.config.ts

@@ -1,4 +1,4 @@
-import { PlaywrightTestConfig } from '@playwright/test';
+import { PlaywrightTestConfig, devices } from '@playwright/test';
 import path from 'path';
 
 const PORT = process.env.PORT || 3000;
@@ -32,25 +32,68 @@ const config: PlaywrightTestConfig<{
         bypassCSP: true,
     },
     projects: [
+        /* Test against desktop browsers */
         {
-            name: 'Chrome to Chrome',
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+        {
+            name: 'firefox',
+            use: { ...devices['Desktop Firefox'] },
+        },
+        {
+            name: 'webkit',
+            use: { ...devices['Desktop Safari'] },
+        },
+        /* Test against mobile viewports. */
+        {
+            name: 'Mobile Chrome',
+            use: { ...devices['Pixel 5'] },
+        },
+        {
+            name: 'Mobile Safari',
+            use: { ...devices['iPhone 12'] },
+        },
+        {
+            name: 'Chrome to Firefox',
+            use: {
+                dropBrowser: 'chromium',
+                grabBrowser: 'firefox',
+            },
+        },
+        {
+            name: 'Chrome to WebKit',
             use: {
                 dropBrowser: 'chromium',
+                grabBrowser: 'webkit',
+            },
+        },
+        {
+            name: 'Firefox to Chrome',
+            use: {
+                dropBrowser: 'firefox',
                 grabBrowser: 'chromium',
             },
         },
         {
-            name: 'Firefox to Firefox',
+            name: 'Firefox to WebKit',
             use: {
                 dropBrowser: 'firefox',
-                grabBrowser: 'firefox',
+                grabBrowser: 'webkit',
             },
         },
         {
-            name: 'WebKit to WebKit',
+            name: 'WebKit to Chrome',
             use: {
                 dropBrowser: 'webkit',
-                grabBrowser: 'webkit',
+                grabBrowser: 'chromium',
+            },
+        },
+        {
+            name: 'WebKit to Firefox',
+            use: {
+                dropBrowser: 'webkit',
+                grabBrowser: 'firefox',
             },
         },
     ],

web/sentry.client.config.js

@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

web/sentry.edge.config.js

@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

web/sentry.properties

@@ -0,0 +1,4 @@
+defaults.url=https://sentry.io/
+defaults.org=nieky-allen
+defaults.project=deadrop-web
+cli.executable=../node_modules/@sentry/cli/bin/sentry-cli