diff --git a/package.json b/package.json index 9900994..d728255 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "react-error-boundary": "^3.1.4", "react-flippy": "^1.1.0", "react-helmet": "^6.1.0", + "react-html5video": "^2.5.1", "react-infinite-scroll-component": "^6.1.0", "react-lazy-load-image-component": "^1.5.1", "react-lazyload": "^3.2.0", diff --git a/src/components/AssetImageFigure/index.js b/src/components/AssetImageFigure/index.js index 4469eb4..e6d4398 100644 --- a/src/components/AssetImageFigure/index.js +++ b/src/components/AssetImageFigure/index.js @@ -9,7 +9,7 @@ const AssetImageFigure = ({ asset, setShow, show_trigger, width, no_figure, clas <> { no_figure ? ( - + {asset.details.onchainMetadata.name} ) : setShow ? (
setShow(show_trigger ? show_trigger : false)} style={{ cursor: "pointer" }}> diff --git a/src/components/CollectionBanner/index.js b/src/components/CollectionBanner/index.js index 88183d3..a72f1ed 100644 --- a/src/components/CollectionBanner/index.js +++ b/src/components/CollectionBanner/index.js @@ -139,10 +139,11 @@ const CollectionBanner = ({thisCollection, size, asset, is_collection_page, is_a

Floor price

- ₳{ + ₳{numFormatter( thisCollection.opencnft.reduce(function (result, policy){ return Math.min(result, policy.floor_price) - },999999*1000000)/1000000}

+ },999999*1000000)/1000000) + }

@@ -151,10 +152,10 @@ const CollectionBanner = ({thisCollection, size, asset, is_collection_page, is_a

Total assets

- { + {numFormatter( thisCollection.opencnft.reduce(function (result, policy){ return result + policy.asset_minted - },0) + },0)) }

@@ -165,10 +166,10 @@ const CollectionBanner = ({thisCollection, size, asset, is_collection_page, is_a

Number owners

- { + {numFormatter( thisCollection.opencnft.reduce(function (result, policy){ return result + policy.asset_holders - },0) + },0)) }

diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index bfac4ff..a12a1da 100644 --- a/src/components/Navbar/index.js +++ b/src/components/Navbar/index.js @@ -18,8 +18,8 @@ const Navbar = () => {
- - Explore + + Marketplace
@@ -34,10 +34,14 @@ const Navbar = () => {
- + About Us - - +
diff --git a/src/components/VideoPlayer/index.jsx b/src/components/VideoPlayer/index.jsx new file mode 100644 index 0000000..1cbef98 --- /dev/null +++ b/src/components/VideoPlayer/index.jsx @@ -0,0 +1,10 @@ +import videoConnect from "react-html5video"; +import "react-html5video/dist/styles.css"; + +const VideoPlayer = ({ video, videoEl, children, ...restProps }) => ( +
+ +
+); + +export default videoConnect(VideoPlayer); diff --git a/src/database/assets.js b/src/database/assets.js index b531236..c047e57 100644 --- a/src/database/assets.js +++ b/src/database/assets.js @@ -192,8 +192,8 @@ export const getLockedAssets = async (count = 100, lastVisible) => { const reference = await query( collection(firestore, "assets"), where("status.locked", "==", true), - orderBy("status.submittedOn"), - startAfter(lastVisible?.status?.submittedOn ?? 0), + orderBy("status.submittedOn", "desc"), + startAfter(lastVisible?.status?.submittedOn ?? Number.MAX_VALUE), limit(count) ); diff --git a/src/database/collections.js b/src/database/collections.js index d5a9be3..23d3dff 100644 --- a/src/database/collections.js +++ b/src/database/collections.js @@ -53,3 +53,134 @@ export const setCollectionCreator = async (address, percentage, policyId) => { export const setCollectionStatus = async (verified: Boolean, policyId) => { await saveCollection({ verified }, policyId); }; + + +/* get opencnft */ + +export const saveOpencnft = async (data, key) => { + try { + if (data) { + const reference = doc(firestore, "opencnft", key); + await setDoc(reference, data, { merge: true }); + } + } catch (error) { + console.error( + `Unexpected error in saveCollection. [Message: ${error.message}]` + ); + throw error; + } +}; + +export const getOpencnftTopProjects = async (time) => { + try { + + let time_outdated = 60 * 60 * 1000; // every hour + let time_now = new Date().getTime(); + + const reference = doc(firestore, "opencnft", "_top_projects_"+time); + const snapshot = await getDoc(reference); + + let return_top_projects = false; + let backup_return_top_projects = false + + if (snapshot.exists()){ + let data = snapshot.data(); + // console.log("gotten data", data); + // console.log("get existing top projects", time_now, data.last_updated, (time_now - data.last_updated) < time_outdated); + if((time_now - data.last_updated) < time_outdated){ + return_top_projects = data.rankings; + }else{ + backup_return_top_projects = data.rankings; + } + } + + if(return_top_projects == false){ + const top_projects = await fetch(`https://api.opencnft.io/1/rank?window=${time}` , {}) + .then((res) => res.json()) + .then((res) => { + return res.ranking ? res.ranking : res; + }) + .catch((err) => { + return false; + }); + if(top_projects){ + let to_db = { + last_updated: time_now, + rankings: top_projects + } + + await saveOpencnft(to_db, "_top_projects_"+time); + return_top_projects = top_projects; + } + else if(backup_return_top_projects){ // for some reason opencnft is down, but lucky we have records in our own database + return_top_projects = backup_return_top_projects; + } + } + return return_top_projects; + + } catch (error) { + console.error( + `Unexpected error in getOpencnft. [Message: ${error.message}]` + ); + throw error; + } +}; + +export const getOpencnftPolicy = async (policy_id) => { + try { + + let time_outdated = 60 * 60 * 1000; // every hour + let time_now = new Date().getTime(); + + const reference = doc(firestore, "opencnft", "policy_"+policy_id); + const snapshot = await getDoc(reference); + + let return_project_stats = false; + let backup_return_project_stats = false + + if (snapshot.exists()){ + let data = snapshot.data(); + // console.log("gotten data", data); + if((time_now - data.last_updated) < time_outdated){ + // console.log("get existing opencnft data", time_now, data.last_updated, (time_now - data.last_updated) < time_outdated); + return_project_stats = data.rankings; + }else{ + backup_return_project_stats = data.rankings; + } + } + + if(return_project_stats == false){ + + const project_stats = await fetch(`https://api.opencnft.io/1/policy/${policy_id}`, {}) + .then((res) => res.json()) + .then((res) => { + return res; + }) + .catch((err) => { + return false; + }); + + if(project_stats){ + let to_db = { + last_updated: time_now, + rankings: project_stats + } + + await saveOpencnft(to_db, "policy_"+policy_id); + // console.log("updated opencnft collection", policy_id); + return_project_stats = project_stats; + } + else if(backup_return_project_stats){ // for some reason opencnft is down, but lucky we have records in our own database + return_project_stats = backup_return_project_stats; + } + + } + return return_project_stats; + + } catch (error) { + console.error( + `Unexpected error in getOpencnft. [Message: ${error.message}]` + ); + throw error; + } +}; diff --git a/src/hooks/usePolicyMetadatas.js b/src/hooks/usePolicyMetadatas.js index 1ad0d7a..1eea503 100644 --- a/src/hooks/usePolicyMetadatas.js +++ b/src/hooks/usePolicyMetadatas.js @@ -17,19 +17,26 @@ export const usePolicyMetadatas = (policyIds) => { }) ); + let validMetadatas = []; + if (metadatas.length === 1) { if (metadatas[0].statusCode === 404) { console.log( "usePolicyMetadatas: this collection is not in opencnft", policyIds ); + validMetadatas.push({policy: policyIds[0]}); } } - const validMetadatas = metadatas.filter( - (metadata) => metadata.policy !== undefined - ); + if(validMetadatas.length==0){ + validMetadatas = metadatas.filter( + (metadata) => metadata.policy !== undefined + ); + } + setPolicyMetadatas(validMetadatas); + } catch (error) { // console.error( // `Unexpected error in usePolicyMetadatas. [Message: ${error.message}]` diff --git a/src/pages/About/index.js b/src/pages/About/index.js index 55515d4..ed47b6d 100644 --- a/src/pages/About/index.js +++ b/src/pages/About/index.js @@ -128,6 +128,7 @@ const About = () => {
  • Handle Audio & Video Assets.
  • +
  • Add Support for More Wallets (GeroWallet, ccvault.io...).
  • Build The Martify Backend APIs.
  • Implement Trading & Bundle Swaps for NFTs.
  • Enable Buying & Selling NFTs Using Native Tokens.
  • @@ -150,7 +151,7 @@ const About = () => {
    • Implement On-Chain Auctions & Bidding.
    • -
    • Add Support to More Wallets (Yoroi, ccvault.io...).
    • +
    • Add Support for More Wallets (Yoroi...).
    • Create & Launch a Stake Pool for Martify.
    • Write a Whitepaper for Smart Contract On-Chain Governance. diff --git a/src/pages/Account/AllAssets.js b/src/pages/Account/AllAssets.js index 7ff986b..b9cca45 100644 --- a/src/pages/Account/AllAssets.js +++ b/src/pages/Account/AllAssets.js @@ -258,7 +258,7 @@ const NoAssetFound = ({ state_wallet }) => {

      No assets

      Looks like your wallet is empty,{" "} - start browsing! + Start browsing marketplace!

      ) : ( diff --git a/src/pages/Account/Holdings.js b/src/pages/Account/Holdings.js index 1f8dafd..c3bb5a0 100644 --- a/src/pages/Account/Holdings.js +++ b/src/pages/Account/Holdings.js @@ -248,7 +248,7 @@ const NoAssetFound = ({ state_wallet }) => {

      No assets

      Looks like your wallet is empty,{" "} - start browsing! + Start browsing marketplace!

      ) : ( diff --git a/src/pages/Asset/index.js b/src/pages/Asset/index.js index b86bc03..be149ae 100644 --- a/src/pages/Asset/index.js +++ b/src/pages/Asset/index.js @@ -1,8 +1,10 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useRef } from "react"; import { useSelector, useDispatch } from "react-redux"; import { Link, useParams } from "react-router-dom"; import Moment from "react-moment"; import SweetAlert from "react-bootstrap-sweetalert"; +import { DefaultPlayer as Video } from "react-html5video"; +import "react-html5video/dist/styles.css"; import { urls } from "config"; import { @@ -254,21 +256,30 @@ const Listing = ({ purchase_token, asset_add_offer, }) => { - let is_owner = false; - if (asset.details.asset in state_wallet.data.assets) { - is_owner = true; - } - if (asset.status && state_wallet.connected) { - if (asset.status.locked) { - if (asset.status.submittedBy === state_wallet.data.address) { - is_owner = true; + const [isOwner, setIsOwner] = useState(false); + + useEffect(() => { + if (asset.details.asset in state_wallet.data.assets) { + setIsOwner(true); + } else if (asset.status && state_wallet.connected) { + if (asset.status.locked) { + if (asset.status.submittedBy === state_wallet.data.address) { + setIsOwner(true); + } } + } else { + setIsOwner(false); } - } + }, [ + asset, + state_wallet.connected, + state_wallet.data.address, + state_wallet.data.assets, + ]); return (
      - {is_owner ? ( + {isOwner ? ( { }; const AssetImage = ({ asset }) => { + const mediaPlayerRef = useRef(); const [show, setShow] = useState(false); const [contentType, setContentType] = useState("image"); const [contentSource, setContentSource] = useState(null); useEffect(() => { // detect html, require cleaning - if(asset&&show&&contentSource==null){ + if (asset && show && contentSource == null) { setContentSource(false); let ipfs_root = "https://infura-ipfs.io/ipfs/"; - if(asset.details.onchainMetadata.files){ - if(asset.details.onchainMetadata.files.length){ + if (asset.details.onchainMetadata.files) { + if (asset.details.onchainMetadata.files.length) { let thisContentType = false; - if(asset.details.onchainMetadata.files[0].mediaType == "text/html"){ + if ( + asset.details.onchainMetadata.files[0].mediaType === "text/html" + ) { thisContentType = "html"; - } - else if(asset.details.onchainMetadata.files[0].mediaType == "audio/mpeg"){ + } else if ( + asset.details.onchainMetadata.files[0].mediaType === "audio/mpeg" || + asset.details.onchainMetadata.files[0].mediaType === "audio/wave" || + asset.details.onchainMetadata.files[0].mediaType === "audio/wav" || + asset.details.onchainMetadata.files[0].mediaType === "audio/x-wav" || + asset.details.onchainMetadata.files[0].mediaType === "audio/x-pn-wav" || + asset.details.onchainMetadata.files[0].mediaType === "audio/webm" || + asset.details.onchainMetadata.files[0].mediaType === "audio/ogg" + ) { thisContentType = "audio"; + } else if ( + asset.details.onchainMetadata.files[0].mediaType === "video/mp4" || + asset.details.onchainMetadata.files[0].mediaType === "video/webm" || + asset.details.onchainMetadata.files[0].mediaType === "video/ogg" + ) { + thisContentType = "video"; } - if(thisContentType!="image"){ + if (thisContentType !== "image") { setContentType(thisContentType); - // prepare src link - if(asset.details.onchainMetadata.files[0].src.includes("ipfs://")){ - let s = ipfs_root + asset.details.onchainMetadata.files[0].src.split("ipfs://")[1]; - setContentSource(s); - }else{ - let s = ipfs_root + asset.details.onchainMetadata.files[0].src; - setContentSource(s); + const src = typeof asset.details.onchainMetadata.files[0].src === "string" + ? asset.details.onchainMetadata.files[0].src + : asset.details.onchainMetadata.files[0].src[0]; + + if (src.includes("ipfs://")) { + setContentSource(ipfs_root + src.split("ipfs://")[1]); + } else { + setContentSource(ipfs_root + src); } } - } + } } } - - }, [asset, show]); - + }, [asset, contentSource, show]); + + useEffect(() => { + if (show === false && mediaPlayerRef.current !== undefined) { + if (contentType === "audio") { + mediaPlayerRef.current.pause(); + mediaPlayerRef.current.currentTime = 0; + } else if (contentType === "video") { + mediaPlayerRef.current.videoEl.pause(); + mediaPlayerRef.current.videoEl.currentTime = 0; + } + } + }, [contentType, show]); + return (
      -
      setShow(false)}>
      +
      { + setShow(false); + }} + >
      - { - contentType === "html" && contentSource ? - - : - // contentType == "audio" && contentSource ? - // - // : - - } + {contentType === "html" && contentSource ? ( + + ) : contentType === "audio" && contentSource ? ( +
      +

      + +

      + +
      + ) : contentType === "video" && contentSource ? ( +
      + +
      + ) : ( + <> +

      + +

      + + )}
      diff --git a/src/pages/Asset/style.css b/src/pages/Asset/style.css index 50f2fc2..1bc03dc 100644 --- a/src/pages/Asset/style.css +++ b/src/pages/Asset/style.css @@ -21,3 +21,14 @@ .asset .image img{ object-fit: contain; } + +.asset .rh5v-Volume_icon { + padding: 4px; +} + +.asset audio { + max-width: none; + margin-left: 1rem; + width: calc(100% - 2rem); + transform: translateY(calc(-100% - 1rem)); +} \ No newline at end of file diff --git a/src/pages/Collection/ListingSection.js b/src/pages/Collection/ListingSection.js index 17d45ed..bf015aa 100644 --- a/src/pages/Collection/ListingSection.js +++ b/src/pages/Collection/ListingSection.js @@ -16,7 +16,7 @@ const ListingSection = ({ state_collection, policyIds }) => { const [lastVisible, setLastVisible] = useState(null); const [paginationObject, setPaginationObject] = useState(undefined); const [policyMetadatas, loadingData] = usePolicyMetadatas(policyIds); - + const resetComponentState = useCallback(() => { if (policyMetadatas.length > 0) { let tmpPaginationObject = {}; diff --git a/src/pages/Collection/index.js b/src/pages/Collection/index.js index 0d3d8eb..e66e221 100644 --- a/src/pages/Collection/index.js +++ b/src/pages/Collection/index.js @@ -62,7 +62,7 @@ const Collection = () => { if (currentCollectionIterator.hasOwnProperty("policy_id")) { setPolicyIds([currentCollectionIterator.policy_id]); } - + for (let policyIdx in policy_ids) { let policy_id = policy_ids[policyIdx]; dispatch( diff --git a/src/pages/GuideBuy/index.js b/src/pages/GuideBuy/index.js index 069f7b6..bb7ce02 100644 --- a/src/pages/GuideBuy/index.js +++ b/src/pages/GuideBuy/index.js @@ -1,101 +1,107 @@ -import React from "react"; -// import image_3_collateral from './step3-collateral.png'; -// import image_3_collateral2 from './step3-collateral2.png'; -// import image_4_assetpage from './step4-asset-page.png'; - -const GuideBuy = () => { - return ( -
      -
      -

      Buying

      -

      - Learn how to purchase your first NFT -

      -
      - -
      -

      Overview

      -
        -
      1. Buy cryptocurrency: Join a cryptocurrency exchange like Coinbase and fund your account with ADA.
      2. -
      3. Setup a cryptocurrency wallet: Signup for a "Non-custodial" wallet like Nami Wallet, which is where you can store and control your cryptocurrency and digital assets. Transfer your ADA coins from Coinbase to your wallet, which gives you the control to purchase NFTs across the various NFT marketplaces.
      4. -
      5. Connect Nami Wallet on Martify and add collateral: That is easy!
      6. -
      7. Purchase your first NFT: Purchasing your first NFT on Martify.
      8. -
      - -

      Step 1: Acquiring Cardano (ADA) cryptocurrency

      - {/*

      Overview: Step 1

      */} -
        -
      1. Join a cryptocurrency exchange: Join a cryptocurrency exchange like Coinbase or Binance to purchase, store, and transfer your cryptocurrency. Coinbase recommends a minimum of $50 to get started.
      2. -
      3. Send in required documents: Just like any standard trading platforms, you will need to be approved to begin buying and selling cryptocurrency. Send in your required documents and sync a payment source.
      4. -
      5. Buy ADA coins: ADA coin is a cryptocurrency that is part of the Cardano blockchain, which is the system and currency used to purchase and store NFTs.
      6. -
      - -

      Your first step on this NFT journey is purchasing cryptocurrency in the form of ADA. ADA is the cryptocurrency that coincides with the Cardano network and is what is used when purchasing NFTs on the Cardano network. The purchase of ADA will allow you to make bids on and purchase NFTs through various NFT marketplaces.

      - -

      To purchase ADA, you will need to join a centralized exchange such as Coinbase. Coinbase is an exchange where one can purchase, buy, sell, convert, and send cryptocurrency. In a way, Coinbase is like how one would interact with the stock market. If you are familiar with stock trading platforms, you will be extremely comfortable in Coinbase.

      -

      Coinbase is quick to set up, but you may need a few days before everything is approved. Coinbase needs Identity Documentation such as a passport or driver’s license and then approval of a Payment Method.

      - -

      Step 2: Setup a cryptocurrency wallet

      - {/*

      Overview: Step 2

      */} -
        -
      1. Download a cryptocurrency wallet: Download the Nami Wallet browser extension, which will be your own personal "digital wallet". With Nami Wallet, you get to store and use your cryptocurrency and digital assets (like NFTs).
      2. -
      3. Setup Nami Wallet: Write down and confirm your seed phrase, and input a new password.
      4. -
      5. Fund your Nami Wallet: Transfer your ADA from Coinbase to Nami Wallet.
      6. -
      - -

      Now that you have purchased your ADA coins, you may want to put them into action, like purchasing an NFT from Martify or any of the various Cardano NFT marketplaces. To do so, you need a "Non-Custodial" wallet such as Nami Wallet. "Non-Custodial" wallets give you complete control over your crypto assets, as there is no third party involved. You cannot simply take your ADA coin from Coinbase to make purchases on an NFT marketplace as Coinbase is still technically controlling your assets. Once you transfer your currency from Coinbase to your wallet, you are free to do as you please!

      - -

      Go to Nami Wallet to download the browser extension. Important: To avoid any scam, we recommend you to visit their official page and then select the desired browser type to install the application. If you click on Chrome, you will be automatically taken to the Google Chrome web store. Click "Add extension" and it will be downloaded and installed. Once installed, you will be able to view the Nami Wallet icon (a blue "N") in the top right corner of your browser.

      - -

      If you open up the Nami Wallet for the first time. Make sure no one is watching your screen and click on "New Wallet". Then, it will show you 24-words sequence, these words are called "seed phrase", these sequence of words are the access to your wallet. Remember, this must be hidden and never shared with anyone. Do not take a picture or screenshot of your seed phrase. Instead, write it down immediately on a piece of paper and put it in a secret and safe location. Even better, write your seed phrase down on 2-3 pieces of paper and store each paper in a separate secure location (like one in a personal safe and one in a bank safety deposit box). Alternatively, you can download the seed phrase and keep it offline on an encrypted hard drive. Having multiple backups of your seed phrase is good practice just in case one copy is ever lost or destroyed. After documenting your seed phrase, click "Next".

      - -

      Nami Wallet will prompt you to input all those words in the next step. You confirm your seed phrase in the correct order of your 24-word sequence. You will also be prompt to input a password, which is needed whenever you have to sign a transaction. You can now access your Nami Wallet via "N" icon in your browser and begin purchasing and receiving crypto. If you already have ADA in your Coinbase, you can use your brand new Cardano address to transfer them over into your Nami Wallet.

      - -

      Now that you have your Nami Wallet, you will want to transfer your funds out of Coinbase. You need to get your wallet address, by clicking on the "Receive" button, you can copy your Cardano address. If you are using Coinbase on your smartphone, you can also scan the QR code from the Coinbase application. Important: you must send your ADA via the Cardano network. It would take a few minutes to get your ADA transfer from Coinbase to your Nami Wallet.

      - -

      Step 3: Connect Nami Wallet on Martify and add collateral

      - - {/*

      Overview: Step 3

      */} -
        -
      1. Connect wallet: Click on connect and allow access.
      2. -
      3. Add collateral: Deposit 5₳ as collateral from Nami Wallet.
      4. -
      - -

      You have purchased your ADA coins, and transferred it to your Nami Wallet, now you are ready to browse and purchase some NFTs on the marketplace. Click on "Connect" on the top right corner. It should recognized that you have Nami Wallet installed and it will prompt your for access on the first time. If it does not, you may have to restart your web browser. Click on "Access" to allow Martify to connect to your Nami Wallet. No transaction will take place until you decided to make a purchase and provided your signature.

      - -

      The Nami Wallet allows you to deposit a fixed amount (5₳) as collateral to avoid any circumstances that arise due to contract failure. In the event of a contract failure, a collateral is taken to cover the blockchain resources used by the node to verify the contract. That means collateral aims to secure the network and avoid network failure. When a script runs successfully, the collateral is not taken. The chances of losing the collateral are very low; however, Nami seeks to minimize the risk by only allowing a determined amount (5₳) of collateral to be used. In a worst case scenario, malicious, or poorly built dApps, would only be able to take this amount. To deposit tokens into collateral, go to the Setting tab, and click on Collateral. A window will pop up where you need to enter your wallet’s password to confirm the process. At any time, you can remove the collateral by clicking on the "Remove" button.

      - - {/*
      -
      -
      - -
      -
      -
      -
      - -
      -
      -
      */} - -

      Step 4: Purchase your first NFT

      - - {/*

      Overview: Step 4

      */} - - {/*
      - -
      */} - -
        -
      1. Browse NFTs: Browse the explore page.
      2. -
      3. Make the transaction: Click on Buy Now to confirm the transaction.
      4. -
      - -

      Start by browsing listed assets on the explore page, there you can sort the assets by price or filter by the projects you are interested in. Clicking on the the asset will bring you to the asset page, here you can see the asset's metadata, past transactions on all marketplaces, as well as the current listing price. Click on "Buy Now", your Nami Wallet will prompt you for your password. Sign it to approve the transaction and the NFT will be in your Nami Wallet in a few minutes. If your "Buy Now" button is disabled, check that you have connected your wallet and added the collateral.

      - -
      -
      - ); -}; - -export default GuideBuy; +import React from "react"; +// import image_3_collateral from './step3-collateral.png'; +// import image_3_collateral2 from './step3-collateral2.png'; +// import image_4_assetpage from './step4-asset-page.png'; + +const GuideBuy = () => { + return ( +
      +
      +

      Buying

      +

      + Learn how to purchase your first NFT +

      +
      + +
      +

      Overview

      +
        +
      1. Buy cryptocurrency: Join a cryptocurrency exchange like Coinbase and fund your account with ADA.
      2. +
      3. Setup a cryptocurrency wallet: Signup for a "Non-custodial" wallet like Nami Wallet, GeroWallet or ccvault.io, which is where you can store and control your cryptocurrency and digital assets. Transfer your ADA coins from Coinbase to your wallet, which gives you the control to purchase NFTs across the various NFT marketplaces.
      4. +
      5. Connect your wallet (Nami Wallet, GeroWallet, ccvault.io...) on Martify and add collateral: That is easy!
      6. +
      7. Purchase your first NFT: Purchasing your first NFT on Martify.
      8. +
      + +

      Step 1: Acquiring Cardano (ADA) cryptocurrency

      + {/*

      Overview: Step 1

      */} +
        +
      1. Join a cryptocurrency exchange: Join a cryptocurrency exchange like Coinbase or Binance to purchase, store, and transfer your cryptocurrency. Coinbase recommends a minimum of $50 to get started.
      2. +
      3. Send in required documents: Just like any standard trading platforms, you will need to be approved to begin buying and selling cryptocurrency. Send in your required documents and sync a payment source.
      4. +
      5. Buy ADA coins: ADA coin is a cryptocurrency that is part of the Cardano blockchain, which is the system and currency used to purchase and store NFTs.
      6. +
      + +

      Your first step on this NFT journey is purchasing cryptocurrency in the form of ADA. ADA is the cryptocurrency that coincides with the Cardano network and is what is used when purchasing NFTs on the Cardano network. The purchase of ADA will allow you to make bids on and purchase NFTs through various NFT marketplaces.

      + +

      To purchase ADA, you will need to join a centralized exchange such as Coinbase. Coinbase is an exchange where one can purchase, buy, sell, convert, and send cryptocurrency. In a way, Coinbase is like how one would interact with the stock market. If you are familiar with stock trading platforms, you will be extremely comfortable in Coinbase.

      +

      Coinbase is quick to set up, but you may need a few days before everything is approved. Coinbase needs Identity Documentation such as a passport or driver’s license and then approval of a Payment Method.

      + +

      Step 2: Setup a cryptocurrency wallet

      + {/*

      Overview: Step 2

      */} +
        +
      1. Download a cryptocurrency wallet: Download one of the browser extension which will be your own personal "digital wallet" :
        + Nami Wallet (Chrome, Brave and Edge compatible),
        + GeroWallet (Chrome, Brave and Edge compatible) or
        + ccvault.io (Chrome, Brave, Edge and Opera compatible).
        + With your "digital wallet", you get to store and use your cryptocurrency and digital assets (like NFTs).
      2. +
      3. Setup your wallet: Write down and confirm your seed phrase, and input a new password.
      4. +
      5. Fund your wallet: Transfer your ADA from Coinbase to your wallet.
      6. +
      + +

      Now that you have purchased your ADA coins, you may want to put them into action, like purchasing an NFT from Martify or any of the various Cardano NFT marketplaces. To do so, you need a "Non-Custodial" wallet such as Nami Wallet, GeroWallet or ccvault.io. "Non-Custodial" wallets give you complete control over your crypto assets, as there is no third party involved. You cannot simply take your ADA coin from Coinbase to make purchases on an NFT marketplace as Coinbase is still technically controlling your assets. Once you transfer your currency from Coinbase to your wallet, you are free to do as you please!

      + +

      Go to Nami Wallet, GeroWallet or ccvault or to download the browser extension. Important: To avoid any scam, we recommend you to visit their official page and then select the desired browser type to install the application. If you click on Chrome, you will be automatically taken to the Google Chrome web store. Click "Add extension" and it will be downloaded and installed. Once installed, you will be able to view the wallet icon (a blue "N" for Nami Wallet) in the top right corner of your browser.

      + +

      The following instructions (for Nami Wallet) apply more or less to all wallets.

      + +

      If you open up the Nami Wallet for the first time. Make sure no one is watching your screen and click on "New Wallet". Then, it will show you 24-words sequence, these words are called "seed phrase", these sequence of words are the access to your wallet. Remember, this must be hidden and never shared with anyone. Do not take a picture or screenshot of your seed phrase. Instead, write it down immediately on a piece of paper and put it in a secret and safe location. Even better, write your seed phrase down on 2-3 pieces of paper and store each paper in a separate secure location (like one in a personal safe and one in a bank safety deposit box). Alternatively, you can download the seed phrase and keep it offline on an encrypted hard drive. Having multiple backups of your seed phrase is good practice just in case one copy is ever lost or destroyed. After documenting your seed phrase, click "Next".

      + +

      Nami Wallet will prompt you to input all those words in the next step. You confirm your seed phrase in the correct order of your 24-word sequence. You will also be prompt to input a password, which is needed whenever you have to sign a transaction. You can now access your Nami Wallet via "N" icon in your browser and begin purchasing and receiving crypto. If you already have ADA in your Coinbase, you can use your brand new Cardano address to transfer them over into your Nami Wallet.

      + +

      Now that you have your cryptocurrency wallet, you will want to transfer your funds out of Coinbase. You need to get your wallet address, by clicking on the "Receive" button, you can copy your Cardano address. If you are using Coinbase on your smartphone, you can also scan the QR code from the Coinbase application. Important: you must send your ADA via the Cardano network. It would take a few minutes to get your ADA transfer from Coinbase to your Nami Wallet.

      + +

      Step 3: Connect your wallet on Martify and add collateral

      + + {/*

      Overview: Step 3

      */} +
        +
      1. Connect wallet: Click on connect and allow access.
      2. +
      3. Add collateral: Deposit 5₳ as collateral from Nami Wallet.
      4. +
      + +

      You have purchased your ADA coins, and transferred it to your Nami Wallet, now you are ready to browse and purchase some NFTs on the marketplace. Click on "Connect" on the top right corner. It should recognized that you have Nami Wallet installed and it will prompt your for access on the first time. If it does not, you may have to restart your web browser. Click on "Access" to allow Martify to connect to your Nami Wallet. No transaction will take place until you decided to make a purchase and provided your signature.

      + +

      The Nami Wallet allows you to deposit a fixed amount (5₳) as collateral to avoid any circumstances that arise due to contract failure. In the event of a contract failure, a collateral is taken to cover the blockchain resources used by the node to verify the contract. That means collateral aims to secure the network and avoid network failure. When a script runs successfully, the collateral is not taken. The chances of losing the collateral are very low; however, Nami seeks to minimize the risk by only allowing a determined amount (5₳) of collateral to be used. In a worst case scenario, malicious, or poorly built dApps, would only be able to take this amount. To deposit tokens into collateral, go to the Setting tab, and click on Collateral. A window will pop up where you need to enter your wallet’s password to confirm the process. At any time, you can remove the collateral by clicking on the "Remove" button.

      + + {/*
      +
      +
      + +
      +
      +
      +
      + +
      +
      +
      */} + +

      Step 4: Purchase your first NFT

      + + {/*

      Overview: Step 4

      */} + + {/*
      + +
      */} + +
        +
      1. Browse NFTs: Browse the explore page.
      2. +
      3. Make the transaction: Click on Buy Now to confirm the transaction.
      4. +
      + +

      Start by browsing listed assets on the explore page, there you can sort the assets by price or filter by the projects you are interested in. Clicking on the the asset will bring you to the asset page, here you can see the asset's metadata, past transactions on all marketplaces, as well as the current listing price. Click on "Buy Now", your Nami Wallet will prompt you for your password. Sign it to approve the transaction and the NFT will be in your Nami Wallet in a few minutes. If your "Buy Now" button is disabled, check that you have connected your wallet and added the collateral.

      + +
      +
      + ); +}; + +export default GuideBuy; diff --git a/src/pages/GuideSell/index.js b/src/pages/GuideSell/index.js index 2fa7826..cfbab2d 100644 --- a/src/pages/GuideSell/index.js +++ b/src/pages/GuideSell/index.js @@ -1,65 +1,71 @@ -import React from "react"; - -const GuideSell = () => { - return ( -
      -
      -

      Selling

      -

      - Learn how list your NFTs for sale -

      -
      - -
      -

      Overview

      -
        -
      1. Setup Nami Wallet: Download Nami Wallet.
      2. -
      3. Connect Nami Wallet on Martify and add collateral: That is easy!
      4. -
      5. List your first NFT: Transfer your assets from Yoroi to your Nami Wallet and list them on Martify.
      6. -
      - -

      Step 1: Setup Nami Wallet

      - -
        -
      1. Download Nami Wallet: Download the Nami Wallet browser extension, which will be your own personal "digital wallet". With Nami Wallet, you get to store and use your cryptocurrency and digital assets (like NFTs).
      2. -
      3. Setup Nami Wallet: Write down and confirm your seed phrase, and input a new password.
      4. -
      - -

      Go to Nami Wallet to download the browser extension. Important: To avoid any scam, we recommend you to visit their official page and then select the desired browser type to install the application. If you click on Chrome, you will be automatically taken to the Google Chrome web store. Click "Add extension" and it will be downloaded and installed. Once installed, you will be able to view the Nami Wallet icon (a blue "N") in the top right corner of your browser.

      - -

      If you open up the Nami Wallet for the first time. Make sure no one is watching your screen and click on "New Wallet". Then, it will show you 24-words sequence, these words are called "seed phrase", these sequence of words are the access to your wallet. Remember, this must be hidden and never shared with anyone. Do not take a picture or screenshot of your seed phrase. Instead, write it down immediately on a piece of paper and put it in a secret and safe location. Even better, write your seed phrase down on 2-3 pieces of paper and store each paper in a separate secure location (like one in a personal safe and one in a bank safety deposit box). Alternatively, you can download the seed phrase and keep it offline on an encrypted hard drive. Having multiple backups of your seed phrase is good practice just in case one copy is ever lost or destroyed. After documenting your seed phrase, click "Next".

      - -

      Nami Wallet will prompt you to input all those words in the next step. You confirm your seed phrase in the correct order of your 24-word sequence. You will also be prompt to input a password, which is needed whenever you have to sign a transaction. You can now access your Nami Wallet via "N" icon in your browser.

      - -

      Step 2: Connect Nami Wallet on Martify and add collateral

      - -
        -
      1. Connect wallet: Click on connect and allow access.
      2. -
      3. Add collateral: Deposit 5₳ as collateral from Nami Wallet.
      4. -
      - -

      With Nami Wallet installed, click on "Connect" on the top right corner. It should recognized that you have Nami Wallet installed and it will prompt your for access on the first time. If it does not, you may have to restart your web browser. Click on "Access" to allow Martify to connect to your Nami Wallet.

      - -

      The Nami Wallet allows you to deposit a fixed amount (5₳) as collateral to avoid any circumstances that arise due to contract failure. In the event of a contract failure, a collateral is taken to cover the blockchain resources used by the node to verify the contract to avoid network failure. When a script runs successfully, the collateral is not taken. The chances of losing the collateral are very low; however, Nami seeks to minimize the risk by only allowing a determined amount (5₳) of collateral to be used. In a worst case scenario, malicious, or poorly built dApps, it would only be able to take this amount. To deposit ADA into collateral, go to the Setting tab, and click on Collateral. A window will pop up where you need to enter your wallet’s password to confirm the process. At any time, you can remove from collateral by clicking on the "Remove" button.

      - -

      Step 3: List your first NFT

      - -
        -
      1. Transfer your assets: Send your assets into Nami Wallet.
      2. -
      3. List on Martify: Connect and list your NFTs for sale.
      4. -
      - -

      Now that you have your Nami Wallet, you will want to transfer your assets from other wallets into your new Nami Wallet. For that, you need to get your wallet address, by click on the "Recieve" button, you can copy your Cardano address. It would take a few minutes to get your assets transfer from your wallet to your new Nami Wallet.

      - -

      Click on Connect if you have not, and click on Account to browse the assets in your Nami Wallet. Clicking on an asset will bring you to the asset page, here you can see the asset's metadata. On this page, you can set your listing price, your Nami Wallet will prompt you for your password. Sign it to approve the transaction and the NFT will be transfered to the smart contract. If you are unable to list the asset, check that you have connected your wallet and added the collateral.

      - - - {/*

      How to add royalties?

      - NFTs can be programmed so that each transaction includes royalties, allowing creators to be rewarded fairly for their work online. The fact that NFTs are created and stored on the blockchain, means they can be traded seamlessly from wallet to wallet, with royalties paid every time they move. On Martify, creators can set royalties up to 10%, and connect us via Twitter or Discord */} - -
      -
      - ); -}; - -export default GuideSell; +import React from "react"; + +const GuideSell = () => { + return ( +
      +
      +

      Selling

      +

      + Learn how list your NFTs for sale +

      +
      + +
      +

      Overview

      +
        +
      1. Setup your cryptocurrency wallet (Nami Wallet, GeroWallet or ccvault.io: Download Nami Wallet, GeroWallet or ccvault.io.
      2. +
      3. Connect your wallet on Martify and add collateral: That is easy!
      4. +
      5. List your first NFT: Transfer your assets from Yoroi to your Nami Wallet, GeroWallet or ccvault.io and list them on Martify.
      6. +
      + +

      Step 1: Setup Nami Wallet, GeroWallet or ccvault.io

      + +
        +
      1. Download your cryptocurrency wallet: Download one of the browser extension which will be your own personal "digital wallet" :
        + Nami Wallet (Chrome, Brave and Edge compatible),
        + GeroWallet (Chrome, Brave and Edge compatible) or
        + ccvault.io (Chrome, Brave, Edge and Opera compatible).
        + With your "digital wallet", you get to store and use your cryptocurrency and digital assets (like NFTs).
      2. +
      3. Setup your cryptocurrency wallet: Write down and confirm your seed phrase, and input a new password.
      4. +
      + +

      Go to Nami Wallet, GeroWallet or ccvault.io to download the browser extension. Important: To avoid any scam, we recommend you to visit their official page and then select the desired browser type to install the application. If you click on Chrome, you will be automatically taken to the Google Chrome web store. Click "Add extension" and it will be downloaded and installed. Once installed, you will be able to view the Nami Wallet icon (a blue "N") in the top right corner of your browser.

      + +

      The following instructions (for Nami Wallet) apply more or less to all wallets.

      + +

      If you open up the Nami Wallet for the first time. Make sure no one is watching your screen and click on "New Wallet". Then, it will show you 24-words sequence, these words are called "seed phrase", these sequence of words are the access to your wallet. Remember, this must be hidden and never shared with anyone. Do not take a picture or screenshot of your seed phrase. Instead, write it down immediately on a piece of paper and put it in a secret and safe location. Even better, write your seed phrase down on 2-3 pieces of paper and store each paper in a separate secure location (like one in a personal safe and one in a bank safety deposit box). Alternatively, you can download the seed phrase and keep it offline on an encrypted hard drive. Having multiple backups of your seed phrase is good practice just in case one copy is ever lost or destroyed. After documenting your seed phrase, click "Next".

      + +

      Nami Wallet will prompt you to input all those words in the next step. You confirm your seed phrase in the correct order of your 24-word sequence. You will also be prompt to input a password, which is needed whenever you have to sign a transaction. You can now access your Nami Wallet via "N" icon in your browser.

      + +

      Step 2: Connect your cryptocurrency wallet on Martify and add collateral

      + +
        +
      1. Connect wallet: Click on connect and allow access.
      2. +
      3. Add collateral: Deposit 5₳ as collateral from Nami Wallet.
      4. +
      + +

      With Nami Wallet installed, click on "Connect" on the top right corner. It should recognized that you have Nami Wallet installed and it will prompt your for access on the first time. If it does not, you may have to restart your web browser. Click on "Access" to allow Martify to connect to your Nami Wallet.

      + +

      The Nami Wallet allows you to deposit a fixed amount (5₳) as collateral to avoid any circumstances that arise due to contract failure. In the event of a contract failure, a collateral is taken to cover the blockchain resources used by the node to verify the contract to avoid network failure. When a script runs successfully, the collateral is not taken. The chances of losing the collateral are very low; however, Nami seeks to minimize the risk by only allowing a determined amount (5₳) of collateral to be used. In a worst case scenario, malicious, or poorly built dApps, it would only be able to take this amount. To deposit ADA into collateral, go to the Setting tab, and click on Collateral. A window will pop up where you need to enter your wallet’s password to confirm the process. At any time, you can remove from collateral by clicking on the "Remove" button.

      + +

      Step 3: List your first NFT

      + +
        +
      1. Transfer your assets: Send your assets into Nami Wallet.
      2. +
      3. List on Martify: Connect and list your NFTs for sale.
      4. +
      + +

      Now that you have your Nami Wallet, you will want to transfer your assets from other wallets into your new Nami Wallet. For that, you need to get your wallet address, by click on the "Recieve" button, you can copy your Cardano address. It would take a few minutes to get your assets transfer from your wallet to your new Nami Wallet.

      + +

      Click on Connect if you have not, and click on Account to browse the assets in your Nami Wallet. Clicking on an asset will bring you to the asset page, here you can see the asset's metadata. On this page, you can set your listing price, your Nami Wallet will prompt you for your password. Sign it to approve the transaction and the NFT will be transfered to the smart contract. If you are unable to list the asset, check that you have connected your wallet and added the collateral.

      + + + {/*

      How to add royalties?

      + NFTs can be programmed so that each transaction includes royalties, allowing creators to be rewarded fairly for their work online. The fact that NFTs are created and stored on the blockchain, means they can be traded seamlessly from wallet to wallet, with royalties paid every time they move. On Martify, creators can set royalties up to 10%, and connect us via Twitter or Discord */} + +
      +
      + ); +}; + +export default GuideSell; diff --git a/src/pages/Explore/index.js b/src/pages/Marketplace/index.js similarity index 98% rename from src/pages/Explore/index.js rename to src/pages/Marketplace/index.js index b7b24ab..eb208dd 100644 --- a/src/pages/Explore/index.js +++ b/src/pages/Marketplace/index.js @@ -8,7 +8,7 @@ import { ListingDisplayListing } from "components"; import "bulma-checkradio/dist/css/bulma-checkradio.min.css"; import "./style.css"; -const Explore = () => { +const Marketplace = () => { const ITEMS_PER_PAGE = 48; const dispatch = useDispatch(); const [isFetching, setIsFetching] = useState(false); @@ -73,7 +73,7 @@ const Explore = () => { }; return ( -
      +
      { ); }; -export default Explore; +export default Marketplace; diff --git a/src/pages/Explore/style.css b/src/pages/Marketplace/style.css similarity index 74% rename from src/pages/Explore/style.css rename to src/pages/Marketplace/style.css index 040e932..4a34734 100644 --- a/src/pages/Explore/style.css +++ b/src/pages/Marketplace/style.css @@ -1,11 +1,11 @@ -.explore .filter .field{ +.marketplace .filter .field{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 1px; } -.explore .filter_label{ +.marketplace .filter_label{ cursor: pointer } diff --git a/src/pages/index.js b/src/pages/index.js index 3f09164..085ca0a 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -2,7 +2,8 @@ import About from "./About"; import Account from "./Account"; import Asset from "./Asset"; import Collection from "./Collection"; -import Explore from "./Explore"; +//import Explore from "./Explore"; +import Marketplace from "./Marketplace"; import FAQ from "./FAQ"; import Guide from "./Guide"; import GuideBuy from "./GuideBuy"; @@ -14,7 +15,8 @@ export { Account, Asset, Collection, - Explore, + //Explore, + Marketplace, FAQ, Guide, GuideBuy, diff --git a/src/routes.js b/src/routes.js index cf4b191..8ce9984 100644 --- a/src/routes.js +++ b/src/routes.js @@ -10,7 +10,8 @@ import { Guide, GuideBuy, GuideSell, - Explore + //Explore, + Marketplace } from 'pages' import { MainLayout } from "layouts"; @@ -42,10 +43,15 @@ const RenderRoutes = () => { - + {/* + */} + + + + diff --git a/src/store/collection/api.js b/src/store/collection/api.js index b3edcec..a19616e 100644 --- a/src/store/collection/api.js +++ b/src/store/collection/api.js @@ -18,6 +18,12 @@ import { getLockedAssets, } from "../../database/assets"; +import { + getOpencnftTopProjects, + getOpencnftPolicy, +} from "../../database/collections"; + + export const load_collection = (callback) => async (dispatch) => { let all_collections = {}; @@ -237,26 +243,37 @@ export const asset_add_offer = export const opencnft_get_top_projects = (time, callback) => async (dispatch) => { - fetch("https://api.opencnft.io/1/rank?window=" + time, {}) - .then((res) => res.json()) - .then((res) => { - callback({ success: true, data: res.ranking }); - }) - .catch((err) => { - console.error(err); - }); + + let rankings = await getOpencnftTopProjects(time); + callback({ success: true, data: rankings }); + + // old - to be removed - query opencnft without caching + // fetch("https://api.opencnft.io/1/rank?window=" + time, {}) + // .then((res) => res.json()) + // .then((res) => { + // callback({ success: true, data: res.ranking }); + // }) + // .catch((err) => { + // console.error(err); + // }); }; export const opencnft_get_policy = (policy_id, callback) => async (dispatch) => { - fetch(`https://api.opencnft.io/1/policy/${policy_id}`, {}) - .then((res) => res.json()) - .then((res) => { - callback({ success: true, data: res }); - }) - .catch((err) => { - console.error(err); - }); + + let project_stats = await getOpencnftPolicy(policy_id); + callback({ success: true, data: project_stats }); + + // old - to be removed - query opencnft without caching + // fetch(`https://api.opencnft.io/1/policy/${policy_id}`, {}) + // .then((res) => res.json()) + // .then((res) => { + // console.log(res); + // callback({ success: true, data: res }); + // }) + // .catch((err) => { + // console.error(err); + // }); }; export const opencnft_get_asset_tx = diff --git a/src/utils/converter.js b/src/utils/converter.js index 40de54c..1ce52cc 100644 --- a/src/utils/converter.js +++ b/src/utils/converter.js @@ -21,6 +21,7 @@ export const toString = (bytes) => String.fromCharCode.apply(String, bytes); export const convertMetadataPropToString = (src) => { if (typeof src === "string") return src; + else if (typeof src === "object") return Object.values(src).join(""); else if (Array.isArray(src)) return src.join(""); return null; }; @@ -69,19 +70,21 @@ export const get_asset_image_source = (image) => { // return ""; if (image) { - if (image.includes("ipfs/")) { - image = "ipfs://" + image.split("ipfs/")[1]; + if (typeof image === 'string') { + if (image.includes("ipfs/")) { + image = "ipfs://" + image.split("ipfs/")[1]; + } } return linkToSrc(convertMetadataPropToString(image)); } }; export const numFormatter = (num) => { - if (num > 999 && num < 1000000) { + if (num >= 1000 && num < 1000000) { return (num / 1000).toFixed(1) + "K"; // convert to K for number from > 1000 < 1 million } else if (num > 1000000) { return (num / 1000000).toFixed(1) + "M"; // convert to M for number from > 1 million - } else if (num < 900) { + } else if (num < 1000) { return num; // if value < 1000, nothing to do } }; diff --git a/yarn.lock b/yarn.lock index 48f8e79..0934037 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9941,6 +9941,11 @@ react-helmet@^6.1.0: react-fast-compare "^3.1.1" react-side-effect "^2.1.0" +react-html5video@^2.5.1: + version "2.5.1" + resolved "https://registry.yarnpkg.com/react-html5video/-/react-html5video-2.5.1.tgz#bbc4314be1d583cb991a11ca3480e70a3c964caf" + integrity sha1-u8QxS+HVg8uZGhHKNIDnCjyWTK8= + react-infinite-scroll-component@^6.1.0: version "6.1.0" resolved "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz"