fix: finished initial app structure (WIP payloads explorer)

bgd-labs · Dec 24, 2024 · a30575d · a30575d · github-actions · Dec 24, 2024
1 parent 29450db
commit a30575d
Show file tree

Hide file tree

Showing 71 changed files with 380 additions and 434 deletions.
diff --git a/src/app/layout.conf.tsx b/src/app/layout.conf.tsx
@@ -2,7 +2,6 @@ import NextTopLoader from 'nextjs-toploader';
 import { ReactNode } from 'react';
 
 import AppLayout from '../components/layouts/AppLayout';
-import { ModalForExecute } from '../components/PayloadsExplorer/ModalForExecute';
 import { isForIPFS } from '../configs/appConfig';
 import Providers from '../providers';
 
@@ -16,13 +15,7 @@ export const metadata = {
   },
 };
 
-export default function RootLayout({
-  children,
-  payloadsModal,
-}: {
-  children: ReactNode;
-  payloadsModal: ReactNode;
-}) {
+export default function RootLayout({ children }: { children: ReactNode }) {
   const { pathname } = typeof window !== 'undefined' ? window.location : {};
   const ipfsMatch = RegExp('/.*\\/Qm\\w{44}\\//').exec(pathname ?? '');
 
@@ -37,11 +30,7 @@ export default function RootLayout({
       <body>
         <NextTopLoader />
         <Providers>
-          <AppLayout>
-            {children}
-            {payloadsModal}
-            <ModalForExecute />
-          </AppLayout>
+          <AppLayout>{children}</AppLayout>
         </Providers>
       </body>
     </html>

diff --git a/.../(..)payload/[payloadId]/page.appPage.tsx → ...l/(.)payload/[payloadId]/page.appPage.tsx b/.../(..)payload/[payloadId]/page.appPage.tsx → ...l/(.)payload/[payloadId]/page.appPage.tsx
@@ -1,25 +1,13 @@
 'use client';
 
-import { Metadata } from 'next';
 import { useRouter } from 'nextjs-toploader/app';
 import React, { useEffect } from 'react';
 
 import { BasicModal } from '../../../../../components/BasicModal';
 import { PayloadDetailsContent } from '../../../../../components/PayloadsExplorer/PayloadDetailsContent';
-import { metaTexts } from '../../../../../helpers/texts/metaTexts';
 import { useStore } from '../../../../../providers/ZustandStoreProvider';
 import { api } from '../../../../../trpc/react';
-import { PayloadsExplorerPageParams } from '../../../../payload/[payloadId]/page.appPage';
-
-export const metadata: Metadata = {
-  title: metaTexts.ipfsTitle,
-  description: metaTexts.ipfsDescription,
-  openGraph: {
-    images: ['/metaLogo.jpg'],
-    title: metaTexts.ipfsTitle,
-    description: metaTexts.ipfsDescription,
-  },
-};
+import { PayloadsExplorerPageParams } from '../../../payload/[payloadId]/page.appPage';
 
 export default function Page({
   params,
@@ -48,7 +36,7 @@ export default function Page({
 
   return (
     <BasicModal
-      maxWidth={600}
+      maxWidth={420}
       withCloseButton
       setIsOpen={() => {
         setIsPayloadExplorerItemDetailsModalOpen(false);

diff --git a/...loads-explorer/@payloadsModal/default.tsx → ...plorer/@payloadsModal/default.appPage.tsx b/...loads-explorer/@payloadsModal/default.tsx → ...plorer/@payloadsModal/default.appPage.tsx
diff --git a/src/app/payloads-explorer/[payloadController]/page.appPage.tsx b/src/app/payloads-explorer/[payloadController]/page.appPage.tsx
@@ -1,22 +1,10 @@
-import { Metadata } from 'next';
 import React, { Suspense } from 'react';
 
 import { PayloadsExplorerPage } from '../../../components/PayloadsExplorer/PayloadsExplorerPage';
 import { appConfig } from '../../../configs/appConfig';
 import { PAGE_SIZE } from '../../../configs/configs';
-import { metaTexts } from '../../../helpers/texts/metaTexts';
 import { api } from '../../../trpc/server';
 
-export const metadata: Metadata = {
-  title: metaTexts.ipfsTitle,
-  description: metaTexts.ipfsDescription,
-  openGraph: {
-    images: ['/metaLogo.jpg'],
-    title: metaTexts.ipfsTitle,
-    description: metaTexts.ipfsDescription,
-  },
-};
-
 type PayloadsExplorerPageParams = {
   payloadController: string;
 };

diff --git a/src/app/payloads-explorer/layout.appPage.tsx b/src/app/payloads-explorer/layout.appPage.tsx
@@ -0,0 +1,31 @@
+import { Metadata } from 'next';
+import { ReactNode } from 'react';
+
+import { ModalForExecute } from '../../components/PayloadsExplorer/ModalForExecute';
+import { metaTexts } from '../../helpers/texts/metaTexts';
+
+export const metadata: Metadata = {
+  title: metaTexts.ipfsTitle,
+  description: metaTexts.ipfsDescription,
+  openGraph: {
+    images: ['/metaLogo.jpg'],
+    title: metaTexts.ipfsTitle,
+    description: metaTexts.ipfsDescription,
+  },
+};
+
+export default function Layout({
+  children,
+  payloadsModal,
+}: {
+  children: ReactNode;
+  payloadsModal: ReactNode;
+}) {
+  return (
+    <>
+      {children}
+      {payloadsModal}
+      <ModalForExecute />
+    </>
+  );
+}
diff --git a/src/app/payloads-explorer/page.appPage.tsx b/src/app/payloads-explorer/page.appPage.tsx
@@ -1,21 +1,9 @@
-import { Metadata } from 'next';
 import React, { Suspense } from 'react';
 
 import { PayloadsExplorerPage } from '../../components/PayloadsExplorer/PayloadsExplorerPage';
 import { appConfig } from '../../configs/appConfig';
-import { metaTexts } from '../../helpers/texts/metaTexts';
 import { api } from '../../trpc/server';
 
-export const metadata: Metadata = {
-  title: metaTexts.ipfsTitle,
-  description: metaTexts.ipfsDescription,
-  openGraph: {
-    images: ['/metaLogo.jpg'],
-    title: metaTexts.ipfsTitle,
-    description: metaTexts.ipfsDescription,
-  },
-};
-
 export const revalidate = 60;
 
 export default async function Page() {

diff --git a/src/app/payload/[payloadId]/page.appPage.tsx → ...orer/payload/[payloadId]/page.appPage.tsx b/src/app/payload/[payloadId]/page.appPage.tsx → ...orer/payload/[payloadId]/page.appPage.tsx
@@ -1,19 +1,7 @@
-import { Metadata } from 'next';
 import React from 'react';
 
-import { PayloadDetailsContent } from '../../../components/PayloadsExplorer/PayloadDetailsContent';
-import { metaTexts } from '../../../helpers/texts/metaTexts';
-import { api } from '../../../trpc/server';
-
-export const metadata: Metadata = {
-  title: metaTexts.ipfsTitle,
-  description: metaTexts.ipfsDescription,
-  openGraph: {
-    images: ['/metaLogo.jpg'],
-    title: metaTexts.ipfsTitle,
-    description: metaTexts.ipfsDescription,
-  },
-};
+import { PayloadDetails } from '../../../../components/PayloadsExplorer/PayloadDetails';
+import { api } from '../../../../trpc/server';
 
 export type PayloadsExplorerPageParams = {
   payloadId: string;
@@ -50,5 +38,6 @@ export default async function Page({
     chainWithController: `${splitParams[1]}_${splitParams[2]}`,
     payloadId: Number(splitParams[0]),
   });
-  return <PayloadDetailsContent payload={payload} withExecute />;
+
+  return <PayloadDetails payload={payload} />;
 }
diff --git a/src/components/BasicModal.tsx b/src/components/BasicModal.tsx
@@ -3,8 +3,8 @@ import { Box, SxProps, useTheme } from '@mui/system';
 import { ReactNode } from 'react';
 
 import CloseIcon from '../assets/icons/cross.svg';
+import { useMediaQuery } from '../hooks/useMediaQuery';
 import { media } from '../styles/themeMUI';
-import { useMediaQuery } from '../styles/useMediaQuery';
 import { BackButton3D } from './BackButton3D';
 import { BoxWith3D } from './BoxWith3D';
 import { IconBox } from './primitives/IconBox';

diff --git a/src/components/Create/CreatePayloadForm.tsx b/src/components/Create/CreatePayloadForm.tsx
@@ -12,9 +12,9 @@ import {
   required,
 } from '../../helpers/inputValidation';
 import { texts } from '../../helpers/texts/texts';
+import { useLastTxLocalStatus } from '../../hooks/useLastTxLocalStatus';
 import { useStore } from '../../providers/ZustandStoreProvider';
 import { TxType } from '../../store/transactionsSlice';
-import { useLastTxLocalStatus } from '../../transactions/useLastTxLocalStatus';
 import { CreateProposalPageParams, PayloadAction } from '../../types';
 import { BigButton } from '../BigButton';
 import { BoxWith3D } from '../BoxWith3D';

diff --git a/src/components/Create/CreateProposalForm.tsx b/src/components/Create/CreateProposalForm.tsx
@@ -9,9 +9,9 @@ import { appConfig } from '../../configs/appConfig';
 import { getAvailablePayloadsIdsByChainId } from '../../helpers/getAvailablePayloadsIdsByChainId';
 import { composeValidators, required } from '../../helpers/inputValidation';
 import { texts } from '../../helpers/texts/texts';
+import { useLastTxLocalStatus } from '../../hooks/useLastTxLocalStatus';
 import { useStore } from '../../providers/ZustandStoreProvider';
 import { TxType } from '../../store/transactionsSlice';
-import { useLastTxLocalStatus } from '../../transactions/useLastTxLocalStatus';
 import { CreateProposalPageParams, ProposalInitialStruct } from '../../types';
 import { BigButton } from '../BigButton';
 import { BoxWith3D } from '../BoxWith3D';

diff --git a/src/components/Delegate/DelegatePage.tsx b/src/components/Delegate/DelegatePage.tsx
@@ -12,13 +12,13 @@ import { zeroAddress } from 'viem';
 
 import WarningIcon from '../../assets/icons/warningIcon.svg';
 import { texts } from '../../helpers/texts/texts';
+import { useLastTxLocalStatus } from '../../hooks/useLastTxLocalStatus';
 import { useStore } from '../../providers/ZustandStoreProvider';
 import {
   checkIfAddressENS,
   checkIsGetAddressByENSNamePending,
 } from '../../store/selectors/ensSelectors';
 import { TxType } from '../../store/transactionsSlice';
-import { useLastTxLocalStatus } from '../../transactions/useLastTxLocalStatus';
 import { DelegateData, DelegateItem } from '../../types';
 import { BackButton3D } from '../BackButton3D';
 import { BigButton } from '../BigButton';

diff --git a/src/components/PayloadsExplorer/PayloadDetails.tsx b/src/components/PayloadsExplorer/PayloadDetails.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { Box, useTheme } from '@mui/system';
+import { useRouter } from 'nextjs-toploader/app';
+import React from 'react';
+
+import { PayloadWithHashes } from '../../types';
+import { BackButton3D } from '../BackButton3D';
+import { BoxWith3D } from '../BoxWith3D';
+import { Container } from '../primitives/Container';
+import { TopPanelContainer } from '../TopPanelContainer';
+import { PayloadDetailsContent } from './PayloadDetailsContent';
+
+export function PayloadDetails({ payload }: { payload: PayloadWithHashes }) {
+  const router = useRouter();
+  const theme = useTheme();
+
+  return (
+    <Container>
+      <TopPanelContainer withoutContainer>
+        <BackButton3D onClick={router.back} />
+      </TopPanelContainer>
+
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+        <BoxWith3D
+          contentColor="$mainLight"
+          wrapperCss={{
+            '> div, .BoxWith3D__content': {
+              height: '100%',
+              maxWidth: 450,
+            },
+          }}
+          css={{
+            display: 'flex',
+            flexDirection: 'column',
+            p: '12px 8px',
+            [theme.breakpoints.up('sm')]: {
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+              justifyContent: 'space-between',
+              p: '18px 24px',
+            },
+            [theme.breakpoints.up('lg')]: {
+              p: '14px 12px',
+            },
+          }}>
+          <PayloadDetailsContent payload={payload} withExecute />
+        </BoxWith3D>
+      </Box>
+    </Container>
+  );
+}
diff --git a/src/components/PayloadsExplorer/PayloadExploreItem.tsx b/src/components/PayloadsExplorer/PayloadExploreItem.tsx
@@ -9,10 +9,10 @@ import { Address, toHex } from 'viem';
 import { ROUTES } from '../../configs/routes';
 import { formatPayloadData } from '../../helpers/formatPayloadData';
 import { texts } from '../../helpers/texts/texts';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { useStore } from '../../providers/ZustandStoreProvider';
 import { TransactionUnion, TxType } from '../../store/transactionsSlice';
 import { media } from '../../styles/themeMUI';
-import { useMediaQuery } from '../../styles/useMediaQuery';
 import { InitialPayload, PayloadWithHashes } from '../../types';
 import { BoxWith3D } from '../BoxWith3D';
 import { CopyAndExternalIconsSet } from '../CopyAndExternalIconsSet';

diff --git a/src/components/PayloadsExplorer/PayloadExploreItemLoading.tsx b/src/components/PayloadsExplorer/PayloadExploreItemLoading.tsx
@@ -2,8 +2,8 @@ import { Box, useTheme } from '@mui/system';
 import React from 'react';
 
 import { texts } from '../../helpers/texts/texts';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { media } from '../../styles/themeMUI';
-import { useMediaQuery } from '../../styles/useMediaQuery';
 import { BoxWith3D } from '../BoxWith3D';
 import { CustomSkeleton } from '../primitives/CustomSkeleton';
 

diff --git a/src/components/PayloadsExplorer/PayloadsExplorerPage.tsx b/src/components/PayloadsExplorer/PayloadsExplorerPage.tsx
@@ -190,7 +190,7 @@ export function PayloadsExplorerPage({
                           value,
                           appConfig.payloadsControllerConfig[value]
                             .contractAddresses[0],
-                          activePage,
+                          0,
                         ),
                       );
                     }}
@@ -225,9 +225,7 @@ export function PayloadsExplorerPage({
                 chainId={chainId}
                 controllerAddress={payloadsController}
                 setControllerAddress={(value) =>
-                  router.push(
-                    ROUTES.payloadsExplorerPages(chainId, value, activePage),
-                  )
+                  router.push(ROUTES.payloadsExplorerPages(chainId, value, 0))
                 }
               />
             </Box>

diff --git a/src/components/ProposalsDetails/ClaimFeesButton.tsx b/src/components/ProposalsDetails/ClaimFeesButton.tsx
@@ -3,10 +3,10 @@ import { Box } from '@mui/system';
 import React, { useState } from 'react';
 
 import { texts } from '../../helpers/texts/texts';
+import { useLastTxLocalStatus } from '../../hooks/useLastTxLocalStatus';
 import { useStore } from '../../providers/ZustandStoreProvider';
 import { TransactionUnion, TxType } from '../../store/transactionsSlice';
 import { CreationFeesTxModal } from '../../transactions/components/ActionModals/CreationFeesTxModal';
-import { useLastTxLocalStatus } from '../../transactions/useLastTxLocalStatus';
 import { InitialProposalState, ProposalInitialStruct } from '../../types';
 import { SmallButton } from '../SmallButton';
 

diff --git a/src/components/ProposalsDetails/ProposalVotingPower.tsx b/src/components/ProposalsDetails/ProposalVotingPower.tsx
@@ -8,11 +8,11 @@ import { zeroAddress } from 'viem';
 
 import InfoIcon from '../../assets/icons/info.svg';
 import { texts } from '../../helpers/texts/texts';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { useStore } from '../../providers/ZustandStoreProvider';
 import { checkIsVotingAvailable } from '../../store/selectors/representationsSelectors';
 import { TransactionUnion, TxType } from '../../store/transactionsSlice';
 import { media } from '../../styles/themeMUI';
-import { useMediaQuery } from '../../styles/useMediaQuery';
 import { VotedDataByUser, VotingDataByUser } from '../../types';
 import { BigButton } from '../BigButton';
 import { BoxWith3D } from '../BoxWith3D';

diff --git a/src/components/ProposalsDetails/Timeline/TimelineContent.tsx b/src/components/ProposalsDetails/Timeline/TimelineContent.tsx
@@ -4,8 +4,8 @@ import React, { useEffect, useRef } from 'react';
 
 import Rocket from '../../../assets/rocket.svg';
 import { texts } from '../../../helpers/texts/texts';
+import { useMediaQuery } from '../../../hooks/useMediaQuery';
 import { useStore } from '../../../providers/ZustandStoreProvider';
-import { useMediaQuery } from '../../../styles/useMediaQuery';
 import { ProposalStateWithName } from '../../../types';
 import { IconBox } from '../../primitives/IconBox';
 import { Timer } from '../../Timer';

diff --git a/src/components/ProposalsDetails/VotersModal.tsx b/src/components/ProposalsDetails/VotersModal.tsx
@@ -7,9 +7,9 @@ import { zeroAddress } from 'viem';
 import { formatVoterAddress } from '../../helpers/formatVoterAddress';
 import { getScanLink } from '../../helpers/getScanLink';
 import { texts } from '../../helpers/texts/texts';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { useStore } from '../../providers/ZustandStoreProvider';
 import { media } from '../../styles/themeMUI';
-import { useMediaQuery } from '../../styles/useMediaQuery';
 import { VotersData } from '../../types';
 import { BasicModal } from '../BasicModal';
 import { FormattedNumber } from '../FormattedNumber';

diff --git a/src/components/ProposalsList/FiltersPanel.tsx b/src/components/ProposalsList/FiltersPanel.tsx
@@ -6,8 +6,8 @@ import { mainnet } from 'viem/chains';
 import { appConfig } from '../../configs/appConfig';
 import { proposalStatusesForFilter } from '../../helpers/statuses';
 import { texts } from '../../helpers/texts/texts';
+import { useDebounce } from '../../hooks/useDebounce';
 import { useStore } from '../../providers/ZustandStoreProvider';
-import { useDebounce } from '../../styles/useDebounce';
 import { CustomSkeleton } from '../primitives/CustomSkeleton';
 import { TopPanelContainer } from '../TopPanelContainer';
 import { FilterDropdown } from './FilterDropdown';

diff --git a/src/components/ProposalsList/ProposalListItemWrapper.tsx b/src/components/ProposalsList/ProposalListItemWrapper.tsx
@@ -3,8 +3,8 @@
 import { useTheme } from '@mui/system';
 import React, { ReactNode } from 'react';
 
+import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { media } from '../../styles/themeMUI';
-import { useMediaQuery } from '../../styles/useMediaQuery';
 import { ProposalNextState } from '../../types';
 import { BoxWith3D } from '../BoxWith3D';