11 | context.setTheme(context.theme === 'light' ? 'dark' : 'light')
12 | }
13 | />
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/button-theme/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 |
3 | .container {
4 | display: flex;
5 | width: 16px;
6 | height: 16px;
7 | border-radius: 50%;
8 | background-color: var(--background-color);
9 | transition: background-color #{$theme-duration} ease-out,
10 | color #{$theme-duration} ease-out;
11 | z-index: 1000;
12 | cursor: pointer;
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/button/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import classnames from 'classnames'
4 | import styles from './styles.module.scss'
5 |
6 | export const Button = ({
7 | to = null,
8 | href = null,
9 | onClick = () => null,
10 | children,
11 | disabled,
12 | fit,
13 | }) => {
14 | const classes = classnames({
15 | [styles.container]: true,
16 | [styles.disabled]: disabled,
17 | [styles.fit]: fit,
18 | })
19 |
20 | if (to) {
21 | return (
22 |
23 | {children}
24 |
25 | )
26 | }
27 |
28 | if (href) {
29 | return (
30 |
36 | {children}
37 |
38 | )
39 | }
40 | return (
41 |
42 | {children}
43 |
44 | )
45 | }
46 |
47 | export const Primary = ({ children = null, selected }) => {
48 | const classes = classnames({
49 | [styles.primary]: true,
50 | [styles.selected]: selected,
51 | })
52 | return
{children}
53 | }
54 |
55 | export const Secondary = ({ children = null, selected }) => {
56 | const classes = classnames({
57 | [styles.secondary]: true,
58 | [styles.selected]: selected,
59 | })
60 | return
{children}
61 | }
62 |
63 | export const Purchase = ({ children = null, selected }) => {
64 | const classes = classnames({
65 | [styles.purchase]: true,
66 | [styles.selected]: selected,
67 | })
68 | return
{children}
69 | }
70 |
71 | export const Curate = ({ children = null, selected }) => {
72 | const classes = classnames({
73 | [styles.curate]: true,
74 | [styles.selected]: selected,
75 | })
76 | return
{children}
77 | }
78 |
--------------------------------------------------------------------------------
/src/components/button/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 | @import '../../styles/mixins.scss';
3 |
4 | .container {
5 | @include resetButton();
6 |
7 | &.fit {
8 | display: contents;
9 | }
10 |
11 | &.disabled,
12 | &:disabled {
13 | pointer-events: none;
14 | cursor: unset;
15 | opacity: 0.5;
16 | }
17 | }
18 |
19 | .primary {
20 | color: var(--text-color);
21 | transition: color #{$theme-duration} ease-out;
22 |
23 | &.selected {
24 | font-weight: bold;
25 | }
26 |
27 | @include hover {
28 | &:not(.selected) {
29 | text-decoration: underline;
30 | }
31 | }
32 | }
33 |
34 | .secondary {
35 | color: var(--text-color);
36 | transition: color #{$theme-duration} ease-out;
37 |
38 | @include hover {
39 | text-decoration: none;
40 | }
41 | }
42 |
43 | .purchase {
44 | padding: 2px 6px;
45 | color: var(--text-color);
46 | border-right: 2px solid var(--text-color);
47 | border-bottom: 2px solid var(--text-color);
48 | transition: border-color #{$theme-duration} ease-out,
49 | color #{$theme-duration} ease-out;
50 | }
51 |
52 | .curate {
53 | opacity: inherit;
54 | margin-bottom: 10px;
55 | cursor: pointer;
56 |
57 | padding: 2px 6px;
58 | width: 100%;
59 | color: black; // this colour doesnt change
60 | background-color: rgb(239, 239, 239);
61 | border-right: 2px solid var(--text-color);
62 | border-bottom: 2px solid var(--text-color);
63 | transition: border-color #{$theme-duration} ease-out,
64 | color #{$theme-duration} ease-out;
65 | }
66 |
--------------------------------------------------------------------------------
/src/components/collab/constants.js:
--------------------------------------------------------------------------------
1 | export const CollaboratorType = {
2 | ADMIN: 'admin',
3 | CREATOR: 'creator',
4 | BENEFACTOR: 'benefactor',
5 | }
6 |
7 | export const ossProjects = [
8 | {
9 | name: 'H=N Tezos Fountain',
10 | address: 'tz1eggoxCes1qYRGLc3E1bg4uzuCUUuuQBb9',
11 | },
12 | {
13 | name: 'three.js',
14 | address: 'tz1ZUohCAkGjp7vPjQcC4VWcpgYZR1t3Si5C',
15 | },
16 | {
17 | name: 'Processing',
18 | address: 'tz1aPHze1U5BEEKrGYt3dvY6aAQEeiWm8jjK',
19 | }
20 | ]
21 |
22 | export const collaboratorTemplate = {
23 | address: '',
24 | shares: undefined,
25 | }
26 |
27 | export const tipOptions = [ 1, 5, 10 ]
28 |
29 | export const mockData = [{
30 | address: 'tz1YJvMiZyXnzvV9pxtAiuCFvaG7XoBZhbUQ',
31 | shares: 50,
32 | }, {
33 | address: 'tz2Hz4TVJZjoQVks4SfWgt38RfZTmrHmVH62',
34 | shares: 50,
35 | }];
36 |
--------------------------------------------------------------------------------
/src/components/collab/create/AddCollaboratorsButton.js:
--------------------------------------------------------------------------------
1 | import { Button, Purchase } from "../../button"
2 | import styles from '../styles.module.scss'
3 |
4 | export const AddCollaboratorsButton = ({ collaborators, onClick, threshold = 2 }) => {
5 |
6 | const validCollaborators = collaborators.filter(c => c.shares && c.address)
7 |
8 | return (
9 |
10 |
11 | { validCollaborators.length === 0 ? 'skip' : 'next' }
12 |
13 |
14 | )
15 | }
--------------------------------------------------------------------------------
/src/components/collab/create/ProjectList.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import classNames from 'classnames'
3 | import { Secondary } from '../../button'
4 | import styles from '../styles.module.scss'
5 | import { ossProjects } from '../constants'
6 |
7 | export const ProjectList = ({ benefactors, onSelect }) => {
8 | const [showList, setShowList] = useState(false)
9 |
10 | const benefactorAddresses = benefactors.map(b => b.address)
11 | const validBenefactors = benefactors.filter(b => b.address && b.shares)
12 | const unselectedProjects = ossProjects.filter(project => benefactorAddresses.indexOf(project.address) === -1)
13 | const btnClass = classNames(styles.btn, {
14 | [styles.muted]: showList || unselectedProjects.length < ossProjects.length || validBenefactors.length > 0,
15 | [styles.absolute] : showList,
16 | })
17 |
18 | const _select = (address, name) => {
19 | onSelect(address, name)
20 | setShowList(false)
21 | }
22 |
23 | return unselectedProjects.length > 0 ? (
24 |
25 |
setShowList(!showList)}>
26 |
27 | {showList ? 'close' : 'choose from popular projects'}
28 |
29 |
30 |
31 | {showList && (
32 |
33 | {unselectedProjects.map(project => {
34 | const { name, address } = project
35 |
36 | return (
37 |
38 | _select(address, name)}>{name}
39 |
40 | )
41 | })}
42 |
43 | )}
44 |
45 | ) : null
46 | }
--------------------------------------------------------------------------------
/src/components/collab/create/ShareAllocationNotice.js:
--------------------------------------------------------------------------------
1 | import styles from '../styles.module.scss'
2 |
3 | export const ShareAllocationNotice = ({ collaborators, muted }) => {
4 |
5 | // Add everything up and see if the total is less than 100. If so, show this notice
6 | const totalAllocated = Math.min(collaborators.reduce((total, c) => total + (Number(c.percentage) || 0), 0), 100)
7 | const validCollaborators = collaborators.filter(c => c.percentage && c.address)
8 | const showPercentageMismatchNotice = (totalAllocated > 0 && collaborators.length > 1 && validCollaborators.length > 0)
9 |
10 | return showPercentageMismatchNotice ? (
11 |
12 |
{totalAllocated}% allocated
13 | {totalAllocated < 100 && (
14 |
Please make sure your shares add up to 100%
15 | )}
16 |
17 | ) : null
18 | }
--------------------------------------------------------------------------------
/src/components/collab/create/TipJar.js:
--------------------------------------------------------------------------------
1 | import styles from './styles.module.scss'
2 | import { ossProjects } from '../constants'
3 | import { TipSelector } from './TipSelector'
4 |
5 | export const TipJar = ({ tips, setTips }) => {
6 |
7 | const tipsByAddress = tips.map(t => t.address)
8 |
9 | const toggleTip = (address) => {
10 | const updatedTips = [...tips]
11 |
12 | const index = tipsByAddress.indexOf(address)
13 |
14 | if (index > -1) {
15 | updatedTips.splice(index, 1)
16 | } else {
17 | const projectsByAddress = ossProjects.map(project => project.address)
18 | const index = projectsByAddress.indexOf(address)
19 | const project = ossProjects[index]
20 |
21 | updatedTips.push(project)
22 | }
23 |
24 | setTips(updatedTips)
25 | }
26 |
27 | const _updateTip = (address, percentage) => {
28 | const updatedTips = [...tips]
29 | const projectsByAddress = updatedTips.map(t => t.address);
30 | const index = projectsByAddress.indexOf(address);
31 |
32 | // toggle if it's the same value
33 | const shouldRemove = updatedTips[index] ? (updatedTips[index].percentage === percentage) : false
34 |
35 | updatedTips[index] = {
36 | ...tips[index],
37 | percentage: shouldRemove ? undefined : percentage,
38 | }
39 |
40 | setTips(updatedTips)
41 | }
42 |
43 | return (
44 |
45 |
46 | {ossProjects.map((project, projectIndex) => {
47 | const { name, address } = project
48 | const isChecked = tipsByAddress.indexOf(address) > -1
49 |
50 | return (
51 |
52 |
53 |
54 |
55 |
58 |
59 |
60 | {isChecked && (
61 |
_updateTip(project.address, percentage)}
64 | />
65 | )}
66 |
68 | )
69 | })}
70 |
71 | )
72 | }
--------------------------------------------------------------------------------
/src/components/collab/create/TipSelector.js:
--------------------------------------------------------------------------------
1 | import styles from '../styles.module.scss'
2 | import { tipOptions } from '../constants'
3 |
4 | export const TipSelector = ({ onSelect }) => {
5 | return (
6 |
7 | {tipOptions.map(percentage => {
8 | return (
9 | onSelect(percentage)}>
10 | {percentage}{!isNaN(percentage) ? '%' : ''}
11 |
12 | )
13 | })}
14 |
15 | )
16 | }
--------------------------------------------------------------------------------
/src/components/collab/functions.js:
--------------------------------------------------------------------------------
1 | export const extractAddress = (input) => {
2 | const tzPattern = /^.*(tz[\w\d]{34}).*$/i
3 | let matches = tzPattern.exec(input.trim())
4 |
5 | // Check for contract patterns
6 | if (!matches) {
7 | const ktPattern = /^.*(kt[\w\d]{34}).*$/i
8 | matches = ktPattern.exec(input.trim())
9 | }
10 |
11 | if (!matches) {
12 | return false
13 | }
14 |
15 | return matches[1];
16 | }
17 |
18 | export const groupShareTotal = collaborators => collaborators.reduce((sharesAllocated, c) => (c.shares || 0) + sharesAllocated, 0)
19 |
--------------------------------------------------------------------------------
/src/components/collab/index.js:
--------------------------------------------------------------------------------
1 | import { BenefactorRow } from "./create/BenefactorRow";
2 | import { BenefactorsUI } from "./create/BenefactorsUI";
3 | import { CollaboratorRow } from "./create/CollaboratorRow";
4 | import { CollaboratorTable } from "./create/CollaboratorTable";
5 | import { ShareAllocationNotice } from "./create/ShareAllocationNotice";
6 | import { collaboratorTemplate } from "./constants"
7 | // import { TipJar } from "./TipJar"
8 |
9 | const CloseIcon = () => {
10 | return (
11 |
12 | )
13 | }
14 |
15 | export {
16 | CloseIcon,
17 | BenefactorRow,
18 | BenefactorsUI,
19 | CollaboratorRow,
20 | CollaboratorTable,
21 | ShareAllocationNotice,
22 | collaboratorTemplate,
23 | }
--------------------------------------------------------------------------------
/src/components/collab/show/CollabHeader.js:
--------------------------------------------------------------------------------
1 | import { Fragment } from 'react'
2 | import { Container, Padding } from '../../layout'
3 | import { CollabParticipant } from './CollabParticipant'
4 |
5 | export const CollabHeader = ({ collaborators }) => {
6 | return (
7 |
8 |
9 |
10 | {collaborators.length > 0 && (
11 |
12 | A collaboration between
13 |
14 | {collaborators.map((collabData, index) =>
15 | [
16 | (index > 0 && index < collaborators.length - 1) && ", ",
17 | (index === collaborators.length - 1) && ' and ',
18 |
26 | )}
27 |
28 |
29 |
30 | )
31 | }
--------------------------------------------------------------------------------
/src/components/collab/show/CollabIssuerInfo.js:
--------------------------------------------------------------------------------
1 | import { PATH } from '../../../constants'
2 | import { walletPreview } from '../../../utils/string'
3 | import { Button, Primary } from '../../button'
4 | import styles from '../styles.module.scss'
5 |
6 | export const CollabIssuerInfo = ({address}) => {
7 | return (
8 |
14 | )
15 | }
--------------------------------------------------------------------------------
/src/components/collab/show/CollabParticipant.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react"
2 | import { PATH } from "../../../constants"
3 | import { Link } from 'react-router-dom'
4 | import { GetUserMetadata } from "../../../data/api"
5 | import styles from '../styles.module.scss'
6 |
7 | export const CollabParticipant = ({ collabData }) => {
8 |
9 | const [meta, setMeta] = useState({})
10 |
11 | useEffect(() => {
12 | GetUserMetadata(collabData.address)
13 | .then(({ data }) => setMeta(data))
14 | }, [collabData.address])
15 |
16 | return (
17 |
{meta.alias || collabData.address}
18 | )
19 | }
--------------------------------------------------------------------------------
/src/components/feed-item/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { PATH } from '../../constants'
3 | import { Padding } from '../layout'
4 | import { Button } from '../button'
5 | import { ItemInfo } from '../item-info'
6 | import { renderMediaType } from '../media-types'
7 | import { VisuallyHidden } from '../visually-hidden'
8 | import styles from './styles.module.scss'
9 |
10 | export const FeedItem = (props) => {
11 | return (
12 |
13 |
14 | {`Go to OBJKT: ${props.title}`}
15 |
16 | {renderMediaType({
17 | mimeType: props.mime,
18 | artifactUri: props.artifact_uri,
19 | displayUri: props.display_uri,
20 | creator: props.creator_id,
21 | objkt: String(props.id),
22 | displayView: true
23 | })}
24 |
25 |
26 |
27 |
29 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/feed-item/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 | @import '../../styles/layout.scss';
3 |
4 | .container {
5 | position: relative;
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/feedback/index.js:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react'
2 | import { motion, AnimatePresence } from 'framer-motion'
3 | import { HicetnuncContext } from '../../context/HicetnuncContext'
4 | import { Loading } from '../loading'
5 | import { Button, Purchase } from '../button'
6 | import { fadeIn } from '../../utils/motion'
7 | import styles from './styles.module.scss'
8 |
9 | export const FeedbackComponent = () => {
10 | const context = useContext(HicetnuncContext)
11 | const { visible, message, progress, confirm, confirmCallback } =
12 | context.feedback
13 |
14 | return (
15 |
16 | {visible && (
17 |
18 |
19 | {progress &&
}
20 |
{message}
21 |
22 | {confirm && (
23 |
24 |
confirmCallback()}>
25 | close
26 |
27 |
28 | )}
29 |
31 | )}
32 |
33 | )
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/feedback/styles.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | width: 100%;
6 | height: 100%;
7 | background-color: var(--background-color);
8 | z-index: 900;
9 |
10 | display: flex;
11 | align-items: center;
12 | justify-content: center;
13 |
14 | .content {
15 | color: var(--text-color);
16 | min-width: 300px;
17 | display: flex;
18 | align-items: center;
19 | flex-direction: column;
20 |
21 | .message {
22 | display: flex;
23 | align-items: center;
24 | justify-content: center;
25 | flex-direction: column;
26 | margin: 20px 0 50px 0;
27 |
28 | & > * {
29 | margin-bottom: 1rem;
30 | }
31 | }
32 |
33 | .buttons {
34 | display: flex;
35 | align-items: center;
36 | justify-content: center;
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/footer/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { ButtonLanguage } from '../button-language'
3 | import { ButtonTheme } from '../button-theme'
4 | import { getLanguage } from '../../constants'
5 | import styles from './styles.module.scss'
6 |
7 | export const Footer = () => {
8 | const language = getLanguage()
9 |
10 | return (
11 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/footer/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 | @import '../../styles/layout.scss';
3 |
4 | .container {
5 | position: absolute;
6 | bottom: 0;
7 | left: 0;
8 | width: 100%;
9 | background-color: var(--text-color);
10 | color: var(--background-color);
11 | transition: background-color #{$theme-duration} ease-out,
12 | color #{$theme-duration} ease-out;
13 | padding: $mobile-padding;
14 | display: flex;
15 | align-items: center;
16 | flex-direction: column;
17 |
18 | & > * {
19 | display: flex;
20 | align-items: center;
21 | width: 100%;
22 | }
23 |
24 | .copy,
25 | .buttons,
26 | .warning {
27 | width: 100%;
28 | }
29 |
30 | .copy {
31 | & > * {
32 | margin-right: 1rem;
33 | }
34 | }
35 |
36 | .buttons {
37 | display: flex;
38 | align-items: center;
39 | justify-content: flex-end;
40 | width: 25%;
41 |
42 | & > * {
43 | margin-left: 1rem;
44 | }
45 | }
46 | .warning {
47 | display: flex;
48 | align-items: center;
49 | justify-content: flex-start;
50 | line-height: 1em;
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/header/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 | @import '../../styles/layout.scss';
3 |
4 | .container {
5 | position: fixed;
6 | width: 100%;
7 | height: 60px;
8 | padding: 0 #{$mobile-padding};
9 | background-color: var(--background-color);
10 | color: var(--text-color);
11 | transition: background-color #{$theme-duration} ease-out,
12 | color #{$theme-duration} ease-out;
13 | z-index: 1000;
14 | display: flex;
15 | align-items: center;
16 | justify-content: center;
17 |
18 | .content {
19 | width: 100%;
20 | display: flex;
21 | align-items: center;
22 | justify-content: space-between;
23 |
24 | @include respond-to('desktop') {
25 | width: 50%;
26 | margin: 0 auto;
27 | }
28 |
29 | .logo {
30 | display: flex;
31 | align-items: center;
32 | justify-content: center;
33 | height: 22.5px;
34 |
35 | svg {
36 | height: 22.5px;
37 | // fill: var(--text-color);
38 | transition: fill #{$theme-duration} ease-out;
39 | }
40 |
41 | img {
42 | width: auto;
43 | height: 37px;
44 | }
45 | }
46 |
47 | .right {
48 | display: flex;
49 | align-items: center;
50 |
51 | & > * {
52 | display: flex;
53 | align-items: center;
54 | font-size: 16px;
55 | }
56 |
57 | .hamburger {
58 | width: 30px;
59 | height: auto;
60 | margin-left: 10px;
61 | }
62 | }
63 | }
64 | }
65 |
66 | .menu {
67 | position: fixed;
68 | top: 60px;
69 | left: 0;
70 | right: 0;
71 | bottom: 0;
72 | background-color: var(--background-color);
73 | color: var(--text-color);
74 | transition: background-color #{$theme-duration} ease-out,
75 | color #{$theme-duration} ease-out;
76 | z-index: 1000;
77 |
78 | .content {
79 | display: flex;
80 | justify-content: flex-end;
81 |
82 | ul {
83 | margin-top: 100px;
84 | list-style: none;
85 |
86 | li {
87 | font-size: 30px;
88 | text-align: right;
89 |
90 | /* &:first-of-type {
91 | text-decoration: line-through;
92 | } */
93 |
94 | & > * {
95 | font-size: inherit;
96 | }
97 | }
98 | }
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/src/components/icons/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { motion } from 'framer-motion'
3 | import styles from './styles.module.scss'
4 |
5 | const transition = {
6 | duration: 0.5,
7 | ease: [0.43, 0.13, 0.23, 0.96],
8 | }
9 |
10 | export const Menu = ({ isOpen = false }) => {
11 | const variant = isOpen ? 'opened' : 'closed'
12 |
13 | const top = {
14 | closed: {
15 | rotate: 0,
16 | translateY: 0,
17 | },
18 | opened: {
19 | rotate: 45,
20 | translateY: 3,
21 | },
22 | }
23 | const center = {
24 | closed: {
25 | opacity: 1,
26 | },
27 | opened: {
28 | opacity: 0,
29 | },
30 | }
31 | const bottom = {
32 | closed: {
33 | rotate: 0,
34 | translateY: 0,
35 | },
36 | opened: {
37 | rotate: -45,
38 | translateY: -3,
39 | },
40 | }
41 | const lineProps = {
42 | strokeWidth: 2,
43 | vectorEffect: 'non-scaling-stroke',
44 | initial: 'closed',
45 | animate: variant,
46 | transition,
47 | }
48 |
49 | return (
50 |
51 |
56 |
85 |
86 | )
87 | }
88 |
--------------------------------------------------------------------------------
/src/components/icons/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 |
3 | .menu {
4 | margin-left: 6px;
5 | // border: 1px dashed black;
6 |
7 | svg {
8 | display: block;
9 | width: 30px;
10 | height: 30px;
11 |
12 | line {
13 | stroke: var(--text-color);
14 | transition: stroke #{$theme-duration} ease-out;
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/identicons/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 |
3 | .identicon {
4 | svg {
5 | border-radius: 100%;
6 | padding: 1px;
7 | width: 127.5px;
8 | height: 127.5px;
9 | //border: 1px solid var(--text-color);
10 | transition: border-color #{$theme-duration} ease-out;
11 |
12 | path {
13 | stroke: var(--text-color);
14 | fill: var(--text-color);
15 | transition: all #{$theme-duration} ease-out;
16 | }
17 | }
18 |
19 | img {
20 | border-radius: 100%;
21 | padding: 1px;
22 | width: 127.5px;
23 | height: 127.5px;
24 | //border: 2px solid var(--text-color);
25 | transition: border-color #{$theme-duration} ease-out;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/input/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from './styles.module.scss'
3 |
4 | export const Input = ({
5 | type = 'text',
6 | placeholder = 'placeholder',
7 | name = 'input-name-not-set',
8 | min,
9 | max,
10 | maxlength = 500,
11 | label,
12 | onChange = () => null,
13 | onBlur = () => null,
14 | onWheel = () => null,
15 | disabled,
16 | value,
17 | pattern,
18 | onKeyPress
19 | }) => (
20 |
21 |
22 | {label}
37 |
38 |
39 | )
40 |
41 | export const Textarea = ({
42 | type = 'text',
43 | placeholder = 'placeholder',
44 | name = 'input-name-not-set',
45 | min,
46 | max,
47 | maxlength = 5000,
48 | label,
49 | onChange = () => null,
50 | onBlur = () => null,
51 | disabled,
52 | value,
53 | }) => (
54 |
55 |
56 |
68 | {label}
69 |
70 |
71 | )
72 |
--------------------------------------------------------------------------------
/src/components/input/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 |
3 | .container {
4 | position: relative;
5 | width: 100%;
6 | margin-bottom: 12px;
7 |
8 | label {
9 | display: block;
10 | position: relative;
11 | width: 100%;
12 |
13 | p {
14 | position: absolute;
15 | top: 6px;
16 | left: 0;
17 | color: var(--text-color);
18 | letter-spacing: $letter-spacing;
19 | opacity: 0.7;
20 | transition: all 0.2s;
21 | pointer-events: none;
22 | border: 1px;
23 | }
24 |
25 | textarea,
26 | input {
27 | background-color: transparent;
28 | width: 100%;
29 | padding: 5px 0;
30 | border: none;
31 | color: var(--text-color);
32 | transition: color #{$theme-duration} ease-out;
33 | letter-spacing: $letter-spacing;
34 | // border-bottom: 1px solid var(--text-color);
35 | // border: 1px dashed red;
36 | margin-bottom: 10px;
37 |
38 | &::placeholder {
39 | color: var(--text-color);
40 | opacity: 0.4;
41 | }
42 |
43 | &:focus {
44 | outline: none;
45 | }
46 |
47 | &:focus + p,
48 | &:not(:placeholder-shown) + p {
49 | opacity: 0.4;
50 | transform: translateY(-25px);
51 | }
52 |
53 | &:focus::placeholder {
54 | opacity: 0;
55 | }
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/item-info/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 | @import '../../styles/layout.scss';
3 |
4 | .container {
5 | display: flex;
6 | align-items: center;
7 | justify-content: space-between;
8 | padding-top: 20px;
9 | padding-bottom: 20px;
10 | word-break: normal;
11 | width: 100%;
12 | }
13 |
14 | .spread {
15 | display: flex;
16 | align-items: center;
17 | justify-content: space-between;
18 | }
19 |
20 | .objktContainer {
21 | display: flex;
22 | align-items: center;
23 | justify-content: space-between;
24 |
25 | & > * {
26 | margin-left: 10px;
27 | }
28 | }
29 |
30 | .edition {
31 | display: flex;
32 | align-items: center;
33 | justify-content: space-between;
34 | width: 100%;
35 | font-size: 80%;
36 |
37 | .inline {
38 | display: flex;
39 | align-items: center;
40 | }
41 | }
42 |
43 | .hdaoButton {
44 | padding-left: 20px;
45 | }
46 |
47 | .issuer {
48 | @include respond-to('phone') {
49 | display: none;
50 | }
51 |
52 | @include respond-to('tablet') {
53 | display: block;
54 | }
55 | }
56 |
57 | span[data-tooltip].top {
58 | &:before,
59 | &:after {
60 | transform: translate(-50%, 10px);
61 | }
62 |
63 | &:hover:after,
64 | &:hover:before {
65 | transform: translate(-50%, 0px);
66 | }
67 | }
68 |
69 | span[data-tooltip] {
70 | position: relative;
71 |
72 | &:after,
73 | &:before {
74 | position: absolute;
75 | visibility: hidden;
76 | opacity: 1;
77 | transition: transform 200ms ease, opacity 200ms;
78 | z-index: 99;
79 | }
80 |
81 | &:before {
82 | content: attr(data-tooltip);
83 | background-color: var(--text-color);
84 | color: var(--background-color);
85 | font-size: 12px;
86 | font-weight: bold;
87 | padding: 10px 15px;
88 | border-radius: 10px;
89 | white-space: nowrap;
90 | text-decoration: none;
91 | letter-spacing: 1px;
92 | }
93 |
94 | &:after {
95 | width: 0;
96 | height: 0;
97 | left: 50%;
98 | border: 6px solid transparent;
99 | content: '';
100 | }
101 |
102 | &:hover:after,
103 | &:hover:before {
104 | visibility: visible;
105 | opacity: 1;
106 | transform: translate(-50%, 0px);
107 | }
108 | }
109 |
110 | span[data-tooltip][data-position='top']:before {
111 | bottom: 100%;
112 | left: 50%;
113 | }
114 |
115 | span[data-tooltip][data-position='top']:after {
116 | border-top-color: var(--text-color);
117 | border-bottom: none;
118 | bottom: 101%;
119 | margin-bottom: 4px;
120 | }
121 |
--------------------------------------------------------------------------------
/src/components/layout/README.md:
--------------------------------------------------------------------------------
1 | # Layout
2 |
3 | The layout of each page should inherit from these building blocks
4 |
5 | ## Page
6 |
7 | A `
` component should be the parent element of each page. Its role is to add a min-height and padding on top and bottom
8 |
9 | ## Container
10 |
11 | A `
` component's role is to define media queries and spacing between all different containers.
12 |
13 | An Example:
14 |
15 | ```jsx
16 | const Example = () => (
17 |
18 | This is a container
19 | This is another container
20 |
21 | )
22 | ```
23 |
24 | ## Padding
25 |
26 | A `
` component is reponsible to add paddings based on different media queries.
27 |
28 | ```jsx
29 | const Example = () => (
30 |
31 |
32 | This is a container with padding
33 |
34 |
35 | This is another container with padding
36 |
37 |
38 | )
39 | ```
40 |
--------------------------------------------------------------------------------
/src/components/layout/container/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import classnames from 'classnames'
3 | import styles from './styles.module.scss'
4 |
5 | export const Container = ({ children = null, large, xlarge }) => {
6 | const classes = classnames({
7 | [styles.container]: true,
8 | [styles.large]: large,
9 | [styles.xlarge]: xlarge,
10 | })
11 | return
{children}
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/layout/container/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/variables.scss';
2 | @import '../../../styles/layout.scss';
3 |
4 | .container {
5 | width: 100%;
6 | margin: 0 auto;
7 | margin-bottom: 20px;
8 | word-break: break-word;
9 |
10 | @include respond-to('desktop') {
11 | width: 50%;
12 | }
13 |
14 | &.large {
15 | @include respond-to('desktop') {
16 | width: 55%;
17 | }
18 | }
19 |
20 | &.xlarge {
21 | @include respond-to('desktop') {
22 | width: 80%;
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/layout/index.js:
--------------------------------------------------------------------------------
1 | export { Page } from './page'
2 | export { Container } from './container'
3 | export { Padding } from './padding'
4 |
--------------------------------------------------------------------------------
/src/components/layout/padding/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from './styles.module.scss'
3 |
4 | export const Padding = ({ children = null }) => {
5 | return
{children}
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/layout/padding/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/variables.scss';
2 | @import '../../../styles/layout.scss';
3 |
4 | .container {
5 | // border: 1px dashed green;
6 | //padding: 0 20px;
7 | }
--------------------------------------------------------------------------------
/src/components/layout/page/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Helmet } from 'react-helmet'
3 | import classnames from 'classnames'
4 | import { VisuallyHidden } from '../../visually-hidden'
5 | import styles from './styles.module.scss'
6 |
7 | export const Page = ({ title = 'hic et nunc', children = null, large }) => {
8 | const classes = classnames({
9 | [styles.container]: true,
10 | [styles.large]: large,
11 | })
12 | return (
13 |
14 |
15 | {title !== '' ? (
16 | {title} - hic et nunc
17 | ) : (
18 | hic et nunc
19 | )}
20 |
21 | {title}
22 | {children}
23 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/layout/page/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/variables.scss';
2 | @import '../../../styles/layout.scss';
3 |
4 | .container {
5 | position: relative;
6 | width: 100%;
7 | min-height: 100vh;
8 | padding: 100px 0 0 0;
9 |
10 | &.large {
11 | padding: 150px 0 0 0;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/loading/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from './styles.module.scss'
3 |
4 | export const Loading = ({ message }) => {
5 | return (
6 |
7 |
8 | {message &&
{message}
}
9 |
10 | )
11 | }
12 |
13 | export const LoadingContainer = ({ loading, children = null }) => {
14 | if (loading) {
15 | return (
16 |
17 |
19 | )
20 | }
21 | return children
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/loading/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 |
3 | .loader {
4 | position: absolute;
5 | left: 50%;
6 | top: 50%;
7 | -webkit-transform: translate(-50%, -50%);
8 | transform: translate(-50%, -50%);
9 | }
10 |
11 | .container {
12 | display: flex;
13 | align-items: center;
14 | justify-content: center;
15 |
16 | .circle {
17 | position: absolute;
18 | left: 50%;
19 | top: 50%;
20 | -webkit-transform: translate(-50%, -50%);
21 | transform: translate(-50%, -50%);
22 | display: inline-block;
23 | background-color: var(--text-color);
24 | width: 20px;
25 | height: 20px;
26 | border-radius: 1000px;
27 | transition: background-color #{$theme-duration} ease-out;
28 | animation: circle 1.5s linear infinite;
29 | }
30 |
31 | .message {
32 | margin-left: 10px;
33 | }
34 | }
35 |
36 | @keyframes circle {
37 | 0% {
38 | transform: scale(0);
39 | opacity: 1;
40 | }
41 | 100% {
42 | transform: scale(1);
43 | opacity: 0;
44 | }
45 | }
46 |
47 | @keyframes flicker {
48 | 0% {
49 | opacity: 1;
50 | }
51 | 50% {
52 | opacity: 0;
53 | }
54 | 100% {
55 | opacity: 1;
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/media-assets-display/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { toHHMMSS } from '../../utils/time'
3 | import { formatBytes } from '../../utils/sanitise'
4 | import styles from './styles.module.scss'
5 |
6 | export const MediaAssetsDisplay = ({
7 | ffmpeg,
8 | fileLoaded,
9 | processing,
10 | message,
11 | media,
12 | }) => {
13 | const isVideo = (mimeType) => {
14 | return mimeType.indexOf('video') === 0
15 | }
16 |
17 | return (
18 |
19 | {processing && message && (
20 |
21 | {message} {' '}
22 | (this may take a while)
23 |
24 | )}
25 | {media && (
26 |
27 |
extra media {' '}
28 |
(thumbnails, covers, etc)
29 |
30 |
31 | {media.map((item, index) => {
32 | return (
33 |
34 |
35 |
36 | {isVideo(item.meta.mimeType) ? (
37 |
38 | ) : (
39 |
40 | )}
41 |
42 |
43 |
{item.meta.mimeType}
44 |
45 | {item.meta.dimensions.width} x{' '}
46 | {item.meta.dimensions.height}
47 |
48 | {item.meta.duration && (
49 |
{toHHMMSS(item.meta.duration)}
50 | )}
51 |
{formatBytes(item.meta.fileSize)}
52 |
53 |
54 |
55 | )
56 | })}
57 |
58 |
59 | )}
60 | {!ffmpeg && fileLoaded && (
61 |
62 |
66 | )}
67 |
68 | )
69 | }
70 |
--------------------------------------------------------------------------------
/src/components/media-assets-display/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 | @import '../../styles/layout.scss';
3 |
4 | .container {
5 | width: 100%;
6 | margin-bottom: 15px;
7 |
8 | .subdued {
9 | color: var(--text-color);
10 | opacity: 0.4;
11 | }
12 |
13 | .media {
14 | display: flex;
15 | flex-wrap: wrap;
16 |
17 | .item {
18 | width: 50%;
19 |
20 | @include respond-to('tablet') {
21 | width: 33.3333%;
22 | }
23 |
24 | .inner {
25 | margin: 5px;
26 |
27 | img,
28 | video {
29 | width: 100%;
30 | }
31 |
32 | .meta {
33 | font-size: 12px;
34 | opacity: 0.5;
35 | }
36 | }
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/media-toolbar/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { motion, AnimatePresence } from 'framer-motion'
3 | import { fadeIn } from '../../utils/motion'
4 | import { Button, Purchase } from '../button'
5 | import { IPFS_DIRECTORY_MIMETYPE } from '../../constants'
6 | import styles from './index.module.scss'
7 |
8 | const IFRAME_PERMISSIONS_ALERT_KEY = 'hen:iframe-permissions-alert'
9 |
10 | export const MediaToolbar = (props) => {
11 | const [open, setOpen] = useState(false)
12 |
13 | const toggle = function () {
14 | setOpen(!open)
15 | }
16 |
17 | const isHtml = props.mimeType === IPFS_DIRECTORY_MIMETYPE
18 |
19 | if (isHtml) {
20 | const alerted = window.localStorage.getItem(IFRAME_PERMISSIONS_ALERT_KEY)
21 | if (!alerted) {
22 | setTimeout(() => {
23 | setOpen(true)
24 | window.localStorage.setItem(IFRAME_PERMISSIONS_ALERT_KEY, true)
25 | }, 1000)
26 | }
27 | }
28 |
29 | return (
30 |
31 | {isHtml && (
32 |
33 |
34 | i
35 |
36 |
37 |
38 | {open && (
39 |
40 |
41 |
42 | Interactive OBJKTs can see your wallet address. This lets them
43 | do interesting things like generate unique content.
44 |
45 |
46 | Please be mindful of this when allowing features like camera
47 | and microphone.
48 |
49 |
50 |
51 |
52 | Got it!
53 |
54 |
55 |
57 | )}
58 |
59 |
60 | )}
61 |
62 | )
63 | }
64 |
--------------------------------------------------------------------------------
/src/components/media-toolbar/index.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 |
3 | .container {
4 | width: 100%;
5 | display: flex;
6 | justify-content: flex-end;
7 |
8 | > div {
9 | padding: 10px;
10 | }
11 |
12 | .button {
13 | display: flex;
14 | justify-content: center;
15 | align-items: center;
16 | width: 30px;
17 | height: 30px;
18 | border-radius: 50%;
19 | cursor: pointer;
20 | background: var(--border-color);
21 | color: var(--text-color);
22 | }
23 |
24 | .modal {
25 | position: fixed;
26 | top: 0;
27 | right: 0;
28 | bottom: 0;
29 | left: 0;
30 | display: flex;
31 | justify-content: center;
32 | align-items: center;
33 | z-index: 1010;
34 |
35 | .bg {
36 | position: absolute;
37 | top: 0;
38 | right: 0;
39 | bottom: 0;
40 | left: 0;
41 | background: var(--background-color);
42 | opacity: 0.75;
43 | }
44 |
45 | .box {
46 | position: relative;
47 | background: var(--background-color);
48 | color: var(--text-color);
49 | padding: 30px;
50 | box-shadow: 0px 4px 16px 2px var(--shadow-color);
51 | max-width: 480px;
52 |
53 | .buttons {
54 | width: 100%;
55 | display: flex;
56 | justify-content: flex-end;
57 | }
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/media-types/audio/icons.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const PauseIcon = () => (
4 |
5 |
8 | )
9 |
10 | export const PlayIcon = () => (
11 |
12 |
14 | )
--------------------------------------------------------------------------------
/src/components/media-types/audio/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-hooks/exhaustive-deps */
2 | import React, { useEffect, useRef, useState } from 'react'
3 | import classnames from 'classnames'
4 | import { PauseIcon, PlayIcon } from './icons'
5 | import { Visualiser } from './visualiser'
6 | import styles from './styles.module.scss'
7 |
8 | export const AudioComponent = ({
9 | artifactUri,
10 | displayUri,
11 | previewUri,
12 | preview,
13 | displayView
14 | }) => {
15 | const visualiser = useRef()
16 | const [userTouched, setUserTouched] = useState(false)
17 | const [play, setPlay] = useState(false)
18 | const togglePlay = () => {
19 | setUserTouched(true)
20 | setPlay(!play)
21 | }
22 |
23 | // user interaction
24 | useEffect(() => {
25 | if (userTouched) {
26 | visualiser.current.init()
27 | }
28 | }, [userTouched])
29 |
30 | useEffect(() => {
31 | if (userTouched) {
32 | if (play) {
33 | visualiser.current.play()
34 | } else {
35 | visualiser.current.pause()
36 | }
37 | }
38 | }, [play])
39 |
40 | const classes = classnames({
41 | [styles.container]: true,
42 | [styles.userTouch]: userTouched,
43 | })
44 | /* console.log(displayUri)
45 | */
46 |
47 | if (!displayView) {
48 | return (
49 |
50 |
51 |
52 |
53 |
54 | {/* {true &&
}
55 |
*/}
56 | {false &&
}
57 | {false && (
58 |
61 | )}
62 |
63 | )
64 | } else {
65 | return (
66 | <>
67 |
68 |
69 |
72 | {/* {true &&
}
73 |
*/}
74 | {false &&
}
75 | {false && (
76 |
79 | )}
80 |
81 |
82 | )
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/src/components/media-types/audio/style.css:
--------------------------------------------------------------------------------
1 |
2 | #audio {
3 | width : '100%'
4 | }
--------------------------------------------------------------------------------
/src/components/media-types/audio/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/layout.scss';
2 |
3 | .audio {
4 |
5 | margin: 0 auto;
6 | display: flex;
7 | align-items: center;
8 | justify-content: space-between;
9 | object-fit: cover;
10 | @include respond-to('desktop') {
11 | width: 50%;
12 | }
13 | }
14 | .container {
15 | position: relative;
16 | display: flex;
17 | align-items: center;
18 | justify-content: center;
19 | width: 320px;
20 | height: 320px;
21 | margin: 0 auto;
22 |
23 | &.userTouch {
24 | .icons {
25 | opacity: 0;
26 | transition: opacity 0.3s ease-in-out;
27 | }
28 |
29 | &:hover {
30 | .icons {
31 | opacity: 1;
32 | }
33 | }
34 | }
35 |
36 | img {
37 | display: none;
38 | width: 100%;
39 | height: auto;
40 | }
41 |
42 | .icons {
43 | position: absolute;
44 | top: 0;
45 | left: 0;
46 | display: flex;
47 | align-items: center;
48 | justify-content: center;
49 | width: 100%;
50 | height: 100%;
51 |
52 | svg {
53 | width: 50px;
54 | rect,
55 | path {
56 | fill: var(--text-color);
57 | }
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/media-types/glb/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from 'react'
2 | import styles from './styles.module.scss'
3 |
4 | export const GLBComponent = ({
5 | artifactUri,
6 | previewUri,
7 | preview,
8 | onDetailView,
9 | displayView
10 | }) => {
11 | const ref = useRef()
12 | const [width, setWidth] = useState('100px')
13 | const [height, setHeight] = useState('100px')
14 |
15 | const props = {
16 | src: preview ? previewUri : artifactUri,
17 | autoplay: true,
18 | 'auto-rotate': true,
19 | 'data-js-focus-visible': true,
20 | 'interaction-prompt': 'none',
21 | }
22 |
23 | if (onDetailView) {
24 | props['ar'] = true
25 | props['ar-modes'] = 'webxr scene-viewer quick-look'
26 | props['camera-controls'] = true
27 | }
28 |
29 | const handleResize = () => {
30 | if (ref.current) {
31 | const { width, height } = ref.current.getBoundingClientRect()
32 | setWidth(width)
33 | setHeight(height)
34 | }
35 | }
36 |
37 | useEffect(() => {
38 | handleResize()
39 | global.addEventListener('resize', handleResize)
40 |
41 | return () => {
42 | global.removeEventListener('resize', handleResize)
43 | }
44 | }, [width, height])
45 | if (displayView) {
46 | return (
47 |
48 |
49 |
50 | AR
51 |
52 |
53 |
54 | )
55 | } else {
56 | return (
57 |
58 |
59 |
60 | AR
61 |
62 |
63 |
64 | )
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/src/components/media-types/glb/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/layout.scss';
2 |
3 | .viewer {
4 | width : 100%;
5 | height : 60vh;
6 | display: block;
7 | margin: 0 auto;
8 | border : none;
9 |
10 | @include respond-to('desktop') {
11 | width: 50% !important;
12 | }
13 | }
14 |
15 | .container {
16 | position: relative;
17 | display: block;
18 | width: 100%;
19 | margin: 0 auto;
20 | display: flex;
21 | align-items: center;
22 | justify-content: center;
23 |
24 | &:after {
25 | content: '';
26 | display: block;
27 | padding-bottom: 100%;
28 | }
29 | }
30 |
31 | model-viewer {
32 | width: 100%;
33 | height: 60vh;
34 | margin: 0 auto;
35 | }
36 |
37 | .arButton {
38 | position: absolute;
39 | bottom: 10px;
40 | left: 10px;
41 | color: var(--text-color);
42 | background-color: transparent;
43 | border-radius: 4px;
44 | border: 2px solid var(--text-color);
45 | padding: 4px 8px;
46 | cursor: pointer;
47 | }
--------------------------------------------------------------------------------
/src/components/media-types/html/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/layout.scss';
2 | @import '../../../styles/mixins.scss';
3 |
4 | .html {
5 | @include embedObjktViewSizes;
6 | }
7 |
8 | .container {
9 | position: relative;
10 | display: block;
11 | width: 100%;
12 | margin: 0 auto;
13 | display: flex;
14 | align-items: center;
15 | justify-content: center;
16 | overflow: hidden;
17 |
18 | &:after {
19 | content: '';
20 | display: block;
21 | padding-bottom: 100%;
22 | }
23 |
24 | &.interactive {
25 | pointer-events: all;
26 | }
27 |
28 | .preview {
29 | position: absolute;
30 | top: 0;
31 | left: 0;
32 | width: 100%;
33 | height: 100%;
34 | display: flex;
35 | align-items: center;
36 | justify-content: center;
37 | background-color: black;
38 |
39 | img {
40 | width: 100%;
41 | height: auto;
42 | }
43 |
44 | .button {
45 | position: absolute;
46 | top: 0;
47 | left: 0;
48 | width: 100%;
49 | height: 100%;
50 | display: flex;
51 | align-items: center;
52 | justify-content: center;
53 |
54 | .gradient {
55 | position: absolute;
56 | top: 0;
57 | right: 0;
58 | transform: translateY(50%) translateY(-50%);
59 | width: 200%;
60 | height: 200%;
61 | background: radial-gradient(
62 | circle,
63 | rgba(0, 0, 0, 0) 70%,
64 | rgba(255, 255, 255, 0.2) 100%
65 | );
66 | }
67 |
68 | svg {
69 | position: absolute;
70 | top: 6px;
71 | right: 6px;
72 | display: flex;
73 | width: 30px;
74 | height: auto;
75 | margin: 0 auto;
76 | z-index: 1;
77 | }
78 | }
79 | }
80 |
81 | iframe {
82 | position: absolute;
83 | top: 0;
84 | left: 0;
85 | width: 100%;
86 | height: 100%;
87 | border: none;
88 | }
89 | }
90 |
91 | .warning {
92 | display: flex;
93 | flex-direction: column;
94 | border: 1px solid var(--text-color);
95 | margin-bottom: 20px;
96 | padding: 20px;
97 | }
98 |
99 | .error {
100 | padding: 20px;
101 | }
102 |
--------------------------------------------------------------------------------
/src/components/media-types/html/warning.js:
--------------------------------------------------------------------------------
1 | import { Button, Primary } from '../../button'
2 | import styles from './styles.module.scss'
3 |
4 | export function HTMLWarning() {
5 | return (
6 |
7 |
IMPORTANT: Please read the guide before minting!
8 |
9 |
10 | Interactive OBJKTs Guide
11 |
12 |
13 |
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/media-types/image/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { LazyLoadImage } from 'react-lazy-load-image-component'
3 | import styles from './styles.module.scss'
4 |
5 | export const ImageComponent = ({
6 | artifactUri,
7 | displayUri,
8 | previewUri,
9 | onDetailView,
10 | preview,
11 | displayView
12 | }) => {
13 | let src = onDetailView ? artifactUri : displayUri || artifactUri
14 |
15 | if (preview) {
16 | src = previewUri
17 | }
18 |
19 | if (displayView) {
20 | return (
21 |
22 |
24 | )
25 | } else {
26 | return (
27 |
32 | )
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/media-types/image/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/layout.scss';
2 | .style {
3 | max-height : 60vh;
4 | max-width: 100%;
5 | display: block;
6 | margin: 0 auto;
7 | border : none;
8 |
9 | }
10 |
11 | .container {
12 | .image {
13 | display: block;
14 | width: auto;
15 | max-width: 100%;
16 | height: auto;
17 | margin: 0 auto;
18 |
19 | @include respond-to('tablet') {
20 | max-height: 70vh;
21 | height: initial;
22 | }
23 |
24 | @include respond-to('desktop') {
25 | max-height: 60vh;
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/media-types/md/index.js:
--------------------------------------------------------------------------------
1 | import Markdown from 'markdown-to-jsx';
2 | import { Container, Padding } from '../../layout';
3 | const axios = require('axios')
4 |
5 | export const MD = async ({
6 | artifactUri
7 | }) => {
8 |
9 | let data = await axios.get(`https://cloudflare-ipfs.com/ipfs/${artifactUri.split('//')}`).then(res => res.data)
10 |
11 | return (
12 |
13 |
14 |
15 |
16 | {data}
17 |
18 |
19 |
20 |
21 | )
22 | }
--------------------------------------------------------------------------------
/src/components/media-types/pdf/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import styles from './styles.module.scss'
3 | import { Document, Page, pdfjs } from 'react-pdf'
4 | import { Button, Primary } from '../../button'
5 | import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
6 | pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`
7 |
8 | export const PdfComponent = ({
9 | artifactUri,
10 | displayUri,
11 | previewUri,
12 | preview,
13 | onDetailView,
14 | }) => {
15 | const [numPages, setNumPages] = useState(null)
16 | const [pageNumber, setPageNumber] = useState(1)
17 |
18 | function onDocumentLoadSuccess({ numPages }) {
19 | setNumPages(numPages)
20 | }
21 |
22 | function changePage(offset) {
23 | setPageNumber((prevPageNumber) => prevPageNumber + offset)
24 | }
25 |
26 | function previousPage() {
27 | changePage(-1)
28 | }
29 |
30 | function nextPage() {
31 | changePage(1)
32 | }
33 |
34 | function onItemClick(item) {
35 | setPageNumber(item.pageNumber)
36 | }
37 |
38 | return (
39 |
40 |
45 |
48 |
49 | Prev «
50 |
51 |
52 | Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}
53 |
54 |
= numPages} onClick={nextPage}>
55 | » Next
56 |
57 |
60 |
61 | )
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/media-types/pdf/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/layout.scss';
2 |
3 | .container {
4 | position: relative;
5 | display: block;
6 | align-items: center;
7 | justify-content: center;
8 | overflow: hidden;
9 |
10 | &:after {
11 | content: '';
12 | display: block;
13 | }
14 |
15 | iframe {
16 | border: none;
17 |
18 | }
19 |
20 | canvas{
21 | max-width: 100%;
22 | margin: 0 auto;
23 | height: auto!important;
24 |
25 | }
26 |
27 | .pdfNav {
28 | position: relative;
29 | margin: 6px;
30 | text-align: center;
31 | font-size: 0.8em;
32 | display: flex;
33 | align-items: center;
34 | justify-content: center;
35 | p {
36 | margin: 6px 12px;
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/media-types/style.css:
--------------------------------------------------------------------------------
1 | .no-fullscreen .svg-icon {
2 | display: none;
3 | }
--------------------------------------------------------------------------------
/src/components/media-types/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/layout.scss';
2 |
3 | .container {
4 | position: relative;
5 | display: block;
6 |
7 | &.fullscreen {
8 | position: fixed;
9 | top: 0;
10 | left: 0;
11 | width: 100%;
12 | height: 100%;
13 | max-height: 90vh;
14 | display: flex;
15 | justify-content: center;
16 | align-items: center;
17 | z-index: 10000;
18 | background-color: var(--background-color);
19 |
20 | & iframe {
21 | width: 100vw;
22 | height: 100vh;
23 | }
24 |
25 | & model-viewer {
26 | width: 100vw;
27 | height: 100vh;
28 | }
29 |
30 | & img {
31 | max-height: 90vh;
32 | }
33 | }
34 |
35 | .icon {
36 | position: absolute;
37 | bottom: 10px;
38 | right: 10px;
39 | width: 30px;
40 | height: 30px;
41 | opacity: 0;
42 | display: flex;
43 | align-items: center;
44 | justify-content: center;
45 | z-index: 1;
46 | cursor: pointer;
47 | background-color: #000;
48 | border-radius: 1000px;
49 | transition: opacity 0.3s ease-in-out;
50 |
51 | &:hover {
52 | background-color: rgba(0, 0, 0, 0.5);
53 | }
54 |
55 | svg {
56 | width: 12px;
57 | height: 12px;
58 | path {
59 | fill: white;
60 | }
61 | }
62 | }
63 | &:hover {
64 | .icon {
65 | opacity: 0.5;
66 | }
67 | }
68 | }
--------------------------------------------------------------------------------
/src/components/media-types/unknown/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import styles from './styles.module.scss'
3 | const axios = require('axios')
4 |
5 | export const UnknownComponent = ({ mimeType }) => {
6 | /* const [queue, updateQueue] = useState()
7 | updateQueue(await axios.post(process.env.REACT_APP_GRAPHQL_STATUS).then(res => res.data))
8 | */
9 | return (
10 |
11 |
Metadata on queue
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/media-types/unknown/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/layout.scss';
2 | @import '../../../styles/variables.scss';
3 |
4 | .container {
5 | width: 100%;
6 |
7 | .square {
8 | display: block;
9 | width: 100%;
10 | margin: 0 auto;
11 | display: flex;
12 | align-items: center;
13 | justify-content: center;
14 | text-align: center;
15 | color: var(--background-color);
16 | background-color: var(--text-color);
17 | transition: background-color #{$theme-duration} ease-out,
18 | color #{$theme-duration} ease-out;
19 |
20 | &:after {
21 | content: '';
22 | display: block;
23 | padding-bottom: 100%;
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/media-types/vector/index.css:
--------------------------------------------------------------------------------
1 | .tag-view .vector {
2 | position: absolute;
3 | top: 50%;
4 | left: 50%;
5 | width: 100%;
6 | height: 100%;
7 | transform: translateX(-50%) translateY(-50%);
8 | border: none;
9 | min-height: 0;
10 | min-width: 0;
11 | }
12 |
13 | .objktview .vector-container {
14 | pointer-events: all;
15 | }
--------------------------------------------------------------------------------
/src/components/media-types/vector/index.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import classnames from 'classnames'
3 | import { HicetnuncContext } from '../../../context/HicetnuncContext'
4 | import styles from './styles.module.scss'
5 | import './index.css'
6 |
7 | export const VectorComponent = ({
8 | artifactUri,
9 | displayUri,
10 | previewUri,
11 | creator,
12 | objkt,
13 | onDetailView,
14 | preview,
15 | displayView
16 | }) => {
17 | const context = useContext(HicetnuncContext)
18 | const classes = classnames({
19 | [styles.container]: true,
20 | [styles.interactive]: onDetailView,
21 | })
22 |
23 |
24 | let _creator_ = false
25 | let _viewer_ = false
26 | let _objkt_ = false
27 |
28 | if (creator && creator.address) {
29 | _creator_ = creator.address
30 | }
31 |
32 | if (context.address && context.address.address) {
33 | _viewer_ = context.address.address
34 | }
35 |
36 | if (objkt) {
37 | _objkt_ = objkt
38 | }
39 |
40 | let path
41 | if (preview) {
42 | // can't pass creator/viewer query params to data URI
43 | path = previewUri
44 | } else {
45 | path = `${artifactUri}?creator=${_creator_}&viewer=${_viewer_}&objkt=${_objkt_}`
46 | }
47 |
48 | if (displayView) {
49 | return (
50 |
51 |
57 |
58 | )
59 | } else {
60 | return (
61 |
62 |
70 |
71 | )
72 | }
73 | }
74 | // svg version: src={`${src}?author=${_creator_}&viewer=${_viewer_}`}
75 | // iframe version: src={`https://hicetnunc2000.github.io/hicetnunc/gh-pages/sandbox-svg.html?src=${src}&creator=${_creator_}&viewer=${_viewer_}`}
76 |
--------------------------------------------------------------------------------
/src/components/media-types/vector/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/layout.scss';
2 | @import '../../../styles/mixins.scss';
3 |
4 | .vector {
5 | @include embedObjktViewSizes;
6 | }
7 |
8 | .display {
9 | width : 100%;
10 | display: block;
11 | margin: 0 auto;
12 | border : none;
13 | }
14 |
15 | .container {
16 | position: relative;
17 | display: block;
18 | width: 100%;
19 | margin: 0 auto;
20 | display: flex;
21 | align-items: center;
22 | justify-content: center;
23 | pointer-events: none;
24 |
25 | &:after {
26 | content: '';
27 | display: block;
28 | padding-bottom: 100%;
29 | }
30 |
31 | &.interactive {
32 | pointer-events: all;
33 | }
34 |
35 | iframe {
36 | position: absolute;
37 | top: 50%;
38 | left: 50%;
39 | width: 100%;
40 | height: 100%;
41 | transform: translateX(-50%) translateY(-50%);
42 | border: none;
43 | background: black;
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/media-types/video/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef } from 'react'
2 | import { iOS } from '../../../utils/os'
3 | import styles from './styles.module.scss'
4 | import './style.css'
5 |
6 | export const VideoComponent = ({
7 | artifactUri,
8 | displayUri,
9 | previewUri,
10 | preview,
11 | interactive,
12 | inView,
13 | displayView
14 | }) => {
15 | const domElement = useRef()
16 |
17 | useEffect(() => {
18 | const isVideoAvailable = (video) => iOS || video.readyState > 2
19 |
20 | const isVideoPlaying = (video) =>
21 | !!(
22 | video.currentTime > 0 &&
23 | !video.paused &&
24 | !video.ended &&
25 | video.readyState > 2
26 | )
27 |
28 | if (inView) {
29 | // play
30 | if (isVideoAvailable(domElement.current)) {
31 | try {
32 | domElement.current.play()
33 | } catch (err) {
34 | console.error(err)
35 | }
36 | }
37 | } else {
38 | // pause
39 | if (
40 | isVideoAvailable(domElement.current) &&
41 | isVideoPlaying(domElement.current)
42 | ) {
43 | try {
44 | domElement.current.pause()
45 | } catch (err) {
46 | console.error(err)
47 | }
48 | }
49 | }
50 | }, [inView])
51 |
52 | if (displayView) {
53 | return (
54 |
55 |
67 | )
68 | } else {
69 | return (
70 | <>
71 |
82 |
83 | )
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/src/components/media-types/video/style.css:
--------------------------------------------------------------------------------
1 | .objkt-display video {
2 | position: relative;
3 | display: block;
4 | margin: auto;
5 | width: 100%;
6 | height: auto;
7 | }
8 |
9 | @media screen and (min-width: 801px) {
10 | .objkt-display video {
11 | width: auto;
12 | height: 60vh;
13 | }
14 | }
15 |
16 | video {
17 | width: 100%;
18 | }
--------------------------------------------------------------------------------
/src/components/media-types/video/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/layout.scss';
2 |
3 | .container {
4 | width: 100%;
5 | height: 60vh;
6 | display: flex;
7 | align-items: center;
8 | justify-content: center;
9 | }
10 |
11 | .video {
12 | position: relative;
13 | width: 100%;
14 | height: auto;
15 | outline: 0px;
16 | }
--------------------------------------------------------------------------------
/src/components/menu/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from './styles.module.scss'
3 |
4 | export const Menu = ({ children = null }) => {
5 | return
{children}
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/menu/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 |
3 | .container {
4 | padding: 6px 0;
5 | border-bottom: 1px solid var(--border-color);
6 | transition: border-color #{$theme-duration} ease-out;
7 |
8 | & > * {
9 | margin-right: 1em;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/mimetype-icon/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/layout.scss';
2 | @import '../../styles/variables.scss';
3 |
4 | .container {
5 | position: absolute;
6 | top: 6px;
7 | right: 6px;
8 | padding: 4px;
9 | width: 20px;
10 | height: 20px;
11 | display: flex;
12 | align-items: center;
13 | justify-content: center;
14 | z-index: 1;
15 |
16 | svg {
17 | width: 40px;
18 | height: auto;
19 |
20 | path {
21 | fill: var(--background-color);
22 | transition: fill #{$theme-duration} ease-out;
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/owner-list/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Primary, Purchase } from '../button'
3 | import { BURN_ADDRESS } from '../../constants'
4 |
5 | import { walletPreview } from '../../utils/string'
6 | import styles from './styles.module.scss'
7 |
8 | export const OwnerList = ({ owners, creator_id, acc, swaps, cancelv1 }) => {
9 | owners = owners.filter(e => e.holder_id !== BURN_ADDRESS && e.holder_id !== 'KT1HbQepzV1nVGg8QVznG7z4RcHseD5kwqBn')
10 | return (
11 |
12 |
13 | {owners.map(({ quantity, holder_id, holder, creator_id }, index) => (
14 |
15 |
16 |
17 | {quantity} ed.
18 | {
19 | holder.name ?
20 |
21 | {encodeURI(holder.name)}
22 |
23 | :
24 | holder_id !== 'KT1Hkg5qeNhfwpKW4fXvq7HGZB9z2EnmCCA9'
25 | ?
26 |
27 | {walletPreview(holder_id)}
28 |
29 | :
30 |
31 | OBJKTSWAP V1
32 |
33 | }
34 |
35 | ))}
36 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/owner-list/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 |
3 | .container {
4 | display: flex;
5 | flex-direction: column;
6 |
7 | .owner {
8 | display: flex;
9 | align-items: center;
10 | color: var(--text-color);
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/owner-swaps/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 |
3 | .container {
4 | display: flex;
5 | flex-direction: column;
6 | color: var(--text-color);
7 |
8 | .swap {
9 | display: flex;
10 | justify-content: space-between;
11 | margin-bottom: 10px;
12 |
13 | .issuer {
14 | display: flex;
15 | align-items: center;
16 | }
17 |
18 | .buttons {
19 | display: flex;
20 | align-items: center;
21 | justify-content: flex-end;
22 |
23 | & > * {
24 | margin-left: 10px;
25 | }
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/preview/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Tags } from '../tags'
3 | import { MIMETYPE } from '../../constants'
4 | import { renderMediaType } from '../media-types'
5 | import { HTMLWarning } from '../media-types/html/warning'
6 | import styles from './styles.module.scss'
7 |
8 | function isHTML(mimeType) {
9 | return (
10 | mimeType === MIMETYPE.ZIP ||
11 | mimeType === MIMETYPE.ZIP1 ||
12 | mimeType === MIMETYPE.ZIP2
13 | )
14 | }
15 |
16 | export const Preview = ({ title, description, mimeType, previewUri, tags }) => {
17 | const token_tags = tags !== '' ? tags.replace(/\s/g, '').split(',') : []
18 | return (
19 |
20 | {isHTML(mimeType) &&
}
21 |
22 | {renderMediaType({
23 | mimeType,
24 | previewUri,
25 | interactive: true,
26 | preview: true,
27 | displayView : true
28 | })}
29 |
30 |
31 |
{title}
32 |
{description}
33 |
34 |
35 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/preview/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/layout.scss';
2 |
3 | .container {
4 | display: flex;
5 | flex-direction: column !important;
6 |
7 | .media,
8 | .info {
9 | width: 100%;
10 | }
11 |
12 | .info {
13 | display: flex;
14 | flex-direction: column;
15 | align-items: flex-start;
16 | margin-top: 20px;
17 | }
18 |
19 | .description {
20 | white-space: pre-wrap;
21 | }
22 |
23 | @include respond-to('tablet') {
24 | flex-direction: initial;
25 |
26 | .media,
27 | .info {
28 | width: 100%;
29 | }
30 |
31 | .media {
32 | min-height: 70vh;
33 | display: flex;
34 | align-items: center;
35 | justify-content: center;
36 | }
37 |
38 | .info {
39 | display: flex;
40 | flex-direction: column;
41 | padding-left: 10px;
42 |
43 | .title,
44 | .description {
45 | margin-bottom: 20px;
46 | }
47 |
48 | .title {
49 | font-family: 'basier_circle_monoregular';
50 | font-weight: bold;
51 | font-size: 20px;
52 | }
53 | }
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/responsive-masonry/index.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 | import Masonry from 'react-masonry-css'
3 | import styles from './styles.module.scss'
4 |
5 | export const ResponsiveMasonry = ({ children }) => {
6 | const getColumns = () => {
7 | if (global.innerWidth > 1024) {
8 | return 4
9 | }
10 |
11 | if (global.innerWidth > 600) {
12 | return 3
13 | }
14 |
15 | return 1
16 | }
17 | const [colums, setColumns] = useState(getColumns())
18 |
19 | useEffect(() => {
20 | const resize = () => {
21 | setColumns(getColumns())
22 | }
23 | global.addEventListener('resize', resize)
24 |
25 | return () => global.removeEventListener('resize', resize)
26 | }, [])
27 |
28 | return (
29 |
34 | {children}
35 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/responsive-masonry/styles.module.scss:
--------------------------------------------------------------------------------
1 | .grid {
2 | display: flex;
3 | margin-left: -5px;
4 | width: auto;
5 | }
6 |
7 | .column {
8 | padding-left: 5px;
9 | background-clip: padding-box;
10 |
11 | & > * {
12 | position: relative;
13 | display: block;
14 | margin-bottom: 5px;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/settings/index.js:
--------------------------------------------------------------------------------
1 | // import React from 'react'
2 |
3 | export const Settings = () => {
4 | return null
5 | // return
Settings page
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/settings/styles.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | }
3 |
--------------------------------------------------------------------------------
/src/components/tags/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { PATH } from '../../constants'
3 | import { Button } from '../button'
4 | import styles from './styles.module.scss'
5 |
6 | export const Tags = ({ token_tags, preview }) => {
7 | console.log(token_tags)
8 | if (preview) {
9 | return (
10 |
11 | {token_tags
12 | .filter((e) => e !== '')
13 | .map((tag, index) => {
14 | return (
15 |
19 | {tag}
20 |
21 | )
22 | })}
23 |
24 | )
25 | } else {
26 | return (
27 |
28 | {token_tags
29 | .filter((e) => e.tag.tag !== '')
30 | .map((tag, index) => {
31 | return (
32 |
36 | {tag.tag.tag}
37 |
38 | )
39 | })}
40 |
41 | )
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/tags/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables.scss';
2 |
3 | .container {
4 | display: flex;
5 | align-items: center;
6 | flex-wrap: wrap;
7 |
8 | .tag {
9 | display: inline-flex;
10 | font-weight: bold;
11 | color: var(--text-color);
12 | margin-right: 12.5px;
13 | margin-bottom: 6px;
14 | text-transform: lowercase;
15 | font-size: 16px;
16 | transition: background-color #{$theme-duration} ease-out,
17 | color #{$theme-duration} ease-out;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/upload/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { getLanguage } from '../../constants'
3 | import { getMimeType } from '../../utils/sanitise'
4 | import styles from './styles.module.scss'
5 |
6 | const Buffer = require('buffer').Buffer
7 |
8 | export const Upload = ({
9 | label,
10 | allowedTypes,
11 | allowedTypesLabel,
12 | onChange = () => null,
13 | }) => {
14 | const language = getLanguage()
15 | const [title, setTitle] = useState(label)
16 |
17 | const onFileChange = async (e) => {
18 | const { files } = e.target
19 | const file = files[0]
20 |
21 | setTitle(file.name)
22 | const mimeType = file.type !== '' ? file.type : await getMimeType(file)
23 | const buffer = Buffer.from(await file.arrayBuffer())
24 |
25 | // set reader for preview
26 | const reader = new FileReader()
27 | reader.addEventListener('load', (e) => {
28 | onChange({ title, mimeType, file, buffer, reader: e.target.result })
29 | })
30 | reader.readAsDataURL(file)
31 | }
32 |
33 | const props = {
34 | type: 'file',
35 | name: 'file',
36 | }
37 |
38 | if (allowedTypes) {
39 | props['accept'] = allowedTypes.join(',')
40 | }
41 |
42 | return (
43 |
44 |
45 | {title}
46 |
48 |
49 | {language.mint.supports}: {allowedTypesLabel}
50 |
51 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/upload/styles.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | margin-bottom: 10px;
3 |
4 | label {
5 | display: block;
6 | width: 100%;
7 | padding: 6px;
8 | border: 2px dashed var(--text-color);
9 | text-align: center;
10 | cursor: pointer;
11 |
12 | input {
13 | display: none;
14 | width: 100%;
15 | }
16 | }
17 |
18 | .allowed {
19 | display: inline-flex;
20 | font-size: 12px;
21 | padding-top: 6px;
22 | text-transform: lowercase;
23 | opacity: 0.5;
24 |
25 | & > * {
26 | &.selected {
27 | font-weight: bold;
28 | }
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/visually-hidden/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from './styles.module.scss'
3 |
4 | export const VisuallyHidden = ({ children = null, as: Comp = 'span' }) => {
5 | return
{children}
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/visually-hidden/styles.module.scss:
--------------------------------------------------------------------------------
1 | // hide visually but accessible for screen reader
2 | .container {
3 | position: absolute;
4 | width: 1px;
5 | height: 1px;
6 | margin: -1px;
7 | padding: 0;
8 | overflow: hidden;
9 | clip: rect(0 0 0 0);
10 | border: 0;
11 | }
12 |
--------------------------------------------------------------------------------
/src/data/hicdex.js:
--------------------------------------------------------------------------------
1 | export const getUserMetaQuery = `query UserMeta($_eq: String = "tz1YJvMiZyXnzvV9pxtAiuCFvaG7XoBZhbUQ") {
2 | hic_et_nunc_holder(where: { address: { _eq: $_eq } }) {
3 | name
4 | metadata
5 | }
6 | }`
7 |
8 | export const getCollabObjkts = `query CollabObjkts {
9 | hic_et_nunc_token(where: {creator: {is_split: {_eq: true}}}) {
10 | title
11 | creator {
12 | address
13 | shares {
14 | administrator
15 | total_shares
16 | shareholder {
17 | holder {
18 | name
19 | address
20 | }
21 | }
22 | }
23 | }
24 | }
25 | }`
26 |
27 | export async function fetchGraphQL(operationsDoc, operationName, variables) {
28 | const result = await fetch(
29 | process.env.REACT_APP_GRAPHQL_API,
30 | {
31 | method: "POST",
32 | body: JSON.stringify({
33 | query: operationsDoc,
34 | variables: variables,
35 | operationName: operationName
36 | })
37 | }
38 | );
39 | return await result.json()
40 | }
41 |
42 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import { BrowserRouter } from 'react-router-dom'
4 | import App from './App'
5 | import * as serviceWorker from './serviceWorker'
6 | import './styles/index.scss'
7 |
8 | ReactDOM.render(
9 |
10 | ,
12 | document.getElementById('root')
13 | )
14 |
15 | // If you want your app to work offline and load faster, you can change
16 | // unregister() to register() below. Note this comes with some pitfalls.
17 | // Learn more about service workers: https://bit.ly/CRA-PWA
18 | serviceWorker.unregister()
19 |
--------------------------------------------------------------------------------
/src/pages/about/styles.module.scss:
--------------------------------------------------------------------------------
1 | .buttons {
2 | display: flex;
3 | flex-wrap: wrap;
4 | }
5 |
--------------------------------------------------------------------------------
/src/pages/collaborate/index.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from 'react'
2 | import { Page, Container, Padding } from '../../components/layout'
3 | import { Button, Primary } from '../../components/button'
4 | import { CollabDisplay } from '../../components/collab/show/CollabDisplay'
5 | import { SelectProxyContract, CreateCollaboration } from './tabs'
6 | import { Menu } from '../../components/menu'
7 | import { HicetnuncContext } from '../../context/HicetnuncContext'
8 |
9 | const TABS = [
10 | { title: 'create collaboration', component: CreateCollaboration },
11 | { title: 'use collaboration', component: SelectProxyContract },
12 | ]
13 |
14 | const Collaborate = () => {
15 | const [tabIndex, setTabIndex] = useState(0)
16 | const Tab = TABS[tabIndex].component
17 |
18 | const { proxyAddress, originatedContract } = useContext(HicetnuncContext)
19 |
20 | // If an address is created, update the tab
21 | useEffect(() => {
22 | if (originatedContract) {
23 | setTabIndex(1)
24 | }
25 | }, [proxyAddress, originatedContract])
26 |
27 | // TODO: button to free from proxy contract? (that just makes field empty)
28 | // TODO: create new smart contract form with separate page?
29 | // TODO: add/remove tokens to contract?
30 | // TODO: validate proxy address?
31 | // TODO: any way to find all contracts that controlled by user pk?
32 |
33 | return (
34 |
35 |
36 |
37 |
38 | {TABS.map((tab, index) => {
39 | return (
40 | setTabIndex(index)}>
41 |
42 | {tab.title}
43 |
44 |
45 | )
46 | })}
47 |
48 |
49 |
50 |
52 | )
53 | }
54 |
55 |
56 | export {
57 | Collaborate,
58 | CollabDisplay,
59 | }
--------------------------------------------------------------------------------
/src/pages/collaborate/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/layout.scss';
2 | @import '../../styles/variables.scss';
3 |
4 | @for $i from 1 through 3 {
5 | .mb#{$i} {
6 | margin-bottom: #{$i}em;
7 | }
8 |
9 | .mt#{$i} {
10 | margin-bottom: #{$i}em;
11 | }
12 | }
13 |
14 | .muted {
15 | opacity: 0.5;
16 | }
17 |
18 | a.muted:hover,
19 | button.muted:hover {
20 | opacity: 1;
21 | }
22 |
23 | // .checkbox {
24 | // display: inline-block;
25 | // margin-bottom: 1em;
26 | // }
27 |
28 | // .check {
29 | // margin-right: 10px;
30 | // }
31 |
32 | // .flex {
33 | // display: flex;
34 | // }
35 |
36 | // .flexBetween {
37 | // display: flex;
38 | // justify-content: space-between;
39 | // }
40 |
41 | // .tipSelect button {
42 | // padding-left: 10px;
43 | // padding-right: 10px;
44 | // margin-left: 10px;
45 | // }
46 |
47 | // .btn {
48 | // background: none;
49 | // color: white;
50 | // border: none;
51 | // padding:6px;
52 | // font-size: 1em;
53 | // cursor: pointer;
54 | // }
55 |
56 | // .btnSecondary {
57 | // color: white;
58 | // border-bottom: 1px solid white;
59 | // border-right: 1px solid white;
60 | // padding:6px;
61 | // font-size: 1em;
62 | // cursor: pointer;
63 | // }
64 |
65 | // .selected {
66 | // background: white;
67 | // color: black;
68 | // }
69 |
--------------------------------------------------------------------------------
/src/pages/collaborate/tabs/index.js:
--------------------------------------------------------------------------------
1 | export * from './select'
2 | export * from './create'
3 |
--------------------------------------------------------------------------------
/src/pages/collaborate/tabs/select.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext, useEffect } from 'react'
2 | import { HicetnuncContext } from '../../../context/HicetnuncContext'
3 | import { Container, Padding } from '../../../components/layout'
4 | import { Input } from '../../../components/input'
5 | import { Button, Curate } from '../../../components/button'
6 | import styles from '../../../components/collab/styles.module.scss'
7 |
8 | export const SelectProxyContract = () => {
9 |
10 | const { proxyAddress, setProxyAddress, originatedContract } = useContext(HicetnuncContext)
11 |
12 | const [localProxyContractAddress, setLocalProxyContractAddress] = useState(proxyAddress)
13 | const [invalidAddress, setInvalidAddress] = useState(false)
14 |
15 | const _validateAddress = () => {
16 |
17 | // Ensure this is valid before assigning to global state
18 | const isValid = localProxyContractAddress.substr(0, 2) === 'KT' && localProxyContractAddress.length === 36
19 |
20 | if (isValid) {
21 | setProxyAddress(localProxyContractAddress)
22 | } else {
23 | if (localProxyContractAddress.length > 0) {
24 | setInvalidAddress(true)
25 | }
26 | }
27 | }
28 |
29 | // Listen for changes in Context
30 | useEffect(() => {
31 | if (originatedContract) {
32 | setLocalProxyContractAddress(originatedContract.address)
33 | }
34 | }, [originatedContract])
35 |
36 | useEffect(() => {
37 | setInvalidAddress(false)
38 | }, [localProxyContractAddress])
39 |
40 | return (
41 |
42 |
43 |
51 |
52 | {invalidAddress && (
53 |
54 | Sorry - this is not a valid collaborative contract address
55 |
56 | )}
57 |
58 | {!proxyAddress && (
59 |
60 |
61 | Sign in with this collaborative contract
62 |
63 |
64 | )}
65 |
66 | {proxyAddress && (
67 |
68 | You are now signed in with your collaborative address and can mint OBJKTs with it (copy TBC)
69 |
70 | )}
71 |
72 | )
73 | }
74 |
75 |
--------------------------------------------------------------------------------
/src/pages/config/styles.module.scss:
--------------------------------------------------------------------------------
1 | // .box {
2 | // border-style: solid;
3 | // border-color: var(--shadow-color);
4 | // border-width: 1px 1px 0px 1px;
5 | // border-radius: 5px 5px 0 0;
6 | // padding: 20px;
7 |
8 | // h4 {
9 | // font-family: monospace;
10 | // font-weight: bold;
11 | // font-size: 20px;
12 | // }
13 |
14 | // p {
15 | // margin: 10px 0;
16 | // }
17 |
18 | // .alias {
19 | // display: flex;
20 | // width: 350px;
21 |
22 | // .site {
23 | // background-color: #fafafa;
24 | // border-style: solid;
25 | // border-color: var(--shadow-color);
26 | // border-width: 1px 0px 1px 1px;
27 | // border-radius: 5px 0 0 5px;
28 | // color: #888;
29 | // font-size: 10px;
30 | // max-width: initial;
31 | // display: flex;
32 | // align-items: center;
33 | // padding: 10px;
34 | // }
35 |
36 | // input {
37 | // border: 1px solid var(--shadow-color);
38 | // border-radius: 0 5px 5px 0;
39 | // padding: 0 10px;
40 | // flex: 1;
41 |
42 | // &:focus {
43 | // outline: none;
44 | // border: 1px solid var(--text-color);
45 | // }
46 | // }
47 | // }
48 |
49 | // .description {
50 | // width: 350px;
51 |
52 | // textarea {
53 | // border: 1px solid var(--shadow-color);
54 | // border-radius: 5px;
55 | // padding: 10px;
56 | // width: 100%;
57 |
58 | // &:focus {
59 | // outline: none;
60 | // border: 1px solid var(--text-color);
61 | // }
62 | // }
63 | // }
64 | // }
65 |
66 | // .button {
67 | // display: flex;
68 | // justify-content: flex-end;
69 | // background-color: #fafafa;
70 | // border: 1px solid var(--shadow-color);
71 | // border-radius: 0 0 5px 5px;
72 | // padding: 10px 20px;
73 | // }
74 |
--------------------------------------------------------------------------------
/src/pages/data/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/pages/data/index.js
--------------------------------------------------------------------------------
/src/pages/defi/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/pages/defi/index.js
--------------------------------------------------------------------------------
/src/pages/faq/styles.module.scss:
--------------------------------------------------------------------------------
1 | .buttons {
2 | display: flex;
3 | flex-wrap: wrap;
4 | }
5 |
--------------------------------------------------------------------------------
/src/pages/feeds/index.js:
--------------------------------------------------------------------------------
1 | import { Feeds } from './feeds'
2 |
3 | export const Latest = () => {
4 | return
5 | }
6 |
7 | export const Hdao = () => {
8 | return
9 | }
10 |
11 | export const Random = () => {
12 | return
13 | }
14 |
15 | export const Featured = () => {
16 | return
17 | }
18 |
--------------------------------------------------------------------------------
/src/pages/galleries/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/layout.scss';
2 | @import '../../styles/variables.scss';
3 |
4 | .item {
5 | position: relative;
6 | display: inline-block;
7 | margin: 0 0 1em;
8 | width: 100%;
9 | cursor: pointer;
10 |
11 | .image {
12 | position: relative;
13 |
14 | .number {
15 | position: absolute;
16 | bottom: 6px;
17 | right: 6px;
18 | padding: 4px;
19 | background-color: var(--text-color);
20 | color: var(--background-color);
21 | transition: background-color #{$theme-duration} ease-out,
22 | color #{$theme-duration} ease-out;
23 | }
24 | }
25 |
26 | .title {
27 | font-weight: bold;
28 | color: var(--text-color);
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/pages/gallery-detail/artist-icon/index.js:
--------------------------------------------------------------------------------
1 | import { Button } from '../../../components/button'
2 | import { PATH } from '../../../constants'
3 | import { ArtistSocials } from '../../../components/artist-socials'
4 | import styles from './styles.module.scss'
5 |
6 | export const ArtistLogo = ({
7 | wallet,
8 | name,
9 | site,
10 | telegram,
11 | twitter,
12 | instagram,
13 | github,
14 | reddit,
15 | }) => {
16 | //
17 | return (
18 |
19 | {wallet && (
20 |
21 |
22 |
26 |
28 | )}
29 |
30 | {name && (
31 |
32 |
33 | {name}
34 |
35 |
36 | )}
37 |
45 |
46 |
26 |
35 | {data?.description && (
36 |
{data.description}
37 | )}
38 |
38 |
39 | {renderMediaType({
40 | mimeType: info.mimeType,
41 | artifactUri: info.token_info.artifactUri,
42 | displayUri: info.token_info.displayUri,
43 | creator: info.token_info.creators[0],
44 | objkt: info.token_id,
45 | interactive: true,
46 | })}
47 |
48 |
49 |
50 |
51 | OBJKT#{info.objectId}
52 |
53 |
{info.token_info.name}
54 |
55 | {info.token_info.description}
56 |
57 |
58 |
59 |
68 |
69 |
70 |
71 | {message}
72 |
73 |
74 |
75 |
76 |
77 |
30 |
31 |
41 |
42 | )}
43 |
44 | {/* {filtered.length === 0 ? undefined : ( */}
45 |
46 |
47 |
53 |
54 | {/* )} */}
55 |
56 | )
57 | }
58 |
--------------------------------------------------------------------------------
/src/pages/objkt-display/tabs/history.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react'
2 | import { Container, Padding } from '../../../components/layout'
3 | import { Primary } from '../../../components/button'
4 | import { HicetnuncContext } from '../../../context/HicetnuncContext'
5 | import { walletPreview } from '../../../utils/string'
6 | import styles from '../styles.module.scss'
7 |
8 |
9 | export const History = (token_info) => {
10 |
11 | let trades = token_info.trades.map(e => {
12 | e.trade = true
13 | return e
14 | })
15 |
16 | let swaps = token_info.swaps.map(e => {
17 | e.trade = false
18 | return e
19 | })
20 |
21 | let history = [...trades, ...swaps].sort((a, b) => Date.parse(a.timestamp) - Date.parse(b.timestamp)).reverse()
22 |
23 | return (
24 |
25 |
26 |
27 | {
28 | history.map(e => {
29 | if (e.trade) {
30 | return (
31 |
34 | )
35 | } else {
36 | return (
37 |
40 | )
41 | }
42 | })
43 | }
44 | minted {token_info.timestamp} {token_info.supply} ed. {token_info.royalties / 10}% royalties
45 |
46 |
47 |
22 |
23 |
30 | {title}
31 |
32 |
33 |
34 |
35 |
36 |
37 | {description}
38 |
39 |
40 |
41 |
42 |
43 |
45 |
46 |
47 |
48 | {/* {royalties / 10}% royalties
49 | timestamp: {timestamp} */}
50 | mimetype: {mime}
51 |
52 |
61 |
62 |
63 |
64 | )
65 | }
66 |
--------------------------------------------------------------------------------
/src/pages/search/style.css:
--------------------------------------------------------------------------------
1 | .tag {
2 | display: inline-flex;
3 | color: var(--text-color);
4 | border-radius: 4px;
5 | padding: 4px 8px;
6 | margin-right: 6px;
7 | margin-bottom: 6px;
8 | font-size: 16px;
9 | font-weight: bold;
10 | }
11 |
12 |
--------------------------------------------------------------------------------
/src/pages/sync.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Redirect } from 'react-router-dom'
3 | import { HicetnuncContext } from '../context/HicetnuncContext'
4 | import { Page, Container, Padding } from '../components/layout'
5 | import { LoadingContainer } from '../components/loading'
6 | import { Button, Primary } from '../components/button'
7 |
8 | export default class Sync extends Component {
9 | constructor(props) {
10 | super(props)
11 |
12 | this.state = {
13 | addr: '',
14 | }
15 | }
16 |
17 | static contextType = HicetnuncContext
18 |
19 | componentWillMount = async () => {
20 | if (this.context.acc == null) {
21 | await this.context.syncTaquito()
22 | await this.context.setAccount()
23 | } else {
24 | await this.context.setAccount()
25 | }
26 | }
27 |
28 | render() {
29 | return this.context.acc !== null ? (
30 |
33 |
34 |
35 | requesting permissions
36 |
37 | try again?
38 |
39 |
41 |
42 |
43 | )
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/pages/tags/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/layout.scss';
2 | @import '../../styles/variables.scss';
3 |
4 | .container {
5 | position: relative;
6 |
7 | .number {
8 | position: absolute;
9 | bottom: 6px;
10 | right: 6px;
11 | padding: 4px;
12 | background-color: var(--text-color);
13 | color: var(--background-color);
14 | transition: background-color #{$theme-duration} ease-out,
15 | color #{$theme-duration} ease-out;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
1 | import Sync from './pages/sync'
2 | import { About } from './pages/about'
3 | import { FAQ } from './pages/faq'
4 | import Display from './pages/display'
5 | import { Latest, Hdao, Random, Featured } from './pages/feeds'
6 | import { Mint } from './pages/mint'
7 | import { ObjktDisplay } from './pages/objkt-display'
8 | import { Collaborate, CollabDisplay } from './pages/collaborate'
9 | import { Galleries } from './pages/galleries'
10 | import { GalleryDetail } from './pages/gallery-detail'
11 | import { Config } from './pages/config'
12 | import { Search } from './pages/search'
13 | import { Tags } from './pages/tags'
14 |
15 | export const routes = [
16 | {
17 | exact: true,
18 | path: '/',
19 | component: Search,
20 | },
21 | {
22 | exact: false,
23 | path: '/hdao',
24 | component: Hdao,
25 | },
26 | {
27 | exact: false,
28 | path: '/random',
29 | component: Random,
30 | },
31 | {
32 | exact: false,
33 | path: '/latest',
34 | component: Latest,
35 | },
36 | {
37 | exact: false,
38 | path: '/tz/:id/:collection?',
39 | component: Display,
40 | },
41 | {
42 | exact: false,
43 | path: '/kt/:id',
44 | component: CollabDisplay,
45 | },
46 | {
47 | exact: false,
48 | path: '/about',
49 | component: About,
50 | },
51 | {
52 | exact: false,
53 | path: '/faq',
54 | component: FAQ,
55 | },
56 | {
57 | exact: false,
58 | path: '/sync',
59 | component: Sync,
60 | },
61 | {
62 | exact: false,
63 | path: '/mint',
64 | component: Mint,
65 | },
66 | {
67 | exact: false,
68 | path: '/collaborate',
69 | component: Collaborate,
70 | },
71 | {
72 | exact: false,
73 | path: '/objkt/:id',
74 | component: ObjktDisplay,
75 | },
76 | {
77 | exact: false,
78 | path: '/galleries',
79 | component: Galleries,
80 | },
81 | {
82 | exact: false,
83 | path: '/gallery/:id',
84 | component: GalleryDetail,
85 | },
86 |
87 | //
88 | //add condition for verifying if user is synced
89 | ///////////////
90 | {
91 | exact: false,
92 | path: '/config',
93 | component: Config,
94 | },
95 | {
96 | exact: false,
97 | path: '/search',
98 | component: Search,
99 | },
100 | {
101 | exact: false,
102 | path: '/tags/:id',
103 | component: Tags,
104 | },
105 | {
106 | exact: false,
107 | path: '/:id/:collection?',
108 | component: Display,
109 | },
110 | ]
111 |
--------------------------------------------------------------------------------
/src/styles/IBMPlexMono-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/IBMPlexMono-Bold.ttf
--------------------------------------------------------------------------------
/src/styles/IBMPlexMono-BoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/IBMPlexMono-BoldItalic.ttf
--------------------------------------------------------------------------------
/src/styles/IBMPlexMono-ExtraLight.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/IBMPlexMono-ExtraLight.ttf
--------------------------------------------------------------------------------
/src/styles/IBMPlexMono-ExtraLightItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/IBMPlexMono-ExtraLightItalic.ttf
--------------------------------------------------------------------------------
/src/styles/IBMPlexMono-Italic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/IBMPlexMono-Italic.ttf
--------------------------------------------------------------------------------
/src/styles/IBMPlexMono-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/IBMPlexMono-Light.ttf
--------------------------------------------------------------------------------
/src/styles/IBMPlexMono-LightItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/IBMPlexMono-LightItalic.ttf
--------------------------------------------------------------------------------
/src/styles/IBMPlexMono-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/IBMPlexMono-Medium.ttf
--------------------------------------------------------------------------------
/src/styles/IBMPlexMono-MediumItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/IBMPlexMono-MediumItalic.ttf
--------------------------------------------------------------------------------
/src/styles/IBMPlexMono-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/IBMPlexMono-Regular.ttf
--------------------------------------------------------------------------------
/src/styles/IBMPlexMono-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/IBMPlexMono-SemiBold.ttf
--------------------------------------------------------------------------------
/src/styles/IBMPlexMono-SemiBoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/IBMPlexMono-SemiBoldItalic.ttf
--------------------------------------------------------------------------------
/src/styles/IBMPlexMono-Thin.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/IBMPlexMono-Thin.ttf
--------------------------------------------------------------------------------
/src/styles/IBMPlexMono-ThinItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/IBMPlexMono-ThinItalic.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/IBMPlexMono-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/fonts/IBMPlexMono-Bold.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/IBMPlexMono-BoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/fonts/IBMPlexMono-BoldItalic.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/IBMPlexMono-ExtraLight.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/fonts/IBMPlexMono-ExtraLight.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/IBMPlexMono-ExtraLightItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/fonts/IBMPlexMono-ExtraLightItalic.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/IBMPlexMono-Italic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/fonts/IBMPlexMono-Italic.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/IBMPlexMono-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/fonts/IBMPlexMono-Light.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/IBMPlexMono-LightItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/fonts/IBMPlexMono-LightItalic.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/IBMPlexMono-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/fonts/IBMPlexMono-Medium.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/IBMPlexMono-MediumItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/fonts/IBMPlexMono-MediumItalic.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/IBMPlexMono-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/fonts/IBMPlexMono-Regular.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/IBMPlexMono-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/fonts/IBMPlexMono-SemiBold.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/IBMPlexMono-SemiBoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/fonts/IBMPlexMono-SemiBoldItalic.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/IBMPlexMono-Thin.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/fonts/IBMPlexMono-Thin.ttf
--------------------------------------------------------------------------------
/src/styles/fonts/IBMPlexMono-ThinItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicetnunc2000/hicetnunc/5ae906708346e3f3da0820d5ae88a55cd21506c4/src/styles/fonts/IBMPlexMono-ThinItalic.ttf
--------------------------------------------------------------------------------
/src/styles/index.scss:
--------------------------------------------------------------------------------
1 | @import './reset.scss';
2 | @import './main.scss';
3 |
--------------------------------------------------------------------------------
/src/styles/layout.scss:
--------------------------------------------------------------------------------
1 | // breakpoints
2 | $PHONE: 0px;
3 | $TABLET: 600px;
4 | $DESKTOP: 1024px;
5 |
6 | $breakpoints: (
7 | 'desktop': $DESKTOP,
8 | 'tablet': $TABLET,
9 | 'phone': $PHONE,
10 | ) !default;
11 |
12 | @mixin respond-to($breakpoint) {
13 | @if map-has-key($breakpoints, $breakpoint) {
14 | @media (min-width: map-get($breakpoints, $breakpoint)) {
15 | @content;
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/styles/main.scss:
--------------------------------------------------------------------------------
1 | @import 'variables.scss';
2 | @import 'typography.scss';
3 |
4 | html {
5 | margin: 0;
6 | padding: 0;
7 | width: 100vw;
8 | height: 100vh;
9 | }
10 |
11 | body {
12 | margin: 0;
13 | padding: 0;
14 | font-family: 'IBM Plex Mono', 'Courier New', 'Courier', monospace;
15 | // font-family: 'OCR A Std', monospace; // README: crzypatchwork, this font doesn't look great.
16 | // font-family: 'Courier New', 'Courier', monospace; // README: old font
17 | overflow-x: hidden;
18 | color: var(--text-color);
19 | background-color: var(--background-color);
20 | transition: background-color #{$theme-duration} ease-out,
21 | color #{$theme-duration} ease-out;
22 | }
23 |
24 | * {
25 | -webkit-box-sizing: border-box;
26 | box-sizing: border-box;
27 | -moz-osx-font-smoothing: grayscale;
28 | -webkit-font-smoothing: antialiased;
29 | -webkit-tap-highlight-color: transparent;
30 | -webkit-touch-callout: none;
31 | font-family: 'IBM Plex Mono', 'Courier New', 'Courier', monospace;
32 | // font-family: 'OCR A Std', monospace;// README: crzypatchwork, this font doesn't look great.
33 | // font-family: 'Courier New', 'Courier', monospace;// README: oldfont
34 | }
--------------------------------------------------------------------------------
/src/styles/mixins.scss:
--------------------------------------------------------------------------------
1 | // mixin to reset
2 | @import './layout.scss';
3 |
4 | @mixin resetButton() {
5 | border: 0;
6 | padding: 0;
7 | user-select: none;
8 | background-color: transparent;
9 | cursor: pointer;
10 | font-size: 16px;
11 |
12 | &:focus {
13 | outline: 0;
14 | }
15 | }
16 |
17 | @mixin embedObjktViewSizes() {
18 | position: relative;
19 | display: block;
20 | margin: 0 auto;
21 | border : none;
22 | width: 100vw;
23 | height: 100vw;
24 |
25 | @include respond-to('tablet') {
26 | width: 550px;
27 | height: 550px;
28 | }
29 |
30 | @include respond-to('desktop') {
31 | min-height: 550px;
32 | min-width: 550px;
33 | width: calc(100vh - 280px);
34 | height: calc(100vh - 280px);
35 | }
36 | }
37 |
38 | // mixins for touch hover state on press
39 | @mixin media-pointer {
40 | @media (pointer: fine) {
41 | @content;
42 | }
43 | }
44 | @mixin media-touch {
45 | @media (any-pointer: coarse) {
46 | @content;
47 | }
48 | }
49 |
50 | @mixin hover {
51 | @include media-touch {
52 | &:active {
53 | @content;
54 | }
55 | }
56 | @include media-pointer {
57 | &:hover {
58 | @content;
59 | }
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/styles/reset.scss:
--------------------------------------------------------------------------------
1 | html,
2 | body,
3 | div,
4 | span,
5 | applet,
6 | object,
7 | iframe,
8 | h1,
9 | h2,
10 | h3,
11 | h4,
12 | h5,
13 | h6,
14 | p,
15 | blockquote,
16 | pre,
17 | hr,
18 | a,
19 | abbr,
20 | address,
21 | cite,
22 | code,
23 | del,
24 | dfn,
25 | em,
26 | img,
27 | ins,
28 | kbd,
29 | q,
30 | s,
31 | samp,
32 | small,
33 | strong,
34 | sub,
35 | sup,
36 | tt,
37 | var,
38 | b,
39 | u,
40 | i,
41 | dl,
42 | dt,
43 | dd,
44 | ol,
45 | ul,
46 | li,
47 | fieldset,
48 | form,
49 | label,
50 | legend,
51 | table,
52 | caption,
53 | tbody,
54 | tfoot,
55 | thead,
56 | tr,
57 | th,
58 | td,
59 | article,
60 | aside,
61 | canvas,
62 | details,
63 | figcaption,
64 | figure,
65 | footer,
66 | header,
67 | hgroup,
68 | menu,
69 | nav,
70 | section,
71 | summary,
72 | time,
73 | mark,
74 | audio,
75 | video {
76 | margin: 0;
77 | padding: 0;
78 | }
79 |
80 | article,
81 | aside,
82 | details,
83 | figcaption,
84 | figure,
85 | footer,
86 | header,
87 | hgroup,
88 | menu,
89 | nav,
90 | section {
91 | display: block;
92 | }
93 |
94 | h1,
95 | h2,
96 | h3,
97 | h4,
98 | h5,
99 | h6 {
100 | font-size: 100%;
101 | }
102 |
103 | table {
104 | border-collapse: collapse;
105 | border-spacing: 0;
106 | }
107 |
108 | strong,
109 | b,
110 | mark {
111 | font-style: inherit;
112 | font-weight: bold;
113 | }
114 |
115 | em,
116 | i,
117 | cite,
118 | q,
119 | address,
120 | dfn,
121 | var {
122 | font-style: italic;
123 | font-weight: inherit;
124 | }
125 |
126 | abbr[title],
127 | dfn[title] {
128 | border-bottom: 1px dotted;
129 | cursor: help;
130 | }
131 |
132 | ins {
133 | border-bottom: 1px solid;
134 | }
135 |
136 | a,
137 | u,
138 | ins {
139 | text-decoration: none;
140 | }
141 |
142 | del,
143 | s {
144 | text-decoration: line-through;
145 | }
146 |
147 | pre,
148 | code,
149 | samp,
150 | kbd {
151 | font-family: monospace;
152 | }
153 |
154 | small {
155 | font-size: 0.75em;
156 | }
157 |
158 | img {
159 | border: none;
160 | font-style: italic;
161 | }
162 |
163 | input,
164 | select,
165 | textarea {
166 | font: inherit;
167 | }
168 |
169 | a {
170 | text-decoration: none;
171 | }
172 |
173 | h1,
174 | h2,
175 | h3,
176 | h4,
177 | h5 {
178 | font-weight: normal;
179 | }
180 |
--------------------------------------------------------------------------------
/src/styles/typography.scss:
--------------------------------------------------------------------------------
1 | //@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Thai&display=swap');
2 | @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&display=swap');
--------------------------------------------------------------------------------
/src/styles/variables.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --background-color: #ffffff;
3 | --text-color: #000000;
4 | --border-color: rgba(0, 0, 0, 0.1);
5 | --shadow-color: rgba(0, 0, 0, 0.2);
6 | }
7 |
8 | $theme-duration: 0.5s;
9 | $mobile-padding: 1.25rem;
10 | $letter-spacing: 0.015em;
11 |
--------------------------------------------------------------------------------
/src/utils/motion.js:
--------------------------------------------------------------------------------
1 | export const fadeIn = () => {
2 | return {
3 | initial: { opacity: 0, transition: { duration: 0.2, ease: 'easeOut' } },
4 | animate: { opacity: 1, transition: { duration: 0.2, ease: 'easeOut' } },
5 | exit: { opacity: 0, transition: { duration: 0.2, ease: 'easeOut' } },
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/utils/os.js:
--------------------------------------------------------------------------------
1 | export const iOS =
2 | [
3 | 'iPad Simulator',
4 | 'iPhone Simulator',
5 | 'iPod Simulator',
6 | 'iPad',
7 | 'iPhone',
8 | 'iPod',
9 | ].includes(navigator.platform) ||
10 | // iPad on iOS 13 detection
11 | (navigator.userAgent.includes('Mac') && 'ontouchend' in document)
12 |
--------------------------------------------------------------------------------
/src/utils/storage.js:
--------------------------------------------------------------------------------
1 | export const getItem = (prop) => {
2 | return JSON.parse(localStorage.getItem(prop))
3 | }
4 |
5 | export const setItem = (prop, value) => {
6 | localStorage.setItem(prop, JSON.stringify(value))
7 |
8 | return getItem(prop)
9 | }
10 |
11 | export const removeItem = (prop) => {
12 | localStorage.removeItem(prop)
13 | }
14 |
--------------------------------------------------------------------------------
/src/utils/string.js:
--------------------------------------------------------------------------------
1 | export const walletPreview = (wallet) => {
2 | try {
3 | return `${wallet.slice(0, 5)}...${wallet.slice(
4 | wallet.length - 5,
5 | wallet.length
6 | )}`
7 | } catch (e) {
8 | return ''
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/utils/time.js:
--------------------------------------------------------------------------------
1 | export function toHHMMSS(sec) {
2 | var hours = Math.floor(sec / 3600)
3 | var minutes = Math.floor((sec - hours * 3600) / 60)
4 | var seconds = sec - hours * 3600 - minutes * 60
5 |
6 | if (hours < 10) {
7 | hours = '0' + hours
8 | }
9 | if (minutes < 10) {
10 | minutes = '0' + minutes
11 | }
12 | if (seconds < 10) {
13 | seconds = '0' + seconds
14 | }
15 | return hours + ':' + minutes + ':' + seconds
16 | }
17 |
--------------------------------------------------------------------------------
/templates/html-glslcanvas-template/README.md:
--------------------------------------------------------------------------------
1 | # GlslCanvas Template
2 |
3 | created by: @patriciogv
4 | Replace the content on shader.frag with any shader creation that works on https://thebookofshaders.com/edit.php
5 |
6 | All HTML content needs to be minted in a zip file. You can have multiple files inside your zip, however there are a few requirements you can't miss.
7 |
8 | 1. The HTML file can only be called index.html
9 | 2. The file should have a thumbnail image to be displayed until the user clicks to interact on your OBJKT. The image can be png, jpg or a gif. you just need to update the reference inside the HTML file.
10 | 3. At the moment calls to external sites are being blocked, even if they seem to work locally when you are testing. So any dependency needs to be included locally in the zip.
11 |
12 | Regardless of what content you want to display (three.js, pixi.js, canvas, p5.js, shaders etc), it should always be full width and full height (window.innerWidth and window.innerHeight) so please dont forget to include your own resize function.
13 |
14 | ## Customisation
15 |
16 | If you want to create OBJKT's with different seeds, you can access the creator and viewer wallet ids. This values will only be injected once the piece has been minted
17 | they will not work locally.
18 | if the user is not sync, the viewer comes in as false
19 |
20 | ```javascript
21 | const creator = new URLSearchParams(window.location.search).get('creator')
22 | // if the viewer is not authenticated to a wallet, this value will be false
23 | const viewer = new URLSearchParams(window.location.search).get('viewer')
24 | ```
25 |
26 | Hope you guys enjoy!
27 | Hicetnunc team
28 |
--------------------------------------------------------------------------------
/templates/html-glslcanvas-template/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Your title here
6 | reference inside the HTML file.
26 | 3. At the moment calls to external sites are being blocked, even if they seem to work locally when you are testing. So any dependency needs to be included locally in the zip.
27 |
28 | Regardless of what content you want to display (three.js, pixi.js, canvas, p5.js, shaders etc), it should always be full width and full height (window.innerWidth and window.innerHeight) so please dont forget to include your own resize function.
29 |
30 | ## Customisation
31 |
32 | If you want to create OBJKT's with different seeds, you can access the creator and viewer wallet ids. This values will only be injected once the piece has been minted
33 | they will not work locally.
34 | if the user is not sync, the viewer comes in as false
35 |
36 | ```javascript
37 | const creator = new URLSearchParams(window.location.search).get('creator')
38 | // if the viewer is not authenticated to a wallet, this value will be false
39 | const viewer = new URLSearchParams(window.location.search).get('viewer')
40 | ```
41 |
42 | Hope you guys enjoy!
43 | Hicetnunc team
44 |
--------------------------------------------------------------------------------
/templates/html-image-scale-audio/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "image-scale-audio",
3 | "author": "andrevenancio",
4 | "version": "1.0.0",
5 | "private": true,
6 | "dependencies": {
7 | "html-webpack-plugin": "^5.3.1",
8 | "react": "^16.14.0",
9 | "react-dom": "^16.14.0",
10 | "react-zoom-pan-pinch": "^1.6.1"
11 | },
12 | "devDependencies": {
13 | "@babel/core": "^7.14.2",
14 | "@babel/plugin-proposal-class-properties": "^7.13.0",
15 | "@babel/preset-env": "^7.14.2",
16 | "@babel/preset-react": "^7.13.13",
17 | "babel-loader": "^8.2.2",
18 | "copy-webpack-plugin": "^8.1.1",
19 | "css-loader": "^5.2.4",
20 | "file-loader": "^6.2.0",
21 | "mini-css-extract-plugin": "^1.6.0",
22 | "node-sass": "^6.0.0",
23 | "sass-loader": "^11.1.1",
24 | "webpack-cli": "^4.7.0",
25 | "webpack-dev-server": "^3.11.2"
26 | },
27 | "scripts": {
28 | "start": "webpack serve --mode development --hot --inline --open",
29 | "build": "webpack --mode production"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/templates/html-image-scale-audio/src/app.scss:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | width: 100%;
4 | height: 100%;
5 | margin: 0;
6 | padding: 0;
7 | }
8 |
9 | body {
10 | overflow: hidden;
11 | background-color: black;
12 | }
13 |
14 | * {
15 | -webkit-box-sizing: border-box;
16 | box-sizing: border-box;
17 | -moz-osx-font-smoothing: grayscale;
18 | -webkit-font-smoothing: antialiased;
19 | }
20 |
21 | #app {
22 | width: 100vw;
23 | height: 100vh;
24 | display: flex;
25 | align-items: center;
26 | justify-content: center;
27 | }
28 |
29 | .container {
30 | position: relative;
31 | }
32 |
33 | /* landscape uses vw */
34 | @media (orientation: landscape) {
35 | .container {
36 | width: 100vh;
37 | height: 100vh;
38 | }
39 | }
40 |
41 | /* portrait uses vh */
42 | @media (orientation: portrait) {
43 | .container {
44 | width: 100vw;
45 | height: 100vw;
46 | }
47 | }
48 |
49 | .element {
50 | position: relative;
51 | width: fit-content;
52 | width: 100%;
53 | }
54 |
55 | .element img {
56 | width: 100%;
57 | opacity: 1;
58 | }
59 |
60 | .tools {
61 | position: absolute;
62 | top: 4px;
63 | right: 4px;
64 | z-index: 1000;
65 | }
66 |
67 | .tools .icon {
68 | background-color: black;
69 | padding: 4px;
70 | border-radius: 4px;
71 | margin-bottom: 4px;
72 | cursor: pointer;
73 | }
74 |
75 | .tools .icon svg {
76 | width: 24px;
77 | height: 24px;
78 | }
79 |
--------------------------------------------------------------------------------
/templates/html-image-scale-audio/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Image Scale
4 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/templates/html-image-scale-audio/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import App from './app'
4 |
5 | ReactDOM.render( reference inside the HTML file.
26 | 3. At the moment calls to external sites are being blocked, even if they seem to work locally when you are testing. So any dependency needs to be included locally in the zip.
27 |
28 | Regardless of what content you want to display (three.js, pixi.js, canvas, p5.js, shaders etc), it should always be full width and full height (window.innerWidth and window.innerHeight) so please dont forget to include your own resize function.
29 |
30 | ## Customisation
31 |
32 | If you want to create OBJKT's with different seeds, you can access the creator and viewer wallet ids. This values will only be injected once the piece has been minted
33 | they will not work locally.
34 | if the user is not sync, the viewer comes in as false
35 |
36 | ```javascript
37 | const creator = new URLSearchParams(window.location.search).get('creator')
38 | // if the viewer is not authenticated to a wallet, this value will be false
39 | const viewer = new URLSearchParams(window.location.search).get('viewer')
40 | ```
41 |
42 | Hope you guys enjoy!
43 | Hicetnunc team
44 |
--------------------------------------------------------------------------------
/templates/html-image-scale/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "image-scale",
3 | "author": "andrevenancio",
4 | "version": "1.0.1",
5 | "private": true,
6 | "dependencies": {
7 | "html-webpack-plugin": "^5.3.1",
8 | "react": "^16.14.0",
9 | "react-dom": "^16.14.0",
10 | "react-zoom-pan-pinch": "^1.6.1"
11 | },
12 | "devDependencies": {
13 | "@babel/core": "^7.14.2",
14 | "@babel/plugin-proposal-class-properties": "^7.13.0",
15 | "@babel/preset-env": "^7.14.2",
16 | "@babel/preset-react": "^7.13.13",
17 | "babel-loader": "^8.2.2",
18 | "copy-webpack-plugin": "^8.1.1",
19 | "css-loader": "^5.2.4",
20 | "file-loader": "^6.2.0",
21 | "mini-css-extract-plugin": "^1.6.0",
22 | "node-sass": "^6.0.0",
23 | "sass-loader": "^11.1.1",
24 | "webpack-cli": "^4.7.0",
25 | "webpack-dev-server": "^3.11.2"
26 | },
27 | "scripts": {
28 | "start": "webpack serve --mode development --hot --inline --open",
29 | "build": "webpack --mode production"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/templates/html-image-scale/src/app.scss:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | width: 100%;
4 | height: 100%;
5 | margin: 0;
6 | padding: 0;
7 | }
8 |
9 | body {
10 | overflow: hidden;
11 | background-color: black;
12 | }
13 |
14 | * {
15 | -webkit-box-sizing: border-box;
16 | box-sizing: border-box;
17 | -moz-osx-font-smoothing: grayscale;
18 | -webkit-font-smoothing: antialiased;
19 | }
20 |
21 | #app {
22 | width: 100vw;
23 | height: 100vh;
24 | display: flex;
25 | align-items: center;
26 | justify-content: center;
27 | }
28 |
29 | .container {
30 | position: relative;
31 | }
32 |
33 | /* landscape uses vw */
34 | @media (orientation: landscape) {
35 | .container {
36 | width: 100vh;
37 | height: 100vh;
38 | }
39 | }
40 |
41 | /* portrait uses vh */
42 | @media (orientation: portrait) {
43 | .container {
44 | width: 100vw;
45 | height: 100vw;
46 | }
47 | }
48 |
49 | .element {
50 | position: relative;
51 | width: fit-content;
52 | width: 100%;
53 | }
54 |
55 | .element img {
56 | width: 100%;
57 | opacity: 1;
58 | }
59 |
60 | .tools {
61 | position: absolute;
62 | top: 4px;
63 | right: 4px;
64 | z-index: 1000;
65 | }
66 |
67 | .tools .icon {
68 | background-color: black;
69 | padding: 4px;
70 | border-radius: 4px;
71 | margin-bottom: 4px;
72 | cursor: pointer;
73 | }
74 |
75 | .tools .icon svg {
76 | width: 24px;
77 | height: 24px;
78 | }
79 |
--------------------------------------------------------------------------------
/templates/html-image-scale/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Image Scale
4 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/templates/html-image-scale/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import App from './app'
4 |
5 | ReactDOM.render( reference inside the HTML file.
9 | 3. At the moment calls to external sites are being blocked, even if they seem to work locally when you are testing. So any dependency needs to be included locally in the zip.
10 |
11 | Regardless of what content you want to display (three.js, pixi.js, canvas, p5.js, shaders etc), it should always be full width and full height (window.innerWidth and window.innerHeight) so please dont forget to include your own resize function.
12 |
13 | ## Customisation
14 |
15 | If you want to create OBJKT's with different seeds, you can access the creator and viewer wallet ids. This values will only be injected once the piece has been minted
16 | they will not work locally.
17 | if the user is not sync, the viewer comes in as false
18 |
19 | ```javascript
20 | const creator = new URLSearchParams(window.location.search).get('creator')
21 | // if the viewer is not authenticated to a wallet, this value will be false
22 | const viewer = new URLSearchParams(window.location.search).get('viewer')
23 | ```
24 |
25 | Hope you guys enjoy!
26 | Hicetnunc team
27 |
--------------------------------------------------------------------------------
/templates/html-p5js-template/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Your title here
6 | reference inside the HTML file.
9 | 3. At the moment calls to external sites are being blocked, even if they seem to work locally when you are testing. So any dependency needs to be included locally in the zip.
10 |
11 | Regardless of what content you want to display (three.js, pixi.js, canvas, p5.js, shaders etc), it should always be full width and full height (window.innerWidth and window.innerHeight) so please dont forget to include your own resize function.
12 |
13 | ## Customisation
14 |
15 | If you want to create OBJKT's with different seeds, you can access the creator and viewer wallet ids. This values will only be injected once the piece has been minted
16 | they will not work locally.
17 | if the user is not sync, the viewer comes in as false
18 |
19 | ```javascript
20 | const creator = new URLSearchParams(window.location.search).get('creator')
21 | // if the viewer is not authenticated to a wallet, this value will be false
22 | const viewer = new URLSearchParams(window.location.search).get('viewer')
23 | ```
24 |
25 | Hope you guys enjoy!
26 | Hicetnunc team
27 |
--------------------------------------------------------------------------------
/templates/html-shader-template/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Your title here
6 | reference inside the HTML file.
7 | 3. At the moment calls to external sites are being blocked, even if they seem to work locally when you are testing. So any dependency needs to be included locally in the zip.
8 |
9 | Regardless of what content you want to display (three.js, pixi.js, canvas, p5.js, shaders etc), it should always be full width and full height (window.innerWidth and window.innerHeight) so please dont forget to include your own resize function.
10 |
11 | ## Customisation
12 |
13 | If you want to create OBJKT's with different seeds, you can access the creator and viewer wallet ids. This values will only be injected once the piece has been minted
14 | they will not work locally.
15 | if the user is not sync, the viewer comes in as false
16 |
17 | ```javascript
18 | const creator = new URLSearchParams(window.location.search).get('creator')
19 | // if the viewer is not authenticated to a wallet, this value will be false
20 | const viewer = new URLSearchParams(window.location.search).get('viewer')
21 | ```
22 |
23 | Hope you guys enjoy!
24 | Hicetnunc team
25 |
--------------------------------------------------------------------------------
/templates/html-template/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Your title here
6 | reference inside the HTML file.
7 | 3. At the moment calls to external sites are being blocked, even if they seem to work locally when you are testing. So any dependency needs to be included locally in the zip.
8 |
9 | Regardless of what content you want to display (three.js, pixi.js, canvas, p5.js, shaders etc), it should always be full width and full height (window.innerWidth and window.innerHeight) so please dont forget to include your own resize function.
10 |
11 | Hope you guys enjoy!
12 | Hicetnunc team
13 |
--------------------------------------------------------------------------------
/templates/html-three-template/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Three.js template
5 | reference inside the HTML file.
11 | 3. At the moment calls to external sites are being blocked, even if they seem to work locally when you are testing. So any dependency needs to be included locally in the zip.
12 |
13 | Regardless of what content you want to display (three.js, pixi.js, canvas, p5.js, shaders etc), it should always be full width and full height (window.innerWidth and window.innerHeight) so please dont forget to include your own resize function.
14 |
15 | Hope you guys enjoy!
16 | Hicetnunc team
17 |
--------------------------------------------------------------------------------
/templates/html-three-webxr-template/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Three.js WebXR template
6 | Document
16 |
17 |
18 |
19 |
20 |
21 |
26 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/templates/svg-template/svg-template.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
13 |
--------------------------------------------------------------------------------
40 | )}
41 | 
*/}
56 | {false &&