Merge branch 'development/juan/DEW-106/dagexplorer-snapshot-fees-upda…

…te' into deploy/staging

src/components/InfoRowsCard/component.module.scss

@@ -11,6 +11,51 @@
   border-radius: 12px;
   border: 1px solid #d1d5db;
 
+  &.border-record {
+    display: grid;
+
+    grid-template-columns: 1fr;
+    grid-auto-rows: 64px;
+    row-gap: 0px;
+    padding: 0px;
+
+    @include respond-below(md){
+      grid-auto-rows: 1fr;
+    }
+
+    .row {
+      display: grid;
+
+      grid-template-columns: 159px 1fr;
+      column-gap: 32px;
+      padding: 0px 22px;
+      align-items: center;
+
+      border-bottom: 1px solid #e8ebfb;
+
+      @include respond-below(md) {
+        padding: 10px 22px;
+        grid-template-columns: 1fr;
+        grid-auto-rows: 1fr;
+      }
+
+      &:last-child {
+        border: none;
+      }
+    }
+
+    .label {
+      //styleName: text-lausanne-sm/leading-5/font-medium;
+      font-family: Lausanne;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+      letter-spacing: 0.1599999964237213px;
+      text-align: left;
+      color: #4b5563;
+    }
+  }
+
   .row {
     display: flex;
     width: 100%;
@@ -37,6 +82,13 @@
     }
   }
 
+  .content {
+    display: flex;
+
+    flex-flow: row nowrap;
+    align-items: center;
+  }
+
   a {
     color: #363bd3;
   }

src/components/InfoRowsCard/component.tsx

@@ -9,15 +9,21 @@ export type IInfoRow = {
   content: React.ReactNode;
 };
 
-export type IInfoRowsCardProps = { className?: string; rows: IInfoRow[] };
+export type IInfoRowsCardProps = { className?: string; variants?: 'border-record'[]; rows: IInfoRow[] };
 
-export const InfoRowsCard = ({ className, rows }: IInfoRowsCardProps) => {
+export const InfoRowsCard = ({ className, variants, rows }: IInfoRowsCardProps) => {
   return (
-    <div className={clsx(styles.main, className)}>
+    <div
+      className={clsx(
+        styles.main,
+        className,
+        variants?.map((v) => styles[v])
+      )}
+    >
       {rows.map((row, idx) => (
         <div key={idx} className={styles.row}>
           <span className={styles.label}>
-            <div className={styles.icon}>{row.icon}</div>
+            {row.icon && <div className={styles.icon}>{row.icon}</div>}
             {row.label}
           </span>
           <span className={styles.content}>{row.content}</span>

src/routes.tsx

@@ -12,6 +12,7 @@ import { NodeExplorerWrapper } from './views/NodeExplorerView/NodeExplorerWrappe
 import { Search } from './components/Search/Search';
 import { MetagraphsView } from './views/MetagraphsView/view';
 import { MetagraphDetailsView } from './views/MetagraphsView/views';
+import { MetagraphSnapshotDetailsView } from './views/MetagraphsView/views/MetagraphSnapshotDetailsView/view';
 
 export const router = createBrowserRouter([
   {
@@ -33,7 +34,7 @@ export const router = createBrowserRouter([
       { path: 'metagraphs/:metagraphId/snapshots', element: <SnapshotsWrapper /> },
 
       { path: 'snapshots/:snapshotHeight', element: <SnapshotDetailsWrapper /> },
-      { path: 'metagraphs/:metagraphId/snapshots/:snapshotHeight', element: <SnapshotDetailsWrapper /> },
+      { path: 'metagraphs/:metagraphId/snapshots/:snapshotOrdinal', element: <MetagraphSnapshotDetailsView /> },
 
       { path: 'blocks/:blockHash', element: <BlockDetailsWrapper /> },
       { path: 'metagraphs/:metagraphId/blocks/:blockHash', element: <BlockDetailsWrapper /> },

src/views/MetagraphsView/views/MetagraphDetailsView/view.tsx

@@ -80,13 +80,13 @@ export const MetagraphDetailsView = () => {
             {
               icon: <FlowDataIcon />,
               label: 'Metagraph ID',
-              content: <Link to={`/addresses/${metagraphId}`}>{shorten(metagraphId, 8, 8)}</Link>,
+              content: <Link to={`/address/${metagraphId}`}>{shorten(metagraphId, 8, 8)}</Link>,
             },
             {
               icon: <WalletIcon />,
               label: 'Staking',
               content: (
-                <Link to={`/addresses/${metagraph.data?.metagraphStakingWalletAddress}`}>
+                <Link to={`/address/${metagraph.data?.metagraphStakingWalletAddress}`}>
                   {shorten(metagraph.data?.metagraphStakingWalletAddress, 8, 8)}
                 </Link>
               ),
@@ -95,7 +95,7 @@ export const MetagraphDetailsView = () => {
               icon: <WalletIcon />,
               label: 'Snapshot fees',
               content: (
-                <Link to={`/addresses/${metagraph.data?.metagraphFeesWalletAddress}`}>
+                <Link to={`/address/${metagraph.data?.metagraphFeesWalletAddress}`}>
                   {shorten(metagraph.data?.metagraphFeesWalletAddress, 8, 8)}
                 </Link>
               ),
@@ -199,8 +199,8 @@ export const MetagraphDetailsView = () => {
                     ` ${metagraph.data?.metagraphSymbol}`,
                   source: (value, record) => (
                     <div className={styles.fromToTransaction}>
-                      <Link to={`/addresses/${value}`}>From: {shorten(value)}</Link>
-                      <Link to={`/addresses/${record.destination}`}>To: {shorten(record.destination)}</Link>
+                      <Link to={`/address/${value}`}>From: {shorten(value)}</Link>
+                      <Link to={`/address/${record.destination}`}>To: {shorten(record.destination)}</Link>
                     </div>
                   ),
                   amount: (value) =>

src/views/MetagraphsView/views/MetagraphSnapshotDetailsView/view.module.scss

@@ -0,0 +1,99 @@
+@use '../../../../styles/breakpoints' as *;
+
+.main {
+  display: flex;
+  width: 100%;
+
+  flex-flow: column nowrap;
+  align-items: center;
+
+  a {
+    color: #174cd3;
+  }
+
+  h3 {
+    width: 100%;
+    margin: 0px;
+
+    //styleName: text-lausanne-xl/leading-7/font-medium;
+    font-family: Lausanne;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 28px;
+    text-align: left;
+    color: #0a0d14;
+  }
+
+  .snapshotData {
+    display: grid;
+    width: 100%;
+
+    grid-template-columns: 1fr 1fr;
+    column-gap: 32px;
+
+    @include respond-below(md) {
+      grid-template-columns: 1fr;
+      grid-auto-rows: min-content;
+      row-gap: 24px;
+    }
+
+    .detailLink {
+      display: flex;
+
+      flex-flow: row nowrap;
+      align-items: center;
+      column-gap: 12px;
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .metagraphName {
+      display: flex;
+
+      flex-flow: row nowrap;
+      align-items: center;
+      column-gap: 8px;
+
+      img {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .snapshotTimestamp {
+      display: flex;
+
+      flex-flow: column nowrap;
+
+      .relative {
+        //styleName: text-mono-sm/leading-5/font-regular;
+        font-family: IBM Plex Mono;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        text-align: left;
+        color: #171a24;
+      }
+
+      .absolute {
+        //styleName: text-mono-xs/leading-4/font-regular;
+        font-family: IBM Plex Mono;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 16px;
+        text-align: left;
+        color: #6b7280;
+      }
+    }
+  }
+
+  .tables {
+    display: flex;
+    width: 100%;
+
+    flex-flow: column nowrap;
+  }
+}