Merge pull request #189 from pastelnetwork/feature/add-balance-histor…

…y-component add balance history component
pastelnetwork · Apr 4, 2023 · 2219b1f · 2219b1f
2 parents 79e6e20 + 33c0a44
commit 2219b1f
Show file tree

Hide file tree

Showing 61 changed files with 3,843 additions and 139 deletions.
diff --git a/.env.example b/.env.example
@@ -4,3 +4,4 @@ REACT_APP_EXPLORER_WEB_API_URL_DEVNET=https://api-dev.pastel.network.com
 REACT_APP_EXPLORER_DEFAULT_API_URL=https://api-dev.pastel.network.com
 REACT_APP_EXPLORER_DEFAULT_CURRENCY_NAME=PSL
 REACT_APP_EXPLORER_TEST_CURRENCY_NAME=LSP
+REACT_APP_EXPLORER_PASTEL_BURN_ADDRESS=tPpasteLBurnAddressXXXXXXXXXXX3wy7u
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -1087,6 +1087,10 @@
         "message": "Timestamp",
         "description": "Used for the CascadeAndSenseStatistics page"
       },
+      "direction": {
+        "message": "Type",
+        "description": "Used for the CascadeAndSenseStatistics page"
+      },
       "totalSent": {
         "message": "Total Sent ({{currency}})",
         "description": "Used for the CascadeAndSenseStatistics page"
@@ -1095,21 +1099,63 @@
         "message": "Total Received ({{currency}})",
         "description": "Used for the CascadeAndSenseStatistics page"
       },
+      "totalBurned": {
+        "message": "Total Burned ({{currency}})",
+        "description": "Used for the CascadeAndSenseStatistics page"
+      },
       "balance": {
         "message": "Balance ({{currency}})",
         "description": "Used for the CascadeAndSenseStatistics page"
       },
       "latestTransactions": {
-        "message": "Latest Transactions",
+        "message": "Transactions",
         "description": "Used for the CascadeAndSenseStatistics page"
       },
       "downloadCSV": {
         "message": "Download CSV",
         "description": "Used for the CascadeAndSenseStatistics page"
       },
       "address": {
-        "message": "{{currency}} address",
+        "message": "{{currency}} Address",
+        "description": "Used for the CascadeAndSenseStatistics page"
+      },
+      "pastelBurnAddress": {
+        "message": "Burn Address",
         "description": "Used for the CascadeAndSenseStatistics page"
+      },
+      "balanceHistory": {
+        "balance": {
+          "message": "Balance",
+          "description": "Used for the CascadeAndSenseStatistics page"
+        },
+        "sent": {
+          "message": "Sent",
+          "description": "Used for the CascadeAndSenseStatistics page"
+        },
+        "received": {
+          "message": "Received",
+          "description": "Used for the CascadeAndSenseStatistics page"
+        },
+        "receivedByMonth": {
+          "message": "Received by Month",
+          "description": "Used for the CascadeAndSenseStatistics page"
+        },
+        "sentByMonth": {
+          "message": "Sent by Month",
+          "description": "Used for the CascadeAndSenseStatistics page"
+        },
+        "burnedByMonth": {
+          "message": "Burned by Month",
+          "description": "Used for the CascadeAndSenseStatistics page"
+        },
+        "burned": {
+          "message": "Burned",
+          "description": "Used for the CascadeAndSenseStatistics page"
+        },
+        "totalBurned": {
+          "message": "Total Burned",
+          "description": "Used for the CascadeAndSenseStatistics page"
+        }
       }
     },
     "blockDetails": {
@@ -2122,6 +2168,10 @@
       "filterLabel": {
         "message": "Last {{period}}",
         "description": "Used for the Statistics page"
+      },
+      "filterLabelMax": {
+        "message": "Max",
+        "description": "Used for the Statistics page"
       }
     },
     "supernodes": {
@@ -2377,6 +2427,28 @@
         "message": "Not Yet Activated",
         "description": "Used for the TicketsType page"
       }
+    },
+    "burned": {
+      "title": {
+        "message": "Total {{currency}} Burned",
+        "description": "Used for the TicketsType page"
+      },
+      "totalBurned": {
+        "message": "Total Burned ({{currency}})",
+        "description": "Used for the CascadeAndSenseStatistics page"
+      },
+      "burnedByMonth": {
+        "message": "Burned by Month",
+        "description": "Used for the CascadeAndSenseStatistics page"
+      },
+      "burnedAddresses": {
+        "message": "Burned Addresses",
+        "description": "Used for the CascadeAndSenseStatistics page"
+      },
+      "address": {
+        "message": "Address",
+        "description": "Used for the CascadeAndSenseStatistics page"
+      }
     }
   },
   "routes": {
@@ -2555,6 +2627,10 @@
     "ticketsType": {
       "message": "Tickets Type",
       "description": "Used for the routes"
+    },
+    "burned": {
+      "message": "Burned",
+      "description": "Used for the routes"
     }
   },
   "chartOptions": {

diff --git a/src/apis/blocks.ts b/src/apis/blocks.ts
@@ -6,7 +6,7 @@ const getLatestBlock = async (limit = 8) => {
   const {
     data: { data, timestamp },
   }: { data: { data: IBlock[]; timestamp: number } } = await axiosInstance.get(BLOCK_URL, {
-    params: { limit, sortBy: 'id', excludePaging: true },
+    params: { limit, sortBy: 'height', excludePaging: true },
   });
 
   const blockTuple: [string, IBlock][] = data.map((block: IBlock) => [block.id, block]);

diff --git a/src/components/Charts/DoughnutChart/DoughnutChart.styles.ts b/src/components/Charts/DoughnutChart/DoughnutChart.styles.ts
@@ -40,18 +40,44 @@ export const CardContent = styled(MuiCardContent)`
 `;
 
 export const ChartWrapper = styled(Grid)`
-  height: 160px;
+  height: 273px;
   position: relative;
   padding: 20px;
 
   @media (min-width: 960px) {
     padding: 10px 20px;
     height: 273px;
+
+    .echarts-for-react {
+      height: 253px !important;
+    }
   }
 
   @media (min-width: 1280px) {
     padding: 20px;
     height: 332px;
+    height: 300px !important;
+  }
+
+  @media (max-width: 959px) {
+    height: 273px;
+
+    .echarts-for-react {
+      height: 234px !important;
+    }
+  }
+
+  @media (max-width: 600px) {
+    height: 190px;
+    padding: 0;
+
+    &:last-child {
+      height: auto;
+    }
+
+    .echarts-for-react {
+      height: 190px !important;
+    }
   }
 
   .chartjs-render-monitor {
@@ -61,7 +87,6 @@ export const ChartWrapper = styled(Grid)`
   canvas {
     position: relative;
     z-index: 1;
-    }
   }
 `;
 
@@ -87,13 +112,23 @@ export const StakingWrapper = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
+
+  @media (max-width: 600px) {
+    padding-top: 10px;
+    font-size: 32px;
+  }
 `;
 
 export const StakingTitle = styled.div`
   margin-top: 15px;
   font-size: 20px;
   font-weight: 400;
   line-height: 1;
+
+  @media (max-width: 600px) {
+    margin-top: 5px;
+    font-size: 16px;
+  }
 `;
 
 export const Link = styled(RouterLink)`

diff --git a/src/components/Hourglass/Hourglass.styles.ts b/src/components/Hourglass/Hourglass.styles.ts
@@ -1,8 +1,6 @@
 import styled from 'styled-components';
 
 export const Image = styled.div`
-  margin-left: 12px;
-
   svg {
     width: 24px;
     height: 24px;

diff --git a/src/components/InfinityTable/InfinityTable.tsx b/src/components/InfinityTable/InfinityTable.tsx
@@ -217,7 +217,7 @@ const InfinityTableComponent: React.FC<IInfinityTableComponentProps> = ({
           </Styles.Loader>
         ) : null}
         {!isLoading ? (
-          <Styles.TableWrapper className={`${rows.length ? '' : 'empty-table'}`}>
+          <Styles.TableWrapper className={`table-wrapper ${rows.length ? '' : 'empty-table'}`}>
             <AutoSizer disableHeight>
               {({ width }) => (
                 <div style={{ width }}>

diff --git a/src/components/Navbar/Navbar.styles.ts b/src/components/Navbar/Navbar.styles.ts
@@ -42,6 +42,7 @@ export const BrandLogo = styled.img`
 
 export const Menu = styled.div`
   display: flex;
+  z-index: 3;
 
   ${props => props.theme.breakpoints.down('xs')} {
     align-items: flex-start;

diff --git a/src/components/SearchBar/SearchBar.helpers.ts b/src/components/SearchBar/SearchBar.helpers.ts
@@ -1,12 +1,20 @@
 import * as ROUTES from '@utils/constants/routes';
 
-export const ADDRESSES_LABEL = 'components.searchBar.addresses';
-export const BLOCKS_HEIGHTS_LABEL = 'components.searchBar.blocksHeights';
-export const BLOCKS_IDS_LABEL = 'components.searchBar.blocksIds';
-export const TRANSACTIONS_LABEL = 'components.searchBar.transactions';
-export const SENSES_LABEL = 'components.searchBar.senses';
-export const PASTEL_ID_LABEL = 'components.searchBar.pastelID';
-export const USERNAME = 'components.searchBar.username';
+export const ADDRESSES_TEXT_LABEL = 'components.searchBar.addresses';
+export const BLOCKS_HEIGHTS_TEXT_LABEL = 'components.searchBar.blocksHeights';
+export const BLOCKS_IDS_TEXT_LABEL = 'components.searchBar.blocksIds';
+export const TRANSACTIONS_TEXT_LABEL = 'components.searchBar.transactions';
+export const SENSES_TEXT_LABEL = 'components.searchBar.senses';
+export const PASTEL_ID_TEXT_LABEL = 'components.searchBar.pastelID';
+export const USERNAME_TEXT_LABEL = 'components.searchBar.username';
+
+export const ADDRESSES_LABEL = 'addresses';
+export const BLOCKS_HEIGHTS_LABEL = 'blocksHeights';
+export const BLOCKS_IDS_LABEL = 'blocksIds';
+export const TRANSACTIONS_LABEL = 'transactions';
+export const SENSES_LABEL = 'senses';
+export const PASTEL_ID_LABEL = 'pastelID';
+export const USERNAME = 'username';
 
 export type TOptionsCategories =
   | typeof ADDRESSES_LABEL
@@ -20,19 +28,25 @@ export type TOptionsCategories =
 export type TAutocompleteOptions = {
   category: TOptionsCategories;
   value: string;
+  categoryText: string;
   pastelID: string;
 };
 
-export const collectData = (data: Array<string | number>, category: TOptionsCategories) =>
-  data?.map((item: string | number) => ({ value: `${item}`, category }));
+export const collectData = (
+  data: Array<string | number>,
+  category: TOptionsCategories,
+  categoryText: TOptionsCategories,
+) => data?.map((item: string | number) => ({ value: `${item}`, category, categoryText }));
 
 export const collectUsernameData = (
   data: Array<{ pastelID: string; username: string }>,
   category: TOptionsCategories,
+  categoryText: TOptionsCategories,
 ) =>
   data?.map((item: { pastelID: string; username: string }) => ({
     value: `${item.username}`,
     category,
+    categoryText,
     pastelID: item.pastelID,
   }));
 
@@ -46,6 +60,5 @@ export const getRoute = (optionType: TOptionsCategories) => {
     [PASTEL_ID_LABEL]: ROUTES.PASTEL_ID_DETAILS,
     [USERNAME]: ROUTES.PASTEL_ID_DETAILS,
   };
-
   return routeTypes[optionType] || ROUTES.NOT_FOUND;
 };
diff --git a/src/components/SearchBar/SearchBar.styles.ts b/src/components/SearchBar/SearchBar.styles.ts
@@ -60,6 +60,38 @@ export const GridStyle = styled(Grid)`
   .MuiInputBase-input {
     font-size: 13px;
   }
+
+  @media (max-width: 1424px) and (min-width: 900px) {
+    &.autocomplete-focus {
+      position: absolute;
+      right: 76px;
+      width: 55vw;
+      max-width: 74vw;
+      background: ${props => props.theme.sidebar.menu.background};
+      z-index: 100;
+
+      .label-input {
+        max-width: 100%;
+        width: auto;
+      }
+    }
+  }
+
+  @media (max-width: 900px) and (min-width: 600px) {
+    &.autocomplete-focus {
+      position: absolute;
+      right: 76px;
+      width: 74vw;
+      max-width: 74vw;
+      background: ${props => props.theme.sidebar.menu.background};
+      z-index: 100;
+
+      .label-input {
+        max-width: 100%;
+        width: auto;
+      }
+    }
+  }
 `;
 
 export const AppBar = styled(MuiAppBar)`
@@ -68,6 +100,7 @@ export const AppBar = styled(MuiAppBar)`
   background: ${props => props.theme.sidebar.menu.background};
   color: ${props => props.theme.header.color};
   transition: min-height 0.5s ease-in;
+  z-index: 10;
 
   ${props => props.theme.breakpoints.up('md')} {
     max-width: 28%;