21 | Web dashboard for minting and interacting with metaverse NFTs
4 | 5 | 16 | 17 | ## Examples 18 | 19 | 20 |
21 |
22 |
23 | 
24 |
25 |
26 | 
27 |
28 |
29 |
30 | 
31 |
32 |
33 | 
34 |
35 |
36 | 
37 |
38 |
39 |
40 | ## Features
41 |
42 | - Mint NFTs from file upload or URL
43 | - Set to be transferable or non-transferable (redistribution not allowed)
44 | - Set a fee and preview the asset before minting (spam control)
45 | - View a dashboard of what the community has been creating
46 | - Change views from cards, images, and live 3D previews
47 | - Asset pages with buttons to interact with NFTs to:
48 | - Apply asset as avatar or add to loadout
49 | - Transfer to other blockchains (ETH / Polygon)
50 | - Add unlockables and file storage
51 | - User profile pages with avatars and custom loadouts
52 | - Top down map of the current season with interactive parcel links
53 |
54 |
55 | ### Generate trading cards
56 |
57 | Generate a unique trading card representation for every NFT with RNG elements and battle stats.
58 |
59 | 
60 |
61 |
62 | ## Development
63 |
64 | https://nextjs.org/docs/deployment
65 |
66 |
67 | ## Contributing
68 |
69 | Contributions are welcome please see [CONTRIBUTING.md](https://github.com/webaverse/docs/blob/master/CONTRIBUTING.md) for additional information. Open issues are listed [here](https://github.com/webaverse/app/issues?q=Fe%3A+is%3Aissue+is%3Aopen+).
70 |
--------------------------------------------------------------------------------
/components/Card2D.js:
--------------------------------------------------------------------------------
1 | import React, {Fragment, useState} from "react";
2 | // import procgen, {types} from '../webaverse/procgen.js';
3 | import User from './User';
4 | import {previewHost} from '../webaverse/constants';
5 |
6 | const Card2D = ({
7 | id,
8 | assetName,
9 | description,
10 | image,
11 | animation_url,
12 | hash,
13 | ext,
14 | totalSupply,
15 | minterAvatarPreview,
16 | minterUsername,
17 | minterAddress,
18 | cardSize,
19 | isMainnet,
20 | isPolygon,
21 | glow,
22 | imageView,
23 | // cardSvgSource,
24 | nonce,
25 | onClick,
26 | }) => {
27 | const [perspective, setPerspective] = useState([false, false]);
28 | const [flip, setFlip] = useState(false);
29 | const [transitioning, setTransitioning] = useState(false);
30 | const [boundingBox, setBoundingBox] = useState(null);
31 | const [dimensions, setDimensions] = useState(null);
32 |
33 | const _loadDimensions = el => {
34 | const {naturalWidth, naturalHeight} = el;
35 | if (!dimensions || dimensions[0] !== naturalWidth || dimensions[1] !== naturalHeight) {
36 | setDimensions([naturalWidth, naturalHeight]);
37 | }
38 | };
39 | const _cancelDragStart = e => {
40 | e.preventDefault();
41 | };
42 |
43 | const qs = {
44 | nonce,
45 | };
46 | let src = image;
47 | src = `${previewHost}/${hash}.${ext}/preview.png`
48 | src = src.replace(/\.gif\/preview\.png$/, '.gif/preview.gif');
49 | if (!/\?$/.test(src)) {
50 | src += '?';
51 | }
52 | let first = true;
53 | for (const k in qs) {
54 | const v = qs[k];
55 | if (v !== undefined) {
56 | if (first) {
57 | first = false;
58 | } else {
59 | src += '&';
60 | }
61 | src += `${k}=${v}`;
62 | }
63 | }
64 |
65 | return (
66 |