feat: create initial por page with mock function (#51)

* feat: create initial por page with mock function

src/app/app.tsx

@@ -2,6 +2,7 @@ import { Route } from 'react-router-dom';
 
 import { AppLayout } from '@components/app.layout';
 import { MyVaults } from '@pages/my-vaults/my-vaults';
+import { ProofOfReservePage } from '@pages/proof-of-reserve/proof-of-reserve-page';
 import { BalanceContextProvider } from '@providers/balance-context-provider';
 
 import { About } from './pages/about/about';
@@ -18,6 +19,7 @@ export function App(): React.JSX.Element {
             <Route path="/" element={<Dashboard />} />
             <Route path="/my-vaults" element={<MyVaults />} />
             <Route path="/how-it-works" element={<About />} />
+            <Route path="/proof-of-reserve" element={<ProofOfReservePage />} />
           </AppLayout>
         </BalanceContextProvider>
       </VaultContextProvider>

src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx

@@ -1,8 +1,7 @@
 // import { ProtocolHistory } from "@components/protocol-history/protocol-history";
-
 import { Skeleton, Text, VStack } from '@chakra-ui/react';
-
 import { useBlockchainContext } from '@hooks/use-blockchain-context';
+
 import { ProtocolSummaryStackLayout } from './components/protocol-summary-stack.layout';
 
 export function ProtocolSummaryStack(): React.JSX.Element {

src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx

@@ -2,10 +2,10 @@ import { useState } from 'react';
 
 import { Button, FormControl, FormErrorMessage, Text, VStack, useToast } from '@chakra-ui/react';
 import { customShiftValue } from '@common/utilities';
+import { useBlockchainContext } from '@hooks/use-blockchain-context';
 import { EthereumError } from '@models/error-types';
 import { Form, Formik } from 'formik';
 
-import { useBlockchainContext } from '@hooks/use-blockchain-context';
 import { TransactionFormInput } from './components/transaction-form-input';
 import { TransactionFormWarning } from './components/transaction-form-warning';
 

src/app/components/mint-unmint/components/walkthrough/walkthrough.tsx

@@ -1,8 +1,7 @@
-
 import { Button, HStack, Image, Link, Text } from '@chakra-ui/react';
 import { TutorialVideo } from '@components/tutorial-video/tutorial-video';
-
 import { useBlockchainContext } from '@hooks/use-blockchain-context';
+
 import { WalkthroughHeader } from './components/walkthrough-header';
 import { WalkthroughLayout } from './components/walkthrough.layout';
 

src/app/components/proof-of-reserve/components/proof-of-reserve-layout.tsx

@@ -0,0 +1,10 @@
+import { CustomCard } from '@components/how-it-works/components/custom-card';
+import { HasChildren } from '@models/has-children';
+
+export function ProofOfReserveLayout({ children }: HasChildren): React.JSX.Element {
+  return (
+    <CustomCard width={'800px'} height={'150px'} padding={'30px'}>
+      {children}
+    </CustomCard>
+  );
+}

src/app/components/proof-of-reserve/proof-of-reserve.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+
+import { Text, VStack } from '@chakra-ui/react';
+
+import { ProofOfReserveLayout } from './components/proof-of-reserve-layout';
+
+export function ProofOfReserve(): React.JSX.Element {
+  const [content, setContent] = useState('');
+
+  useEffect(() => {
+    fetch('http://localhost:8811/get-proof-of-reserve')
+      .then(response => response.json())
+      .then(data => {
+        setContent(data);
+      })
+      .catch(error => {
+        console.error('Error fetching data:', error);
+      });
+  }, []);
+  return (
+    <ProofOfReserveLayout>
+      {
+        <VStack spacing={'10px'}>
+          <Text color={'white'}>BTC Reserve</Text>
+          <Text color={'white'}>{content}</Text>
+        </VStack>
+      }
+    </ProofOfReserveLayout>
+  );
+}

src/app/components/vaults-list/components/vaults-list-group-container.tsx

@@ -1,4 +1,3 @@
-
 import { Button, HStack, Image, Spinner, Text, VStack } from '@chakra-ui/react';
 import { VaultCard } from '@components/vault/vault-card';
 import { useBlockchainContext } from '@hooks/use-blockchain-context';

src/app/pages/proof-of-reserve/proof-of-reserve-page.tsx

@@ -0,0 +1,10 @@
+import { ProofOfReserve } from '@components/proof-of-reserve/proof-of-reserve';
+import { PageLayout } from '@pages/components/page.layout';
+
+export function ProofOfReservePage(): React.JSX.Element {
+  return (
+    <PageLayout>
+      <ProofOfReserve />
+    </PageLayout>
+  );
+}

src/app/providers/balance-context-provider.tsx

@@ -1,10 +1,10 @@
 import { createContext, useContext, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 
+import { useBlockchainContext } from '@hooks/use-blockchain-context';
 import { HasChildren } from '@models/has-children';
 import { RootState } from '@store/index';
 
-import { useBlockchainContext } from '@hooks/use-blockchain-context';
 import { VaultContext } from './vault-context-provider';
 
 interface VaultContextType {

src/app/providers/vault-context-provider.tsx

@@ -1,10 +1,9 @@
 import { createContext } from 'react';
 
+import { useBlockchainContext } from '@hooks/use-blockchain-context';
 import { UseVaultsReturnType, useVaults } from '@hooks/use-vaults';
 import { HasChildren } from '@models/has-children';
 
-import { useBlockchainContext } from '@hooks/use-blockchain-context';
-
 interface VaultContextType {
   vaults: UseVaultsReturnType;
 }