feat!: update caching system (#59)

* fix: update bgd helper package * fix: proposal history events (added cached data) * fix: dayjs format typo * fix: tutorial open behavior * fix: zero payloads in payloads controller * feat: finished cache system update
bgd-labs · Jan 25, 2024 · 079d3b0 · 079d3b0 · github-actions · Jan 25, 2024
1 parent 2d46409
commit 079d3b0
Show file tree

Hide file tree

Showing 45 changed files with 755 additions and 520 deletions.
diff --git a/app/page.page.tsx b/app/page.page.tsx
@@ -105,7 +105,7 @@ export default async function Page({
           title: proposal.title,
           ipfsHash: proposal.ipfsHash,
         },
-        state: proposal.state,
+        combineState: proposal.combineState,
       },
     } as CachedProposalDataItemWithId;
   });

diff --git a/app/proposal/page.page.tsx b/app/proposal/page.page.tsx
@@ -44,11 +44,11 @@ export async function generateMetadata({
 
     return {
       title: `${metaTexts.main}${metaTexts.proposalId(proposalId)}`,
-      description: ipfsData.title,
+      description: ipfsData?.title || '',
       openGraph: {
         images: ['/metaLogo.jpg'],
         title: `${metaTexts.main}${metaTexts.proposalId(proposalId)}`,
-        description: ipfsData.title,
+        description: ipfsData?.title || '',
       },
     };
   }
@@ -152,7 +152,7 @@ export default async function ProposalPage({
       },
     };
 
-    const state = getProposalState({
+    const combineState = getProposalState({
       proposalData: proposalDataWithoutState.data,
       quorum: proposalDataWithoutState.config.quorum,
       differential: proposalDataWithoutState.config.differential,
@@ -166,7 +166,7 @@ export default async function ProposalPage({
       balanceLoading: true,
       proposal: {
         ...proposalDataWithoutState,
-        state,
+        combineState,
       },
     } as ProposalWithLoadings;
   }

diff --git a/next.config.js b/next.config.js
@@ -6,6 +6,8 @@ const nextConfig = {
     webpackBuildWorker: true,
   },
   webpack(config) {
+    config.resolve.fallback = { fs: false, path: false };
+
     // Grab the existing rule that handles SVG imports
     const fileLoaderRule = config.module.rules.find((rule) =>
       rule.test?.test?.('.svg'),

diff --git a/package.json b/package.json
@@ -30,8 +30,8 @@
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
   },
   "dependencies": {
-    "@bgd-labs/aave-address-book": "^2.15.2",
-    "@bgd-labs/aave-governance-ui-helpers": "^1.1.1",
+    "@bgd-labs/aave-address-book": "^2.18.0",
+    "@bgd-labs/aave-governance-ui-helpers": "^2.0.0",
     "@bgd-labs/frontend-web3-utils": "^1.1.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.3",

diff --git a/src/payloadsExplorer/components/PayloadExploreItem.tsx b/src/payloadsExplorer/components/PayloadExploreItem.tsx
@@ -211,7 +211,7 @@ export function PayloadExploreItem({
               },
             }}>
             {texts.proposals.payloadsDetails.actions(
-              payload.actionAddresses?.length || 0,
+              payload.actions?.length || 0,
             )}
             :
           </Box>

diff --git a/src/payloadsExplorer/components/PayloadExploreItemLoading.tsx b/src/payloadsExplorer/components/PayloadExploreItemLoading.tsx
@@ -3,13 +3,16 @@ import React from 'react';
 
 import { BoxWith3D } from '../../ui';
 import { CustomSkeleton } from '../../ui/components/CustomSkeleton';
+import { texts } from '../../ui/utils/texts';
 import { media } from '../../ui/utils/themeMUI';
 import { useMediaQuery } from '../../ui/utils/useMediaQuery';
 
 export function PayloadExploreItemLoading({
   isColumns,
+  noData,
 }: {
   isColumns: boolean;
+  noData?: boolean;
 }) {
   const theme = useTheme();
   const xsm = useMediaQuery(media.xs);
@@ -44,139 +47,148 @@ export function PayloadExploreItemLoading({
           p: isColumn ? '14px 12px' : '22px 30px',
         },
       }}>
-      <Box sx={{ flex: 1 }}>
+      {noData ? (
         <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}>
-          <Box
-            sx={{
-              display: 'inline-flex',
-              alignItems: 'center',
-              mb: 12,
-            }}>
-            <Box sx={{ mr: 6 }}>
-              <CustomSkeleton width={24} height={24} circle />
-            </Box>
-            <Box sx={{ typography: 'h2' }}>
-              <CustomSkeleton width={60} height={23} />
-            </Box>
-          </Box>
+          sx={{ typography: 'h2', p: 8, width: '100%', textAlign: 'center' }}>
+          {texts.other.noPayloadsInController}
         </Box>
+      ) : (
+        <>
+          <Box sx={{ flex: 1 }}>
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}>
+              <Box
+                sx={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  mb: 12,
+                }}>
+                <Box sx={{ mr: 6 }}>
+                  <CustomSkeleton width={24} height={24} circle />
+                </Box>
+                <Box sx={{ typography: 'h2' }}>
+                  <CustomSkeleton width={60} height={23} />
+                </Box>
+              </Box>
+            </Box>
 
-        <Box sx={{ display: 'flex', mb: 4 }}>
-          <CustomSkeleton width={80} height={isColumn ? 14 : 24} />
-        </Box>
+            <Box sx={{ display: 'flex', mb: 4 }}>
+              <CustomSkeleton width={80} height={isColumn ? 14 : 24} />
+            </Box>
 
-        <Box sx={{ mb: 4 }}>
-          <CustomSkeleton width={190} height={isColumn ? 14 : 24} />
-        </Box>
-        <CustomSkeleton width={190} height={isColumn ? 14 : 24} />
-      </Box>
+            <Box sx={{ mb: 4 }}>
+              <CustomSkeleton width={190} height={isColumn ? 14 : 24} />
+            </Box>
+            <CustomSkeleton width={190} height={isColumn ? 14 : 24} />
+          </Box>
 
-      <Box
-        sx={{
-          flex: 1,
-          display: 'flex',
-          flexDirection: 'column',
-          my: 18,
-          [theme.breakpoints.up('sm')]: {
-            my: 0,
-            alignItems: 'center',
-          },
-        }}>
-        <Box
-          sx={{
-            '.PayloadActions__link': {
-              typography: 'body',
-              hover: { opacity: 0.7 },
-            },
-          }}>
           <Box
             sx={{
-              typography: 'h2',
-              mb: 4,
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              my: 18,
               [theme.breakpoints.up('sm')]: {
-                mb: isColumn ? 4 : 12,
-                mt: isColumn ? 16 : 0,
+                my: 0,
+                alignItems: 'center',
               },
             }}>
-            <CustomSkeleton width={60} height={isColumn ? 14 : 23} />
-          </Box>
-          <Box>
-            <Box sx={{ mb: 4 }}>
-              <CustomSkeleton width={120} height={isColumn ? 14 : 24} />
-            </Box>
-            <Box sx={{ mb: 4 }}>
-              <CustomSkeleton width={120} height={isColumn ? 14 : 24} />
-            </Box>
-            <Box sx={{ mb: 4 }}>
-              <CustomSkeleton width={120} height={isColumn ? 14 : 24} />
+            <Box
+              sx={{
+                '.PayloadActions__link': {
+                  typography: 'body',
+                  hover: { opacity: 0.7 },
+                },
+              }}>
+              <Box
+                sx={{
+                  typography: 'h2',
+                  mb: 4,
+                  [theme.breakpoints.up('sm')]: {
+                    mb: isColumn ? 4 : 12,
+                    mt: isColumn ? 16 : 0,
+                  },
+                }}>
+                <CustomSkeleton width={60} height={isColumn ? 14 : 23} />
+              </Box>
+              <Box>
+                <Box sx={{ mb: 4 }}>
+                  <CustomSkeleton width={120} height={isColumn ? 14 : 24} />
+                </Box>
+                <Box sx={{ mb: 4 }}>
+                  <CustomSkeleton width={120} height={isColumn ? 14 : 24} />
+                </Box>
+                <Box sx={{ mb: 4 }}>
+                  <CustomSkeleton width={120} height={isColumn ? 14 : 24} />
+                </Box>
+              </Box>
             </Box>
           </Box>
-        </Box>
-      </Box>
 
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          [theme.breakpoints.up('xsm')]: {
-            flexDirection: isColumn ? 'column-reverse' : 'row-reverse',
-            alignItems: isColumn ? 'flex-start' : 'center',
-            justifyContent: isColumn ? 'space-between' : 'space-between',
-          },
-          [theme.breakpoints.up('sm')]: {
-            flexDirection: isColumn ? 'row-reverse' : 'column',
-            alignItems: isColumn ? 'center' : 'flex-end',
-            justifyContent: isColumn ? 'space-between' : 'flex-end',
-            mt: isColumn ? 16 : 0,
-            width: isColumn ? '100%' : 'auto',
-          },
-          [theme.breakpoints.up('md')]: {
-            flex: 1,
-          },
-          [theme.breakpoints.up('lg')]: {
-            mt: isColumn ? 18 : 0,
-          },
-        }}>
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            typography: 'headline',
-            width: 95,
-            order: 1,
-            [theme.breakpoints.up('xsm')]: {
-              order: 0,
-              mt: isColumn ? 12 : 0,
-            },
-            [theme.breakpoints.up('sm')]: {
-              order: 0,
-              mt: 0,
-              mb: isColumn ? 0 : 12,
-            },
-            [theme.breakpoints.up('lg')]: {
-              minWidth: 102,
-            },
-          }}>
           <Box
             sx={{
-              width: '100%',
-              '.react-loading-skeleton': { width: '100%' },
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              [theme.breakpoints.up('xsm')]: {
+                flexDirection: isColumn ? 'column-reverse' : 'row-reverse',
+                alignItems: isColumn ? 'flex-start' : 'center',
+                justifyContent: isColumn ? 'space-between' : 'space-between',
+              },
+              [theme.breakpoints.up('sm')]: {
+                flexDirection: isColumn ? 'row-reverse' : 'column',
+                alignItems: isColumn ? 'center' : 'flex-end',
+                justifyContent: isColumn ? 'space-between' : 'flex-end',
+                mt: isColumn ? 16 : 0,
+                width: isColumn ? '100%' : 'auto',
+              },
+              [theme.breakpoints.up('md')]: {
+                flex: 1,
+              },
+              [theme.breakpoints.up('lg')]: {
+                mt: isColumn ? 18 : 0,
+              },
             }}>
-            <CustomSkeleton height={32} />
-          </Box>
-        </Box>
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                typography: 'headline',
+                width: 95,
+                order: 1,
+                [theme.breakpoints.up('xsm')]: {
+                  order: 0,
+                  mt: isColumn ? 12 : 0,
+                },
+                [theme.breakpoints.up('sm')]: {
+                  order: 0,
+                  mt: 0,
+                  mb: isColumn ? 0 : 12,
+                },
+                [theme.breakpoints.up('lg')]: {
+                  minWidth: 102,
+                },
+              }}>
+              <Box
+                sx={{
+                  width: '100%',
+                  '.react-loading-skeleton': { width: '100%' },
+                }}>
+                <CustomSkeleton height={32} />
+              </Box>
+            </Box>
 
-        <Box>
-          <CustomSkeleton width={102} height={20} />
-        </Box>
-      </Box>
+            <Box>
+              <CustomSkeleton width={102} height={20} />
+            </Box>
+          </Box>
+        </>
+      )}
     </BoxWith3D>
   );
 }
diff --git a/src/payloadsExplorer/components/PayloadItemDetailsModal.tsx b/src/payloadsExplorer/components/PayloadItemDetailsModal.tsx
@@ -193,7 +193,7 @@ export function PayloadItemDetailsModal({
         <Box sx={{ mt: 30 }}>
           <Box sx={{ typography: 'headline', mb: 4 }}>
             {texts.proposals.payloadsDetails.actions(
-              payload.actionAddresses?.length || 0,
+              payload.actions?.length || 0,
             )}
             :
           </Box>

diff --git a/src/payloadsExplorer/components/PayloadStatus.tsx b/src/payloadsExplorer/components/PayloadStatus.tsx
@@ -61,9 +61,7 @@ export function PayloadStatus({
             titleTypography={titleTypography}
             textTypography={textTypography}
             title={texts.proposals.payloadsDetails.executedAt}>
-            <>
-              {dayjs.unix(payload.executedAt).format('MMM D, YYYY, , h:mm A')}
-            </>
+            <>{dayjs.unix(payload.executedAt).format('MMM D, YYYY, h:mm A')}</>
           </PayloadItemStatusInfo>
         )}
 
@@ -72,9 +70,7 @@ export function PayloadStatus({
             titleTypography={titleTypography}
             textTypography={textTypography}
             title={texts.proposals.payloadsDetails.cancelledAt}>
-            <>
-              {dayjs.unix(payload.cancelledAt).format('MMM D, YYYY, , h:mm A')}
-            </>
+            <>{dayjs.unix(payload.cancelledAt).format('MMM D, YYYY, h:mm A')}</>
           </PayloadItemStatusInfo>
         )}
 
@@ -90,7 +86,7 @@ export function PayloadStatus({
                     ? payload.expirationTime
                     : payload.queuedAt + payload.delay + payload.gracePeriod,
                 )
-                .format('MMM D, YYYY, , h:mm A')}
+                .format('MMM D, YYYY, h:mm A')}
             </>
           </PayloadItemStatusInfo>
         )}
-Original file line number
+Diff line change
@@ Expand Up / @@ -211,7 +211,7 @@ export function PayloadExploreItem({ @@
                   },
                 }}>
                 {texts.proposals.payloadsDetails.actions(
-                  payload.actionAddresses?.length || 0,
+                  payload.actions?.length || 0,
                 )}
                 :
               </Box>
@@ Expand Down @@