From b81e8a863a9bb28cfe95a0d750b687d412d5887d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3za=20Nagy?= <rozanagy88@gmail.com>
Date: Tue, 5 Mar 2024 14:52:28 +0100
Subject: [PATCH] feat: create initial por page with mock function

---
 src/app/app.tsx                               |  2 ++
 .../components/proof-of-reserve-layout.tsx    | 10 +++++++
 .../proof-of-reserve/proof-of-reserve.tsx     | 30 +++++++++++++++++++
 .../proof-of-reserve-page.tsx                 | 10 +++++++
 4 files changed, 52 insertions(+)
 create mode 100644 src/app/components/proof-of-reserve/components/proof-of-reserve-layout.tsx
 create mode 100644 src/app/components/proof-of-reserve/proof-of-reserve.tsx
 create mode 100644 src/app/pages/proof-of-reserve/proof-of-reserve-page.tsx

diff --git a/src/app/app.tsx b/src/app/app.tsx
index 308339b6..0ee1d80a 100644
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -1,6 +1,7 @@
 import { Route } from 'react-router-dom';
 
 import { AppLayout } from '@components/app.layout';
+import { ProofOfReserve } from '@components/proof-of-reserve/proof-of-reserve';
 import { MyVaults } from '@pages/my-vaults/my-vaults';
 import { BalanceContextProvider } from '@providers/balance-context-provider';
 
@@ -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={<ProofOfReserve />} />
           </AppLayout>
         </BalanceContextProvider>
       </VaultContextProvider>
diff --git a/src/app/components/proof-of-reserve/components/proof-of-reserve-layout.tsx b/src/app/components/proof-of-reserve/components/proof-of-reserve-layout.tsx
new file mode 100644
index 00000000..679d16e5
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/components/proof-of-reserve/proof-of-reserve.tsx b/src/app/components/proof-of-reserve/proof-of-reserve.tsx
new file mode 100644
index 00000000..ae6151b9
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/pages/proof-of-reserve/proof-of-reserve-page.tsx b/src/app/pages/proof-of-reserve/proof-of-reserve-page.tsx
new file mode 100644
index 00000000..9b211497
--- /dev/null
+++ b/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 About(): React.JSX.Element {
+  return (
+    <PageLayout>
+      <ProofOfReserve />
+    </PageLayout>
+  );
+}