+ {connection.state.status !== 'connected' ? (
+
+
+ + + Go Back + + +
+
+ );
+}
diff --git a/pages/index.tsx b/pages/index.tsx
new file mode 100644
index 0000000..ff20e53
--- /dev/null
+++ b/pages/index.tsx
@@ -0,0 +1,321 @@
+import React, {useEffect, useState} from 'react';
+import {useRouter} from 'next/router';
+import Link from 'next/link';
+//@ts-ignore
+import {ConnectorContext} from '@/src/components/connector/sdk-connection-provider';
+
+import Select from 'react-select';
+//@ts-ignore
+import SEO from '@/src/components/SEO';
+// @ts-ignore
+import Button from '@/src/components/common/button';
+// @ts-ignore
+import Modal from '@/src/components/common/modal';
+// @ts-ignore
+import Input from '@/src/components/common/input';
+// @ts-ignore
+import ToggleButton from '@/src/components/ToggleButton';
+// @ts-ignore
+import TAKO from '@/src/tako';
+import {gql, useLazyQuery} from '@apollo/client';
+// @ts-ignore
+import {_metadata, _metadataTypes} from '../src/lib/metadataSchema';
+// @ts-ignore
+import FormInputs from '../src/components/FormInputs';
+// @ts-ignore
+import nft from '../src/lib/nft-storage';
+// @ts-ignore
+import MediaViewer from '../src/components/media-viewer';
+
+import Navbar from '../src/components/Navbar';
+import {
+ toUnionAddress,
+ UnionAddress,
+ BigNumber,
+ toBigNumber,
+} from '@rarible/types';
+import NFTInput from '../src/components/NFTInput';
+import {ConnectOptions} from '../src/views/connect/connect-options';
+import {setDefaultResultOrder} from 'dns/promises';
+import TakoLink from '../src/components/TakoLink';
+type MintFormProps = any;
+interface NFTFormProps extends MintFormProps {
+ address: UnionAddress;
+ sdk: any;
+ wallerAddress: any;
+}
+
+function currencyType(blockchain: string) {
+ switch (blockchain) {
+ case 'ETHEREUM':
+ return 'ETH';
+ case 'POLYGON':
+ return 'MATIC';
+ case 'TEZOS':
+ return 'XTZ';
+ case 'FLOW':
+ return 'FLOW';
+ case 'SOLANA':
+ return 'SOL';
+ default:
+ return 'NONE';
+ }
+}
+
+export default function Dragon() {
+ const router = useRouter();
+ const connection = React.useContextPlease Connect to Continue with App
+ ) : ( +You Are Connected
+ )} ++
+ + + Go Back + + +
+
+
+ Loading NFTS +
+ );
+ }
+ return (
+ <>
+
+ Market | Tako Labs
++
Trade Your NFTs with Us ❤
++ Loading NFTS +
+
+
+ );
+}
+
+function BuyModal() {
+ return (
+
+ );
+}
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..8ff911b
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/logo512.png b/public/logo512.png
new file mode 100644
index 0000000..7b1ea9d
Binary files /dev/null and b/public/logo512.png differ
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..185a904
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,20 @@
+{
+ "short_name": "Tako Labs",
+ "name": "Tako Labs",
+ "icons": [
+ {
+ "src": "favicon.png",
+ "sizes": "512x512 64x64 32x32 24x24 16x16",
+ "type": "image/png"
+ },
+ {
+ "src": "logo512.png",
+ "type": "image/png",
+ "sizes": "512x512"
+ }
+ ],
+ "start_url": ".",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#feda08"
+}
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..e9e57dc
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/actions/index.tsx b/src/actions/index.tsx
new file mode 100644
index 0000000..1ae27f4
--- /dev/null
+++ b/src/actions/index.tsx
@@ -0,0 +1 @@
+export * from './session';
diff --git a/src/actions/session.tsx b/src/actions/session.tsx
new file mode 100644
index 0000000..d8962d3
--- /dev/null
+++ b/src/actions/session.tsx
@@ -0,0 +1,20 @@
+export const site_version = () => {};
+export const setSDK = ({sdk, connection, address, blockchain}: any) => (
+ dispatch: any
+) => {
+ dispatch({type: 'SET_SDK', payload: {sdk, address, connection, blockchain}});
+};
+
+export const setTab = (tab: any) => (dispatch: any) => {
+ dispatch({type: 'SET_TAB', payload: tab});
+};
+
+export const setPortalContinuation = (portal_continuation: any) => (
+ dispatch: any
+) => {
+ dispatch({type: 'SET_PORTAL_CONTINUATION', payload: portal_continuation});
+};
+
+export const setShowOptions = (showOptions: any) => (dispatch: any) => {
+ dispatch({type: 'SET_SHOW_OPTIONS', payload: showOptions});
+};
diff --git a/src/actions/types.tsx b/src/actions/types.tsx
new file mode 100644
index 0000000..75d1ad4
--- /dev/null
+++ b/src/actions/types.tsx
@@ -0,0 +1,19 @@
+const types = {
+ SET_COLOR_MODE: 'set_color_mode',
+ COLLAPSED_TOGGLE: 'toggle_collapsed',
+ //PLUGIN AND TABS
+ SET_PLUGINS: 'set_plugins',
+ SET_CURRENT_PLUGIN: 'set_current_plugin',
+ SET_CURRENT_TAB: 'set_current_tab',
+ SET_CURRENT_STATE: 'set_current_state',
+ //NOTIFICATIONS
+ ADD_NOTIFICATIONS: 'add_notifications',
+ REMOVE_NOTIFICATIONS: 'set_notifications',
+ // TYPE_GET: "type_get",
+ RESET: 'reset',
+ //SETTINGS
+ SET_SETTING: 'set_settting',
+ //AUTH
+};
+
+export default types;
diff --git a/src/common/get-currency.ts b/src/common/get-currency.ts
new file mode 100644
index 0000000..65051b3
--- /dev/null
+++ b/src/common/get-currency.ts
@@ -0,0 +1,49 @@
+import {
+ Blockchain,
+ EthErc20AssetType,
+ EthEthereumAssetType,
+ TezosXTZAssetType
+} from "@rarible/api-client"
+import { toContractAddress } from "@rarible/types"
+import { RequestCurrency } from "@rarible/sdk/build/common/domain"
+
+function getEthNative(blockchain: Blockchain): EthEthereumAssetType {
+ return {
+ "@type": "ETH",
+ blockchain
+ }
+}
+
+const ethFt: EthErc20AssetType = {
+ "@type": "ERC20",
+ contract: toContractAddress("ETHEREUM:0xc778417E063141139Fce010982780140Aa0cD5Ab")
+}
+
+const tezosNative: TezosXTZAssetType = {
+ "@type": "XTZ"
+}
+
+/*const tezosFt: TezosFTAssetType = {
+ "@type": "TEZOS_FT",
+ contract: toContractAddress("ETHEREUM:0xc778417E063141139Fce010982780140Aa0cD5Ab"),
+ tokenId:
+}*/
+
+export function getCurrency(blockchain: Blockchain | undefined, type: "NATIVE" | "FT"): RequestCurrency {
+ switch (blockchain) {
+ case Blockchain.ETHEREUM:
+ return type === "NATIVE" ? getEthNative(blockchain) : ethFt
+ case Blockchain.POLYGON:
+ return type === "NATIVE" ? getEthNative(blockchain) : ethFt
+ case Blockchain.TEZOS:
+ if (type === "FT") {
+ throw new Error("Unsupported blockchain or asset type")
+ }
+ return tezosNative
+ case Blockchain.FLOW:
+ //return type === "NATIVE" ? undefined : undefined
+ throw new Error("Unsupported blockchain")
+ default:
+ throw new Error("Unsupported blockchain")
+ }
+}
\ No newline at end of file
diff --git a/src/components/ActivityWidget.tsx b/src/components/ActivityWidget.tsx
new file mode 100644
index 0000000..8181b84
--- /dev/null
+++ b/src/components/ActivityWidget.tsx
@@ -0,0 +1,592 @@
+import React from 'react';
+import {gql, useLazyQuery} from '@apollo/client';
+import moment from 'moment';
+import Button from './common/button';
+import {truncateAddress} from '../lib/moiWeb3';
+import TabButton from './TabButton';
+import TakoLink from './TakoLink';
+import useInterval from '../utility/useInterval';
+const query = gql`
+ query Activites($input: QueryInput!) {
+ Query_Activity(input: $input) {
+ cursor
+ continuation
+ activities {
+ contract {
+ id
+ type
+ from
+ owner
+ contract
+ tokenId
+ itemId
+ value
+ purchase
+ transactionHash
+ date
+ reverted
+ left {
+ maker
+ hash
+ }
+ right {
+ maker
+ hash
+ }
+ source
+ buyer
+ seller
+ buyerOrderHash
+ sellerOrderHash
+ price
+ priceUsd
+ hash
+ auction {
+ id
+ contract
+ type
+ seller
+ endTime
+ minimalStep
+ minimalPrice
+ createdAt
+ lastUpdatedAt
+ buyPrice
+ buyPriceUsd
+ pending
+ status
+ ongoing
+ hash
+ auctionId
+ data {
+ dataType
+ originFees {
+ address
+ value
+ }
+ payouts {
+ address
+ value
+ }
+ startTime
+ duration
+ buyOutPrice
+ }
+ }
+ bid {
+ type
+ data {
+ dataType
+ originFees {
+ address
+ value
+ }
+ payouts {
+ address
+ value
+ }
+ startTime
+ duration
+ buyOutPrice
+ }
+ buyer
+ amount
+ date
+ status
+ }
+ }
+ user {
+ id
+ type
+ from
+ owner
+ contract
+ tokenId
+ itemId
+ value
+ purchase
+ transactionHash
+ date
+ reverted
+ left {
+ maker
+ hash
+ }
+ right {
+ maker
+ hash
+ }
+ source
+ buyer
+ seller
+ buyerOrderHash
+ sellerOrderHash
+ price
+ priceUsd
+ hash
+ auction {
+ id
+ contract
+ type
+ seller
+ endTime
+ minimalStep
+ minimalPrice
+ createdAt
+ lastUpdatedAt
+ buyPrice
+ buyPriceUsd
+ pending
+ status
+ ongoing
+ hash
+ auctionId
+ data {
+ dataType
+ originFees {
+ address
+ value
+ }
+ payouts {
+ address
+ value
+ }
+ startTime
+ duration
+ buyOutPrice
+ }
+ }
+ bid {
+ type
+ data {
+ dataType
+ originFees {
+ address
+ value
+ }
+ payouts {
+ address
+ value
+ }
+ startTime
+ duration
+ buyOutPrice
+ }
+ buyer
+ amount
+ date
+ status
+ }
+ }
+ nft {
+ id
+ type
+ from
+ owner
+ contract
+ tokenId
+ itemId
+ value
+ purchase
+ transactionHash
+ date
+ reverted
+ left {
+ maker
+ hash
+ }
+ right {
+ maker
+ hash
+ }
+ source
+ buyer
+ seller
+ buyerOrderHash
+ sellerOrderHash
+ price
+ priceUsd
+ hash
+ auction {
+ id
+ contract
+ type
+ seller
+ endTime
+ minimalStep
+ minimalPrice
+ createdAt
+ lastUpdatedAt
+ buyPrice
+ buyPriceUsd
+ pending
+ status
+ ongoing
+ hash
+ auctionId
+ data {
+ dataType
+ originFees {
+ address
+ value
+ }
+ payouts {
+ address
+ value
+ }
+ startTime
+ duration
+ buyOutPrice
+ }
+ }
+ bid {
+ type
+ data {
+ dataType
+ originFees {
+ address
+ value
+ }
+ payouts {
+ address
+ value
+ }
+ startTime
+ duration
+ buyOutPrice
+ }
+ buyer
+ amount
+ date
+ status
+ }
+ }
+ }
+ }
+ }
+`;
+
+export default function ActivityWidget({address}: {address: string}) {
+ const [complete, setComplete] = React.useState
+
+ Site Message: {site_message}
+
+ Site Fees: 0.15%
+
+ 0.05% - "Listing Fee" (Taken when purchased)
+
+ 0.1% - "Purchase Fee" - 50% is returned to the Lister and 50% Creator
+
+ {nfts.map(
+ ({id, content: [media], name, orders, creators}: any) => {
+ return (
+
+ );
+ })}
+
+
+ );
+ }
+ )}
+
+ 
+
+
+
+
+
+ +
{name}
++
+
+ {connection.state.status === 'connected' && (
+
+ )}
+ + Price: {orders[0].makePrice}{' '} + {currencyType(id.split(':')[0])} +
+
+
+
+ );
+}
+
+function Activity_Item({
+ id,
+ date,
+ type,
+ from,
+ contractAddress,
+ tokenId,
+ owner,
+ contract,
+}: {
+ id: string;
+ date: string;
+ type: string;
+ from: string;
+ contractAddress: string;
+ tokenId: string;
+ owner: string;
+ contract: any;
+}) {
+ const _date = new Date(Date.parse(date));
+ return (
+ <>
+
+
+ {activity.contract.length > 0 && (
+
+ )}
+ {activity.user.length > 0 && (
+
+ )}
+ {activity.nft.length > 0 && (
+
+ )}
+
+ {error && {`${error.message}`}
} + {loading && ( + <> +
+
+
+ )}
+ {complete && (
+ <>
+ Latest Activity:{' '}
+ {
+ activity[
+ `${
+ activity.contract.length > 0
+ ? 'contract'
+ : activity.user.length > 0
+ ? 'user'
+ : 'nft'
+ }`
+ ].length
+ }
+
+
+ {
+
+
+ Age
| +Type
| +Token ID
| +From
| +Owner
| +Contract
| +
+
+
+ }
+ Loading Activity...
++
+ Loading...
+
+
+
+
+ )}
+
+
+ {activity[
+ `${showContract ? 'contract' : showUser ? 'user' : 'nft'}`
+ ].length > 0 ? (
+ activity[
+ `${showContract ? 'contract' : showUser ? 'user' : 'nft'}`
+ ].map((item: any, key) => (
+
+
+ Age
| +Type
| +Token ID
| +From
| +Owner
| +Contract
| ++ No Activity Found, Please Try Again, or Search Using Another + Address +
+ )} +
+
+
+ );
+}
diff --git a/src/components/AllActivityWidget.tsx b/src/components/AllActivityWidget.tsx
new file mode 100644
index 0000000..78d312a
--- /dev/null
+++ b/src/components/AllActivityWidget.tsx
@@ -0,0 +1,436 @@
+import React from 'react';
+import {gql, useLazyQuery} from '@apollo/client';
+import moment from 'moment';
+import Button from './common/button';
+import {truncateAddress} from '../lib/moiWeb3';
+import TabButton from './TabButton';
+import TakoLink from './TakoLink';
+import useInterval from '../../src/utility/useInterval';
+import {style} from '@mui/system';
+
+const query = gql`
+ query Activites($input: QueryInput) {
+ Query_All_Activity(input: $input) {
+ cursor
+ continuation
+ activities {
+ id
+ type
+ from
+ owner
+ contract
+ tokenId
+ itemId
+ value
+ purchase
+ transactionHash
+ date
+ reverted
+ left {
+ maker
+ hash
+ }
+ right {
+ maker
+ hash
+ }
+ source
+ buyer
+ seller
+ buyerOrderHash
+ sellerOrderHash
+ price
+ priceUsd
+ hash
+ auction {
+ id
+ contract
+ type
+ seller
+ endTime
+ minimalStep
+ minimalPrice
+ createdAt
+ lastUpdatedAt
+ buyPrice
+ buyPriceUsd
+ pending
+ status
+ ongoing
+ hash
+ auctionId
+ data {
+ dataType
+ originFees {
+ address
+ value
+ }
+ payouts {
+ address
+ value
+ }
+ startTime
+ duration
+ buyOutPrice
+ }
+ }
+ bid {
+ type
+ data {
+ dataType
+ originFees {
+ address
+ value
+ }
+ payouts {
+ address
+ value
+ }
+ startTime
+ duration
+ buyOutPrice
+ }
+ buyer
+ amount
+ date
+ status
+ }
+ }
+ }
+ }
+`;
+var i = 0;
+export default function ActivityWidget() {
+ const ref = React.useRef
+
+ + {moment(_date, 'YYYYMMDD').fromNow()} +
{' '} + |{type}
|{' '} + <> + {' '} +
+ {tokenId !== null ? (
+
+ {from !== null ? (
+
+ {owner !== null ? (
+
+ {contract !== null ? (
+
+ {!load && error && (
+ <>
+
+
+ );
+}
+
+function Activity_Item({
+ id,
+ date,
+ type,
+ from,
+ contractAddress,
+ tokenId,
+ owner,
+ contract,
+ blockchain,
+}: {
+ id: string;
+ date: string;
+ type: string;
+ from: string;
+ contractAddress: string;
+ tokenId: string;
+ owner: string;
+ contract: any;
+ blockchain: string;
+}) {
+ const _date = new Date(Date.parse(date));
+ return (
+ <>
+
+
+
+
+ )}
+ {(load || loading) && (
+ <>
+
+
+ {
+
+
+ Age
| +Type
| +Token ID
| +From
| +Owner
| +Contract
| ++ No Activity Found, Please Try Again, or Check Back Later +
+ } +
+
+
+ )}
+ {!load && complete && (
+ <>
+
+
+ {
+
+
+ Age
| +Type
| +Token ID
| +From
| +Owner
| +Contract
| +
+
+
+ }
+ Loading Activity...
++
+ Loading...
+
+
+
+
+ )}
+
+
+ {activity.length > 0 && typeof activity[page] !== 'undefined' ? (
+ activity[page].map((item: any, key) => (
+
+
+ Age
| +Type
| +Token ID
| +From
| +Owner
| +Contract
| +Blockchain
| ++ No Activity Found, Please Try Again, or Search Using Another + Address +
+ )} +Page: {page + 1}
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/FormInputs.js b/src/components/FormInputs.js
new file mode 100644
index 0000000..d918b4c
--- /dev/null
+++ b/src/components/FormInputs.js
@@ -0,0 +1,66 @@
+import Input from './common/input.tsx';
+import NFTInput from './NFTInput';
+export default function FormInputs({
+ id,
+ label,
+ type,
+ show,
+ onChange,
+ style = '',
+}) {
+ String.prototype.capitalize = function () {
+ return this.charAt(0).toUpperCase() + this.slice(1);
+ };
+ switch (type) {
+ case 'string':
+ return (
+ <>
+
+
+
+ + {moment(_date, 'YYYYMMDD').fromNow()} +
{' '} + |{type}
|{' '} + <> + {' '} +
+ {tokenId !== null ? (
+
+ {from !== null ? (
+
+ {owner !== null ? (
+
+ {contract !== null ? (
+
+ {blockchain !== null && blockchain} +
{' '} + |{' '} + ++ + ); + case 'color': + return ( + <> + {' '} + +
+ + ); + case 'url': + return ( + <> + {' '} + +
+ + ); + default: + return <>; + } +} diff --git a/src/components/NFTForm.tsx b/src/components/NFTForm.tsx new file mode 100644 index 0000000..55738f4 --- /dev/null +++ b/src/components/NFTForm.tsx @@ -0,0 +1,283 @@ +import {ReactNode, useEffect, useState, useContext} from 'react'; +import NFTInput from './NFTInput'; +import Button from './common/button'; +import {connect} from 'react-redux'; +import Select from 'react-select'; +// @ts-ignore +import {_metadata, _metadataTypes} from '../lib/metadataSchema.ts'; +import FormInputs from './FormInputs'; + +import nft from '../lib/nft-storage'; +import MediaViewer from './media-viewer'; +import {MintRequest} from '@rarible/sdk/build/types/nft/mint/mint-request.type'; +import {PrepareMintResponse} from '@rarible/sdk/build/types/nft/mint/domain'; +import { + toUnionAddress, + UnionAddress, + BigNumber, + toBigNumber, +} from '@rarible/types'; +import Input from './common/input'; +import TAKO from '../tako'; +import {ConnectorContext} from './connector/sdk-connection-provider'; + +// import {BigNumber} from 'ethers'; + +type MintFormProps = FormProps
+
+
+ );
+}
+
+function NFTForm({address, onSubmit, response}: NFTFormProps) {
+ const connection = useContext{label}
+ + {
+ toggleSelected(!selected);
+ }}>
+
+
+ {selected ? '✔' : '❌'}
+
+
+
+ {state.isLoading && (
+
+
+
+
+
+
+
+ )}
+
+ );
+}
+
+
+export default NFTForm;
+
+function validate(uri: string, supply: any, prepareResponse: any) {
+ const a = parseInt(supply);
+ if (isNaN(a)) {
+ return 'supply can not be parsed';
+ }
+ return undefined;
+}
diff --git a/src/components/NFTInput.js b/src/components/NFTInput.js
new file mode 100644
index 0000000..5137277
--- /dev/null
+++ b/src/components/NFTInput.js
@@ -0,0 +1,33 @@
+import Input from './common/input.tsx';
+import nft from '../lib/nft-storage';
+
+export default function NFTInput({id, onChange, label, accept}) {
+ return (
+ <>
+
+ {
+ e.target.files.length > 0
+ ? nft.storeFileAsBlob(e.target.files[0]).then(async (data) => {
+ onChange({
+ cid: data,
+ status: await nft.getCIDStatus(data),
+ fileType: e.target.files[0].type,
+ });
+ })
+ : onChange({cid: ''});
+ // data.length > 0
+ // ? onChange({
+ // cid: data,
+ // status: await nft.getCIDStatus(data),
+ // fileType: e.target.files[0].type,
+ // })
+ // : onChange({cid: data});
+ }}
+ />
+
+ );
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..774a8b1
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,75 @@
+import React, {useEffect, useState} from 'react';
+import {useRouter} from 'next/router';
+import {ConnectorContext} from './connector/sdk-connection-provider';
+import {truncateAddress} from '../lib/moiWeb3';
+import TakoLink from './TakoLink';
+import WalletButton from './walletbutton';
+import WalletButtonItem from './walletbuttonitem';
+function Navbar() {
+ const [show, setShow] = useState(false);
+ const connection = React.useContext(ConnectorContext);
+ const blockchain = connection.sdk?.wallet?.blockchain;
+ const router = useRouter();
+ const [address, setAddress] = React.useState('');
+ const [status, setStatus] = React.useState('');
+ const [err, setErr] = React.useState
+ Minting NFT
+
+
+ +
+ Loading...
+
+
+
+
+ );
+}
+export default Navbar;
diff --git a/src/components/OrderItems.tsx b/src/components/OrderItems.tsx
new file mode 100644
index 0000000..4677abe
--- /dev/null
+++ b/src/components/OrderItems.tsx
@@ -0,0 +1,176 @@
+import React, {useState, useEffect} from 'react';
+import {gql, useQuery, useLazyQuery} from '@apollo/client';
+import {truncateAddress} from '../lib/moiWeb3';
+import {
+ ItemId,
+ BigNumber,
+ toUnionAddress,
+ OrderId,
+ toBigNumber,
+ ContractAddress,
+} from '@rarible/types';
+import Button from '../components/common/button';
+import {connect} from 'react-redux';
+import TAKO from '../tako';
+//@ts-ignore
+import {ConnectorContext} from '@/src/components/connector/sdk-connection-provider';
+type CreateCollectionRequest = /*unresolved*/ any;
+type CreateCollectionBlockchains = /*unresolved*/ any;
+function OrderItems({
+ nid,
+}: {
+ // sdk: IRaribleSdk;
+ nid: string;
+}) {
+ const connection = React.useContext
+ setShow(false)}>
+
+
+ Tako Labs
+
+
+
+
+
+ {show && (
+
+ router.push('/connect')}
+ onPress={() => setShow(!show)}
+ address={connection.walletAddress?.split(':')[1]}
+ />
+
+
+ {
+ router.push('https://mint.takolabs.io');
+ setShow(false);
+ }}
+ />
+ {
+ router.push('/connect');
+ setShow(false);
+ }}
+ />
+
+ )}
+
+ Open Orders
+
+
+ );
+ }
+
+ return null;
+}
+const mapStateToProps = (state: any) => ({
+ connection: state.session.connection,
+});
+export default connect(mapStateToProps)(OrderItems);
diff --git a/src/components/OrderWidget.tsx b/src/components/OrderWidget.tsx
new file mode 100644
index 0000000..606b8da
--- /dev/null
+++ b/src/components/OrderWidget.tsx
@@ -0,0 +1,447 @@
+import React from 'react';
+import {gql, useLazyQuery} from '@apollo/client';
+import moment from 'moment';
+import Button from './common/button';
+import {truncateAddress} from '../lib/moiWeb3';
+import TabButton from './TabButton';
+import TakoLink from './TakoLink';
+import useInterval from '../utility/useInterval';
+import TAKO from '../tako';
+//@ts-ignore
+import {ConnectorContext} from '@/src/components/connector/sdk-connection-provider';
+const query = gql`
+ query Sell_Orders($input: QueryInput!) {
+ Query_All_Sell_Orders(input: $input) {
+ continuation
+ orders {
+ id
+ filled
+ platform
+ status
+ startedAt
+ endedAt
+ makeStock
+ cancelled
+ createdAt
+ lastUpdatedAt
+ makePrice
+ makePriceUsd
+ maker
+ make {
+ type {
+ type
+ contract
+ tokenId
+ uri
+ creators {
+ address
+ }
+ royalties {
+ address
+ value
+ }
+ }
+ value
+ }
+ takerPrice
+ takerPriceUsd
+ taker
+ take {
+ type {
+ type
+ contract
+ blockchain
+ }
+ value
+ }
+ }
+ }
+ }
+`;
+
+export default function OrderWidget({blockchains}: {blockchains: string[]}) {
+ const [complete, setComplete] = React.useState
+ {orderData.length > 0 ? (
+ orderData.map((order: any, key) => {
+ const id = order.id as OrderId;
+ return (
+
+
+
+ );
+ })
+ ) : (
+ + Author:{' '} + + {truncateAddress(order.maker.split(':')[1])} + +
{' '} ++ Platform:{' '} + + {order.platform} + +
{' '} +
+
+ {nid.split(':')[0] == blockchain ? (
+ + {' '} + For Sell:{' '} + + {order.makeStock} + +
+
+
+
+ ) : (
+ <>Connect With {nid.split(':')[0]} Wallet
+ )}
+ No Orders Found
+ )}
+ Order Wall
++ 1% Service Fee to Maintain the Platform and bring you new features +
+ {!load && error && (
+ <>
+
+
+ );
+}
+
+function Order_Item({
+ id,
+ platform,
+ status,
+ makeStock,
+ createdAt,
+ makePrice,
+ makePriceUsd,
+ make,
+ take,
+}: {
+ id: string;
+ platform: string;
+ status: string;
+ makeStock: string;
+ createdAt: string;
+ makePrice: string;
+ makePriceUsd: string;
+ make: any;
+ take: any;
+}) {
+ const connection = React.useContext
+
+
+ )}
+ {(load || loading) && (
+ <>
+
+
+ {
+
+
+ Age
| +Platform
| +Supply
| +Price
| +Price USD
| + {/*Contract
| */} +Blockchain
| ++ No Orders Found, Please Try Again, or Check Back Later +
+ } +
+
+
+ )}
+ {!load && complete && (
+ <>
+
+
+ {
+
+
+ Age
| +Platform
| +Supply
| +Price
| +Price USD
| + {/*Contract
| */} +Blockchain
| +
+
+
+ }
+ Loading Orders...
++
+ Loading...
+
+
+
+
+ )}
+
+
+ {_orders.length > 0 && typeof _orders[page] ? (
+ _orders[page].map((item: any, key: number) => (
+
+
+ Age
| +Platform
| +Supply
| +Price
| +Price USD
| + {/*Contract
| */} +Blockchain
| ++ No Orders Found, Please Try Again, or Search Using Another + Address +
+ )} +Page: {page + 1}
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/SEO.tsx b/src/components/SEO.tsx
new file mode 100644
index 0000000..458c894
--- /dev/null
+++ b/src/components/SEO.tsx
@@ -0,0 +1,38 @@
+// src/components/seo.js
+
+import Head from 'next/head';
+
+export default function SEO({
+ description,
+ title,
+ siteTitle,
+ twitter,
+ keywords,
+}: {
+ description?: string,
+ title?: string,
+ siteTitle?: string,
+ twitter?: string,
+ keywords?: string,
+}) {
+ return (
+
+
+
+ + {moment(_date, 'YYYYMMDD').fromNow()} +
{' '} + |{platform}
|{' '} + <> + {' '} ++ {makeStock} +
|{' '} + + <> + {' '} ++ {makePrice} {currencyABRV(id.split(':')[0])} +
{' '} + |{' '} + + <> + {' '} ++ ${makePriceUsd} +
{' '} + |{' '} + + <> + {' '} ++ {id.split(':')[0]} +
{' '} + |{' '} + + <> + {' '} ++ {typeof make.type !== 'undefined' && make.type.contract !== null && ( + + View on RArible + + )} +
{' '} + |{' '} + + <> + {' '} ++ {connection.state.status === 'connected' && + ((id.split(':')[0] == blockchain && chainId == 1) || + (id.split(':')[0] == 'POLYGON' && chainId == 137)) ? ( +
{
+ return await TAKO.buy_nft({
+ sdk: sdk,
+ amount: '1',
+ order_id: id,
+ blockchain: id.split(':')[0],
+ }).catch((e) => {
+ console.log(e.message);
+ // setError(e.message)
+ });
+ }}
+ className=''>
+ Buy 1 of {makeStock}
+
+ ) : (
+ <>Connect w/ {id.split(':')[0]} Wallet
+ )}
+ {' '}
+ |{' '}
+
+
+
+
+ );
+}
diff --git a/src/components/common/address.tsx b/src/components/common/address.tsx
new file mode 100644
index 0000000..db54c80
--- /dev/null
+++ b/src/components/common/address.tsx
@@ -0,0 +1,13 @@
+import React from "react"
+import { cutString } from "../../utils/cut-string"
+
+interface IAddressProps {
+ address?: string
+ trim?: boolean
+}
+
+export function Address({ address, trim = true }: IAddressProps) {
+ return
+ { trim ? cutString(address, 16) : address}
+
+}
\ No newline at end of file
diff --git a/src/components/common/banner.js b/src/components/common/banner.js
new file mode 100644
index 0000000..68236b3
--- /dev/null
+++ b/src/components/common/banner.js
@@ -0,0 +1,19 @@
+export default function Banner({ bannerStyle = '', bannerText = '' }) {
+ return (
+ <>
+
+
+ {label}
+ + {
+ toggleSelected(!selected);
+ }}>
+
+
+ {selected ? '✔' : '❌'}
+
+ {bannerText}
+ + + ); +} diff --git a/src/components/common/button.tsx b/src/components/common/button.tsx new file mode 100644 index 0000000..77b35c8 --- /dev/null +++ b/src/components/common/button.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +export default function Button({ + children, + ...props +}: { + children: any; + [key: string]: any; +}) { + return ( + + ); +} diff --git a/src/components/common/code.tsx b/src/components/common/code.tsx new file mode 100644 index 0000000..1644c6d --- /dev/null +++ b/src/components/common/code.tsx @@ -0,0 +1,21 @@ +import React from "react" +import { Prism as SyntaxHighlighter } from "react-syntax-highlighter" +import { darcula, materialLight } from "react-syntax-highlighter/dist/esm/styles/prism" + +interface ICodeProps { + children: string + theme?: "dark" | "light" + language?: string + wrap?: boolean +} +export function Code({ children, theme, language, wrap }: ICodeProps) { + return
setState({ ...state, show: !state.show })}
+ >
+ {!state.show ?
+
+ );
+}
diff --git a/src/components/common/form-stepper.tsx b/src/components/common/form-stepper.tsx
new file mode 100644
index 0000000..3721994
--- /dev/null
+++ b/src/components/common/form-stepper.tsx
@@ -0,0 +1,90 @@
+import React, { useReducer } from "react"
+import { Box, Button, Step, StepLabel, Stepper } from "@mui/material"
+import { faAngleLeft } from "@fortawesome/free-solid-svg-icons"
+import { cloneDeep } from "lodash"
+import { Icon } from "./icon"
+
+interface IFormStepperStep {
+ label: string,
+ render: (onComplete: (formResponse: any) => void, prevFormResponse: any) => React.ReactNode
+}
+
+interface IFormStepperProps {
+ steps: IFormStepperStep[]
+ onComplete?: (data: any) => void
+}
+
+export function FormStepper({ steps, onComplete }: IFormStepperProps) {
+ const [state, setFormResponse] = useReducer((prevState: any, action: {
+ type: "next"
+ response: any
+ } | {
+ type: "prev"
+ }) => {
+ const state = cloneDeep(prevState)
+ switch (action.type) {
+ case "next":
+ state.responses[state.currentStep] = action.response
+ state.currentStep = Math.min(state.currentStep + 1, steps.length - 1)
+ return state
+ case "prev":
+ state.currentStep = Math.max(state.currentStep - 1, 0)
+ return state
+ }
+ }, {
+ currentStep: 0,
+ responses: []
+ })
+
+ console.log(state)
+
+ return (
+ <>
+ Click To Preview Metadata
: <> {children}}
+ {children}
+}
\ No newline at end of file
diff --git a/src/components/common/input.tsx b/src/components/common/input.tsx
new file mode 100644
index 0000000..b1a7254
--- /dev/null
+++ b/src/components/common/input.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+interface p_Input {
+ id?: string;
+ label: string;
+ value: string;
+ onChange: (e: React.ChangeEvent
+
+ {
+ e.preventDefault();
+ onChange(e);
+ }}
+ min={min}
+ max={max}
+ accept={accept}
+ spellCheck
+ />
+
+
+ );
+}
diff --git a/src/components/common/list-item-link.tsx b/src/components/common/list-item-link.tsx
new file mode 100644
index 0000000..1ab2cb0
--- /dev/null
+++ b/src/components/common/list-item-link.tsx
@@ -0,0 +1,41 @@
+import React from "react"
+import { ListItem, ListItemIcon, ListItemText } from "@mui/material"
+import {
+ Link as RouterLink,
+ useLocation,
+} from "react-router-dom"
+
+interface IListItemLinkProps {
+ to: string
+ primary: React.ReactNode
+ icon?: React.ReactNode
+ default?: boolean
+}
+
+export function ListItemLink(props: IListItemLinkProps) {
+ const { icon, primary, to } = props
+ const location = useLocation();
+
+ const renderLink = React.useMemo(
+ () =>
+ React.forwardRef(function Link(itemProps, ref) {
+ return
+
+ );
+}
diff --git a/src/components/common/request-result.tsx b/src/components/common/request-result.tsx
new file mode 100644
index 0000000..685bc51
--- /dev/null
+++ b/src/components/common/request-result.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+import { Alert, AlertTitle, Box } from "@mui/material"
+import { IRequestResult } from "../hooks/use-request-result"
+import { Icon } from "./icon"
+import { faCheck, faExclamationCircle } from "@fortawesome/free-solid-svg-icons"
+
+interface IRequestResultProps
+
+
+
+
+ {children}
+
+ {JSON.stringify(transaction, null, " ")}
+
+
+}
\ No newline at end of file
diff --git a/src/components/common/unsupported-blockchain-warning.tsx b/src/components/common/unsupported-blockchain-warning.tsx
new file mode 100644
index 0000000..87f76cc
--- /dev/null
+++ b/src/components/common/unsupported-blockchain-warning.tsx
@@ -0,0 +1,21 @@
+import React from "react"
+import { Blockchain } from "@rarible/api-client"
+import { Alert, AlertTitle } from "@mui/material"
+
+interface IUnsupportedBlockchainWarningProps {
+ blockchain: Blockchain | undefined
+ message?: string
+}
+
+export function UnsupportedBlockchainWarning({ blockchain, message }: IUnsupportedBlockchainWarningProps) {
+ return
+
+ {/*
+
+ );
+}
diff --git a/src/components/hooks/use-request-result.tsx b/src/components/hooks/use-request-result.tsx
new file mode 100644
index 0000000..35b1cc5
--- /dev/null
+++ b/src/components/hooks/use-request-result.tsx
@@ -0,0 +1,49 @@
+import { useState } from "react"
+import { isString } from "lodash"
+import { FormState } from "../common/form/types"
+
+export interface IRequestResult
+
*/}
+
+ 0}
+ onSubmit={(): any => {
+ TAKO.validateAddress(address)
+ .then((res) => {
+ if (res.isValid) {
+ setErr('');
+ setShowErr(false);
+ router.push(`/o/${res.address}`);
+ } else {
+ console.log('res', res);
+ setErr(res.error);
+ setShowErr(true);
+ }
+ })
+ .catch((err) => {
+ console.log('err', err);
+ setErr(err);
+ setShowErr(true);
+ });
+ }}
+ onChange={(e) => setAddress(e)}
+ />
+
+
+ {!hideHowTo && (
+
+
+
+ )}
+
+ + NFT - BLOCKCHAIN:COLLECTION_ADDRESS:NFT_ID +
+USER - BLOCKCHAIN:ADDRESS
+COLLECTION - BLOCKCHAIN:ADDRESS
+
+
+
+
+
+
+
+
+
+ );
+ } else {
+ return (
+ <>
+
+ 
+
+ +
+ {false && + +
+ {play ?
+ )}
+
+
+
+
+ + + {false &&
+
+ );
+ }
+};
diff --git a/src/components/media-viewer/audio/style.css b/src/components/media-viewer/audio/style.css
new file mode 100644
index 0000000..d6e7b7b
--- /dev/null
+++ b/src/components/media-viewer/audio/style.css
@@ -0,0 +1,3 @@
+#audio {
+ width: '100%';
+}
diff --git a/src/components/media-viewer/audio/styles.module.scss b/src/components/media-viewer/audio/styles.module.scss
new file mode 100644
index 0000000..1778a9e
--- /dev/null
+++ b/src/components/media-viewer/audio/styles.module.scss
@@ -0,0 +1,59 @@
+@import '/styles/layout.scss';
+
+.audio {
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ object-fit: cover;
+ @include respond-to('desktop') {
+ width: 50%;
+ }
+}
+.container {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 320px;
+ height: 320px;
+ margin: 0 auto;
+
+ &.userTouch {
+ .icons {
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ }
+
+ &:hover {
+ .icons {
+ opacity: 1;
+ }
+ }
+ }
+
+ img {
+ display: none;
+ width: 100%;
+ height: auto;
+ }
+
+ .icons {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+
+ svg {
+ width: 50px;
+ rect,
+ path {
+ fill: var(--text-color);
+ }
+ }
+ }
+}
diff --git a/src/components/media-viewer/audio/visualiser.js b/src/components/media-viewer/audio/visualiser.js
new file mode 100644
index 0000000..34fc76e
--- /dev/null
+++ b/src/components/media-viewer/audio/visualiser.js
@@ -0,0 +1,109 @@
+import { createRef, PureComponent } from 'react';
+
+export class Visualiser extends PureComponent {
+ ref = createRef();
+
+ componentDidMount() {
+ this.ctx = this.ref.current.getContext('2d');
+ this.ratio = Math.max(1, Math.min(global.devicePixelRatio, 2));
+ }
+
+ componentDidUpdate() {
+ this.resize();
+ }
+
+ componentWillUnmount() {
+ cancelAnimationFrame(this.raf);
+ }
+
+ init() {
+ this.audio = new Audio();
+ this.audio.src = this.props.src;
+ this.audio.controls = false;
+ this.audio.loop = true;
+ this.audio.autoplay = false;
+ this.audio.crossOrigin = 'anonymous';
+
+ this.audioCtx = new AudioContext();
+
+ this.analyser = this.audioCtx.createAnalyser();
+ // this.analyser.fftSize = 2048
+
+ this.source = this.audioCtx.createMediaElementSource(this.audio);
+ this.source.connect(this.analyser);
+
+ this.source.connect(this.audioCtx.destination);
+
+ this.data = new Float32Array(this.analyser.frequencyBinCount);
+ this.analyser.getFloatTimeDomainData(this.data);
+
+ this.style = getComputedStyle(document.body);
+ }
+
+ play() {
+ this.audio.play();
+
+ this.raf = requestAnimationFrame(this.update);
+ }
+
+ pause(reset) {
+ this.audio.pause();
+
+ cancelAnimationFrame(this.raf);
+
+ if (reset) {
+ this.audio.currentTime = 0;
+ }
+ }
+
+ resize() {
+ const width = 320;
+ const height = 320;
+ this.ctx.canvas.width = width * this.ratio;
+ this.ctx.canvas.height = height * this.ratio;
+ this.ctx.canvas.style.width = `${width}px`;
+ this.ctx.canvas.style.height = `${height}px`;
+ }
+
+ update = () => {
+ // this.analyser.getByteFrequencyData(this.data)
+ this.analyser.getFloatTimeDomainData(this.data);
+
+ this.resize();
+
+ this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+
+ // FIRST OPTION (traditional)
+ // let space = this.ctx.canvas.width / this.data.length
+ // this.data.forEach((value, i) => {
+ // this.ctx.beginPath()
+ // this.ctx.strokeStyle = 'red'
+ // this.ctx.moveTo(space * i, this.ctx.canvas.height) //x,y
+ // this.ctx.lineTo(space * i, this.ctx.canvas.height - value) //x,y
+ // this.ctx.stroke()
+ // })
+
+ this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+ this.ctx.beginPath();
+
+ for (let i = 0; i < this.data.length; i++) {
+ const x = i;
+ const y = (0.5 + this.data[i] / 2) * this.ctx.canvas.height;
+
+ if (i === 0) {
+ this.ctx.moveTo(x, y);
+ } else {
+ this.ctx.lineTo(x, y);
+ }
+ }
+
+ this.ctx.strokeStyle = this.style.getPropertyValue('--text-color');
+ this.ctx.lineWidth = 2 * global.devicePixelRatio;
+ this.ctx.stroke();
+ this.raf = requestAnimationFrame(this.update);
+ };
+
+ render() {
+ return ;
+ }
+}
diff --git a/src/components/media-viewer/constants.js b/src/components/media-viewer/constants.js
new file mode 100644
index 0000000..e582295
--- /dev/null
+++ b/src/components/media-viewer/constants.js
@@ -0,0 +1,101 @@
+let LANGUAGE = {};
+export const setLanguage = (data) => (LANGUAGE = data);
+export const getLanguage = () => LANGUAGE;
+
+let objktBlockList = [];
+export const setObjktBlockList = (data) => (objktBlockList = data);
+export const getObjktBlockList = () => objktBlockList;
+
+let walletBlockList = [];
+export const setWalletBlockList = (data) => (walletBlockList = data);
+export const getWalletBlockList = () => walletBlockList;
+
+let banBlockList = [];
+export const setBanBlockList = (data) => (banBlockList = data);
+export const getBanBlockList = () => banBlockList;
+
+export const PATH = {
+ FEED: '/',
+ ISSUER: '/tz',
+ COLLAB: '/kt',
+ ABOUT: '/about',
+ FAQ: '/faq',
+ SYNC: '/sync',
+ MINT: '/mint',
+ OBJKT: '/objkt',
+ GALLERY: '/gallery',
+ TAGS: '/tags',
+};
+
+export const MINT_MIN_LIMIT = 1;
+export const MINT_MAX_LIMIT = 10000;
+export const MINT_FILESIZE = 100;
+
+export const MIMETYPE = {
+ BMP: 'image/bmp',
+ GIF: 'image/gif',
+ JPEG: 'image/jpeg',
+ PNG: 'image/png',
+ SVG: 'image/svg+xml',
+ TIFF: 'image/tiff',
+ WEBP: 'image/webp',
+ MP4: 'video/mp4',
+ OGV: 'video/ogg',
+ QUICKTIME: 'video/quicktime',
+ WEBM: 'video/webm',
+ GLB: 'model/gltf-binary',
+ GLTF: 'model/gltf+json',
+ MP3: 'audio/mpeg',
+ OGA: 'audio/ogg',
+ WAV: 'audio/wav',
+ XWAV: 'audio/x-wav',
+ FLAC: 'audio/flac',
+ PDF: 'application/pdf',
+ ZIP: 'application/zip',
+ ZIP1: 'application/x-zip-compressed',
+ ZIP2: 'multipart/x-zip',
+ MD: 'text/plain',
+};
+
+export const IPFS_DIRECTORY_MIMETYPE = 'application/x-directory';
+
+export const ALLOWED_MIMETYPES = Object.keys(MIMETYPE)
+ .map((k) => MIMETYPE[k])
+ .filter((e) => e !== MIMETYPE.GLTF); // disabling GLTF from new updates
+
+export const ALLOWED_FILETYPES_LABEL = Object.entries(MIMETYPE)
+ .filter((e) => ALLOWED_MIMETYPES.includes(e[1]))
+ .filter(
+ (e) =>
+ ![
+ 'ZIP1',
+ 'ZIP2',
+ 'OGA',
+ 'OGV',
+ 'BMP',
+ 'TIFF',
+ 'XWAV',
+ 'QUICKTIME',
+ 'WEBP',
+ ].includes(e[0])
+ )
+ .map((e) => (e[0] === 'ZIP' ? 'HTML (ZIP ARCHIVE)' : e[0]))
+ .join(', ');
+
+export const ALLOWED_COVER_MIMETYPES = [
+ MIMETYPE.JPEG,
+ MIMETYPE.PNG,
+ MIMETYPE.GIF,
+ MIMETYPE.MP4,
+];
+
+export const ALLOWED_COVER_FILETYPES_LABEL = ['jpeg, png, gif'];
+
+export const MAX_EDITIONS = 10000; // Limited by contract
+
+export const MIN_ROYALTIES = 10; // Limited by contract
+
+export const MAX_ROYALTIES = 25; // Limited by contract
+
+export const IPFS_DEFAULT_THUMBNAIL_URI =
+ 'ipfs://QmNrhZHUaEqxhyLfqoq1mtHSipkWHeT31LNHb1QEbDHgnc';
diff --git a/src/components/media-viewer/container.js b/src/components/media-viewer/container.js
new file mode 100644
index 0000000..ce18918
--- /dev/null
+++ b/src/components/media-viewer/container.js
@@ -0,0 +1,149 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useContext, useEffect, useRef } from 'react';
+import screenfull from 'screenfull';
+import { useInView } from 'react-intersection-observer';
+import classnames from 'classnames';
+import { iOS } from './os';
+import Context from './Context';
+import styles from './styles.module.scss';
+// import './style.css'
+
+/**
+ * Currently fullscreen is disabled on iOS
+ * this is mainly because Safari iOS doesn't support fullscreen api.
+ */
+
+/**
+ * This component handles fullscreen mode
+ * and inView prop for lazy loading
+ */
+export const Container = ({
+ children = null,
+ interactive,
+ nofullscreen = false,
+}) => {
+ const context = useContext(Context);
+ const domElement = useRef();
+
+ const { ref, inView } = useInView({
+ threshold: 0,
+ });
+
+ const toggleFullScreen = () => {
+ if (!screenfull.isFullscreen) {
+ screenfull.request(domElement.current, { navigationUI: 'hide' });
+ } else {
+ screenfull.exit();
+ }
+ };
+
+ const fullscreenChange = (e) => {
+ if (iOS) {
+ return;
+ }
+
+ if (screenfull.isFullscreen) {
+ // context.setFullscreen(true);
+ } else {
+ // context.setFullscreen(false);
+ }
+ // simulates resize to fix GLB player
+ window.dispatchEvent(new Event('resize'));
+ };
+
+ useEffect(() => {
+ if (nofullscreen || !iOS) {
+ document.addEventListener('fullscreenchange', fullscreenChange);
+ document.addEventListener(
+ 'webkitfullscreenchange',
+ fullscreenChange,
+ false
+ );
+ }
+
+ return () => {
+ if (nofullscreen || !iOS) {
+ document.removeEventListener('fullscreenchange', fullscreenChange);
+ document.removeEventListener(
+ 'webkitfullscreenchange',
+ fullscreenChange,
+ false
+ );
+ }
+ };
+ }, []);
+
+ const classes = classnames({
+ [styles.container]: true,
+ [styles.fullscreen]: false,
+ });
+
+ const childrenWithProps = React.Children.map(children, (child) => {
+ if (React.isValidElement(child)) {
+ return React.cloneElement(child, { inView, interactive });
+ }
+ return child;
+ });
+
+ return (
+ <>
+ + + + {false &&
+ {play ?
+ )}
+
+
+
+ );
+};
diff --git a/src/components/media-viewer/glb/index.js b/src/components/media-viewer/glb/index.js
new file mode 100644
index 0000000..a554f4f
--- /dev/null
+++ b/src/components/media-viewer/glb/index.js
@@ -0,0 +1,71 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './styles.module.scss';
+
+export const GLBComponent = ({
+ artifactUri,
+ previewUri,
+ preview,
+ onDetailView,
+ displayView,
+}) => {
+ const ref = useRef();
+ const [width, setWidth] = useState('100px');
+ const [height, setHeight] = useState('100px');
+
+ const props = {
+ src: preview ? previewUri : artifactUri,
+ autoplay: true,
+ 'auto-rotate': true,
+ 'data-js-focus-visible': true,
+ 'interaction-prompt': 'none',
+ };
+
+ if (onDetailView) {
+ props['ar'] = true;
+ props['ar-modes'] = 'webxr scene-viewer quick-look';
+ props['camera-controls'] = true;
+ }
+
+ const handleResize = () => {
+ if (ref.current) {
+ const { width, height } = ref.current.getBoundingClientRect();
+ setWidth(width);
+ setHeight(height);
+ }
+ };
+
+ useEffect(() => {
+ handleResize();
+ global.addEventListener('resize', handleResize);
+
+ return () => {
+ global.removeEventListener('resize', handleResize);
+ };
+ }, [width, height]);
+ if (displayView) {
+
+ return (
+
+ {interactive && !iOS && !nofullscreen && (
+
+
+ {context.fullscreen ? (
+
+ ) : (
+
+ )}
+
+ )}
+ {childrenWithProps}
+
+
+
+
+
+ );
+ } else {
+ return (
+
+
+
+
+
+ );
+ }
+};
diff --git a/src/components/media-viewer/glb/styles.module.scss b/src/components/media-viewer/glb/styles.module.scss
new file mode 100644
index 0000000..f3b9c02
--- /dev/null
+++ b/src/components/media-viewer/glb/styles.module.scss
@@ -0,0 +1,47 @@
+@import '/styles/layout.scss';
+
+.viewer {
+ width: 100%;
+ height: 60vh;
+ display: block;
+ margin: 0 auto;
+ border: none;
+
+ @include respond-to('desktop') {
+ width: 50% !important;
+ }
+}
+
+.container {
+ position: relative;
+ display: block;
+ width: 100%;
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:after {
+ content: '';
+ display: block;
+ padding-bottom: 100%;
+ }
+}
+
+.model-viewer {
+ width: 100%;
+ height: 60vh;
+ margin: 0 auto;
+}
+
+.arButton {
+ position: absolute;
+ bottom: 10px;
+ left: 10px;
+ color: var(--text-color);
+ background-color: transparent;
+ border-radius: 4px;
+ border: 2px solid var(--text-color);
+ padding: 4px 8px;
+ cursor: pointer;
+}
diff --git a/src/components/media-viewer/html/index.js b/src/components/media-viewer/html/index.js
new file mode 100644
index 0000000..22efc56
--- /dev/null
+++ b/src/components/media-viewer/html/index.js
@@ -0,0 +1,121 @@
+import React, { useContext, useState, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import Context from '../Context';
+import { Button } from '../../common/button';
+import {
+ dataRUIToBuffer,
+ prepareFilesFromZIP,
+ validateFiles,
+} from '../htmlHelpers';
+import { VisuallyHidden } from '../visually-hidden';
+import styles from './styles.module.scss';
+// import './styles.css'
+
+const uid = Math.round(Math.random() * 100000000).toString();
+
+export const HTMLComponent = (props) => {
+ const {
+ viewer,
+ artifactUri,
+ displayUri,
+ previewUri,
+ creator,
+ objkt,
+ onDetailView,
+ preview,
+ displayView,
+ } = props;
+ const context = useContext(Context);
+
+ let _creator_ = false;
+ let _viewer_ = false;
+ let _objectId_ = false;
+
+ if (creator && creator.address) {
+ _creator_ = creator.address;
+ }
+
+ if (viewer && viewer !== undefined) {
+ _viewer_ = viewer;
+ }
+
+ if (objkt) {
+ _objectId_ = String(objkt);
+ }
+
+ // preview
+ const iframeRef = useRef(null);
+ const unpackedFiles = useRef(null);
+ const unpacking = useRef(false);
+ const [validHTML, setValidHTML] = useState(null);
+ const [validationError, setValidationError] = useState(null);
+ const [contentRef, setContentRef] = useState(null);
+
+ const unpackZipFiles = async () => {
+ unpacking.current = true;
+
+ const buffer = dataRUIToBuffer(artifactUri);
+ const filesArr = await prepareFilesFromZIP(buffer);
+ const files = {};
+ filesArr.forEach((f) => {
+ files[f.path] = f.blob;
+ });
+
+ unpackedFiles.current = files;
+
+ const result = await validateFiles(unpackedFiles.current);
+ if (result.error) {
+ console.error(result.error);
+ setValidationError(result.error);
+ } else {
+ setValidationError(null);
+ }
+ setValidHTML(result.valid);
+
+ unpacking.current = false;
+ };
+
+ // useEffect(() => {
+
+ // const handler = async (event) => {
+ // unpackZipFiles();
+
+ // iframeRef.current.contentWindow.postMessage(
+ // {
+ // target: 'hicetnunc-html-preview',
+ // data: unpackedFiles.current,
+ // },
+ // '*'
+ // );
+ // };
+
+ // window.addEventListener('message', handler);
+
+ // return () => window.removeEventListener('message', handler);
+ // }, [artifactUri]);
+
+ const classes = classnames({
+ [styles.container]: true,
+ [styles.interactive]: true,
+ });
+
+ // if (true) {
+ // creator is viewer in preview
+ _creator_ = _viewer_;
+
+ // }
+
+ return (
+
+
+
+ );
+};
diff --git a/src/components/media-viewer/html/styles.module.scss b/src/components/media-viewer/html/styles.module.scss
new file mode 100644
index 0000000..ded69de
--- /dev/null
+++ b/src/components/media-viewer/html/styles.module.scss
@@ -0,0 +1,101 @@
+@import '/styles/layout.scss';
+@import '/styles/mixins.scss';
+
+.html {
+ @include embedObjktViewSizes;
+}
+
+.container {
+ position: relative;
+ display: block;
+ width: 100%;
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+
+ &:after {
+ content: '';
+ display: block;
+ padding-bottom: 100%;
+ }
+
+ &.interactive {
+ pointer-events: all;
+ }
+
+ .preview {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: black;
+
+ img {
+ width: 100%;
+ height: auto;
+ }
+
+ .button {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .gradient {
+ position: absolute;
+ top: 0;
+ right: 0;
+ transform: translateY(50%) translateY(-50%);
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(
+ circle,
+ rgba(0, 0, 0, 0) 70%,
+ rgba(255, 255, 255, 0.2) 100%
+ );
+ }
+
+ svg {
+ position: absolute;
+ top: 6px;
+ right: 6px;
+ display: flex;
+ width: 30px;
+ height: auto;
+ margin: 0 auto;
+ z-index: 1;
+ }
+ }
+ }
+
+ iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: none;
+ }
+}
+
+.warning {
+ display: flex;
+ flex-direction: column;
+ border: 1px solid var(--text-color);
+ margin-bottom: 20px;
+ padding: 20px;
+}
+
+.error {
+ padding: 20px;
+}
diff --git a/src/components/media-viewer/html/warning.js b/src/components/media-viewer/html/warning.js
new file mode 100644
index 0000000..95643f5
--- /dev/null
+++ b/src/components/media-viewer/html/warning.js
@@ -0,0 +1,15 @@
+import { Button, Primary } from '../../common/button';
+import styles from './styles.module.scss';
+
+export function HTMLWarning() {
+ return (
+
+
+ );
+}
diff --git a/src/components/media-viewer/htmlHelpers.js b/src/components/media-viewer/htmlHelpers.js
new file mode 100644
index 0000000..088f1bb
--- /dev/null
+++ b/src/components/media-viewer/htmlHelpers.js
@@ -0,0 +1,294 @@
+import * as fflate from 'fflate';
+import mime from 'mime-types';
+import { IPFS_DIRECTORY_MIMETYPE } from './constants';
+
+export async function prepareFilesFromZIP(buffer) {
+ // unzip files
+ let files = await unzipBuffer(buffer);
+
+ // save raw index file
+ const indexBlob = files['index.html'];
+ files['index_raw.html'] = new Blob([indexBlob], { type: indexBlob.type });
+
+ // inject CSP meta tag in all html files
+ for (let k in files) {
+ if (k.endsWith('.html') || k.endsWith('.htm')) {
+ const pageBuffer = await files[k].arrayBuffer();
+ const safePageBuffer = injectCSPMetaTagIntoBuffer(pageBuffer);
+ files[k] = new Blob([safePageBuffer], {
+ type: indexBlob.type,
+ });
+ }
+ }
+
+ // reformat
+ files = Object.entries(files).map((file) => {
+ return {
+ path: file[0],
+ blob: file[1],
+ };
+ });
+
+ // remove top level dir
+ files = files.filter((f) => f.path !== '');
+
+ return files;
+}
+
+export async function unzipBuffer(buffer) {
+ let entries = fflate.unzipSync(buffer);
+ entries = Object.entries(entries).map((entry) => {
+ return {
+ path: entry[0],
+ buffer: entry[1],
+ };
+ });
+
+ // Find root dir
+ let rootDir = null;
+ for (let i = 0; i < entries.length; i++) {
+ const parts = entries[i].path.split('/');
+ const filename = parts[parts.length - 1];
+ if (filename === 'index.html') {
+ const parts = entries[i].path.split('/');
+ parts.pop();
+ rootDir = parts.join('/');
+ break;
+ }
+ }
+
+ if (rootDir === null) {
+ const msg = 'No index.html file found!';
+ window.alert(msg);
+ throw new Error(msg);
+ }
+
+ // Create files map
+ const files = {};
+ entries.forEach((entry, index) => {
+ const relPath = entry.path.replace(`${rootDir}/`, '');
+ let type;
+ if (entry.buffer.length === 0 && entry.path.endsWith('/')) {
+ type = IPFS_DIRECTORY_MIMETYPE;
+ } else {
+ type = mime.lookup(entry.path);
+ }
+
+ files[relPath] = new Blob([entry.buffer], {
+ type,
+ });
+ });
+
+ return files;
+}
+
+export function injectCSPMetaTagIntoDataURI(dataURI) {
+ // data URI -> HTML
+ const prefix = 'data:text/html;base64,';
+ const base64 = dataURI.replace(prefix, '');
+ const html = atob(base64);
+
+ // inject CSP meta tag
+ const safeHTML = injectCSPMetaTagIntoHTML(html);
+
+ // HTML -> data URI
+ return `${prefix}${btoa(safeHTML)}`;
+}
+
+export function injectCSPMetaTagIntoBuffer(buffer) {
+ // buffer -> HTML
+ const html = new TextDecoder().decode(buffer);
+
+ // inject CSP meta tag
+ const safeHTML = injectCSPMetaTagIntoHTML(html);
+
+ // HTML -> buffer
+ return new TextEncoder().encode(safeHTML);
+}
+
+export function injectCSPMetaTagIntoHTML(html) {
+ // HTML -> doc
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(html, 'text/html');
+
+ // remove any existing CSP meta tags
+ const existing = doc.head.querySelectorAll(
+ 'meta[http-equiv="Content-Security-Policy"]'
+ );
+ if (existing.length) {
+ for (let i = 0; i < existing.length; i++) {
+ existing[i].remove();
+ }
+ }
+
+ if (!doc.head) {
+ const msg = 'index.html is missing tag!';
+ window.alert(msg);
+ throw new Error(msg);
+ }
+
+ // inject CSP meta tag
+ doc.head.insertAdjacentHTML(
+ 'afterbegin',
+ `
+
+ `
+ );
+
+ // doc -> HTML
+ return `${doc.documentElement.innerHTML}`;
+}
+
+export function getCoverImagePathFromBuffer(buffer) {
+ // buffer -> html
+ const html = new TextDecoder().decode(buffer);
+
+ // html -> doc
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(html, 'text/html');
+
+ return getCoverImagePathFromDoc(doc);
+}
+
+function getCoverImagePathFromDoc(doc) {
+ let meta = doc.head.querySelector('meta[property="cover-image"]');
+ if (!meta) {
+ meta = doc.head.querySelector('meta[property="og:image"]');
+ }
+
+ if (!meta) return null;
+
+ return meta.getAttribute('content');
+}
+
+export async function validateFiles(files) {
+ // check for index.html file
+ if (!files['index.html']) {
+ return {
+ valid: false,
+ error: 'Missing index.html file',
+ };
+ }
+
+ const pageBlob = files['index.html'];
+ let htmlString = await pageBlob.text();
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(htmlString, 'text/html');
+
+ // check for tag
+ if (!doc.head) {
+ return {
+ valid: false,
+ error:
+ 'Missing tag in index.html. Please refer to the Interactive OBJKTs Guide..',
+ };
+ }
+
+ return {
+ valid: true,
+ };
+}
+
+export function dataRUIToBuffer(dataURI) {
+ const parts = dataURI.split(',');
+ const base64 = parts[1];
+ const binaryStr = atob(base64);
+ const len = binaryStr.length;
+ const bytes = new Uint8Array(len);
+ for (let i = 0; i < len; i++) {
+ bytes[i] = binaryStr.charCodeAt(i);
+ }
+ return bytes;
+}
diff --git a/src/components/media-viewer/image/index.js b/src/components/media-viewer/image/index.js
new file mode 100644
index 0000000..31392fc
--- /dev/null
+++ b/src/components/media-viewer/image/index.js
@@ -0,0 +1,111 @@
+import React from 'react';
+import {LazyLoadImage} from 'react-lazy-load-image-component';
+import Image from 'next/image';
+import styles from './styles.module.scss';
+function arrayContains(needle, arrhaystack) {
+ const haystack = arrhaystack
+ .map((item) => {
+ // /(https?|ftp):\/\/[\.[a-zA-Z0-9\/\-]+/
+ // console.log(
+ // item,
+ // needle.split(
+ // /(https:\/\/rarible.mypinata.cloud\/ipfs\/)[\.[a-zA-Z0-9\/\-]+/g
+ // )[1]
+ // );
+
+ return needle.indexOf(item) > -1;
+ })
+ .filter(function (val) {
+ return val == true;
+ });
+ // console.log([haystack], [haystack[0]].length > -1, [haystack]);
+ return haystack.length > 0;
+}
+// function arrayContains(needle, arrhaystack) {
+// const haystack = arrhaystack
+// .map((item) => {
+// /(https?|ftp):\/\/[\.[a-zA-Z0-9\/\-]+/;
+
+// const regex = new RegExp(item, 'g'); // correct way
+
+// if (
+// needle
+// .replace(regex, 'https://akkoros.mypinata.cloud/ipfs/')
+// .split('ipfs/')[0] == 'https://akkoros.mypinata.cloud/'
+// ) {
+// return needle.replace(regex, 'https://akkoros.mypinata.cloud/ipfs/');
+// }
+// })
+// .filter(function (val) {
+// return val !== null && val !== undefined && val !== '';
+// });
+
+// return haystack.length > 0;
+// }
+export const ImageComponent = ({
+ artifactUri,
+ displayUri,
+ previewUri,
+ onDetailView,
+ preview,
+ displayView,
+ styling,
+}) => {
+ let src = onDetailView ? artifactUri : displayUri || artifactUri;
+ const [show, setShow] = React.useState(false);
+ return (
+ IMPORTANT: Please read the guide before minting!
+ +
+
+ {arrayContains(src, [
+ 'akkoros.mypinata.cloud/ipfs/',
+ 'rarible.mypinata.cloud/ipfs/',
+ ]) ? (
+ {
+ setShow(true);
+ }}
+ />
+ ) : (
+
+ );
+};
diff --git a/src/components/media-viewer/image/styles.module.scss b/src/components/media-viewer/image/styles.module.scss
new file mode 100644
index 0000000..c044397
--- /dev/null
+++ b/src/components/media-viewer/image/styles.module.scss
@@ -0,0 +1,29 @@
+@import '/styles/layout.scss';
+.style {
+ height: 100%;
+ max-width: 100%;
+ max-height: 800px;
+ display: block;
+ margin: 0 auto;
+ border: none;
+}
+
+.container {
+ .image {
+ display: block;
+ width: auto;
+
+ max-width: 100%;
+ height: auto;
+ margin: 0 auto;
+
+ @include respond-to('tablet') {
+ max-height: 70vh;
+ height: initial;
+ }
+
+ @include respond-to('desktop') {
+ max-height: 60vh;
+ }
+ }
+}
diff --git a/src/components/media-viewer/index.js b/src/components/media-viewer/index.js
new file mode 100644
index 0000000..082d25e
--- /dev/null
+++ b/src/components/media-viewer/index.js
@@ -0,0 +1,243 @@
+import React from 'react';
+// import ipfsClient from 'ipfs-http-client'
+import { GLBComponent } from './glb';
+import { ImageComponent } from './image';
+import { VideoComponent } from './video';
+import { AudioComponent } from './audio';
+import { VectorComponent } from './vector';
+import { HTMLComponent } from './html';
+import { UnknownComponent } from './unknown';
+import { PdfComponent } from './pdf';
+import { MIMETYPE, IPFS_DIRECTORY_MIMETYPE } from './constants';
+import { Container } from './container';
+import { MD } from './md';
+
+// converts an ipfs hash to ipfs url
+const HashToURL = (hash, type) => {
+ // when on preview the hash might be undefined.
+ // its safe to return empty string as whatever called HashToURL is not going to be used
+ // artifactUri or displayUri
+ if (hash == undefined) {
+ return '';
+ }
+
+ switch (type) {
+ case 'CLOUDFLARE':
+ return hash.replace('ipfs://', 'https://cloudflare-ipfs.com/ipfs/');
+ case 'PINATA':
+ return hash.replace('ipfs://', 'https://gateway.pinata.cloud/ipfs/');
+ case 'IPFS':
+ return hash.replace('ipfs://', 'https://ipfs.io/ipfs/');
+
+ case 'DWEB':
+ return hash.replace('ipfs://', 'http://dweb.link/ipfs/');
+ default:
+ console.error('please specify type');
+ return hash;
+ }
+};
+
+/*
+
+README:
+renderMediaType requires the following props being passed individually.
+Once all API have the same structure we can pass the whole object, but right now
+there's a mix of GraphQL and API and they have different structures, so passing
+the props one by one helps avoid bugs
+
+MANDATORY FIELDS:
+- mimeType (mimetype)
+- artifactUri (ipfs link)
+- displayUri (ipfs link)
+
+OPTIONAL FIELDS:
+- creator (creator wallet)
+- objkt (objkt number)
+- interactive (boolean)
+- preview (boolean)
+ */
+
+function MediaViewer({
+ // the objkt mimeType (used to choose what renderer to use)
+ mimeType,
+
+ // artifactUri holds the file the user uploaded
+ artifactUri,
+
+ // displayUri might be sometimes undefined or '', but when present its a lower resolution of the artifactUri for faster loading
+ displayUri,
+
+ // previewUri is used when previewing on mint page
+ previewUri,
+
+ // the wallet id of the creator
+ creator,
+
+ // the objkt id so interactive NFT's can call API's
+ objkt,
+
+ // if the NFT is on the objkt detail page this value is true. otherwise is false
+ interactive = false,
+
+ // when previewing during mint process
+ preview = false,
+
+ displayView,
+ imageStyle
+}) {
+ let parsedArtifactUri;
+ let parsedDisplayUri;
+
+ switch (mimeType) {
+ /* IMAGES */
+ case MIMETYPE.BMP:
+ case MIMETYPE.GIF:
+ case MIMETYPE.JPEG:
+ case MIMETYPE.PNG:
+ case MIMETYPE.TIFF:
+ case MIMETYPE.WEBP:
+ parsedArtifactUri = HashToURL(artifactUri, 'IPFS');
+ parsedDisplayUri = HashToURL(displayUri, 'IPFS');
+ // when its a GIF we always load the artifactUri by triggering `onDetailView` to be `true`.
+ return (
+
+
+ )}
+ {children}
;
+};
diff --git a/src/components/media-viewer/layout/container/styles.module.scss b/src/components/media-viewer/layout/container/styles.module.scss
new file mode 100644
index 0000000..cb5b944
--- /dev/null
+++ b/src/components/media-viewer/layout/container/styles.module.scss
@@ -0,0 +1,25 @@
+@import '/styles/variables.scss';
+@import '/styles/layout.scss';
+
+.container {
+ width: 100%;
+ margin: 0 auto;
+ margin-bottom: 20px;
+ word-break: break-word;
+
+ @include respond-to('desktop') {
+ width: 50%;
+ }
+
+ &.large {
+ @include respond-to('desktop') {
+ width: 55%;
+ }
+ }
+
+ &.xlarge {
+ @include respond-to('desktop') {
+ width: 80%;
+ }
+ }
+}
diff --git a/src/components/media-viewer/layout/index.js b/src/components/media-viewer/layout/index.js
new file mode 100644
index 0000000..c1a3665
--- /dev/null
+++ b/src/components/media-viewer/layout/index.js
@@ -0,0 +1,3 @@
+export { Page } from './page';
+export { Container } from '../container';
+export { Padding } from './padding';
diff --git a/src/components/media-viewer/layout/padding/index.js b/src/components/media-viewer/layout/padding/index.js
new file mode 100644
index 0000000..ce080c8
--- /dev/null
+++ b/src/components/media-viewer/layout/padding/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import styles from './styles.module.scss';
+
+export const Padding = ({ children = null }) => {
+ return {children}
;
+};
diff --git a/src/components/media-viewer/layout/padding/styles.module.scss b/src/components/media-viewer/layout/padding/styles.module.scss
new file mode 100644
index 0000000..8eb15f1
--- /dev/null
+++ b/src/components/media-viewer/layout/padding/styles.module.scss
@@ -0,0 +1,7 @@
+@import '/styles/variables.scss';
+@import '/styles/layout.scss';
+
+.container {
+ // border: 1px dashed green;
+ //padding: 0 20px;
+}
diff --git a/src/components/media-viewer/layout/page/index.js b/src/components/media-viewer/layout/page/index.js
new file mode 100644
index 0000000..e46a733
--- /dev/null
+++ b/src/components/media-viewer/layout/page/index.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import classnames from 'classnames';
+import { VisuallyHidden } from '../../visually-hidden';
+import styles from './styles.module.scss';
+
+export const Page = ({ title = 'hic et nunc', children = null, large }) => {
+ const classes = classnames({
+ [styles.container]: true,
+ [styles.large]: large,
+ });
+ return (
+
+
+
+ {data}
+
+
+
+ );
+};
diff --git a/src/components/media-viewer/os.js b/src/components/media-viewer/os.js
new file mode 100644
index 0000000..20c1be7
--- /dev/null
+++ b/src/components/media-viewer/os.js
@@ -0,0 +1,12 @@
+export const iOS = false;
+
+// [
+// 'iPad Simulator',
+// 'iPhone Simulator',
+// 'iPod Simulator',
+// 'iPad',
+// 'iPhone',
+// 'iPod',
+// ].includes(navigator.platform) ||
+// // iPad on iOS 13 detection
+// (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
diff --git a/src/components/media-viewer/pdf/index.js b/src/components/media-viewer/pdf/index.js
new file mode 100644
index 0000000..ce0f3a4
--- /dev/null
+++ b/src/components/media-viewer/pdf/index.js
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import styles from './styles.module.scss';
+import { Document, Page, pdfjs } from 'react-pdf';
+import Button from '../../common/button';
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
+
+export const PdfComponent = ({
+ artifactUri,
+ displayUri,
+ previewUri,
+ preview,
+ onDetailView,
+}) => {
+ const [numPages, setNumPages] = useState(null);
+ const [pageNumber, setPageNumber] = useState(1);
+
+ function onDocumentLoadSuccess({ numPages }) {
+ setNumPages(numPages);
+ }
+
+ function changePage(offset) {
+ setPageNumber((prevPageNumber) => prevPageNumber + offset);
+ }
+
+ function previousPage() {
+ changePage(-1);
+ }
+
+ function nextPage() {
+ changePage(1);
+ }
+
+ function onItemClick(item) {
+ setPageNumber(item.pageNumber);
+ }
+
+ return (
+
+
+
+
+ );
+};
diff --git a/src/components/media-viewer/pdf/styles.module.scss b/src/components/media-viewer/pdf/styles.module.scss
new file mode 100644
index 0000000..cddd792
--- /dev/null
+++ b/src/components/media-viewer/pdf/styles.module.scss
@@ -0,0 +1,37 @@
+@import '/styles/layout.scss';
+
+.container {
+ position: relative;
+ display: block;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+
+ &:after {
+ content: '';
+ display: block;
+ }
+
+ iframe {
+ border: none;
+ }
+
+ canvas {
+ max-width: 100%;
+ margin: 0 auto;
+ height: auto !important;
+ }
+
+ .pdfNav {
+ position: relative;
+ margin: 6px;
+ text-align: center;
+ font-size: 0.8em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ p {
+ margin: 6px 12px;
+ }
+ }
+}
diff --git a/src/components/media-viewer/style.css b/src/components/media-viewer/style.css
new file mode 100644
index 0000000..8868876
--- /dev/null
+++ b/src/components/media-viewer/style.css
@@ -0,0 +1,3 @@
+.no-fullscreen .svg-icon {
+ display: none;
+}
diff --git a/src/components/media-viewer/styles.module.scss b/src/components/media-viewer/styles.module.scss
new file mode 100644
index 0000000..3f56986
--- /dev/null
+++ b/src/components/media-viewer/styles.module.scss
@@ -0,0 +1,68 @@
+@import '/styles/layout.scss';
+
+.container {
+ position: relative;
+ display: block;
+
+ &.fullscreen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ max-height: 90vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 10000;
+ background-color: var(--background-color);
+
+ & iframe {
+ width: 100vw;
+ height: 100vh;
+ }
+
+ & model-viewer {
+ width: 100vw;
+ height: 100vh;
+ }
+
+ & img {
+ max-height: 90vh;
+ }
+ }
+
+ .icon {
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ width: 30px;
+ height: 30px;
+ opacity: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ cursor: pointer;
+ background-color: #000;
+ border-radius: 1000px;
+ transition: opacity 0.3s ease-in-out;
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.5);
+ }
+
+ svg {
+ width: 12px;
+ height: 12px;
+ path {
+ fill: white;
+ }
+ }
+ }
+ &:hover {
+ .icon {
+ opacity: 0.5;
+ }
+ }
+}
diff --git a/src/components/media-viewer/unknown/index.js b/src/components/media-viewer/unknown/index.js
new file mode 100644
index 0000000..4561aa7
--- /dev/null
+++ b/src/components/media-viewer/unknown/index.js
@@ -0,0 +1,18 @@
+import React, {useState} from 'react';
+import styles from './styles.module.scss';
+const axios = require('axios');
+
+export const UnknownComponent = ({mimeType}) => {
+ /* const [queue, updateQueue] = useState()
+ updateQueue(await axios.post(process.env.REACT_APP_GRAPHQL_STATUS).then(res => res.data))
+ */
+ return (
+
+
+
+ )}
+ + Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'} +
+ +
+
+ );
+};
diff --git a/src/components/media-viewer/unknown/styles.module.scss b/src/components/media-viewer/unknown/styles.module.scss
new file mode 100644
index 0000000..54314df
--- /dev/null
+++ b/src/components/media-viewer/unknown/styles.module.scss
@@ -0,0 +1,26 @@
+@import '/styles/layout.scss';
+@import '/styles/variables.scss';
+
+.container {
+ width: 100%;
+
+ .square {
+ display: block;
+ width: 100%;
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ color: var(--background-color);
+ background-color: var(--text-color);
+ transition: background-color #{$theme-duration} ease-out,
+ color #{$theme-duration} ease-out;
+
+ &:after {
+ content: '';
+ display: block;
+ padding-bottom: 100%;
+ }
+ }
+}
diff --git a/src/components/media-viewer/vector/index.css b/src/components/media-viewer/vector/index.css
new file mode 100644
index 0000000..d500c0e
--- /dev/null
+++ b/src/components/media-viewer/vector/index.css
@@ -0,0 +1,15 @@
+.tag-view .vector {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 100%;
+ height: 100%;
+ transform: translateX(-50%) translateY(-50%);
+ border: none;
+ min-height: 0;
+ min-width: 0;
+}
+
+.objktview .vector-container {
+ pointer-events: all;
+}
diff --git a/src/components/media-viewer/vector/index.js b/src/components/media-viewer/vector/index.js
new file mode 100644
index 0000000..b4be761
--- /dev/null
+++ b/src/components/media-viewer/vector/index.js
@@ -0,0 +1,95 @@
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import Context from '../Context';
+import styles from './styles.module.scss';
+// import './index.css';
+
+export const VectorComponent = ({
+ viewer,
+ artifactUri,
+ displayUri,
+ previewUri,
+ creator,
+ objkt,
+ onDetailView,
+ preview,
+ displayView,
+ styling
+}) => {
+ const context = useContext(Context);
+ const classes = classnames({
+ [styles.container]: true,
+ [styles.interactive]: onDetailView,
+ });
+
+ let _creator_ = false;
+ let _viewer_ = false;
+ let _objkt_ = false;
+
+ if (creator && creator.address) {
+ _creator_ = creator.address;
+ }
+
+ if (viewer !== undefined) {
+ _viewer_ = viewer;
+ }
+
+ if (objkt) {
+ _objkt_ = objkt;
+ }
+
+ let path;
+ if (preview) {
+ // can't pass creator/viewer query params to data URI
+ path = previewUri;
+ } else {
+ path = `${artifactUri}?creator=${_creator_}&viewer=${_viewer_}&objkt=${_objkt_}`;
+ }
+
+ if (displayView) {
+ return (
+
+
+
+ Loading...
+
+
+
+
+ );
+ } else {
+ return (
+
+
+
+
+ );
+ }
+};
\ No newline at end of file
diff --git a/src/components/media-viewer/vector/styles.module.scss b/src/components/media-viewer/vector/styles.module.scss
new file mode 100644
index 0000000..ac8d6af
--- /dev/null
+++ b/src/components/media-viewer/vector/styles.module.scss
@@ -0,0 +1,45 @@
+@import '/styles/layout.scss';
+// @import '/styles/mixins.scss';
+
+// .vector {
+// @include embedObjktViewSizes;
+// }
+
+.display {
+ width: 100%;
+ display: block;
+ margin: 0 auto;
+ border: none;
+}
+
+.container {
+ position: relative;
+ display: block;
+ width: 100%;
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ pointer-events: none;
+
+ &:after {
+ content: '';
+ display: block;
+ padding-bottom: 100%;
+ }
+
+ &.interactive {
+ pointer-events: all;
+ }
+
+ iframe {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 100%;
+ height: 100%;
+ transform: translateX(-50%) translateY(-50%);
+ border: none;
+ background: black;
+ }
+}
diff --git a/src/components/media-viewer/video/index.js b/src/components/media-viewer/video/index.js
new file mode 100644
index 0000000..0176aae
--- /dev/null
+++ b/src/components/media-viewer/video/index.js
@@ -0,0 +1,67 @@
+import React, { useEffect, useRef } from 'react';
+import { iOS } from '../os';
+import styles from './styles.module.scss';
+// import './style.css';
+
+export const VideoComponent = ({
+ artifactUri,
+ displayUri,
+ previewUri,
+ preview,
+ interactive,
+ inView,
+ displayView,
+}) => {
+ const domElement = useRef();
+
+ useEffect(() => {
+ const isVideoAvailable = (video) => iOS || video.readyState > 2;
+
+ const isVideoPlaying = (video) =>
+ !!(
+ video.currentTime > 0 &&
+ !video.paused &&
+ !video.ended &&
+ video.readyState > 2
+ );
+
+ if (inView) {
+ // play
+ if (isVideoAvailable(domElement.current)) {
+ try {
+ domElement.current.play();
+ } catch (err) {
+ console.error(err);
+ }
+ }
+ } else {
+ // pause
+ if (
+ isVideoAvailable(domElement.current) &&
+ isVideoPlaying(domElement.current)
+ ) {
+ try {
+ domElement.current.pause();
+ } catch (err) {
+ console.error(err);
+ }
+ }
+ }
+ }, [inView]);
+
+ return (
+ <>
+
+
+ );
+};
diff --git a/src/components/media-viewer/video/style.css b/src/components/media-viewer/video/style.css
new file mode 100644
index 0000000..b483da4
--- /dev/null
+++ b/src/components/media-viewer/video/style.css
@@ -0,0 +1,18 @@
+.objkt-display video {
+ position: relative;
+ display: block;
+ margin: auto;
+ width: 100%;
+ height: 100%;
+}
+
+@media screen and (min-width: 801px) {
+ .objkt-display video {
+ width: auto;
+ height: 60vh;
+ }
+}
+
+video {
+ width: 100%;
+}
diff --git a/src/components/media-viewer/video/styles.module.scss b/src/components/media-viewer/video/styles.module.scss
new file mode 100644
index 0000000..42f6a88
--- /dev/null
+++ b/src/components/media-viewer/video/styles.module.scss
@@ -0,0 +1,16 @@
+@import '/styles/layout.scss';
+
+.container {
+ width: 100%;
+ height: 60vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.video {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ outline: 0px;
+}
diff --git a/src/components/media-viewer/visually-hidden/index.js b/src/components/media-viewer/visually-hidden/index.js
new file mode 100644
index 0000000..5fd869f
--- /dev/null
+++ b/src/components/media-viewer/visually-hidden/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import styles from './styles.module.scss';
+
+export const VisuallyHidden = ({ children = null, as: Comp = 'span' }) => {
+ return No NFT
;
+ // console.log(rarible_data);
+
+ return (
+
+
+
+ );
+}
+export default NFT_CARD;
diff --git a/src/components/walletbutton.js b/src/components/walletbutton.js
new file mode 100644
index 0000000..fd31da0
--- /dev/null
+++ b/src/components/walletbutton.js
@@ -0,0 +1,40 @@
+import {useState} from 'react';
+import {truncateAddress} from '../lib/moiWeb3';
+import WalletButtonItem from './walletbuttonitem';
+function WalletButton({
+ isConnected = false,
+ address = '',
+ onPress = () => {},
+ onConnect = () => {},
+}) {
+ return (
+ onPress(rarible_data?.id)}>
+
+
+
+
+ {/*
+ {/* {console.log(rarible_data?.media_type)} */}
+
+
+
+ {rarible_data?.name}
+ {rarible_data?.price}
+ {rarible_data?.blockchain}
+ {item.meta.description}
*/}
+
+
+ {isConnected ? (
+
+ );
+}
+export default WalletButton;
diff --git a/src/components/walletbuttonitem.tsx b/src/components/walletbuttonitem.tsx
new file mode 100644
index 0000000..b022f26
--- /dev/null
+++ b/src/components/walletbuttonitem.tsx
@@ -0,0 +1,18 @@
+
+function WalletButtonItem({
+ text = '',
+ onPress = () => {
+ console.log('connecting...');
+ },
+ walletItemStyle = '',
+}:{text:string, onPress:() => void, walletItemStyle?:string}) {
+ return (
+ {
+ onPress();
+ }}>
+ {truncateAddress(address)}
+
+ ) : (
+ {
+ onConnect();
+ }}>
+ CONNECT
+
+ )}
+ onPress()}
+ >
+ {text}
+
+ );
+}
+export default WalletButtonItem;
diff --git a/src/lib/identity.js b/src/lib/identity.js
new file mode 100644
index 0000000..adfd161
--- /dev/null
+++ b/src/lib/identity.js
@@ -0,0 +1,164 @@
+import CeramicClient from '@ceramicnetwork/http-client';
+import ThreeIdResolver from '@ceramicnetwork/3id-did-resolver';
+import { IDX } from '@ceramicstudio/idx';
+import { EthereumAuthProvider, ThreeIdConnect } from '@3id/connect';
+import { DID } from 'dids';
+
+const ceramicProvider = CeramicClient.default
+ ? CeramicClient.default
+ : CeramicClient;
+const threeIdProvider = ThreeIdResolver.default
+ ? ThreeIdResolver.default
+ : ThreeIdResolver;
+
+async function client({
+ endpoint = 'https://ceramic-clay.3boxlabs.com',
+ resolvers = null,
+ address = '',
+ provider = null,
+ ceramicClient = null,
+} = {}) {
+ let ceramic;
+ let ethereum = window.ethereum;
+
+ if (!ethereum)
+ return {
+ error: 'No ethereum wallet detected',
+ };
+
+ if (!ceramicClient) {
+ ceramic = new ceramicProvider(endpoint);
+ } else {
+ ceramic = ceramicClient;
+ }
+
+ if (!resolvers) {
+ resolvers = {
+ ...threeIdProvider.getResolver(ceramic),
+ };
+ } else {
+ resolvers = resolvers.reduce((acc, next) => {
+ if (next.requiresCeramic) {
+ let resolver = next.resolver.call(this, ceramic);
+ acc = {
+ ...acc,
+ ...resolver,
+ };
+ } else {
+ acc = {
+ ...acc,
+ ...next.resolver,
+ };
+ }
+ return acc;
+ }, {});
+ }
+
+ if (!address) {
+ const addresses = await ethereum.request({ method: 'eth_requestAccounts' });
+ address = addresses[0];
+ }
+
+ const threeIdConnect = new ThreeIdConnect();
+
+ if (!provider) {
+ provider = new EthereumAuthProvider(ethereum, address);
+ }
+
+ await threeIdConnect.connect(provider);
+
+ const did = new DID({
+ provider: threeIdConnect.getDidProvider(),
+ resolver: resolvers,
+ });
+
+ ceramic.setDID(did);
+ await ceramic.did.authenticate();
+ const idx = new IDX({ ceramic });
+
+ return {
+ ceramic,
+ did,
+ idx,
+ error: null,
+ };
+}
+
+async function readOnlyClient({
+ endpoint = 'https://ceramic-clay.3boxlabs.com',
+ ceramicClient = null,
+} = {}) {
+ let ceramic;
+ let ethereum = window.ethereum;
+
+ if (!ethereum)
+ return {
+ error: 'No ethereum wallet detected',
+ };
+
+ if (!ceramicClient) {
+ ceramic = new ceramicProvider(endpoint);
+ } else {
+ ceramic = ceramicClient;
+ }
+
+ const idx = new IDX({ ceramic });
+ return {
+ idx,
+ ceramic,
+ error: null,
+ };
+}
+
+const networks = {
+ ethereum: 'ethereum',
+ bitcoin: 'bitcoin',
+ cosmos: 'cosmos',
+ kusama: 'kusama',
+};
+
+const caip10Links = {
+ ethereum: '@eip155:1',
+ bitcoin: '@bip122:000000000019d6689c085ae165831e93',
+ cosmos: '@cosmos:cosmoshub-3',
+ kusama: '@polkadot:b0a8d493285c2df73290dfb7e61f870f',
+};
+
+/*
+CAIP-10 Account IDs is a blockchain agnostic way to describe an account on any blockchain. This may be an externally owned key-pair account, or a smart contract account. IDX uses CAIP-10s as a way to lookup the DID of a user using a caip10-link streamType in Ceramic. Learn more in the Ceramic documentation.
+*/
+async function getRecord({
+ endpoint = 'https://ceramic-clay.3boxlabs.com',
+ network = 'ethereum',
+ ceramicClient = null,
+ schema = 'basicProfile',
+} = {}) {
+ let ceramic;
+ let ethereum = window.ethereum;
+ let record;
+
+ if (!ethereum)
+ return {
+ error: 'No ethereum wallet detected',
+ };
+
+ if (!ceramicClient) {
+ ceramic = new ceramicProvider(endpoint);
+ } else {
+ ceramic = ceramicClient;
+ }
+
+ if (network === networks.ethereum) {
+ const addresses = await ethereum.request({ method: 'eth_requestAccounts' });
+ const address = addresses[0];
+ const idx = new IDX({ ceramic });
+ const data = await idx.get(schema, `${address}${caip10Links.ethereum}`);
+ record = data;
+ }
+ return {
+ record,
+ error: null,
+ };
+}
+
+export { getRecord, readOnlyClient, client };
diff --git a/src/lib/index.js b/src/lib/index.js
new file mode 100644
index 0000000..ddc9eb2
--- /dev/null
+++ b/src/lib/index.js
@@ -0,0 +1,2 @@
+import { getRecord, readOnlyClient, client } from './identity';
+export { getRecord, readOnlyClient, client };
diff --git a/src/lib/metadataSchema.ts b/src/lib/metadataSchema.ts
new file mode 100644
index 0000000..9ff1654
--- /dev/null
+++ b/src/lib/metadataSchema.ts
@@ -0,0 +1,33 @@
+export interface IMetadata {
+ name: string;
+ description: string;
+ background_color: string;
+ image: string;
+ animation_url: string;
+ external_url: string;
+ attributes: object[];
+ properties: object[];
+}
+var _metadata: IMetadata = {
+ name: '',
+ description: '',
+ background_color: '',
+ image: '',
+ animation_url: '',
+ external_url: '',
+ attributes: [],
+ properties: [{files: []}],
+};
+var _metadataTypes = {
+ owner: 'string',
+ nameType: 'string',
+ descriptionType: 'string',
+ // background_colorType: 'color',
+ imageType: 'file',
+ animation_urlType: 'file',
+ external_urlType: 'url',
+ // youtube_urlType: 'url',
+ attributesType: 'array',
+ propertiesType: 'array',
+};
+export {_metadata, _metadataTypes};
diff --git a/src/lib/moiWeb3.js b/src/lib/moiWeb3.js
new file mode 100644
index 0000000..570eb9b
--- /dev/null
+++ b/src/lib/moiWeb3.js
@@ -0,0 +1,36 @@
+/*
+ *
+ * @param {sting} recievecoin Coin being bought
+ * @param {integer} value How Many Coins Bought
+ * @param {integer} dec Number of Decimals Coin Uses
+ */
+export const getQuote = async (
+ sendcoin = 'ETH',
+ recievecoin = 'DAI',
+ value = 0,
+ dec = 18
+) => {
+ try {
+ const response = await fetch(
+ `https://api.0x.org/swap/v1/quote?buyToken=${recievecoin}&sellToken=${sendcoin}&buyAmount=${
+ value * Math.pow(10, dec)
+ }&feeRecipient=${
+ process.env.ADMIN_ID
+ }&buyTokenPercentageFee=0.00075&slippagePercentage=0.0377`
+ );
+ let quote = await response.json();
+ return quote;
+ } catch (error) {
+ console.log('getQuote()', error);
+ }
+};
+
+export function truncateAddress(address) {
+ try {
+ return `${address.substring(0, 6).toLowerCase()}...${address
+ .substring(38, 42)
+ .toLowerCase()}`;
+ } catch (error) {
+ console.log(`truncateAddress(): ${error}`);
+ }
+}
diff --git a/src/lib/nft-storage.js b/src/lib/nft-storage.js
new file mode 100644
index 0000000..e33930c
--- /dev/null
+++ b/src/lib/nft-storage.js
@@ -0,0 +1,80 @@
+import { NFTStorage, File, Blob } from 'nft.storage';
+const api = process.env.NFT_STORAGE_KEY;
+const nft_storage = new NFTStorage({ token: api });
+class NFT_STORAGE {
+ /**********
+ * NFT ACTIONS
+ * **************/
+ getCIDStatus = async (cid) => {
+ try {
+ const cidStatus =
+ nft_storage !== undefined && (await nft_storage.status(cid));
+ return cidStatus;
+ } catch (error) {
+ throw error;
+ }
+ };
+ // Deletes a CID
+ deleteByCID = async (cid) => {
+ try {
+ const cidStatus =
+ nft_storage !== undefined && (await nft_storage.delete(cid));
+ return cidStatus;
+ } catch (error) {
+ throw error;
+ }
+ };
+ // Check if CID is valid
+ checkByCID = async (cid) => {
+ try {
+ const cidStatus =
+ nft_storage !== undefined && (await nft_storage.check(cid));
+ return cidStatus;
+ } catch (error) {
+ throw error;
+ }
+ };
+ //Stores File and Returns IPFS CID
+ storeAsFile = async (file) => {
+ try {
+ const _file = new File([file], file[0].name, file[0].type);
+ return _file;
+ } catch (error) {
+ throw error;
+ }
+ };
+ //Stores File Blob and Returns IPFS CID
+ storeFileAsBlob = async (file) => {
+ try {
+ const cid =
+ nft_storage !== undefined &&
+ (await nft_storage.storeBlob(
+ new Blob([Array.isArray(file) ? file[0] : file])
+ ));
+ return cid;
+ } catch (error) {
+ throw error;
+ }
+ };
+
+ //Stores Multiple Files Into Directory and Returns IPFS CID
+ storeMultiFile = async (files) => {
+ let _files = [];
+ let i = 0;
+ try {
+ for await (var file of files) {
+ const _file = new File([file], i);
+ _files.push(_file);
+ }
+
+ const cid =
+ nft_storage !== undefined && (await nft_storage.storeDirectory(_files));
+
+ return cid;
+ } catch (error) {
+ throw error;
+ }
+ };
+}
+const nft = new NFT_STORAGE();
+export default nft;
\ No newline at end of file
diff --git a/src/metrics/clsMetrics.ts b/src/metrics/clsMetrics.ts
new file mode 100644
index 0000000..4540eb7
--- /dev/null
+++ b/src/metrics/clsMetrics.ts
@@ -0,0 +1,24 @@
+import { NextWebVitalsMetric } from 'next/app';
+
+export default function clsMetrics(metric: NextWebVitalsMetric) {
+ if (metric.value / 1000 < 0.1)
+ console.log(metric.name, 'Result: ', metric.value / 1000, 'GOOD');
+
+ if (metric.value / 1000 > 0.1 && metric.value / 1000 < 0.25)
+ console.log(
+ metric.name,
+ 'Result: ',
+ metric.value / 1000,
+ 'Needs Improvement',
+ 'Visit https://web.dev/cls/'
+ );
+
+ if (metric.value / 1000 > 0.25)
+ console.log(
+ metric.name,
+ 'Result: ',
+ metric.value / 1000,
+ 'POOR',
+ 'Visit https://web.dev/cls/'
+ );
+}
diff --git a/src/metrics/fcpMetrics.ts b/src/metrics/fcpMetrics.ts
new file mode 100644
index 0000000..56aa9ee
--- /dev/null
+++ b/src/metrics/fcpMetrics.ts
@@ -0,0 +1,28 @@
+import { NextWebVitalsMetric } from 'next/app';
+
+export default function fcpMetrics(metric: NextWebVitalsMetric) {
+ console.log(metric.value / 1000 <= 1);
+ if (metric.value / 1000 <= 1) {
+ console.log(metric.name, 'Result: ', metric.value / 1000, 'GOOD');
+ return;
+ }
+ if (metric.value / 1000 <= 1 && metric.value / 1000 >= 3.0) {
+ console.log(
+ metric.name,
+ 'Result: ',
+ metric.value / 1000,
+ 'Needs Improvement',
+ 'Visit https://web.dev/fcp/'
+ );
+ return;
+ }
+
+ console.log(
+ metric.name,
+ 'Result: ',
+ metric.value / 1000,
+ 'POOR',
+ 'Visit https://web.dev/fcp/'
+ );
+ return;
+}
diff --git a/src/metrics/fidMetrics.ts b/src/metrics/fidMetrics.ts
new file mode 100644
index 0000000..4422404
--- /dev/null
+++ b/src/metrics/fidMetrics.ts
@@ -0,0 +1,23 @@
+import { NextWebVitalsMetric } from 'next/app';
+
+export default function fidMetrics(metric: NextWebVitalsMetric) {
+ if (metric.value <= 100) {
+ console.log(metric.name, 'Result: ', metric.value, 'GOOD');
+ } else if (metric.value >= 100 && metric.value <= 300) {
+ console.log(
+ metric.name,
+ 'Result: ',
+ metric.value,
+ 'Needs Improvement',
+ 'Visit https://web.dev/fid/'
+ );
+ } else {
+ console.log(
+ metric.name,
+ 'Result: ',
+ metric.value,
+ 'POOR',
+ 'Visit https://web.dev/fid/'
+ );
+ }
+}
diff --git a/src/metrics/index.ts b/src/metrics/index.ts
new file mode 100644
index 0000000..5157367
--- /dev/null
+++ b/src/metrics/index.ts
@@ -0,0 +1,45 @@
+import { NextWebVitalsMetric } from 'next/app';
+import clsMetrics from './clsMetrics';
+import lcpMetrics from './lcpMetrics';
+import fidMetrics from './fidMetrics';
+import fcpMetrics from './fcpMetrics';
+import ttfbMetrics from './ttfbMetrics';
+
+export default function metrics(metric: NextWebVitalsMetric) {
+ switch (metric.name) {
+ case 'FCP':
+ // handle FCP results
+ fcpMetrics(metric);
+ break;
+ case 'LCP':
+ // handle LCP results
+ lcpMetrics(metric);
+ break;
+ case 'CLS':
+ // handle CLS results
+ return clsMetrics(metric);
+
+ case 'FID':
+ // handle FID results
+ fidMetrics(metric);
+ break;
+ case 'TTFB':
+ // handle TTFB results
+ ttfbMetrics(metric);
+ break;
+ case 'Next.js-hydration':
+ // handle hydration results
+ console.log(metric.name, ':', metric.value / 1000);
+ break;
+ case 'Next.js-route-change-to-render':
+ // handle route-change to render results
+ console.log(metric.name, ':', metric.value / 1000);
+ break;
+ case 'Next.js-render':
+ // handle render results
+ console.log(metric.name, ':', metric.value / 1000);
+ break;
+ default:
+ break;
+ }
+}
diff --git a/src/metrics/lcpMetrics.ts b/src/metrics/lcpMetrics.ts
new file mode 100644
index 0000000..45ecd62
--- /dev/null
+++ b/src/metrics/lcpMetrics.ts
@@ -0,0 +1,23 @@
+import { NextWebVitalsMetric } from 'next/app';
+
+export default function lcpMetrics(metric: NextWebVitalsMetric) {
+ if (metric.value / 1000 <= 2.5) {
+ console.log(metric.name, 'Result: ', metric.value / 1000, 'GOOD');
+ } else if (metric.value / 1000 >= 2.5 && metric.value / 1000 <= 4.0) {
+ console.log(
+ metric.name,
+ 'Result: ',
+ metric.value / 1000,
+ 'Needs Improvement',
+ 'Visit https://web.dev/lcp/'
+ );
+ } else {
+ console.log(
+ metric.name,
+ 'Result: ',
+ metric.value / 1000,
+ 'POOR',
+ 'Visit https://web.dev/lcp/'
+ );
+ }
+}
diff --git a/src/metrics/ttfbMetrics.ts b/src/metrics/ttfbMetrics.ts
new file mode 100644
index 0000000..ace134d
--- /dev/null
+++ b/src/metrics/ttfbMetrics.ts
@@ -0,0 +1,24 @@
+import { NextWebVitalsMetric } from 'next/app';
+
+export default function ttfbMetrics(metric: NextWebVitalsMetric) {
+ if (metric.value <= 600)
+ console.log(metric.name, 'Result: ', metric.value, 'GOOD');
+
+ if (metric.value >= 600 && metric.value <= 1000)
+ console.log(
+ metric.name,
+ 'Result: ',
+ metric.value,
+ 'Needs Improvement',
+ 'Visit https://web.dev/ttfb/'
+ );
+
+ if (metric.value >= 1000)
+ console.log(
+ metric.name,
+ 'Result: ',
+ metric.value,
+ 'POOR',
+ 'Visit https://web.dev/ttfb/'
+ );
+}
diff --git a/src/middleware/graphql/apollo-client.ts b/src/middleware/graphql/apollo-client.ts
new file mode 100644
index 0000000..ccdf2ae
--- /dev/null
+++ b/src/middleware/graphql/apollo-client.ts
@@ -0,0 +1,28 @@
+// ./apollo-client.js
+import {
+ ApolloClient,
+ InMemoryCache,
+ HttpLink,
+ from,
+ ApolloLink,
+} from '@apollo/client';
+///
+let appJWTToken: any;
+const httpLink = new HttpLink({uri: '/api/graphql/'});
+const authMiddleware = new ApolloLink((operation, forward) => {
+ if (appJWTToken) {
+ operation.setContext({
+ headers: {
+ Authorization: `Bearer ${appJWTToken}`,
+ },
+ });
+ }
+ return forward(operation);
+});
+
+var client = new ApolloClient({
+ link: from([authMiddleware, httpLink]),
+ cache: new InMemoryCache(),
+});
+
+export default client;
diff --git a/src/middleware/graphql/resolvers.ts b/src/middleware/graphql/resolvers.ts
new file mode 100644
index 0000000..cb506be
--- /dev/null
+++ b/src/middleware/graphql/resolvers.ts
@@ -0,0 +1,50 @@
+import TAKO from '../../tako';
+export default {
+ Query: {
+ Query_Market_Sell_Orders: async (
+ parent: object,
+ args: any,
+ _context: any,
+ info: object
+ ) => {
+ const {
+ blockchains = [],
+ continuation,
+ cursor,
+ origins,
+ size,
+ }: {
+ blockchains: string[];
+ continuation: string;
+ cursor: string;
+ origins: [string];
+ size: number;
+ } = args.input;
+ // console.log(args.input);
+ let _continuations: string[] = [];
+ let _orders: any[] = [];
+ for (let i = 0; i < origins.length; i++) {
+ // origins[i] = origins[i].toLowerCase();
+ // console.log(origins[i])
+ const res = await TAKO.getSellOrdersWithNFT({
+ blockchains,
+ continuation,
+ cursor,
+ size,
+ origin: origins[i],
+ });
+ _continuations.push(res.continuation);
+ _orders.push(...res.nfts);
+ }
+
+ console.log({
+ continuations: _continuations,
+ nfts: _orders,
+ })
+ return {
+ continuations: _continuations,
+ nfts: _orders,
+ };
+ }
+ },
+};
diff --git a/src/middleware/graphql/schema/index.ts b/src/middleware/graphql/schema/index.ts
new file mode 100644
index 0000000..2bf8aa4
--- /dev/null
+++ b/src/middleware/graphql/schema/index.ts
@@ -0,0 +1,281 @@
+import {gql} from 'apollo-server-micro';
+
+const typeDefs = gql`
+ input QueryInput {
+ address: String
+ blockChain: String
+ blockchains: [String]
+ origin: String
+ origins: [String]
+ size: Int
+ continuation: String
+ continuations: [String]
+ cursor: String
+ sort: String
+ activityType: [String]
+ start_date: String
+ }
+
+ type Collection_Data {
+ items: [COLLECTION_ITEM]
+ totalSupply: Int
+ continuation: String
+ }
+
+ type COLLECTION_OBJ {
+ total: Int
+ continuation: String
+ collections: [COLLECTION]
+ }
+
+ type COLLECTION {
+ id: String!
+ parent: String
+ blockchain: String!
+ type: String!
+ name: String!
+ symbol: String
+ owner: String
+ features: [String]
+ minters: [String]
+ meta: COLLECTION_META
+ }
+
+ type COLLECTION_META {
+ name: String!
+ description: String
+ content: [META_CONTENT]
+ externalLink: String
+ sellerFeeBasisPoints: Int
+ feeRecipient: String
+ }
+
+ type META_CONTENT {
+ type: String
+ width: Int
+ height: Int
+ url: String
+ representation: String
+ mimeType: String
+ size: Int
+ }
+
+ type COLLECTION_ITEM {
+ id: String!
+ tokenId: String!
+ blockchain: String!
+ collection: String
+ contract: String
+ creators: [Creators]
+ lazySupply: String!
+ mintedAt: String
+ lastUpdatedAt: String
+ meta: COLLECTION_ITEM_META
+ deleted: Boolean
+ }
+
+ type COLLECTION_ITEM_META {
+ name: String!
+ description: String
+ attributes: [COLLECTION_ITEM_ATTRIBUTE]
+ content: [META_CONTENT]
+ restrictions: [String]
+ }
+
+ type COLLECTION_ITEM_ATTRIBUTE {
+ key: String!
+ value: String
+ type: String
+ format: String
+ }
+ type MARKET_NFTS {
+ continuations: [String]
+ nfts: [MARKET_NFT]
+ }
+ type ALL_SELL_ORDERS {
+ continuations: [String]
+ orders: [SELL_ORDER]
+ }
+ type MARKET_NFT {
+ id: String
+ name: String
+ description: String
+ supply: String
+ creators: [Creators]
+ content: [META_CONTENT]
+ orders: [SELL_ORDER]
+ }
+
+ type SELL_ORDER {
+ id: String
+ filled: Boolean
+ platform: String
+ status: String
+ startedAt: String
+ endedAt: String
+ makeStock: String
+ cancelled: Boolean
+ createdAt: String
+ lastUpdatedAt: String
+ makePrice: String
+ takerPrice: String
+ makePriceUsd: String
+ takerPriceUsd: String
+ maker: String
+ taker: String
+ make: TAKER_MAKER
+ take: TAKER_MAKER
+ salt: String
+ }
+ type TAKER_MAKER {
+ type: ASSET_TYPE
+ value: String
+ }
+ type ASSET_TYPE {
+ type: String
+ contract: String
+ blockchain: String
+ tokenId: String
+ uri: String
+ creators: [Creators]
+ royalties: [ROYALTIES]
+ }
+
+ type NFTOrderDataType {
+ id: String
+ platform: String
+ status: String
+ makeStock: String
+ createdAt: String
+ makePrice: String
+ makePriceUsd: String
+ maker: String
+ make: _DataType
+ supply: String
+ }
+
+ type _DataType {
+ type: DataType
+ value: String
+ }
+ type DataType {
+ type: String
+ contract: String
+ tokenId: String
+ value: String
+ }
+
+ type Creators {
+ account: String
+ value: Int
+ }
+
+ type All_ACTIVITY {
+ continuation: String
+ cursor: String
+ activities: [ACTIVITY_ITEM]
+ }
+ type ACTIVITY {
+ continuation: String
+ cursor: String
+ activities: ACTIVITIES
+ }
+ type ACTIVITIES {
+ user: [ACTIVITY_ITEM]
+ contract: [ACTIVITY_ITEM]
+ nft: [ACTIVITY_ITEM]
+ }
+
+ type ACTIVITY_ITEM {
+ type: String
+ from: String
+ owner: String
+ contract: String
+ tokenId: String
+ itemId: String
+ value: String
+ purchase: Boolean
+ transactionHash: String
+ id: String
+ date: String
+ reverted: Boolean
+ left: LEFT_RIGHT
+ right: LEFT_RIGHT
+ source: String
+ nft: _activityNFT
+ payment: _activityPayment
+ buyer: String
+ seller: String
+ buyerOrderHash: String
+ sellerOrderHash: String
+ price: String
+ priceUsd: String
+ amountUsd: String
+ hash: String
+ make: _DataType
+ take: _DataType
+ auction: _activityAuction
+ bid: _activityBid
+ }
+ type _activityNFT {
+ type: _DataType
+ value: String
+ }
+ type _activityPayment {
+ type: _DataType
+ value: String
+ }
+ type _activityAuction {
+ id: String
+ contract: String
+ type: String
+ seller: String
+ sell: _DataType
+ buy: _DataType
+ endTime: String
+ minimalStep: String
+ minimalPrice: String
+ createdAt: String
+ lastUpdatedAt: String
+ buyPrice: String
+ buyPriceUsd: String
+ pending: [String]
+ status: String
+ ongoing: Boolean
+ hash: String
+ auctionId: String
+ data: _auctionData
+ }
+ type _auctionData {
+ dataType: String
+ originFees: [Creators]
+ payouts: [Creators]
+ startTime: String
+ duration: String
+ buyOutPrice: String
+ }
+
+ type LEFT_RIGHT {
+ maker: String
+ hash: String
+ }
+
+ type _activityBid {
+ type: String
+ data: _auctionData
+ buyer: String
+ amount: String
+ date: String
+ status: String
+ }
+ type ROYALTIES {
+ address: String
+ value: Int
+ }
+
+ type Query {
+ Query_Market_Sell_Orders(input: QueryInput): MARKET_NFTS
+ }
+`;
+
+export default typeDefs;
diff --git a/src/middleware/graphql/schema/legacy.ts b/src/middleware/graphql/schema/legacy.ts
new file mode 100644
index 0000000..40bead3
--- /dev/null
+++ b/src/middleware/graphql/schema/legacy.ts
@@ -0,0 +1,22 @@
+export const AuthInputs = `
+ input queryInput {
+ address: String
+ blockChain: String
+ size: Int
+ continuation: String
+ start_date: String
+ }
+`;
+
+export const RaribleQueries = `
+get_nfts_from_contract_address(input: queryInput): Collection_Data
+get_all_items(input: queryInput): Collection_Data
+get_items_by_owner(input: queryInput): Collection_Data
+get_item_by_nft_id(input: queryInput): NFTMetadataType
+get_orders_by_nft_id(input: queryInput): [NFTOrderDataType]
+get_bids_by_nft_id(input: queryInput): [NFTOrderDataType]
+`;
+
+// export const AuthMutations = `
+
+// `;
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+///
+
+ );
+ if (error)
+ return (
+
+ Loading...
+
+
+ Error: {error.message}
+
+ );
+ return (
+ <>
+
+ {completed && (
+ onPress(tokenData?.nft.id)}>
+
+ )}
+
+ );
+}
+
+const mapStateToProps = (state) => ({
+ address: state.session.address,
+ connection: state.session.connection,
+ blockchain: state.session.blockchain,
+ portal_continuation: state.session.portal_continuation,
+});
+
+export default redux(mapStateToProps, {setPortalContinuation})(Featured_NFT);
diff --git a/src/ui/Layout.tsx b/src/ui/Layout.tsx
new file mode 100644
index 0000000..1425e0a
--- /dev/null
+++ b/src/ui/Layout.tsx
@@ -0,0 +1,278 @@
+import React, {ReactNode, useEffect, useState, useContext} from 'react';
+import {useRouter} from 'next/router';
+import {connect as redux} from 'react-redux';
+import {setSDK, setTab, setShowOptions} from '../actions/session';
+import {truncateAddress} from '../lib/moiWeb3';
+import Image from 'next/image';
+import Blockies from 'react-blockies';
+import {connector} from '../connector-setup';
+
+import {ConnectorContext} from '../../src/components/connector/sdk-connection-provider';
+// import dynamic from 'next/dynamic';
+import Button from '../components/common/button';
+import {Options} from '../sdk/sdk-wallet-connector';
+import {ConnectOptions} from '../components/connect-options';
+
+function Layout({
+ sdk,
+ children,
+ address,
+ blockchain,
+ setShowOptions,
+ showOptions,
+ setSDK,
+}: {
+ sdk: any;
+ children: (sdk: any) => JSX.Element;
+ address: string;
+ blockchain: string;
+ setShowOptions: any;
+ showOptions: boolean;
+ setSDK: any;
+}) {
+ const connection = useContext(ConnectorContext);
+ const [show, setShow] = useState
+
+
+
+
+
+
+ {console.log(
+ 'https://akkoros.mypinata.cloud/ipfs/' +
+ tokenData?.nft.url.split('ipfs/')[1]
+ )}
+
+
+
+
+
+
+ {/* {console.log(tokenData.nft)} */}
+ {creatorAddress !== null && (
+
+
+
+
+ + {tokenData?.nft.name} +
+{tokenData?.nft.blockchain}
+
+
+ {show && (
+
+
+ {/* BRANDNAME */}
+
+
+ {/* CONNECT BUTTON and WALLET ADDRESS */}
+ {/* We Are Currently In Pre-Alpha */}
+
+
+ {address !== null && address !== undefined && (
+ <>
+
+
+ + )} +
+ + + )} +
+ {address !== null && address !== undefined ? (
+
+
+
+
+ router.push('/portal/profile')}
+ className='d-flex flex-row justify-content-center align-items-center'
+ title={address !== undefined ? address : ''}>
+
+ ) : (
+
+ )}
+ + {truncateAddress(address)} +
{' '} + {address !== null && address !== undefined && ( + <> + ++ + +
+ + )} + +
+ + )} +
+ {children}
+ {showOptions && (
+
+
+ );
+}
+const mapStateToProps = (state: any) => ({
+ connection: state.session.connection,
+ showOptions: state.session.showOptions,
+ blockchain: state.session.blockchain,
+});
+export default redux(mapStateToProps, {setSDK, setTab, setShowOptions})(Layout);
diff --git a/src/ui/NFT_Gallery.tsx b/src/ui/NFT_Gallery.tsx
new file mode 100644
index 0000000..df3785f
--- /dev/null
+++ b/src/ui/NFT_Gallery.tsx
@@ -0,0 +1,134 @@
+import React, {useEffect, useState} from 'react';
+import {toUnionAddress} from '@rarible/types';
+import NFT_CARD from '../components/nft_card';
+import {gql, useQuery} from '@apollo/client';
+import {useRouter} from 'next/router';
+import {connect as redux} from 'react-redux';
+import Button from '../components/common/button';
+import {setPortalContinuation} from '../actions';
+
+function NFTView({
+ address,
+ blockchain,
+ portal_continuation,
+ setPortalContinuation,
+ nfts,
+ loading,
+ error,
+ completed,
+ onScroll,
+ onClick,
+}: any): React.ReactElement {
+ const ref = React.useRef
+
+ )}
+
+ Loading...
+
+ );
+ if (error)
+ return (
+
+ Error: {error.message}
+
+ );
+
+ if (completed) {
+ return (
+ <>
+
+
+
+
+ );
+ }
+
+ return ;
+}
+
+const mapStateToProps = (state) => ({
+ sdk: state.session.sdk,
+ address: state.session.address,
+ connection: state.session.connection,
+ blockchain: state.session.blockchain,
+ portal_continuation: state.session.portal_continuation,
+});
+export default redux(mapStateToProps, {setPortalContinuation})(NFTView);
diff --git a/src/ui/NFT_View.tsx b/src/ui/NFT_View.tsx
new file mode 100644
index 0000000..7f1eb92
--- /dev/null
+++ b/src/ui/NFT_View.tsx
@@ -0,0 +1,335 @@
+import React, {useState, useEffect} from 'react';
+import dynamic from 'next/dynamic';
+import {connect as redux} from 'react-redux';
+import {gql, useQuery, useLazyQuery} from '@apollo/client';
+import {setPortalContinuation} from '../actions/session';
+import AKKORO_LIB from '../akkoro_lib';
+import {
+ ItemId,
+ BigNumber,
+ toUnionAddress,
+ OrderId,
+ toBigNumber,
+ ContractAddress,
+} from '@rarible/types';
+import {IRaribleSdk} from '@rarible/sdk/build/domain';
+import {truncateAddress} from '../lib/moiWeb3';
+import {event} from '../utility/analytics';
+import Select from 'react-select';
+import {Input} from '../common/input';
+import Button from '../components/common/button';
+import {parse} from 'dotenv';
+import {useRouter} from 'next/router';
+import OrderItems from '../components/OrderItems';
+
+let MediaViewer = dynamic(() => import('../components/media-viewer'), {
+ ssr: false,
+});
+
+interface TokenProps {
+ sdk: IRaribleSdk;
+ address: any;
+ connection: any;
+ blockchain: any;
+ _id: any;
+ onClose: any;
+}
+async function checkURL(url) {
+ try {
+ let blob = await fetch('https://akkoros.herokuapp.com/' + url).then((r) =>
+ r.blob()
+ );
+ let dataUrl = await new Promise((resolve) => {
+ let reader = new FileReader();
+ reader.onload = () => resolve(reader.result);
+ reader.readAsDataURL(blob);
+ });
+ // now do something with `dataUrl`
+
+ dataUrl = dataUrl.split(':')[1];
+ dataUrl = dataUrl.split(';')[0];
+ // console.log(dataUrl);
+ if (dataUrl.includes('text')) {
+ return 'image/SVG';
+ }
+
+ if (dataUrl.includes('application/octet-stream')) {
+ return 'image/png';
+ }
+ return await dataUrl;
+ } catch (error) {
+ console.log(error);
+ return 'image/png';
+ }
+}
+
+function NFT_View({
+ sdk,
+ address,
+ connection,
+ blockchain,
+ _id,
+ onClose,
+}: TokenProps) {
+ const [sell_price, setSell_Price] = useState(0);
+ const [mimetype, setMimeType] = useState('');
+ const [ownership_status, setOwnershipStatus] = useState(false);
+ const [currency, setCurrency] = useState
+ {nfts
+ ?.filter(({name, url}) => {
+ return (
+ name !== '[WAITING TO BE SIGNED]' &&
+ name !== 'Unnamed item' &&
+ name !== '' &&
+ name !== 'Unnamed' &&
+ name !== 'Untitled' &&
+ url !== ''
+ );
+ })
+ .map((nft?: any, key?: number) => {
+ return (
+
+ onClick({
+ blockChain: nft.blockchain,
+ id: e,
+ })
+ }
+ />
+ );
+ })}
+
+
+
+ );
+ if (error)
+ return (
+
+ Loading...
+
+
+ Error: {error.message}
+
+ );
+ return (
+ <>
+
+ {completed && (
+
+ {' '}
+
+ )}
+
+ );
+}
+
+const mapStateToProps = (state) => ({
+ address: state.session.address,
+ connection: state.session.connection,
+ blockchain: state.session.blockchain,
+ portal_continuation: state.session.portal_continuation,
+});
+
+export default redux(mapStateToProps, {setPortalContinuation})(NFT_View);
diff --git a/src/ui/token.tsx b/src/ui/token.tsx
new file mode 100644
index 0000000..3d9c303
--- /dev/null
+++ b/src/ui/token.tsx
@@ -0,0 +1,574 @@
+import React, {useState, useEffect} from 'react';
+import dynamic from 'next/dynamic';
+import {connect as redux} from 'react-redux';
+import {gql, useQuery, useLazyQuery} from '@apollo/client';
+import {setPortalContinuation} from '../actions/session';
+import AKKORO_LIB from '../akkoro_lib';
+import {
+ ItemId,
+ BigNumber,
+ toUnionAddress,
+ OrderId,
+ toBigNumber,
+ ContractAddress,
+} from '@rarible/types';
+import {IRaribleSdk} from '@rarible/sdk/build/domain';
+import {truncateAddress} from '../lib/moiWeb3';
+import {event} from '../utility/analytics';
+import Select from 'react-select';
+import {Input} from '../common/input';
+import Button from '../components/common/button';
+import {parse} from 'dotenv';
+import {useRouter} from 'next/router';
+import OrderItems from '../components/OrderItems';
+let MediaViewer = dynamic(() => import('../components/media-viewer'), {
+ ssr: false,
+});
+
+interface TokenProps {
+ sdk: IRaribleSdk;
+ address: any;
+ connection: any;
+ blockchain: any;
+ portal_continuation: string;
+ setPortalContinuation: (portal_continuation: string) => void;
+}
+async function checkURL(url) {
+ try {
+ let blob = await fetch('https://akkoros.herokuapp.com/' + url).then((r) =>
+ r.blob()
+ );
+ let dataUrl = await new Promise((resolve) => {
+ let reader = new FileReader();
+ reader.onload = () => resolve(reader.result);
+ reader.readAsDataURL(blob);
+ });
+ // now do something with `dataUrl`
+
+ dataUrl = dataUrl.split(':')[1];
+ dataUrl = dataUrl.split(';')[0];
+ // console.log(dataUrl);
+ if (dataUrl.includes('text')) {
+ return 'image/SVG';
+ }
+
+ if (dataUrl.includes('application/octet-stream')) {
+ return 'image/png';
+ }
+ return await dataUrl;
+ } catch (error) {
+ console.log(error);
+ return 'image/png';
+ }
+}
+
+function Token_View({
+ sdk,
+ address,
+ connection,
+ blockchain,
+ portal_continuation,
+ setPortalContinuation,
+}: TokenProps) {
+ const router = useRouter();
+ const queryDate = {
+ 1: Date.now() - 86400000 * 3,
+ };
+ const [sell_price, setSell_Price] = useState(0);
+ const [mimetype, setMimeType] = useState('');
+ const [ownership_status, setOwnershipStatus] = useState(false);
+ const [currency, setCurrency] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {tokenData !== null &&
+ tokenData !== undefined &&
+ connection !== undefined &&
+ connection !== null &&
+ connection.blockchain === tokenData?.blockchain &&
+ connection.status !== 'initializing' &&
+ connection.status !== 'disconnected' &&
+ connection.status !== 'connecting' && (
+ {tokenData?.name}
+{tokenData?.blockchain}
+ + visit on rarible.com + +Total Supply: {<>{tokenData?.supply}}
+{tokenData?.description}
+
+ Error: {error.message}
+
+ );
+
+ if (loading)
+ return (
+
+
+ );
+ if (completed) {
+ return (
+ <>
+
+
+ {tokenData.nfts[0] !== undefined && (
+
+ Loading...
+
+
+
+ )}
+
+ );
+ }
+
+ return ;
+}
+
+function Order_Items({
+ sdk,
+ nid,
+ address = '',
+ blockchain = '',
+}: {
+ sdk: IRaribleSdk;
+ nid: string;
+ address: string;
+ blockchain: string;
+}) {
+ const query = gql`
+ query NFT_ORDER_DATA($input: RaribleInput) {
+ get_orders_by_nft_id(input: $input) {
+ id
+ platform
+ status
+ makeStock
+ createdAt
+ makePrice
+ makePriceUsd
+ maker
+ }
+ }
+ `;
+ // console.log(nid);
+ const {loading, error, data} = useQuery(query, {
+ variables: {
+ input: {
+ address: nid,
+ },
+ },
+ });
+ if (loading)
+ return (
+
+
+
+
+
+
+
+
+
+
+ {tokenData.nfts !== undefined &&
+ tokenData.nfts[0] !== undefined &&
+ connection !== null &&
+ connection.blockchain === tokenData.nfts[0]?.blockchain &&
+ connection.status !== 'initializing' &&
+ connection.status !== 'disconnected' &&
+ connection.status !== 'connecting' && (
+ {tokenData.nfts[0]?.name}
+{tokenData.nfts[0]?.blockchain}
+ + visit on rarible.com + +Total Supply: {<>{tokenData.nfts[0]?.supply}}
+ {/*{nfts[0]?.description}
*/} +
+
+
+
+
+ );
+ if (error)
+ return (
+
+ Loading...
+
+
+
+ );
+ return (
+ <>
+ {/* {console.log(data)} */}
+
+ No Orders Found
+
+
+
+
+ );
+}
+// function Bid_Items({
+// sdk,
+// nid,
+// address = '',
+// blockchain = '',
+// }: {
+// sdk: IRaribleSdk;
+// nid: string;
+// address: string;
+// blockchain: string;
+// }) {
+// // console.log(nid)
+// const query = gql`
+// query NFT_ORDER_DATA($input: RaribleInput) {
+// get_bids_by_nft_id(input: $input) {
+// id
+// platform
+// status
+// makeStock
+// createdAt
+// makePrice
+// makePriceUsd
+// maker
+// }
+// }
+// `;
+
+// const {loading, error, data} = useQuery(query, {
+// variables: {
+// input: {
+// address: nid,
+// },
+// },
+// });
+// if (loading)
+// return (
+// +
Orders:
+
+ {data.get_orders_by_nft_id.filter((order) => order.status == 'ACTIVE')
+ .length > 0 ? (
+ data.get_orders_by_nft_id
+ .filter((order) => order.status == 'ACTIVE')
+ .map((order, key) => {
+ const id = order.id as OrderId;
+ // console.log(order);
+ return (
+
+
+
+ );
+ })
+ ) : (
+ + Author:{' '} + + {truncateAddress(order.maker.split(':')[1])} + +
{' '} +
+
+ {/* + {' '} + For Sell:{' '} + + {order.makeStock} + +
+
+
*/}
+ {order.maker !==
+ toUnionAddress(blockchain + ':' + address) && (
+
+ )}
+
+ {' '}
+ Price:
+
+ {blockchain == 'ETHEREUM'
+ ? 'ETH'
+ : blockchain == 'TEZOS'
+ ? 'XTZ'
+ : 'FLOW'}{' '}
+ + 1% Fee
+
No Orders Found
+ )}
+
+// Loading...
+//
+// );
+// if (error)
+// return (
+//
+// Error: {error.message}
+//
+// );
+// return (
+// <>
+//
+//
+//
+// );
+// }
+const mapStateToProps = (state) => ({
+ sdk: state.session.sdk,
+ address: state.session.address,
+ connection: state.session.connection,
+ blockchain: state.session.blockchain,
+ portal_continuation: state.session.portal_continuation,
+});
+
+export default redux(mapStateToProps, {setPortalContinuation})(Token_View);
diff --git a/src/ui/wallet.tsx b/src/ui/wallet.tsx
new file mode 100644
index 0000000..d4a9cf6
--- /dev/null
+++ b/src/ui/wallet.tsx
@@ -0,0 +1,133 @@
+import React from 'react';
+import {toUnionAddress} from '@rarible/types';
+import NFT_CARD from '../components/nft_card';
+import {gql, useQuery, useLazyQuery} from '@apollo/client';
+import {useRouter} from 'next/router';
+import {connect as redux} from 'react-redux';
+
+function Wallet({
+ address,
+ connection,
+ portal_continuation,
+}: any): React.ReactElement {
+ const router = useRouter();
+ const [walletData, setWalletData] = React.useState([]);
+ const [completed, setCompleted] = React.useState(false);
+ const query = gql`
+ query WalletNFTS($input: RaribleInput) {
+ get_items_by_owner(input: $input) {
+ totalSupply
+ nfts {
+ id
+ name
+ blockchain
+ price
+ url
+ }
+ }
+ }
+ `;
+
+ const [get_items_by_owner, {loading, error, data}] = useLazyQuery(query, {
+ variables: {
+ input: {
+ address: connection.blockchain + ':' + address,
+ },
+ },
+ onCompleted: ({get_items_by_owner}) => {
+ if (get_items_by_owner !== null) {
+ setWalletData(get_items_by_owner);
+ setCompleted(true);
+ }
+ },
+ });
+
+ React.useEffect(() => {
+ connection !== null && address !== undefined && get_items_by_owner();
+ }, [connection, address]);
+
+ if (loading)
+ return (
+
+//
+// Bids:
+// {console.log(data)} +// {data.get_bids_by_nft_id.map((order) => { +// const id = order.id as OrderId; +// return ( +//
+// {/*
+// );
+// })}
+// Order ID: {order.id}
*/}
+// Seller: {order.maker}
+// For Sell: {order.makeStock}
+// {/* Status: {order.status}
*/}
+// Order Created: {order.createdAt}
+//
+// Price: {order.makePrice}ETH + 1% Service fee ={' '}
+// {(
+// parseFloat(order.makePrice) +
+// 0.01 * parseFloat(order.makePrice)
+// ).toString()}
+//
+// {
+//
+// }
+//
+ Loading...
+
+ );
+ if (error)
+ return (
+
+ Error: {error.message}
+
+ );
+ if (completed) {
+ return (
+ <>
+
+
+
+
+ );
+ }
+
+ return ;
+}
+
+const mapStateToProps = (state) => ({
+ sdk: state.session.sdk,
+ address: state.session.address,
+ connection: state.session.connection,
+ portal_continuation: state.session.portal_continuation,
+});
+export default redux(mapStateToProps, {})(Wallet);
diff --git a/src/utility/fromReq.ts b/src/utility/fromReq.ts
new file mode 100644
index 0000000..52596ba
--- /dev/null
+++ b/src/utility/fromReq.ts
@@ -0,0 +1,14 @@
+interface HeadersType {
+ headers: object | any;
+ 'accept-language': string | any;
+}
+
+const getLangFromReq = (req: object | any = {}): string => {
+ const headers: HeadersType = req.headers || {};
+ const acceptLanguage: string = headers['accept-language'];
+ return acceptLanguage && acceptLanguage.length > 0
+ ? acceptLanguage.split(',')[0]
+ : 'en';
+};
+
+export { getLangFromReq };
diff --git a/src/utility/useInterval.js b/src/utility/useInterval.js
new file mode 100644
index 0000000..5f51729
--- /dev/null
+++ b/src/utility/useInterval.js
@@ -0,0 +1,25 @@
+// utils.js
+
+import React, { useState, useEffect, useRef } from 'react';
+
+ const useInterval = (callback, delay) => {
+
+ const savedCallback = useRef();
+
+ useEffect(() => {
+ savedCallback.current = callback;
+ }, [callback]);
+
+
+ useEffect(() => {
+ function tick() {
+ savedCallback.current();
+ }
+ if (delay !== null) {
+ const id = setInterval(tick, delay);
+ return () => clearInterval(id);
+ }
+ }, [delay]);
+ }
+
+ export default useInterval;
\ No newline at end of file
diff --git a/src/utils/cut-string.ts b/src/utils/cut-string.ts
new file mode 100644
index 0000000..0247809
--- /dev/null
+++ b/src/utils/cut-string.ts
@@ -0,0 +1,7 @@
+export const cutString = (str?: string, size?: number): string => {
+ if (str && size && size - 5 < str.length) {
+ return `${str.slice(0, size - 5)}...${str.slice(-4)}`
+ }
+
+ return str ?? ""
+}
\ No newline at end of file
diff --git a/src/views/404/404-page.tsx b/src/views/404/404-page.tsx
new file mode 100644
index 0000000..d6c0729
--- /dev/null
+++ b/src/views/404/404-page.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+import { Page } from "../../components/page"
+import { Box, Typography } from "@mui/material"
+
+export function NotFoundPage() {
+ return (
+ + My Collection:
{walletData?.totalSupply} Owned
+ + +
+ {walletData.nfts?.map((nft?: any, key?: number) => {
+ return (
+ {
+ return e;
+ }}
+ />
+ );
+ })}
+
+ -
+
- Connect wallets +
- Deploy collections +
- Mint NFTs +
- Sell NFTs +
- Buy NFTs +
- Make and accept Bid +
-
+
@rarible/sdk — Rarible Protocol SDK
+ @rarible/connector — Rarible SDK Wallet Connector
+ @rixio/react — Rixio
+
+ {`
+// get order info
+const accept = await connection.sdk.order.acceptBid({
+ orderId:
+})
+
+// send transaction
+const result = await accept.submit({
+ amount: 1,
+})
+// result: IBlockchainTransaction
+ `}
+
+
+}
diff --git a/src/views/bid/bid-form.tsx b/src/views/bid/bid-form.tsx
new file mode 100644
index 0000000..704da30
--- /dev/null
+++ b/src/views/bid/bid-form.tsx
@@ -0,0 +1,82 @@
+import React, { useContext } from "react"
+import { useForm } from "react-hook-form"
+import { Box, Stack } from "@mui/material"
+import { PrepareBidResponse } from "@rarible/sdk/build/types/order/bid/domain"
+import { toBigNumber } from "@rarible/types"
+import { FormTextInput } from "../../components/common/form/form-text-input"
+import { FormSubmit } from "../../components/common/form/form-submit"
+import { resultToState, useRequestResult } from "../../components/hooks/use-request-result"
+import { ConnectorContext } from "../../components/connector/sdk-connection-provider"
+import { RequestResult } from "../../components/common/request-result"
+import { getCurrency } from "../../common/get-currency"
+
+
+interface IBidFormProps {
+ prepare: PrepareBidResponse
+ disabled?: boolean
+ onComplete: (response: any) => void
+}
+
+export function BidForm({ prepare, disabled, onComplete }: IBidFormProps) {
+ const connection = useContext(ConnectorContext)
+ const form = useForm()
+ const { handleSubmit } = form
+ const { result, setError } = useRequestResult()
+
+ return (
+ <>
+
+
+ {data}
+
+
+ {`
+// get sell info
+const bid = await connection.sdk.order.bid({
+ itemId: -
+})
+
+// send transaction
+const result = await bid.submit({
+ price: 2,
+ currency: {
+ "@type": "ERC20",
+ contract: "ETHEREUM:0xc778417E063141139Fce010982780140Aa0cD5Ab" // WETH contract address
+ },
+ amount: 1,
+})
+// result: string - order id
+ `}
+
+
+}
diff --git a/src/views/buy/buy-form.tsx b/src/views/buy/buy-form.tsx
new file mode 100644
index 0000000..681fc1e
--- /dev/null
+++ b/src/views/buy/buy-form.tsx
@@ -0,0 +1,66 @@
+import React, { useContext } from "react"
+import { useForm } from "react-hook-form"
+import { Box, Stack } from "@mui/material"
+import { PrepareFillResponse } from "@rarible/sdk/build/types/order/fill/domain"
+import { FormTextInput } from "../../components/common/form/form-text-input"
+import { FormSubmit } from "../../components/common/form/form-submit"
+import { resultToState, useRequestResult } from "../../components/hooks/use-request-result"
+import { ConnectorContext } from "../../components/connector/sdk-connection-provider"
+import { RequestResult } from "../../components/common/request-result"
+
+interface IBuyFormProps {
+ prepare: PrepareFillResponse
+ disabled?: boolean
+ onComplete: (response: any) => void
+}
+
+export function BuyForm({ prepare, disabled, onComplete }: IBuyFormProps) {
+ const connection = useContext(ConnectorContext)
+ const form = useForm()
+ const { handleSubmit } = form
+ const { result, setError } = useRequestResult()
+
+ return (
+ <>
+
+
+ {`
+// get order info
+const buy = await connection.sdk.order.buy({
+ orderId:
+})
+// buy: {
+// baseFee: number
+// maxAmount: BigNumber
+// multiple: boolean
+// submit: Function
+// supportsPartialFill: boolean }
+// }
+
+// send transaction
+const result = await buy.submit({
+ amount: 1,
+})
+// result: IBlockchainTransaction
+ `}
+
+
+}
diff --git a/src/views/connect/comments/connector-usage-comment.tsx b/src/views/connect/comments/connector-usage-comment.tsx
new file mode 100644
index 0000000..edb1f55
--- /dev/null
+++ b/src/views/connect/comments/connector-usage-comment.tsx
@@ -0,0 +1,47 @@
+import React from "react"
+import { Link, Typography } from "@mui/material"
+import { Code } from "../../../components/common/code"
+import { InlineCode } from "../../../components/common/inline-code"
+
+export function ConnectorUsageComment() {
+ return <>
+
+ {`
+import { Connector, InjectedWeb3ConnectionProvider } from "@rarible/connector"
+import { MEWConnectionProvider } from "@rarible/connector-mew"
+
+// 1. Configure providers
+const injected = new InjectedWeb3ConnectionProvider()
+const mew = new MEWConnectionProvider({
+ networkId: 4,
+ rpcUrl: ethereumRpcMap[4]
+})
+
+// 2. Create connector
+const connector = Connector
+ .create(injected)
+ .add(mew)
+
+// 3. Connector ready to use
+connector.connection.subscribe((con) => {
+ if (con.status === "connected") {
+ // use connection to create sdk here
+ }
+})
+
+// get list of available options
+const options = await connector.getOptions()
+// connect to first one
+await connector.connect(options[0])
+ `}
+
+
+ {`
+sdk.nft.deploy({
+ blockchain: Blockchain.ETHEREUM,
+ asset: {
+ assetType: "ERC721",
+ arguments: {
+ name: "My Collection",
+ symbol: "MYCOL",
+ baseURI: "https://example.com",
+ contractURI: "https://example.com",
+ isUserToken: false
+ }
+ }
+})
+ `}
+
+
+}
diff --git a/src/views/deploy/comments/collection-result-comment.tsx b/src/views/deploy/comments/collection-result-comment.tsx
new file mode 100644
index 0000000..1e99a38
--- /dev/null
+++ b/src/views/deploy/comments/collection-result-comment.tsx
@@ -0,0 +1,11 @@
+import React from "react"
+import { Typography } from "@mui/material"
+import { InlineCode } from "../../../components/common/inline-code"
+
+export function CollectionResultComment() {
+ return <>
+
+ {data?.address}
+
+
+ {`
+// get collection by id
+const collection = await sdk.apis.collection.getCollectionById({
+ collection:
+})
+
+// get mint info
+const mint = await sdk.nft.mint({ collection })
+// mint: {
+// multiple: boolean,
+// supportsRoyalties: boolean,
+// supportsLazyMint: boolean,
+// submit: Function
+// }
+
+// send transaction
+const result = await mint.submit({
+ uri: "TOKEN URI",
+ supply: 1,
+ lazyMint: false
+})
+// result: {
+// type: "on-chain",
+// itemId: string,
+// transaction: IBlockchainTransaction
+// } | {
+// type: "off-chain",
+// itemId: string
+// }
+ `}
+
+
+}
diff --git a/src/views/mint/mint-form.tsx b/src/views/mint/mint-form.tsx
new file mode 100644
index 0000000..64a71d6
--- /dev/null
+++ b/src/views/mint/mint-form.tsx
@@ -0,0 +1,76 @@
+import React, { useContext } from "react"
+import { useForm } from "react-hook-form"
+import { Box, Stack } from "@mui/material"
+import { MintResponse, PrepareMintResponse } from "@rarible/sdk/build/types/nft/mint/domain"
+import { FormTextInput } from "../../components/common/form/form-text-input"
+import { FormSubmit } from "../../components/common/form/form-submit"
+import { resultToState, useRequestResult } from "../../components/hooks/use-request-result"
+import { ConnectorContext } from "../../components/connector/sdk-connection-provider"
+import { FormCheckbox } from "../../components/common/form/form-checkbox"
+import { RequestResult } from "../../components/common/request-result"
+
+
+interface IMintFormProps {
+ prepare: PrepareMintResponse
+ disabled?: boolean
+ onComplete: (response: MintResponse) => void
+}
+
+export function MintForm({ prepare, disabled, onComplete }: IMintFormProps) {
+ const connection = useContext(ConnectorContext)
+ const form = useForm()
+ const { handleSubmit } = form
+ const { result, setError } = useRequestResult()
+
+ return (
+ <>
+
+
+ {data.type}
+
+
+ {data.itemId} {' '}
+
+
+ {`
+// get sell info
+const sell = await connection.sdk.order.sell({
+ itemId: -
+})
+// sell: {
+// baseFee: number
+// maxAmount: BigNumber
+// multiple: boolean
+// submit: Function
+// supportedCurrencies: - supported currencies list
+// }
+
+// send transaction
+const result = await sell.submit({
+ price: 2,
+ currency: {"@type": "ETH"},
+ amount: 1,
+})
+// result: string - order id
+ `}
+
+
+}
diff --git a/src/views/sell/sell-form.tsx b/src/views/sell/sell-form.tsx
new file mode 100644
index 0000000..5016a9d
--- /dev/null
+++ b/src/views/sell/sell-form.tsx
@@ -0,0 +1,81 @@
+import React, { useContext } from "react"
+import { useForm } from "react-hook-form"
+import { Box, Stack } from "@mui/material"
+import { PrepareOrderResponse } from "@rarible/sdk/build/types/order/common"
+import { toBigNumber } from "@rarible/types"
+import { FormTextInput } from "../../components/common/form/form-text-input"
+import { FormSubmit } from "../../components/common/form/form-submit"
+import { resultToState, useRequestResult } from "../../components/hooks/use-request-result"
+import { ConnectorContext } from "../../components/connector/sdk-connection-provider"
+import { RequestResult } from "../../components/common/request-result"
+import { getCurrency } from "../../common/get-currency"
+
+interface ISellFormProps {
+ onComplete: (response: any) => void
+ prepare: PrepareOrderResponse
+ disabled?: boolean
+}
+
+export function SellForm({ prepare, disabled, onComplete }: ISellFormProps) {
+ const connection = useContext(ConnectorContext)
+ const form = useForm()
+ const { handleSubmit } = form
+ const { result, setError } = useRequestResult()
+
+ return (
+ <>
+
+
+ {data}
+
+