geyserfund · sajald77 · Aug 30, 2023 · Aug 17, 2023 · Aug 18, 2023 · Aug 18, 2023
diff --git a/.gitignore b/.gitignore
@@ -19,6 +19,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env.staging
 .env
 
 npm-debug.log*
@@ -29,3 +30,5 @@ yarn-error.log*
 
 faker/custom-extended-schemas/
 src/config/apollo-client/customClientTypeDefs.ts
+
+caddy/certificate/root.crt
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ The app requires some environment variables to be set. We provide an `example.en
 cp .env.example .env
 ```
 
-From there, populate the new file with the correct values. You have two development environment options:
+From there, populate the new file with the correct values. You have three development environment options, detailed below. It is recommended to use the staging API for most development tasks.
 
 #### Option A: use the staging API
 
@@ -49,16 +49,29 @@ REACT_APP_API_ENDPOINT=https://api.dev.geyser.fund
 APOLLO_KEY=<your Apollo Studio API key>
 ```
 
-[Contact us](email:[email protected]) if you don't have an `APOLLO_KEY` yet.
+[Contact us](email:[email protected]) if you don't have an `APOLLO_KEY` yet.
+
+#### Option C: use both local server and staging API interchangably
+
+Many at times we prefer using staging API while sometimes we prefer the local server. In such cases we can setup to use them interchangably.
+
+1. Create the normal `.env` file, which contains the values for local server. This would be used when we command `yarn dev`.
+2. Create a new file `.env.staging` this would have the values to use the staging API, and use the command `yarn dev:stage` to use the staging server env values.
 
 ### Hosts Configuration
 
+#### Staging API
+
 In order for the requests to go through to the staging backend API, you will need to add the following line to your `/etc/hosts` file:
 
 ```shell
 127.0.0.1 staging.geyser.fund
 ```
 
+This makes sure that you are able to make requests to the staging API from your local development environment with encountering CORS errors.
+
+#### GraphQL Faker
+
 If running against the GraphQL Faker server, you'll also need these in the same `/etc/hosts` file:
 
 ```shell
@@ -94,6 +107,18 @@ or
 docker-compose logs -f geyser-app
 ```
 
+### Trusting Caddy Local CA Certificate
+
+We are using Caddy as a reverse proxy to serve the local development app over HTTPS. This means that you will need to trust the Caddy Local CA Certificate in order to avoid any `ERR_CERT_AUTHORITY_INVALID` errors in your browser.
+
+To do so, you can run the following command from the project root directory **after starting the app and caddy server**:
+
+```shell
+sudo yarn caddy:trust-ca
+```
+
+This command will add the Caddy Local CA Certificate to your system's list of trusted certificates (only works on MacOS for now). It needs sudo rights for that.
+
 ### Opening in the Browser
 
 With Docker running, navigate to the URL that's appropriate for the development-environment configuration in your `.env` file:

diff --git a/caddy/Caddyfile b/caddy/Caddyfile
@@ -13,6 +13,7 @@ api.dev.geyser.fund {
 	reverse_proxy graphql-faker:9002
 }
 
+# Local deployment with staging api
 staging.geyser.fund {
     tls internal
     reverse_proxy geyser-app-standalone:3000

diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -6,6 +6,8 @@ services:
       context: .
       target: base
     command: sh -c "RUN_DOCKER=true && yarn install && yarn dev"
+    depends_on:
+      - caddy
     working_dir: /usr/app
     image: geyser-app
     env_file: .env

diff --git a/index.html b/index.html
@@ -42,6 +42,22 @@
         a.appendChild(r);
     })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
   </script>
+  <script>window.twttr = (function(d, s, id) {
+    var js, fjs = d.getElementsByTagName(s)[0],
+      t = window.twttr || {};
+    if (d.getElementById(id)) return t;
+    js = d.createElement(s);
+    js.id = id;
+    js.src = "https://platform.twitter.com/widgets.js";
+    fjs.parentNode.insertBefore(js, fjs);
+
+    t._e = [];
+    t.ready = function(f) {
+      t._e.push(f);
+    };
+
+    return t;
+  }(document, "script", "twitter-wjs"));</script>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -1,9 +1,10 @@
 {
   "name": "geyser-app",
   "private": true,
-  "version": "0.5.0",
+  "version": "0.5.1",
   "scripts": {
     "dev": "vite",
+    "dev:stage": "vite --mode staging",
     "build": "tsc && vite build",
     "preview": "vite preview --port 3000",
     "test:e2e": "yarn cypress run --e2e",
@@ -17,6 +18,7 @@
     "graph:fetch": "run(){ rover graph fetch geyser-graph@$1 > ./schema.graphql; }; run",
     "graph:generate": "run(){ yarn graph:fetch $1 && graphql-codegen --config codegen.ts && rm schema.graphql && yarn graph:format; }; run",
     "graph:generate:staging": "yarn graph:generate staging",
+    "caddy:trust-ca": "bash ./scripts/trust-caddy-cert.sh",
     "changelog": "yarn conventional-changelog -p conventionalcommits -i CHANGELOG.md -s"
   },
   "dependencies": {
@@ -31,6 +33,7 @@
     "@hookform/resolvers": "^3.1.0",
     "@loadable/component": "^5.15.3",
     "@react-hookz/web": "^23.0.0",
+    "@remirror/extension-node-formatting": "^2.0.13",
     "@remirror/pm": "^2.0.5",
     "@remirror/react": "^2.0.28",
     "@remirror/react-components": "^2.1.12",
@@ -40,6 +43,7 @@
     "bech32": "^2.0.0",
     "buffer": "^6.0.3",
     "classnames": "^2.3.2",
+    "dompurify": "^3.0.5",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
     "framer-motion": "^8.5.2",
@@ -96,6 +100,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
+    "@types/dompurify": "^3.0.2",
     "@types/loadable__component": "^5.13.4",
     "@types/luxon": "^3.2.0",
     "@types/node": "^18.11.18",

diff --git a/public/icons/120.png b/public/icons/120.png
diff --git a/public/icons/128-padded.png b/public/icons/128-padded.png
diff --git a/public/icons/16.png b/public/icons/16.png
diff --git a/public/icons/180-padded.png b/public/icons/180-padded.png
diff --git a/public/icons/180.png b/public/icons/180.png
diff --git a/public/icons/192-maskable.png b/public/icons/192-maskable.png
diff --git a/public/icons/192.png b/public/icons/192.png
diff --git a/public/icons/32.png b/public/icons/32.png
diff --git a/public/icons/512-maskable.png b/public/icons/512-maskable.png
diff --git a/public/icons/512-padded.png b/public/icons/512-padded.png
diff --git a/public/icons/60.png b/public/icons/60.png
diff --git a/scripts/trust-caddy-cert.sh b/scripts/trust-caddy-cert.sh
@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+if security find-certificate -c "Caddy Local Authority" -p >> /dev/null; then
+    echo 'Caddy Local Authority is trusted.'
+else
+    echo 'Adding Caddy Local Authority to KeyChain.'
+    mkdir -p ./caddy/certificate/
+    CERT_FILE=./caddy/certificate/root.crt
+    docker exec geyser-caddy-standalone cat /data/caddy/pki/authorities/local/root.crt > $CERT_FILE
+    security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain $CERT_FILE
+fi;
diff --git a/src/components/molecules/AuthModal.tsx b/src/components/molecules/AuthModal.tsx
@@ -16,7 +16,7 @@ import { useAuthContext } from '../../context'
 import { ConnectWithLightning } from '../../pages/auth/ConnectWithLightning'
 import { ConnectWithNostr } from '../../pages/auth/ConnectWithNostr'
 import { ConnectWithTwitter } from '../../pages/auth/ConnectWithTwitter'
-import { hasNostrAccount, hasTwitterAccount } from '../../utils'
+import { hasNostrAccount, hasTwitterAccount, useMobileMode } from '../../utils'
 import { Caption } from '../typography'
 import { ButtonComponent } from '../ui'
 
@@ -67,6 +67,7 @@ const ConnectAccounts = ({
 
 export const AuthModal = (authModalProps: IAuthModal) => {
   const { t } = useTranslation()
+  const isMobile = useMobileMode()
   const {
     isOpen,
     onClose,
@@ -124,7 +125,7 @@ export const AuthModal = (authModalProps: IAuthModal) => {
             )}
             <ConnectAccounts
               onClose={onClose}
-              showNostr={showNostr}
+              showNostr={showNostr && !isMobile}
               showTwitter={showTwitter}
               showLightning={showLightning}
             />

diff --git a/src/components/molecules/DonationInput.tsx b/src/components/molecules/DonationInput.tsx
@@ -103,6 +103,8 @@ export const DonationInput = ({
     const val = Number(value)
 
     if (!val) {
+      setDollar(0)
+      setSatoshi(0)
       return
     }
 
@@ -135,7 +137,6 @@ export const DonationInput = ({
   }
 
   const fontSize = { base: 'sm', md: 'md', lg: 'sm', xl: 'md' }
-
   return (
     <VStack>
       <HStack width="100%" justifyContent="space-around" mt="5px">
@@ -224,8 +225,13 @@ export const DonationInput = ({
           >
             {isSatoshi ? (
               <>
-                <BiDollar style={{ paddingBottom: '3px' }} />
-                <MonoBody1 isTruncated>{commaFormatted(dollar) || 0}</MonoBody1>
+                <MonoBody1 isTruncated>
+                  {dollar > 0
+                    ? `$${commaFormatted(dollar)}`
+                    : satoshi > 0
+                    ? '< $1'
+                    : '$0'}
+                </MonoBody1>
               </>
             ) : (
               <>

diff --git a/src/components/nav/NavBarLogo.tsx b/src/components/nav/NavBarLogo.tsx
@@ -29,13 +29,13 @@ export const NavBarLogo = ({
         {useFullOne ? (
           <GeyserLogoNameIcon
             height="32px"
-            width="100%"
+            width="auto"
             color={color || 'primary.400'}
           />
         ) : (
           <GeyserLogoIcon
             height="32px"
-            width="100%"
+            width="auto"
             color={color || 'primary.400'}
           />
         )}

diff --git a/src/components/nav/bottomNav/LandingNavBar.tsx b/src/components/nav/bottomNav/LandingNavBar.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { Link, matchPath, matchRoutes, useLocation } from 'react-router-dom'
 
 import { getPath } from '../../../constants'
+import { BottomNavContainerCommonStyles } from '../../../constants/styles'
 import {
   FeedNavIcon,
   GrantsNavIcon,
@@ -79,18 +80,10 @@ export const LandingNavBar = () => {
       <>
         <Box height="60px" width="100%"></Box>
         <HStack
-          backgroundColor="neutral.50"
-          width="100%"
-          height="60px"
-          borderTop="2px solid"
-          borderTopColor="neutral.200"
           paddingX="15%"
-          justifyContent="center"
-          alignItems="center"
           spacing="20%"
           position="fixed"
-          bottom="0px"
-          paddingBottom="8px"
+          {...BottomNavContainerCommonStyles}
         >
           {LandingNavItems.map(({ name, path, Icon }) => {
             const isActive = Boolean(matchPath(path, location.pathname))

diff --git a/src/config/apollo-client/apolloClient.ts b/src/config/apollo-client/apolloClient.ts
@@ -39,9 +39,60 @@ const httpLink = createHttpLink({
 
 const prefix = __development__ ? 'ws' : 'wss'
 
+let restartRequestedBeforeConnected = false
+let gracefullyRestart = () => {
+  restartRequestedBeforeConnected = true
+}
+
+let activeSocket: WebSocket | null = null
+let timedOut = 0
+
+const closeSocket = (socket: WebSocket | null) => {
+  if (socket?.readyState === WebSocket?.OPEN) {
+    socket?.close(4408, 'Request Timeout')
+  }
+}
+
 const wsLink = new GraphQLWsLink(
   createClient({
     url: `${prefix}://${API_SERVICE_ENDPOINT.split('//')[1]}/graphql`,
+    retryAttempts: Infinity,
+    shouldRetry: () => true,
+    keepAlive: 10000,
+    on: {
+      error() {
+        if (activeSocket) {
+          closeSocket(activeSocket)
+        }
+      },
+      connected(socket: any) {
+        activeSocket = socket // save the active socket for later use
+        // restart by closing the socket which will trigger a silent reconnect
+        gracefullyRestart = () => {
+          closeSocket(socket)
+        }
+
+        // if any restarts were missed during the connection
+        // phase, restart and reset the request
+        if (restartRequestedBeforeConnected) {
+          restartRequestedBeforeConnected = false
+          gracefullyRestart()
+        }
+      },
+      ping(received) {
+        if (!received) {
+          // sent
+          timedOut = setTimeout(() => {
+            closeSocket(activeSocket)
+          }, 5000)
+        } // wait 5 seconds for the pong and then close the connection
+      },
+      pong(received) {
+        if (received) {
+          clearTimeout(timedOut)
+        } // pong is received, clear connection close timeout
+      },
+    },
   }),
 )
 

diff --git a/src/config/theme/popOverTheme.ts b/src/config/theme/popOverTheme.ts
@@ -0,0 +1,14 @@
+import { popoverAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(popoverAnatomy.keys)
+
+const baseStyle = definePartsStyle({
+  body: {
+    bg: 'neutral.0',
+    borderRadius: '8px',
+  },
+})
+
+export const popOverTheme = defineMultiStyleConfig({ baseStyle })
diff --git a/src/config/theme/theme.ts b/src/config/theme/theme.ts
@@ -5,6 +5,7 @@ import { alertTheme } from './alertTheme'
 import { drawerTheme } from './drawerTheme'
 import { menuTheme } from './menuTheme'
 import { modalTheme } from './modalTheme'
+import { popOverTheme } from './popOverTheme'
 
 export const theme = {
   initialColorMode: 'system',
@@ -247,6 +248,7 @@ export const theme = {
     Menu: menuTheme,
     Modal: modalTheme,
     Drawer: drawerTheme,
+    Popover: popOverTheme,
     Input: {
       defaultProps: {
         focusBorderColor: 'primary.400',

diff --git a/src/constants/components/id.ts b/src/constants/components/id.ts
@@ -22,6 +22,11 @@ export const ID = {
       contribution: 'project-activity-list-container',
       leaderboard: 'project-leaderboard-list-container',
     },
+    story: {
+      markdown: {
+        container: 'project-story-markdown-container',
+      },
+    },
   },
   profile: {
     tabs: 'user-profile-tab-container',