chore: merge branch 'dev' into fix/data-fetching

.eslintrc.cjs

@@ -14,9 +14,10 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['react', 'react-hooks', '@typescript-eslint', 'deprecation'],
   rules: {
+    'import/no-unused-modules': 'off',
     '@typescript-eslint/no-floating-promises': ['warn'],
     '@typescript-eslint/no-unnecessary-type-assertion': ['warn'],
-    '@typescript-eslint/no-unused-vars': ['error'],
+    '@typescript-eslint/no-unused-vars': ['warn'],
     '@typescript-eslint/no-unsafe-assignment': [0],
     '@typescript-eslint/no-unsafe-return': [0],
     '@typescript-eslint/no-unsafe-call': [0],

.github/workflows/playwright.yml

@@ -1,27 +1,27 @@
 name: Playwright Tests
 on:
   push:
-    branches: [ dev ]
+    branches: [dev]
   pull_request:
-    branches: [ dev ]
+    branches: [dev]
 jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 18
-    - name: Install dependencies
-      run: npm ci
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npx playwright test
-    - uses: actions/upload-artifact@v3
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache --check-cache
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -29,4 +29,4 @@ dist-ssr
 
 # Environment variables
 .env*
-!.env.example
+!.env.template

package.json

@@ -51,6 +51,7 @@
     "micro-packed": "^0.5.1",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
+    "react-charts": "^3.0.0-beta.57",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",
     "react-redux": "^8.1.3",

src/app/app.tsx

@@ -7,6 +7,7 @@ import { ProofOfReservePage } from '@pages/proof-of-reserve/proof-of-reserve-pag
 import { BalanceContextProvider } from '@providers/balance-context-provider';
 import { BlockchainHeightContextProvider } from '@providers/bitcoin-query-provider';
 import { EthereumObserverProvider } from '@providers/ethereum-observer-provider';
+import { ProofOfReserveContextProvider } from '@providers/proof-of-reserve-context-provider';
 
 import { About } from './pages/about/about';
 import { Dashboard } from './pages/dashboard/dashboard';
@@ -23,12 +24,14 @@ export function App(): React.JSX.Element {
           <VaultContextProvider>
             <BlockchainHeightContextProvider>
               <BalanceContextProvider>
-                <AppLayout>
-                  <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>
+                <ProofOfReserveContextProvider>
+                  <AppLayout>
+                    <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>
+                </ProofOfReserveContextProvider>
               </BalanceContextProvider>
             </BlockchainHeightContextProvider>
           </VaultContextProvider>

src/app/components/fade-layer/fade-layer.tsx

@@ -2,23 +2,23 @@ import { VStack } from '@chakra-ui/react';
 
 interface FadeLayerProps {
   children: React.ReactNode;
-  height: string;
-  fadeHeight: string;
+  h: string;
+  fh: string;
 }
 
-export function FadeLayer({ children, height, fadeHeight }: FadeLayerProps): React.JSX.Element {
+export function FadeLayer({ children, h, fh }: FadeLayerProps): React.JSX.Element {
   const afterStyles = {
-    content: '""',
-    position: 'absolute',
+    height: fh,
     bottom: 0,
     left: 0,
     right: 0,
-    height: fadeHeight,
+    position: 'absolute',
+    content: '""',
     backgroundImage: 'linear-gradient(to top, background.container.01, transparent)',
   };
 
   return (
-    <VStack alignItems={'start'} position="relative" w={'100%'} h={height} _after={afterStyles}>
+    <VStack w={'100%'} h={h} position="relative" _after={afterStyles}>
       {children}
     </VStack>
   );

src/app/components/header/components/tabs.tsx

@@ -27,6 +27,11 @@ export function NavigationTabs({
         isActive={activeTab === '/how-it-works'}
         handleClick={() => handleTabClick('/how-it-works')}
       />
+      <TabButton
+        title={'Proof of Reserve'}
+        isActive={activeTab === '/proof-of-reserve'}
+        handleClick={() => handleTabClick('/proof-of-reserve')}
+      />
     </HStack>
   );
 }

src/app/components/proof-of-reserve/components/merchant-table/components/merchant-table-header.tsx

@@ -0,0 +1,15 @@
+import { HStack, Text } from '@chakra-ui/react';
+
+// @ts-expect-error: ignoring because of later implementation
+function MerchantTableHeader(): React.JSX.Element {
+  return (
+    <HStack px={'25px'} py={'15px'} w={'100%'}>
+      <Text w={'33.3%'} color={'white'} fontSize={'lg'} fontWeight={800}>
+        Merchant
+      </Text>
+      <Text w={'33.3%'} color={'white'} fontSize={'lg'}>
+        dlcBTC Minted
+      </Text>
+    </HStack>
+  );
+}

src/app/components/proof-of-reserve/components/merchant-table/components/merchant-table-item.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Button, HStack, Image, Text } from '@chakra-ui/react';
+import { Merchant } from '@models/merchant';
+
+interface MerchantTableItemProps {
+  merchant: Merchant;
+  dlcBTCAmount: number;
+}
+
+// @ts-expect-error: ignoring because of later implementation
+function MerchantTableItem({ merchant, dlcBTCAmount }: MerchantTableItemProps): React.ReactElement {
+  //TODO: replace name with logo when the logo is available
+  const { name } = merchant;
+
+  return (
+    <HStack px={'25px'} w={'100%'}>
+      <Text w={'33.3%'} color={'white'} fontSize={'2xl'} fontWeight={800}>
+        {name}
+      </Text>
+      <HStack w={'33.3%'}>
+        <Image src={'/images/logos/dlc-btc-logo.svg'} alt={'dlcBTC Logo'} boxSize={'25px'} />
+        <Text color={'white'} fontSize={'2xl'} fontWeight={800}>
+          {dlcBTCAmount}
+        </Text>
+      </HStack>
+      <Button w={'33.3%'} variant={'merchantHistory'}>
+        Mint/Redeem History
+      </Button>
+    </HStack>
+  );
+}