Merge pull request #156 from Aletheia-Data/development

release v2.0.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "App-Aletheia-data",
-  "version": "1.3.2",
+  "version": "2.0.0",
   "homepage": "/",
   "repository": {
     "type": "git",
@@ -62,7 +62,6 @@
     "typescript": "4.1.2",
     "web-vitals": "^0.2.4",
     "web3": "^1.6.1",
-    "web3.storage": "^3.5.3",
     "wretch": "^1.7.9",
     "yup": "^0.32.8"
   },
@@ -110,6 +109,8 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.3.0",
     "husky": "^7.0.4",
-    "prettier": "^2.5.0"
+    "prettier": "^2.5.0",
+    "react-rewards": "^2.0.4",
+    "web3.storage": "^3.5.7"
   }
 }

src/_start/helpers/GetCollectionPageColumns.tsx

@@ -92,8 +92,6 @@ export const getCollectionPageColumns = (
       {
         title: "Action",
         cells: data?.map((recordItem: Record) => {
-          console.log(recordItem);
-
           if (
             recordItem.status === "on_line" ||
             recordItem.status === "under_review"

src/_start/helpers/components/GetSinglePageColumns.tsx

@@ -2,9 +2,25 @@ import React from "react";
 import StatusBadge from "../../partials/components/StatusBadge";
 import moment from "moment";
 import { Ktsvg } from "_start/helpers";
-import { Record } from "_start/types";
+import { Record, NFT } from "_start/types";
 import { Link } from "react-router-dom";
+import { Magic } from "magic-sdk";
+import { ConnectExtension } from "@magic-ext/connect";
+import Web3 from "web3";
+import { CHAIN_ID } from "../../../app/contracts/config";
+import { POLYSCAN, OPENSEA } from "../../../setup/web3js";
 
+const customNodeOptions = {
+  rpcUrl: "https://rpc-mumbai.maticvigil.com/",
+  chainId: CHAIN_ID,
+};
+
+const magic = new Magic(`${process.env.REACT_APP_MAGIC_LINK_API_KEY}`, {
+  network: customNodeOptions,
+  locale: "en_US",
+  extensions: [new ConnectExtension()],
+});
+const web3 = new Web3(magic.rpcProvider);
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const getSinglePageColumns = (data: any) => {
   return [
@@ -57,3 +73,59 @@ export const getSinglePageColumns = (data: any) => {
     },
   ];
 };
+
+export const getSinglePageColumnsNFT = (user: string, data: any) => {
+  return [
+    {
+      title: "TX Hash",
+      cells: data?.map((recordItem: NFT) => {
+        const isOwner =
+          user.toLowerCase() === recordItem.txReceipt.from.toLowerCase();
+
+        return (
+          <a
+            key={`record-alexandria-${recordItem.cid}`}
+            className="text-gray-800 fw-bolder text-hover-primary fs-6"
+            href={`${POLYSCAN}/${recordItem.txReceipt.transactionHash}`}
+            target="_blank"
+          >
+            {recordItem.txReceipt.transactionHash}
+            {"  "}
+            {isOwner ? (
+              <span className="badge bg-danger" style={{ marginLeft: 5 }}>
+                Owned
+              </span>
+            ) : null}
+          </a>
+        );
+      }),
+    },
+    {
+      title: "Fecha Mint",
+      cells: data?.map((recordItem: NFT) => (
+        <span
+          key={`record-alexandria-${recordItem.cid}`}
+          className="text-primary fw-bolder d-block fs-6"
+        >
+          {moment(recordItem?.createdAt).format("DD/MM/YYYY")}
+        </span>
+      )),
+    },
+    {
+      title: "Action",
+      cells: data?.map((recordItem: NFT) => (
+        <a
+          key={`record-alexandria-${recordItem.cid}`}
+          className="btn btn-icon btn-bg-light  btn-color-muted btn-active-color-primary btn-sm"
+          href={`${OPENSEA}/${recordItem.txReceipt.events["Transfer"]["address"]}/${recordItem.txReceipt.events["Transfer"]["returnValues"].tokenId}`}
+          target="_blank"
+        >
+          <Ktsvg
+            className="svg-icon-4"
+            path="/media/icons/duotone/NFT/opensea.svg"
+          />
+        </a>
+      )),
+    },
+  ];
+};

src/_start/layout/components/Sidebar.tsx

@@ -4,14 +4,19 @@ import { SidebarGeneral, SidebarShop, SidebarUser } from "../../partials";
 import { useTheme } from "../core";
 import { toAbsoluteUrl } from "../../helpers";
 
-const BG_COLORS = ['bg-white', 'bg-info'];
+const BG_COLORS = ["bg-white", "bg-info"];
 
 type Props = {
-  props: any,
-  toogleMinisearch?: Function
+  props: any;
+  toogleMinisearch?: Function;
+  updateNFTList?: Function;
 };
 
-export const Sidebar: React.FC<Props> = ({ props, toogleMinisearch }) => {
+export const Sidebar: React.FC<Props> = ({
+  props,
+  toogleMinisearch,
+  updateNFTList,
+}) => {
   const { config, classes } = useTheme();
   const sidebarCSSClass = classes.sidebar;
   const sideBarRef = useRef<HTMLDivElement | null>(null);
@@ -21,14 +26,13 @@ export const Sidebar: React.FC<Props> = ({ props, toogleMinisearch }) => {
       return;
     }
 
-    BG_COLORS.forEach(cssClass => {
+    BG_COLORS.forEach((cssClass) => {
       sideBarRef.current?.classList.remove(cssClass);
-    })
+    });
 
-    sidebarCSSClass.forEach(cssClass => {
+    sidebarCSSClass.forEach((cssClass) => {
       sideBarRef.current?.classList.add(cssClass);
-    })
-
+    });
   }, [sidebarCSSClass]);
 
   return (
@@ -38,7 +42,11 @@ export const Sidebar: React.FC<Props> = ({ props, toogleMinisearch }) => {
           ref={sideBarRef}
           id="kt_sidebar"
           className="sidebar"
-          style={{ backgroundImage: `url(${toAbsoluteUrl("media/backgrounds/sidebar.png")})` }}
+          style={{
+            backgroundImage: `url(${toAbsoluteUrl(
+              "media/backgrounds/sidebar.png"
+            )})`,
+          }}
           data-kt-drawer="true"
           data-kt-drawer-name="sidebar"
           data-kt-drawer-activate="{default: true, lg: false}"
@@ -49,7 +57,13 @@ export const Sidebar: React.FC<Props> = ({ props, toogleMinisearch }) => {
         >
           {/* begin::Sidebar Content */}
           <div className="d-flex flex-column sidebar-body">
-            {config.sidebar.content === "general" && <SidebarGeneral props={props} toogleMinisearch={toogleMinisearch} />}
+            {config.sidebar.content === "general" && (
+              <SidebarGeneral
+                props={props}
+                toogleMinisearch={toogleMinisearch}
+                updateNFTList={updateNFTList}
+              />
+            )}
             {config.sidebar.content === "shop" && (
               <SidebarShop sidebarRef={sideBarRef} />
             )}
@@ -60,4 +74,4 @@ export const Sidebar: React.FC<Props> = ({ props, toogleMinisearch }) => {
       )}
     </>
   );
-}
+};

src/_start/layout/components/header/Topbar.tsx

@@ -13,8 +13,14 @@ import * as auth from "../../../../app/modules/auth/redux/AuthRedux";
 import { Magic } from "magic-sdk";
 import { ConnectExtension } from "@magic-ext/connect";
 import Web3 from "web3";
+import { CHAIN_ID } from "app/contracts/config";
+const customNodeOptions = {
+  rpcUrl: "https://rpc-mumbai.maticvigil.com/",
+  chainId: CHAIN_ID,
+};
+
 const magic = new Magic(`${process.env.REACT_APP_MAGIC_LINK_API_KEY}`, {
-  network: "mainnet",
+  network: customNodeOptions,
   locale: "en_US",
   extensions: [new ConnectExtension()],
 });