├── src
    ├── react-app-env.d.ts
    ├── img
    │   ├── back.png
    │   ├── moon.png
    │   ├── stars.png
    │   ├── splash.jpg
    │   ├── splash.png
    │   ├── splash1.png
    │   ├── treasure.png
    │   ├── download.jpeg
    │   └── mountain_front.png
    ├── App.css
    ├── components
    │   ├── customButton
    │   │   ├── CustomButton.js
    │   │   └── Button.css
    │   ├── PopUp
    │   │   ├── PopUp.css
    │   │   └── SellPopUp.js
    │   ├── Header
    │   │   ├── Header.js
    │   │   └── Header.css
    │   ├── Tag
    │   │   ├── Tag.js
    │   │   └── Tag.css
    │   ├── ItemButton
    │   │   ├── ItemButton.js
    │   │   └── ItemButton.css
    │   ├── Attributes
    │   │   ├── Attributes.css
    │   │   └── Attributes.js
    │   ├── ArtCard
    │   │   ├── ArtCard.css
    │   │   └── ArtCard.js
    │   ├── Wallet
    │   │   └── wallet.js
    │   ├── TextInput
    │   │   ├── TextInput.js
    │   │   └── TextInput.css
    │   ├── Stepper
    │   │   ├── Stepper.css
    │   │   └── Stepper.js
    │   └── navbar
    │   │   ├── Navbar.css
    │   │   └── Navbar.js
    ├── index.js
    ├── pages
    │   ├── Explore
    │   │   ├── Explore.css
    │   │   └── Explore.js
    │   ├── CreateNFT
    │   │   ├── Progress.css
    │   │   ├── Launch
    │   │   │   ├── Launch.js
    │   │   │   └── Launch.css
    │   │   ├── Progress.js
    │   │   ├── FileUpload
    │   │   │   ├── FileUpload.js
    │   │   │   └── FileUpload.css
    │   │   ├── CreateNFT.css
    │   │   ├── DetailsForm
    │   │   │   ├── DetailsForm.css
    │   │   │   └── DetailsForm.js
    │   │   ├── CreateNFT.js
    │   │   └── 1055-world-locations.json
    │   └── Home
    │   │   ├── Home.css
    │   │   └── Home.js
    ├── utils
    │   ├── customNFT
    │   │   ├── vuex.js
    │   │   ├── metaplex
    │   │   │   ├── utils.js
    │   │   │   ├── assets.js
    │   │   │   ├── accounts.js
    │   │   │   ├── ids.js
    │   │   │   ├── connectionHelpers.js
    │   │   │   └── metadata.js
    │   │   ├── index.js
    │   │   └── mintNFT.js
    │   └── createSale.ts
    └── App.js
├── public
    ├── favicon.ico
    ├── robots.txt
    ├── manifest.json
    ├── exploreNFTs.txt
    └── index.html
├── .gitignore
├── rust-program
    └── sell
    │   ├── Cargo.toml
    │   └── src
    │       └── lib.rs
├── tsconfig.json
├── README.md
└── package.json


/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/src/img/back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MayankMittal1/SilkRoad/HEAD/src/img/back.png


--------------------------------------------------------------------------------
/src/img/moon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MayankMittal1/SilkRoad/HEAD/src/img/moon.png


--------------------------------------------------------------------------------
/src/img/stars.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MayankMittal1/SilkRoad/HEAD/src/img/stars.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MayankMittal1/SilkRoad/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/img/splash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MayankMittal1/SilkRoad/HEAD/src/img/splash.jpg


--------------------------------------------------------------------------------
/src/img/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MayankMittal1/SilkRoad/HEAD/src/img/splash.png


--------------------------------------------------------------------------------
/src/img/splash1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MayankMittal1/SilkRoad/HEAD/src/img/splash1.png


--------------------------------------------------------------------------------
/src/img/treasure.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MayankMittal1/SilkRoad/HEAD/src/img/treasure.png


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | body {
2 |     font-family: 'Roboto', sans-serif;
3 |     background-color: #00002E; 
4 | }


--------------------------------------------------------------------------------
/src/img/download.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MayankMittal1/SilkRoad/HEAD/src/img/download.jpeg


--------------------------------------------------------------------------------
/src/img/mountain_front.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MayankMittal1/SilkRoad/HEAD/src/img/mountain_front.png


--------------------------------------------------------------------------------
/src/components/customButton/CustomButton.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./Button.css";
 3 | 
 4 | const CustomButton = (props) => {
 5 |   return (
 6 |     <button class="button-72" role="button">{props.title}</button>
 7 |   );
 8 | };
 9 | 
10 | export default CustomButton;
11 | 


--------------------------------------------------------------------------------
/src/components/PopUp/PopUp.css:
--------------------------------------------------------------------------------
 1 | .my-modal{
 2 |     color: #fff;
 3 |   background-color: rgba(10, 37, 94, 0.699);
 4 |   border: 1px solid rgba(1, 4, 20, 0.062);
 5 |   width: 100%;
 6 |   backdrop-filter: blur(10px); 
 7 | }
 8 | .labels{
 9 |     color: rgb(201, 192, 192);
10 |     letter-spacing: 2px;
11 | } 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import 'bootstrap/dist/css/bootstrap.min.css';
 4 | import App from './App';
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById('root')
11 | );
12 | 
13 | 


--------------------------------------------------------------------------------
/src/components/Header/Header.js:
--------------------------------------------------------------------------------
 1 | import React  from "react";
 2 | import './Header.css';
 3 | // import back from './../../img/back.png';
 4 | const Header =(props) => {
 5 |     return (
 6 |       <div className="header">
 7 |         <div className="headtext">
 8 |           {props.heading}
 9 |         </div>
10 |         <hr/>
11 |       </div>
12 | 
13 |     )
14 |   }
15 |   
16 |   export default Header;


--------------------------------------------------------------------------------
/src/pages/Explore/Explore.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     box-sizing: border-box;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | body {
 7 |     font-family: 'Roboto', sans-serif;
 8 |     background: #00002E; 
 9 | }
10 | .main-cont{
11 |     margin: 10px;
12 |     padding: 5rem;
13 | }
14 | .container{
15 |     display: flex;
16 |     flex-wrap: wrap;
17 |     justify-content: center;
18 |     align-items: center;
19 |     margin: 10%;
20 | }


--------------------------------------------------------------------------------
/src/components/Tag/Tag.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import "./Tag.css"
 3 | 
 4 | const Tag = (props) => {
 5 |     return(
 6 |         <div className="main">
 7 |             <div className="upper">
 8 |                 {props.trait_type}
 9 |             </div>
10 |             <div className="lower">
11 |                 {props.value}
12 |             </div>
13 |         </div>
14 |     )
15 | }
16 | export default Tag;
17 | 


--------------------------------------------------------------------------------
/src/components/ItemButton/ItemButton.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import './ItemButton.css'
 3 | 
 4 | const ItemButton = (props) => {
 5 |     return(
 6 |         <button className="item-button" type={props.type} onclick={props.onClick}>
 7 |             {props.heading}
 8 |             <br/>
 9 |             <span className="sub-head">{props.subheading}</span>
10 |         </button>
11 |     )
12 | }
13 | export default ItemButton;


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | #tests
15 | /src/Tests
16 | /rust-program/sell/target
17 | # misc
18 | .DS_Store
19 | .env.local
20 | .env.development.local
21 | .env.test.local
22 | .env.production.local
23 | 
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 


--------------------------------------------------------------------------------
/src/components/Tag/Tag.css:
--------------------------------------------------------------------------------
 1 | .main{
 2 |     height:40px;
 3 |     width: 80px;
 4 |     border-radius: 7px;
 5 |     background-color: #00002E;
 6 |     display: flex;
 7 |     flex-direction: column;
 8 |     margin-right: 5px;
 9 |     border: rgba(255,255,255,0.3) 0.3px solid;
10 | }
11 | .upper{
12 |     text-align: center;
13 |     height: 50%;
14 |     width: 100%;
15 |     font-weight: bold;
16 | }
17 | .lower{
18 |     text-align: center;
19 |     height: 50%;
20 |     width: 100%;
21 | }
22 | 


--------------------------------------------------------------------------------
/rust-program/sell/Cargo.toml:
--------------------------------------------------------------------------------
 1 | [package]
 2 | name = "sell"
 3 | version = "0.1.0"
 4 | repository = "https://github.com/solana-labs/solana"
 5 | license = "Apache-2.0"
 6 | homepage = "https://solana.com/"
 7 | edition = "2018"
 8 | 
 9 | [features]
10 | no-entrypoint = []
11 | 
12 | [dependencies]
13 | borsh = "0.9.1"
14 | borsh-derive = "0.9.1"
15 | solana-program = "=1.7.14"
16 | 
17 | [dev-dependencies]
18 | solana-program-test = "=1.7.14"
19 | solana-sdk = "=1.7.14"
20 | 
21 | [lib]
22 | name = "sell"
23 | crate-type = ["cdylib", "lib"]


--------------------------------------------------------------------------------
/src/utils/customNFT/vuex.js:
--------------------------------------------------------------------------------
 1 | export const set = (property) => (state, payload) => (state[property] = payload);
 2 | 
 3 | export const toggle = (property) => (state) => (state[property] = !state[property]);
 4 | 
 5 | export const arrayToggle = (property) => (state, item) => {
 6 |   const array = JSON.parse(JSON.stringify(state[property]));
 7 |   const itemIndex = array.indexOf(item);
 8 |   if (itemIndex === -1) {
 9 |     array.push(item);
10 |   } else {
11 |     array.splice(itemIndex, 1);
12 |   }
13 |   state[property] = array;
14 | };
15 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "noEmit": true,
20 |     "jsx": "react"
21 |   },
22 |   "include": [
23 |     "src"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/exploreNFTs.txt:
--------------------------------------------------------------------------------
 1 | BFTfszbx3gFZnMRtorQeS1oN4PBP1LbmXQGmj96e7YUb
 2 | FxZNbqDWLoSrHD18wNe3TRHZnQYxLPp5L7CQXGjwimEL
 3 | 8U5yyUgRcgSkVZEUMrdfP67P3CGrUhEfvLQWa3Pd7zq6
 4 | 8anNb2FpcC6ectnNLwQhsUkCtiBemnyXYLPhr5DbwpiK
 5 | DJrT6cKijghDfY6V38658QobZuHdmvmjPxJi9qqdCUKm
 6 | 3yBpuBX2qyqZ14rLsNmvH5G1ka5uhtkn2qZ4JrxWxyuj
 7 | A3JcBUt3pNfgpZtJoT9J2m424XhKZNjm7eZtH8B6ACo
 8 | A1knYCS4bmzrwFMGNdR5Gtb2Bhw2YvPnjyyofCyXQ2pw
 9 | 4NM37UH4jBz7sRTzp2NXuVXBUVNFoSEWLLVCiA3X6VH1
10 | 7jfzFFehnXyagWvT9ThbKWGRFyJwqbT6Mh6rapm1jdMh
11 | EBsB7caaUbuhMZZrakPWKNo6MyqgmPMUzYz4stVD8cK1
12 | 7ZZXnDYSKdnaFYCM24jzGrd2ayjeXrvy4rd2DtFpDb4C
13 | 8p676DL9U3TuBmsyhEEaqeJwpcTswSme4Q1GsKzpM529
14 | 


--------------------------------------------------------------------------------
/src/utils/customNFT/metaplex/utils.js:
--------------------------------------------------------------------------------
 1 | import { PublicKey } from '@solana/web3.js';
 2 | 
 3 | export const findProgramAddress = async (
 4 |   seeds,
 5 |   programId,
 6 | ) => {
 7 |   const key = `pda-${
 8 |     seeds.reduce((agg, item) => agg + item.toString('hex'), '')
 9 |   }${programId.toString()}`;
10 |   const cached = localStorage.getItem(key);
11 |   if (cached) {
12 |     const value = JSON.parse(cached);
13 | 
14 |     return [new PublicKey(value.key), parseInt(value.nonce, 10)];
15 |   }
16 | 
17 |   const result = await PublicKey.findProgramAddress(seeds, programId);
18 | 
19 |   // localStorage.setItem(
20 |   //   key,
21 |   //   JSON.stringify({
22 |   //     key: result[0].toBase58(),
23 |   //     nonce: result[1],
24 |   //   }),
25 |   // );
26 | 
27 |   return result;
28 | };
29 | 
30 | export const STABLE_COINS = new Set(['USDC', 'wUSDC', 'USDT']);
31 | 


--------------------------------------------------------------------------------
/src/components/customButton/Button.css:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | .button-72 {
 5 |   align-items: center;
 6 |   background-color: initial;
 7 |   background-image: linear-gradient(rgba(179, 132, 201, .84), rgba(57, 31, 91, .84) 50%);
 8 |   border-radius: 42px;
 9 |   border-width: 0;
10 |   /* box-shadow: rgba(57, 31, 91, 0.24) 0 2px 2px,rgba(179, 132, 201, 0.4) 0 8px 12px; */
11 |   color: #FFFFFF;
12 |   cursor: pointer;
13 |   display: flex;
14 |   font-family: Quicksand,sans-serif;
15 |   font-size: 18px;
16 |   font-weight: 700;
17 |   height: 40px;
18 |   width: 100px;
19 |   justify-content: center;
20 |   letter-spacing: .04em;
21 |   line-height: 16px;
22 |   margin: 0;
23 |   text-align: center;
24 |   text-decoration: none;
25 |   text-shadow: rgba(255, 255, 255, 0.4) 0 0 4px,rgba(255, 255, 255, 0.2) 0 0 12px,rgba(57, 31, 91, 0.6) 1px 1px 4px,rgba(57, 31, 91, 0.32) 4px 4px 16px;
26 |   user-select: none;
27 |   -webkit-user-select: none;
28 |   touch-action: manipulation;
29 |   vertical-align: baseline;
30 | }
31 | 
32 | .button-72:hover {
33 |   background-image: linear-gradient(#B384C9, #391F5B 50%);
34 | }
35 | 
36 | @media (min-width: 768px) {
37 |   .button-72 {
38 |     font-size: 21px;
39 |     padding: 18px 34px;
40 |   }
41 | }


--------------------------------------------------------------------------------
/src/pages/Explore/Explore.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import "./Explore.css";
 3 | import ArtCard from "../../components/ArtCard/ArtCard";
 4 | import Header from "../../components/Header/Header";
 5 | import { useConnection, useWallet } from "@solana/wallet-adapter-react";
 6 | import { WalletNotConnectedError } from "@solana/wallet-adapter-base";
 7 | import { fetchall, fetch } from "../../utils/createSale";
 8 | const Explore = () => {
 9 |   const { connection } = useConnection();
10 |   const [nfts, setNfts] = useState([]);
11 |   useEffect(() => {
12 |     fetchall().then((res)=>{
13 |       console.log(res)
14 |       setNfts(res);
15 |     })
16 |   },[]);
17 |   return (
18 |     <div className="main-cont">
19 |       <div className="Head">
20 |         <Header heading="Explore" />
21 |       </div>
22 |       <div className="container">
23 |         {nfts.map((nft) => (
24 |             <ArtCard
25 |               key={nft.pubkey.toBase58()}
26 |               pubkey={nft.pubkey.toBase58()}
27 |               connection={connection}
28 |               type="Buy"
29 |             />
30 |         ))}
31 |       </div>
32 |       <hr className="hr-line" />
33 |     </div>
34 |   );
35 | };
36 | 
37 | export default Explore;
38 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # SilkRoad
 2 | A modern-UI NFT marketplace based on solana platform
 3 | 
 4 | ## React App
 5 | 
 6 | In the project directory, you can run:
 7 | 
 8 | ### `yarn` or `npm install`
 9 | to install all dependencies
10 | 
11 | ### Run `yarn start` or `npm start` to start server at `localhost:3000`
12 | Runs the app in the development mode.
13 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
14 | 
15 | The page will reload if you make edits.\
16 | You will also see any lint errors in the console.
17 | 
18 | Some screenshots:
19 | 
20 | ![Screenshot from 2021-11-08 18-24-40](https://user-images.githubusercontent.com/74496738/140746938-66e68a45-302f-46d2-9add-c01ff2207bdc.jpg)
21 | 
22 | ![Screenshot from 2021-11-08 18-24-45](https://user-images.githubusercontent.com/74496738/140746950-104e7b00-f477-4068-af1e-83e8456a5b97.jpg)
23 | 
24 | ![Screenshot from 2021-11-08 18-24-51](https://user-images.githubusercontent.com/74496738/140746959-0a8d1ed9-d5eb-4a99-b057-ba1661a79e4a.jpg)
25 | 
26 | ![Screenshot from 2021-11-08 18-24-58](https://user-images.githubusercontent.com/74496738/140746973-0afc93e5-04e9-45e6-abab-81c6864aab86.jpg)
27 | 
28 | ![Screenshot from 2021-11-08 18-25-16](https://user-images.githubusercontent.com/74496738/140746982-ea80091e-6dd4-411c-a52b-22d58176fdef.jpg)
29 | 


--------------------------------------------------------------------------------
/src/pages/CreateNFT/Progress.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     font-size: 14px;
 5 |   }
 6 |   
 7 |   .stepper-container-horizontal {
 8 |     border: 1px solid #65dfc9;
 9 |     /* box-shadow: 0 0 13px #333; */
10 |     border-radius: 3px;
11 |     /* margin: 40px auto;
12 |     padding: 30px; */
13 |     width: 80%;
14 |   }
15 |   
16 |   /* .stepper-container-vertical {
17 |     border: 1px solid;
18 |   font-family: 'Lato', sans-serif;
19 |   padding: 0;
20 |   margin: 0;
21 |   font-size: 14px;
22 | } */
23 | 
24 | .stepper-container-horizontal {
25 |   border: 1px solid #65dfc9;
26 |   box-shadow: 0 0 13px #333;
27 |   border-radius: 3px;
28 |   margin: 40px auto;
29 |   padding: 30px;
30 |   width: 60%;
31 | }
32 | 
33 | .stepper-container-vertical {
34 |   /* border: 1px solid #65dfc9; */
35 |   /* box-shadow: 0 0 13px #333; */
36 |   border-radius: 3px;
37 |   /* margin: 40px auto; */
38 |   /* padding: 30px;
39 |   width: 60%; */
40 |   height: auto;
41 |   display: flex;
42 |   flex-direction: column;
43 |   justify-content: center;
44 | }
45 | 
46 | /* .buttons-container {
47 |   text-align: center;
48 |   padding: 10px;
49 |     
50 | };
51 | button{
52 |     margin: 0 2rem;
53 |     width: 100px;
54 |     padding: 4px;
55 |     background-color: #65dfc9;
56 |     border: none
57 | } */


--------------------------------------------------------------------------------
/src/components/Attributes/Attributes.css:
--------------------------------------------------------------------------------
 1 | .main-container{
 2 |     width: 100%;
 3 |     min-height: 100px;
 4 |     display: flex;
 5 |     flex-direction: column;
 6 | }
 7 | .tags{
 8 |     width: 100%;
 9 |     display: flex;
10 |     flex-direction: row;
11 |     min-height: 3px;
12 |     margin-bottom: 10px;
13 |     margin-top: 10px;
14 | }
15 | .input-container{
16 |     width: 100%;
17 |     height: 30px;
18 |     display: flex;
19 |     flex-direction: row;
20 |     justify-content: center;
21 |     margin-bottom: 20px;
22 | }
23 | .input-inner{
24 |     width:50%;
25 |     padding: auto;
26 | }
27 | .add-btn {
28 |     display: flex;
29 |     justify-content: center;
30 |     align-items: center;
31 |     padding: 1em 2.5em;
32 |     width: 30px;
33 |     height: 30px;
34 |     background: transparent;
35 |     border: none;
36 |     border-radius: 0.5rem;
37 |     color: #fff;
38 |     font-size: 0.8rem;
39 |     font-weight: 700;
40 |     letter-spacing: 0.2rem;
41 |     text-align: center;
42 |     outline: none;
43 |     cursor: pointer;
44 |     transition: 0.2s ease-in-out;
45 |     box-shadow: -2px -2px 6px rgba(21, 34, 71, 0.7),
46 |     -2px -2px 4px rgba(191, 198, 212, 0.4),
47 |     2px 2px 2px rgba(168, 168, 211, 0.13), 2px 2px 4px rgba(0, 0, 0, 0.1);
48 | }
49 | .add-div{
50 |     display: flex;
51 |     width: 100%;
52 |     height: 35px;
53 |     justify-content: center;
54 | }
55 | 


--------------------------------------------------------------------------------
/src/components/Header/Header.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Monoton&family=Playfair+Display+SC:ital@0;1&family=Quantico:ital@1&display=swap");
 2 | @import url("https://fonts.googleapis.com/css2?family=Playfair+Display+SC:ital@0;1&family=Quantico:ital@1&display=swap");
 3 | @import url("https://fonts.googleapis.com/css2?family=Quantico:ital@1&display=swap");
 4 | *{
 5 |     margin: 0;
 6 |     padding: 0;
 7 |     box-sizing: border-box;
 8 |     font-family: 'poppins', sans-serif;
 9 | }
10 | .header .headtext{
11 |     font-size: 100px;
12 |     margin-left: -10px;
13 |     text-align: center;
14 |     color: transparent;
15 |     text-shadow: 0 0 40px #fff, 0 0 4px #ff4da6, 0 0 8px #ff4da6, 0 0 12px #ff4da6, 0 0 16px #ff4da6, 0 0 20px #ff4da6, 0 0 80px #ff4da6;
16 |     -webkit-text-stroke: 2px #fff;
17 |     background: url(./../../img/back.png);
18 |     -webkit-background-clip: text;
19 |     background-position: 0 0;
20 |     animation: back 20s linear infinite;
21 | }
22 | @keyframes back{
23 |     100%{
24 |         background-position: 2000px 0;
25 |     }
26 | }
27 | .header {
28 |     display: flex;
29 |     justify-content: center;
30 |     padding: 2px;
31 |     max-width: 100%;
32 |     margin-left: 10%;
33 |     margin-right: 10%;
34 |     /* background: darkgoldenrod; */
35 |     border-bottom: 1px solid white;
36 |     
37 | }
38 | hr{
39 |     color: #ece8e8;
40 |     size: 3px;
41 | }
42 | 


--------------------------------------------------------------------------------
/src/pages/CreateNFT/Launch/Launch.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import { ReactDOM } from "react";
 3 | import { Form, Popover, Button, OverlayTrigger } from "react-bootstrap";
 4 | import "./Launch.css";
 5 | import image from "./../../../img/download.jpeg";
 6 | import RangeSlider from "react-bootstrap/FormRange";
 7 | 
 8 | const Launch = (props) => {
 9 |   return (
10 |     <div className="boxs">
11 |         <div className="liness"></div>
12 |         <div className="conta">
13 |         <div className="imag-box ">
14 |           <div className="imagBx">
15 |             <img className="images" src={image} alt="" />
16 |           </div>
17 |           <div class="contents">
18 |             <div>
19 |               <h2>Preview</h2>
20 |             </div>
21 |           </div>
22 |         </div>
23 |         </div>
24 |         <div className="conts">
25 |             <div className="head-one">
26 |                 ROYALTY PERCENTAGE
27 |             </div>
28 |             <div className="res-one">
29 |                 {props.royalty}
30 |             </div>
31 |             <div className="head-one">
32 |                 PRICE IN SOL
33 |             </div>
34 |             <div className="res-one">
35 |                 {props.price} 
36 |             </div>
37 |             <div className="head-two"></div>
38 |         </div>
39 |         <div className="llines"></div>
40 |         </div>
41 |         
42 | 
43 |        
44 | );
45 | }
46 | export default Launch;
47 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |    <!-- Font Awesome -->
19 |    <link
20 |    rel="stylesheet"
21 |    href="https://use.fontawesome.com/releases/v5.11.2/css/all.css"/>
22 |     <title>SilkRoad</title>
23 |   </head>
24 |   <body>
25 |     <noscript>You need to enable JavaScript to run this app.</noscript>
26 |     <div id="root"></div>
27 |     <!-- Scripts -->
28 |     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
29 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
30 |   </body>
31 | </html>


--------------------------------------------------------------------------------
/src/utils/customNFT/index.js:
--------------------------------------------------------------------------------
 1 | import { PublicKey } from '@solana/web3.js';
 2 | 
 3 | export const TOKEN_PROGRAM_ID = new PublicKey('TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA');
 4 | export const ASSOCIATED_TOKEN_PROGRAM_ID = new PublicKey('ATokenGPvbdGVxr1b2hvZbsiqW5xWH25efTNsLJA8knL');
 5 | const LOG_10 = Math.log(10);
 6 | 
 7 | export const sleep = async (ms) => { await new Promise((r) => setTimeout(r, ms)); };
 8 | 
 9 | export const currencyFormatter = (number, ratio = 1, symbol = '$') => {
10 |   if (Number.isNaN(number)) return `\u00A0${symbol} NaN`;
11 |   const fromattedNumber = number * ratio;
12 |   let fractionDigits = 2 - Math.round(Math.log(ratio) / LOG_10);
13 |   fractionDigits = fractionDigits < 0 ? 0 : fractionDigits;
14 |   const numberFormat = new Intl.NumberFormat('en-US', {
15 |     maximumFractionDigits: fractionDigits,
16 |     minimumFractionDigits: fractionDigits,
17 |   });
18 |   const isSmall = fromattedNumber < 10 ** -fractionDigits;
19 |   if (isSmall) {
20 |     return `<${symbol}${10 ** -fractionDigits}`;
21 |   }
22 |   // eslint-disable-next-line no-useless-escape
23 |   return `\u00A0${symbol}${numberFormat.format(fromattedNumber)}`;
24 | };
25 | 
26 | const WINSTON_MULTIPLIER = 10 ** 12;
27 | 
28 | export const computeStorageFees = (bytes, costs) => {
29 |   const nFiles = 2;
30 |   const costInAr = (costs.arweaveTxnFee * nFiles + costs.oneByteCost * bytes) / WINSTON_MULTIPLIER;
31 |   const arMultiplier = costs.arweave / costs.solana;
32 |   const total = costInAr * arMultiplier * 1.1;
33 |   return total;
34 | };
35 | 


--------------------------------------------------------------------------------
/src/components/Attributes/Attributes.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import "./Attributes.css"
 3 | import Tag from '../Tag/Tag';
 4 | import { InputGroup, FormControl } from "react-bootstrap";
 5 | const Attribute = () => {
 6 |     const [tags,setTags]=useState([]);
 7 |     return(
 8 |         <div className="main-container">
 9 |             Tags
10 |             <div className='tags'>
11 |                 {tags.map((val)=>(
12 |                     <Tag trait_type={val.trait_type} value={val.value}></Tag>
13 |                 ))}
14 |             </div>
15 |             <div className="input-container">
16 |                 <div className="input-inner">
17 |                     <InputGroup size="sm" className="mb-3">
18 |                         <FormControl placeholder="Attribute" aria-label="Attribute" className=" input-field" id="trait-input"/>
19 |                     </InputGroup>
20 |                 </div>
21 |                 <div className="input-inner">
22 |                     <InputGroup size="sm" className="mb-3">
23 |                         <FormControl placeholder="Value" aria-label="Attribute" className=" input-field" id="value-input"/>
24 |                     </InputGroup>
25 |                 </div>
26 |             </div>
27 |             <div className="add-div">
28 |                 <div className="add-btn" onClick={() => setTags([...tags,{"trait_type":document.getElementById("trait-input").value,"value":document.getElementById("value-input").value}])}>Add</div>
29 |             </div>
30 |         </div>
31 |     )
32 | 
33 | }
34 | export default Attribute
35 | 


--------------------------------------------------------------------------------
/src/utils/customNFT/metaplex/assets.js:
--------------------------------------------------------------------------------
 1 | export const LAMPORT_MULTIPLIER = 10 ** 9;
 2 | const WINSTON_MULTIPLIER = 10 ** 12;
 3 | 
 4 | export async function getAssetCostToStore(files) {
 5 |   // eslint-disable-next-line no-param-reassign
 6 |   const totalBytes = files.reduce((sum, f) => (sum += f.size), 0);
 7 |   const txnFeeInWinstons = parseInt(
 8 |     await (await fetch('https://arweave.net/price/0')).text(), 10,
 9 |   );
10 |   const byteCostInWinstons = parseInt(
11 |     await (
12 |       await fetch(`https://arweave.net/price/${totalBytes.toString()}`)
13 |     ).text(), 10,
14 |   );
15 |   const totalArCost = (txnFeeInWinstons * files.length + byteCostInWinstons) / WINSTON_MULTIPLIER;
16 | 
17 |   let conversionRates = JSON.parse(
18 |     localStorage.getItem('conversionRates') || '{}',
19 |   );
20 | 
21 |   if (
22 |     !conversionRates
23 |     || !conversionRates.expiry
24 |     || conversionRates.expiry < Date.now()
25 |   ) {
26 |     conversionRates = {
27 |       value: JSON.parse(
28 |         await (
29 |           await fetch(
30 |             'https://api.coingecko.com/api/v3/simple/price?ids=solana,arweave&vs_currencies=usd',
31 |           )
32 |         ).text(),
33 |       ),
34 |       expiry: Date.now() + 5 * 60 * 1000,
35 |     };
36 |   }
37 | 
38 |   // To figure out how many lamports are required, multiply ar byte cost by this number
39 |   const arMultiplier = conversionRates.value.arweave.usd / conversionRates.value.solana.usd;
40 |   // We also always make a manifest file, which, though tiny, needs payment.
41 |   return LAMPORT_MULTIPLIER * totalArCost * arMultiplier * 1.1;
42 | }
43 | 


--------------------------------------------------------------------------------
/src/components/ItemButton/ItemButton.css:
--------------------------------------------------------------------------------
 1 | *,*:before, *:after{
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | .sub-head{
 7 |     color: rgb(185, 183, 183);
 8 |     font-family: 'Poppins', sans-serif;
 9 |     font-size: 15px;
10 |     letter-spacing: 2px;
11 | }
12 | .item-button{
13 |     width: 720px;
14 |     height: 120px;
15 |     position: relative;
16 |     margin-left: 5%;
17 |     margin-right: 5%;
18 |     margin-top: 3%;
19 |     margin-bottom: 3%;
20 |     background-color: rgba(255, 255, 255,0.05);
21 |     border: none;
22 |     color: #fff;
23 |     font-family: 'Poppins', sans-serif;
24 |     font-size: 25px;
25 |     letter-spacing: 4px;
26 |     backdrop-filter: blur(8px);
27 |     cursor: pointer;
28 |     border-radius: 5px;
29 |     transition: 0.5s;
30 | }
31 | .item-button:after{
32 |     content: "";
33 |     position: absolute;
34 |     height: 100%;
35 |     width: 100%;
36 |     top: 0;
37 |     bottom: 0;
38 |     left: 0;
39 |     right: 0;
40 |     background: linear-gradient(
41 |                 45deg, 
42 |                 transparent 50%, 
43 |                 rgba(255,255,255,0.03) 58%,rgba(255,255,255,0.16) 67%, 
44 |                 transparent 68%
45 |                 );
46 |                 background-size: 200% 100%;
47 |                 background-position: 165% 0;
48 |                 transition: 0.7s;
49 | }
50 | .item-button:hover:after{
51 |     background-position: -20% 0;
52 | }
53 | .item-button:hover{
54 |     box-shadow: 15px 30px 32px rgba(0,0,0,0.25);
55 |     transform: translateY(-10px);
56 | }
57 | @media (max-width:780px){
58 |     .item-button{
59 |         width: 90%;
60 |     }
61 | }


--------------------------------------------------------------------------------
/src/pages/CreateNFT/Progress.js:
--------------------------------------------------------------------------------
 1 | import "./Progress.css";
 2 | import Stepper from "./../../components/Stepper/Stepper";
 3 | import React, { Component } from "react";
 4 | 
 5 | export default class Progress extends Component {
 6 |   constructor() {
 7 |     super();
 8 |     this.state = {
 9 |       currentStep: 1
10 |     };
11 |   }
12 | 
13 |   handleClick(clickType) {
14 |     const { currentStep } = this.state;
15 |     let newStep = currentStep;
16 |     clickType === "next" ? newStep++ : newStep--;
17 | 
18 |     if (newStep > 0 && newStep <= 4) {
19 |       this.setState({
20 |         currentStep: newStep
21 |       });
22 |     }
23 |   }
24 | 
25 |   render() {
26 |     const { currentStep} = this.state;
27 |     // const { width } = useWindowDimensions();
28 |     // const {direction} = {width < 768 ? "horizontal" : "vertical"};
29 |     return (
30 |       <>
31 |         <div className="stepper-container-vertical">
32 |           <Stepper
33 |             direction="vertical"
34 |             currentStepNumber={currentStep- 1}
35 |             steps={stepsArray}
36 |             stepColor="#65dfc9"
37 |           />
38 |         </div>
39 | 
40 |         {/* <div className="stepper-container-horizontal">
41 |           <Stepper
42 |             direction="horizontal"
43 |             currentStepNumber={currentStep - 1}
44 |             steps={stepsArray}
45 |             stepColor="purple"
46 |           />
47 |         </div> */}
48 | 
49 |         <div className="buttons-container">
50 |           <button onClick={() => this.handleClick()}>Previous</button>
51 |           <button onClick={() => this.handleClick("next")}>Next</button>
52 |         </div>
53 |       </>
54 |     );
55 |   }
56 | }
57 | 
58 | const stepsArray = [
59 |   "Category",
60 |   "Upload",
61 |   "Info",
62 |   "Launch"
63 | ];


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "silkroad",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@metaplex/js": "^3.4.0",
 7 |     "@solana/wallet-adapter-base": "^0.7.0",
 8 |     "@solana/wallet-adapter-material-ui": "^0.13.0",
 9 |     "@solana/wallet-adapter-react": "^0.13.1",
10 |     "@solana/wallet-adapter-react-ui": "^0.6.0",
11 |     "@solana/wallet-adapter-wallets": "^0.11.3",
12 |     "@solana/web3.js": "^1.30.2",
13 |     "@testing-library/jest-dom": "^5.11.4",
14 |     "@testing-library/react": "^11.1.0",
15 |     "@testing-library/user-event": "^12.1.10",
16 |     "axios": "^0.24.0",
17 |     "bootstrap": "^5.1.3",
18 |     "html2canvas": "^1.3.2",
19 |     "jquery": "^3.6.0",
20 |     "overlay": "^1.2.5",
21 |     "react": "^16.0.0",
22 |     "react-bootstrap": "^2.0.1",
23 |     "react-bootstrap-range-slider": "^3.0.3",
24 |     "react-dom": "^17.0.2",
25 |     "react-loading": "^2.0.3",
26 |     "react-loading-overlay": "^1.0.1",
27 |     "react-lottie": "^1.2.3",
28 |     "react-router-dom": "^5.3.0",
29 |     "react-scripts": "^3.4.4",
30 |     "react-toastify": "^8.1.0",
31 |     "react-transition-group": "^4.4.2",
32 |     "rsuite": "^5.1.0",
33 |     "ts-node": "^10.4.0",
34 |     "typescript": "^4.4.4",
35 |     "ui-neumorphism": "^1.1.3",
36 |     "web-vitals": "^1.0.1"
37 |   },
38 |   "scripts": {
39 |     "start": "react-scripts start",
40 |     "build": "react-scripts build",
41 |     "test": "react-scripts test",
42 |     "eject": "react-scripts eject"
43 |   },
44 |   "eslintConfig": {
45 |     "extends": [
46 |       "react-app",
47 |       "react-app/jest"
48 |     ]
49 |   },
50 |   "browserslist": {
51 |     "production": [
52 |       ">0.2%",
53 |       "not dead",
54 |       "not op_mini all"
55 |     ],
56 |     "development": [
57 |       "last 1 chrome version",
58 |       "last 1 firefox version",
59 |       "last 1 safari version"
60 |     ]
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/src/components/ArtCard/ArtCard.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     font-family: 'Poppins', sans-serif;
 5 | }
 6 | 
 7 | .card-container {
 8 |     display: flex;
 9 |     height: 420px;
10 | }
11 | 
12 | .card{
13 |     position: relative;
14 |     /* box-shadow: inset 5px 5px 5px rgba(0,0,0,0.2),inset -5px -5px 15px rgba(255, 255, 255, 0.1),5px 5px 15px rgba(0,0,0, 0.3),-5px -5px 15px rgba(255, 255, 255, 0.1); */
15 |     box-shadow: 0 15px 35px rgba(0,0,0,0.2);
16 |     max-width: 300px;
17 |     height: 215px;
18 |     margin: 30px 10px;
19 |     padding: 20px 15px;
20 |     display: flex;
21 |     flex-direction: column;
22 |     transition: 0.3s ease-in-out;
23 | }
24 | .card:hover{
25 |     height: 350px;
26 |     background-color: rgba(255, 255, 255, 0.199);
27 | }
28 | .card:hover img{
29 |     border-bottom:2px solid rgb(11, 2, 48);
30 | }
31 | .container .card .imgBx{
32 |     position: relative;
33 |     width: 260px;
34 |     height: 220px;
35 |     top: -60px;
36 |     left: 5px;
37 |     z-index: 1;
38 |     box-shadow: 0 5px 20px rgba(0,0,0,0.2);
39 | }
40 | .container .card .imgBx img{
41 |     max-width: 100%;
42 |     border-radius: 4px;
43 |     height: 220px;
44 | }
45 | .container .card .content{
46 |     position: relative;
47 |     margin-top: -140px;
48 |     padding: 10px 15px;
49 |     text-align: center;
50 |     visibility: hidden;
51 |     opacity: 0;
52 |     transition: 0.3s ease-in-out;
53 |     display: flex;
54 |     flex-direction: column;
55 |     align-items: center;
56 | }
57 | .container .card:hover .content{
58 |     visibility: visible;
59 |     opacity: 1;
60 |     color: white;
61 |     margin-top: 85px;
62 |     transition: 0.3s;
63 |     display: flex;
64 |     flex-direction: column;
65 |     align-items: center;
66 | }
67 | .title {
68 |     font-weight: bolder;
69 |     font-size: large;
70 | }
71 | .btns{
72 |     display: flex;
73 |     width: 100%;
74 |     flex-direction: row;
75 |     justify-content: space-evenly;
76 | }


--------------------------------------------------------------------------------
/src/components/Wallet/wallet.js:
--------------------------------------------------------------------------------
 1 | import React, { FC, useMemo } from 'react';
 2 | import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
 3 | import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
 4 | import {
 5 |     getLedgerWallet,
 6 |     getPhantomWallet,
 7 |     getSlopeWallet,
 8 |     getSolflareWallet,
 9 |     getSolletExtensionWallet,
10 |     getSolletWallet,
11 |     getTorusWallet,
12 | } from '@solana/wallet-adapter-wallets';
13 | import {
14 |     WalletModalProvider,
15 |     WalletDisconnectButton,
16 |     WalletMultiButton
17 | } from '@solana/wallet-adapter-react-ui';
18 | import { clusterApiUrl } from '@solana/web3.js';
19 | 
20 | // Default styles that can be overridden by your app
21 | require('@solana/wallet-adapter-react-ui/styles.css');
22 | 
23 | export const Wallet = () => {
24 |     // Can be set to 'devnet', 'testnet', or 'mainnet-beta'
25 |     const network = WalletAdapterNetwork.Devnet;
26 | 
27 |     // You can also provide a custom RPC endpoint
28 |     const endpoint = useMemo(() => clusterApiUrl(network), [network]);
29 | 
30 |     // @solana/wallet-adapter-wallets includes all the adapters but supports tree shaking --
31 |     // Only the wallets you configure here will be compiled into your application
32 |     const wallets = useMemo(() => [
33 |         getPhantomWallet(),
34 |         getSlopeWallet(),
35 |         getSolflareWallet(),
36 |         getTorusWallet({
37 |             options: { clientId: 'Get a client ID @ https://developer.tor.us' }
38 |         }),
39 |         getLedgerWallet(),
40 |         getSolletWallet({ network }),
41 |         getSolletExtensionWallet({ network }),
42 |     ], [network]);
43 | 
44 |     return (
45 |         <ConnectionProvider endpoint={endpoint}>
46 |             <WalletProvider wallets={wallets} autoConnect>
47 |                 <WalletModalProvider>
48 |                     <WalletMultiButton />
49 |                 </WalletModalProvider>
50 |             </WalletProvider>
51 |         </ConnectionProvider>
52 |     );
53 | };


--------------------------------------------------------------------------------
/src/components/TextInput/TextInput.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { render } from "react-dom";
 3 | import './TextInput.css'
 4 | // import { TransitionMotion, spring } from "react-motion";
 5 | 
 6 | export default class TextInput extends React.Component {
 7 |   constructor(props) {
 8 |     super(props);
 9 | 
10 |     this.state = {
11 |       active: (props.locked && props.active) || false,
12 |       value: props.value || "",
13 |       error: props.error || "",
14 |       label: props.label || "Label"
15 |     };
16 |   }
17 | 
18 |   changeValue(event) {
19 |     const value = event.target.value;
20 |     this.setState({ value, error: "" });
21 |   }
22 | 
23 |   handleKeyPress(event) {
24 |     if (event.which === 13) {
25 |       this.setState({ value: this.props.predicted });
26 |     }
27 |   }
28 | 
29 |   render() {
30 |     const { active, value, error, label } = this.state;
31 |     const { predicted, locked } = this.props;
32 |     const fieldClassName = `field ${(locked ? active : active || value) &&
33 |       "active"} ${locked && !active && "locked"}`;
34 | 
35 |     return (
36 |       <div className={fieldClassName}>
37 |         {active &&
38 |           value &&
39 |           predicted &&
40 |           predicted.includes(value) && <p className="predicted">{predicted}</p>}
41 |         <input
42 |           id={1}
43 |           type="text"
44 |           value={value}
45 |           placeholder={label}
46 |           onChange={this.changeValue.bind(this)}
47 |           onKeyPress={this.handleKeyPress.bind(this)}
48 |           onFocus={() => !locked && this.setState({ active: true })}
49 |           onBlur={() => !locked && this.setState({ active: false })}
50 |         />
51 |         <label htmlFor={1} className={error && "error"}>
52 |           {error || label}
53 |         </label>
54 |       </div>
55 |     );
56 |   }
57 | }
58 | 
59 | // render(
60 | //   <Input
61 | //     id={1}
62 | //     label="Field label"
63 | //     predicted="California"
64 | //     locked={false}
65 | //     active={false}
66 | //   />,
67 | //   document.getElementById("root")
68 | // );
69 | 
70 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useMemo,useCallback } from "react";
 2 | import { WalletAdapterNetwork, WalletError } from "@solana/wallet-adapter-base";
 3 | import {
 4 |   ConnectionProvider,
 5 |   WalletProvider,
 6 | } from "@solana/wallet-adapter-react";
 7 | import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
 8 | import {
 9 |   getPhantomWallet,
10 |   getSolletWallet,
11 | } from "@solana/wallet-adapter-wallets";
12 | import { clusterApiUrl } from "@solana/web3.js";
13 | import {
14 |   BrowserRouter as Router,
15 |   Route,
16 |   Redirect,
17 |   Switch,
18 | } from "react-router-dom";
19 | import Home from "./pages/Home/Home";
20 | import CreateNFT from "./pages/CreateNFT/CreateNFT";
21 | import Explore from "./pages/Explore/Explore";
22 | import Navbar from "./components/navbar/Navbar";
23 | import "bootstrap/dist/css/bootstrap.css";
24 | import "./App.css";
25 | const App = () => {
26 |   const network = WalletAdapterNetwork.Devnet;
27 |   const endpoint = useMemo(() => clusterApiUrl(network), [network]);
28 | 
29 |   const wallets = useMemo(() => [getSolletWallet(), getPhantomWallet()], [network]);
30 |   const onError = useCallback((error) => {
31 |     console.log(
32 |       "error",
33 |       error.message ? `${error.name}: ${error.message}` : error.name
34 |     );
35 |     console.log("err", error);
36 |   }, []);
37 |   return (
38 |     <ConnectionProvider endpoint={endpoint}>
39 |       <WalletProvider autoConnect onError={onError} wallets={wallets}>
40 |         <WalletModalProvider>
41 |         <Router>
42 |           <Navbar />
43 |           <main>
44 |             <Switch>
45 |               <Route path="/" exact>
46 |                 <Home />
47 |               </Route>
48 |               <Route path="/explore" exact>
49 |                 <Explore />
50 |               </Route>
51 |               <Route path="/createnft" exact>
52 |                 <CreateNFT />
53 |               </Route>
54 |               <Redirect to="/" />
55 |             </Switch>
56 |           </main>
57 |         </Router>
58 |         </WalletModalProvider>
59 |       </WalletProvider>
60 |     </ConnectionProvider>
61 |   );
62 | };
63 | 
64 | export default App;
65 | 


--------------------------------------------------------------------------------
/src/pages/CreateNFT/FileUpload/FileUpload.js:
--------------------------------------------------------------------------------
 1 | import React, {useState,useRef} from "react";
 2 | import './FileUpload.css';
 3 | export default class FileUpload extends React.Component{
 4 | 
 5 |     constructor(props){
 6 |         super(props);
 7 |         this.state={
 8 | 
 9 |         };
10 |     }
11 |     onFileLoad(e){
12 |         const file = e.currentTarget.files[0];
13 |         let fileReader = new FileReader();
14 |         fileReader.onload = () =>{
15 |             console.log("Image Loaded: ", fileReader.result);
16 | 
17 |         }
18 |         fileReader.onabort=()=>{
19 |             alert("Reading Aborted");
20 |         }
21 |         fileReader.onerror=()=>{
22 |             alert("Reading Error");
23 |         }
24 |         fileReader.readAsDataURL(file);
25 |     }
26 |     render(){
27 |         return(
28 |             <div style = {{display: "flex", flexDirection:"column", alignSelf: "center"}} className="inner-container">
29 |                 <div className="sub-header">
30 |                     Drag the file
31 |                 </div>
32 |                 <div class="line"></div>
33 |                 <div className="draggable-cont">
34 |                     <input 
35 |                     type="file" 
36 |                     id="file-browser-input" 
37 |                     name="file-browser-input"
38 |                     ref={input => this.fileInput = input} 
39 |                     onDragOver = {(e)=> {e.preventDefault(); e.stopPropagation();}}
40 |                     onDrop = {this.onFileLoad.bind(this)}
41 |                     onChange = {this.onFileLoad.bind(this)}/>
42 |                     
43 |                     
44 |                     
45 |                     <div className="file-preview-cont">
46 |                         {/* PREVIEW CODE LIKHNA HAI */}
47 |                     </div>
48 |                     
49 |                     
50 |                     
51 |                     <div className="helper-text"> Drag and Drop File Here</div>
52 |                     <div className="file-browser-cont">
53 |                         <button className="browser-btn" type="button" onClick = {()=> this.fileInput.click()}>
54 |                             Browse
55 |                         </button>
56 |                     </div>
57 |                 </div>
58 |             </div>
59 |         );
60 |     }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/components/Stepper/Stepper.css:
--------------------------------------------------------------------------------
 1 | /* .stepper-wrapper-horizontal {
 2 |     display: flex;
 3 |     justify-content: space-between;
 4 | }
 5 | 
 6 |     .stepper-wrapper-horizontal .step-wrapper {
 7 |         width: 23%;
 8 |         display: flex;
 9 |         flex-direction: column;
10 |         align-items: center;
11 |         justify-content: center;
12 |         position: relative;
13 |     }
14 | 
15 |     .stepper-wrapper-horizontal .step-number {
16 |         border-radius: 50%;
17 |         border: 1px solid grey;
18 |         width: 20px;
19 |         height: 20px;
20 |         padding: 3px;
21 |         text-align: center;
22 |         margin-bottom: 1.2rem;
23 |     }
24 | 
25 |     .stepper-wrapper-horizontal .divider-line {
26 |         height: 1px;
27 |         background-color: #bdbdbd;
28 |         position: absolute;
29 |         top: 20%;
30 |         left: 70%
31 |     }
32 | 
33 |     .stepper-wrapper-horizontal .divider-line-2 {
34 |         width: 296%
35 |     }
36 | 
37 |     .stepper-wrapper-horizontal .divider-line-3 {
38 |         width: 125%
39 |     }
40 | 
41 |     .stepper-wrapper-horizontal .divider-line-4 {
42 |         width: 70%
43 |     }
44 | 
45 |     .stepper-wrapper-horizontal .divider-line-5 {
46 |         width: 60%
47 |     } */
48 | 
49 | 
50 | /* .stepper-wrapper-vertical { */
51 |     .stepper-wrapper-vertical   .step-wrapper {
52 |         display: flex;
53 |         align-items: center;
54 |         margin-bottom: 1.2rem;
55 |         margin-top: 1.2rem;
56 |         position: relative;
57 |     }
58 | 
59 |     .stepper-wrapper-vertical .step-number {
60 |         border-radius: 50%;
61 |         width: 28px;
62 |         height: 28px;
63 |         padding: 4.5px 4px 4px;
64 |         text-align: center;
65 |         font-size: 95%;
66 |     }
67 | 
68 |     .stepper-wrapper-vertical .step-description {
69 |         margin-left: 1.2rem;
70 |         padding-bottom: 2px;
71 |         color: white;
72 |     }
73 | 
74 |     .stepper-wrapper-vertical .divider-line {
75 |         height: 17px;
76 |         width: 3px;
77 |         background-color: #65dfc9;
78 |         position: absolute;
79 |         top: 100%;
80 |         left: 10.4%
81 |     }
82 | /* } */
83 | 
84 | .step-number-selected {
85 |     /* border: 1px solid #0a0a0a; */
86 |     color: #000;
87 | 
88 | }
89 | 
90 | .step-number-disabled {
91 |     border: 1px solid #f0eaea;
92 |     color: #fff;
93 | }
94 | 
95 | .step-description-active {
96 |     font-weight: bold;
97 |     color: white;
98 | }
99 | 


--------------------------------------------------------------------------------
/src/components/ArtCard/ArtCard.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import "./ArtCard.css";
 3 | import {Button} from "react-bootstrap";
 4 | import { useConnection } from "@solana/wallet-adapter-react";
 5 | import PopUp from "../PopUp/SellPopUp";
 6 | import { fetch } from "../../utils/createSale";
 7 | 
 8 | const { programs } = require("@metaplex/js");
 9 | const axios = require("axios").default;
10 | 
11 | const ArtCard = (props) => {
12 |   const { connection } = useConnection();
13 |   const [metadata, setMetadata] = useState({});
14 |   const [mintAddress,setMintaddress]=useState('');
15 |   const [price,setPrice]=useState("");
16 |   useEffect(() => {
17 |     if(props.type=="Buy"){
18 |       fetch(props.pubkey).then((res)=>{
19 |         localStorage.setItem(props.pubkey.slice(0,10),res.price)
20 |         programs.metadata.Metadata.load(
21 |           connection,
22 |           res.nft_address
23 |         ).then((data)=>{
24 |           console.log(data)
25 |           setMintaddress(data.data.mint)
26 |           axios.get(data.data.data.uri).then((response) => {
27 |             console.log(response.data)
28 |             setMetadata(response.data);
29 |           });
30 |         });
31 |       })
32 |     }
33 |     else{
34 |       console.log(props.pubkey)
35 |       programs.metadata.Metadata.load(
36 |         connection,
37 |         props.pubkey
38 |       ).then((data)=>{
39 |         console.log(data)
40 |         setMintaddress(data.data.mint)
41 |         axios.get(data.data.data.uri).then((response) => {
42 |           setMetadata(response.data);
43 |         });
44 |       });
45 |     }
46 |   },[]);
47 |   return (
48 |     <div className="card-container">
49 |       <div className="card">
50 |         <div className="imgBx">
51 |           <img src={metadata.image} alt="" />
52 |         </div>
53 |         <div className="content">
54 |           <p className="title">{metadata.name}</p>
55 |           <p>{metadata.description}</p>
56 |           <div className="btns">
57 |             {props.type=="Buy"?localStorage.getItem(props.pubkey.slice(0,10))+" SOL":<PopUp title = "Sell" key={mintAddress} nft={props.pubkey} connection={props.connection} publicKey={props.publicKey} sendTransaction={props.sendTransaction}/>}
58 |           <Button variant="outline-info" onClick={()=> window.open("https://explorer.solana.com/address/"+mintAddress+"?cluster=devnet", "_blank")}>Explore</Button>
59 |           </div>
60 |         </div>
61 |       </div>
62 |     </div>
63 |   );
64 | };
65 | 
66 | export default ArtCard;
67 | 


--------------------------------------------------------------------------------
/src/utils/customNFT/metaplex/accounts.js:
--------------------------------------------------------------------------------
  1 | import { MintLayout, Token } from '@solana/spl-token';
  2 | import {
  3 |   Keypair, SystemProgram, SYSVAR_RENT_PUBKEY, TransactionInstruction,
  4 | } from '@solana/web3.js';
  5 | import { SPL_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID, TOKEN_PROGRAM_ID } from './ids';
  6 | 
  7 | export function createUninitializedMint(
  8 |   instructions,
  9 |   payer,
 10 |   amount,
 11 |   signers,
 12 | ) {
 13 |   const account = Keypair.generate();
 14 |   instructions.push(
 15 |     SystemProgram.createAccount({
 16 |       fromPubkey: payer,
 17 |       newAccountPubkey: account.publicKey,
 18 |       lamports: amount,
 19 |       space: MintLayout.span,
 20 |       programId: TOKEN_PROGRAM_ID,
 21 |     }),
 22 |   );
 23 | 
 24 |   signers.push(account);
 25 | 
 26 |   return account.publicKey;
 27 | }
 28 | 
 29 | export function createMint(
 30 |   instructions,
 31 |   payer,
 32 |   mintRentExempt,
 33 |   decimals,
 34 |   owner,
 35 |   freezeAuthority,
 36 |   signers,
 37 | ) {
 38 |   const account = createUninitializedMint(
 39 |     instructions,
 40 |     payer,
 41 |     mintRentExempt,
 42 |     signers,
 43 |   );
 44 | 
 45 |   instructions.push(
 46 |     Token.createInitMintInstruction(
 47 |       TOKEN_PROGRAM_ID,
 48 |       account,
 49 |       decimals,
 50 |       owner,
 51 |       freezeAuthority,
 52 |     ),
 53 |   );
 54 | 
 55 |   return account;
 56 | }
 57 | 
 58 | export function createAssociatedTokenAccountInstruction(
 59 |   instructions,
 60 |   associatedTokenAddress,
 61 |   payer,
 62 |   walletAddress,
 63 |   splTokenMintAddress,
 64 | ) {
 65 |   const keys = [
 66 |     {
 67 |       pubkey: payer,
 68 |       isSigner: true,
 69 |       isWritable: true,
 70 |     },
 71 |     {
 72 |       pubkey: associatedTokenAddress,
 73 |       isSigner: false,
 74 |       isWritable: true,
 75 |     },
 76 |     {
 77 |       pubkey: walletAddress,
 78 |       isSigner: false,
 79 |       isWritable: false,
 80 |     },
 81 |     {
 82 |       pubkey: splTokenMintAddress,
 83 |       isSigner: false,
 84 |       isWritable: false,
 85 |     },
 86 |     {
 87 |       pubkey: SystemProgram.programId,
 88 |       isSigner: false,
 89 |       isWritable: false,
 90 |     },
 91 |     {
 92 |       pubkey: TOKEN_PROGRAM_ID,
 93 |       isSigner: false,
 94 |       isWritable: false,
 95 |     },
 96 |     {
 97 |       pubkey: SYSVAR_RENT_PUBKEY,
 98 |       isSigner: false,
 99 |       isWritable: false,
100 |     },
101 |   ];
102 |   instructions.push(
103 |     new TransactionInstruction({
104 |       keys,
105 |       programId: SPL_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID,
106 |       data: Buffer.from([]),
107 |     }),
108 |   );
109 | }
110 | 


--------------------------------------------------------------------------------
/rust-program/sell/src/lib.rs:
--------------------------------------------------------------------------------
 1 | use borsh::{BorshDeserialize, BorshSerialize};
 2 | 
 3 | use solana_program::{
 4 |     account_info::{next_account_info, AccountInfo},
 5 |     borsh::try_from_slice_unchecked,
 6 |     entrypoint,
 7 |     entrypoint::ProgramResult,
 8 |     msg,
 9 |     program_error::ProgramError,
10 |     pubkey::Pubkey,
11 | };
12 | 
13 | #[derive(BorshSerialize, BorshDeserialize, Debug)]
14 | pub struct SaleAccount {
15 |     pub owner: String,
16 |     pub nft_address: String,
17 |     pub price: String,
18 |     pub is_available: String,
19 | }
20 | 
21 | entrypoint!(process_instruction);
22 | pub fn process_instruction(
23 |     program_id: &Pubkey,
24 |     accounts: &[AccountInfo],
25 |     data: &[u8],
26 | ) -> ProgramResult {
27 |     let accounts_iter = &mut accounts.iter();
28 |     let nft_account = next_account_info(accounts_iter)?;
29 | 
30 |     //checks if the blockchain is accessed by original program (here owner is Program)
31 |     if nft_account.owner != program_id {
32 |         msg!("Greeted account does not have the correct program id");
33 |         return Err(ProgramError::IncorrectProgramId);
34 |     }
35 | 
36 |     //gives the instruction to operate upon
37 |     let (instruction_byte, rest_of_data) = data.split_first().unwrap();
38 | 
39 |     if *instruction_byte == 0 {
40 |         //retrieve the pubkey of owner
41 |         let nft_account_owner = next_account_info(accounts_iter)?;
42 |         let nft_account_address = next_account_info(accounts_iter)?;
43 |         let price = String::from_utf8(rest_of_data[..10].to_vec()).unwrap();
44 | 
45 |         let mut nft_account_data: SaleAccount =
46 |             try_from_slice_unchecked(&nft_account.data.borrow()).map_err(|err| {
47 |                 msg!("Receiving message as string utf8 failed, {:?}", err);
48 |                 ProgramError::InvalidInstructionData
49 |             })?;
50 |         nft_account_data.owner = nft_account_owner.key.to_string();
51 |         nft_account_data.nft_address = nft_account_address.key.to_string();
52 |         nft_account_data.price = price;
53 |         nft_account_data.is_available = "1".to_string();
54 | 
55 |         nft_account_data
56 |             .serialize(&mut &mut nft_account.data.borrow_mut()[..])
57 |             .map_err(|err| {
58 |                 msg!("Receiving message as string utf8 failed, {:?}", err);
59 |                 ProgramError::InvalidInstructionData
60 |             })?;
61 |     }
62 | 
63 |     if *instruction_byte == 1 {
64 |         let mut nft_account_data: SaleAccount =
65 |             try_from_slice_unchecked(&nft_account.data.borrow()).map_err(|err| {
66 |                 msg!("Receiving message as string utf8 failed, {:?}", err);
67 |                 ProgramError::InvalidInstructionData
68 |             })?;
69 | 
70 |         nft_account_data.is_available = "0".to_string();
71 |         nft_account_data
72 |             .serialize(&mut &mut nft_account.data.borrow_mut()[..])
73 |             .map_err(|err| {
74 |                 msg!("Receiving message as string utf8 failed, {:?}", err);
75 |                 ProgramError::InvalidInstructionData
76 |             })?;
77 |     }
78 |     Ok(())
79 | }
80 | 


--------------------------------------------------------------------------------
/src/pages/Home/Home.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 |   margin: 0;
  4 |   padding: 0;
  5 |   scroll-behavior: smooth;
  6 | }
  7 | body {
  8 |   font-family: "Roboto", sans-serif;
  9 |   background: #00002e;
 10 |   overflow-x: hidden;
 11 | }
 12 | .main-cont {
 13 |   margin: 10px;
 14 |   padding: 5rem;
 15 | }
 16 | .container {
 17 |   display: flex;
 18 |   flex-wrap: wrap;
 19 |   justify-content: center;
 20 |   align-items: center;
 21 |   margin: 10%;
 22 | }
 23 | .Head {
 24 |   display: flex;
 25 |   flex-direction: column;
 26 | }section{
 27 |   position: relative;
 28 |   width: 100%;
 29 |   /* background-color: rgb(255, 196, 0); */
 30 |   height: 100vh;
 31 |   display: flex;
 32 |   justify-content: center;
 33 |   align-items: center;
 34 | }
 35 | section:before{
 36 |   content: '';
 37 |   position: absolute;
 38 |   bottom: 0;
 39 |   width: 100%;
 40 |   height: 100px;
 41 |   background: linear-gradient(to top,#00002e,transparent);
 42 |   z-index: 1000;
 43 | }
 44 | section .img{
 45 |   position: absolute;
 46 |   top: 0;
 47 |   left: 0;
 48 |   width: 100%;
 49 |   height: 100%;
 50 |   object-fit: cover;
 51 |   pointer-events: none;
 52 | }
 53 | #moon{
 54 | margin-left: 30%;
 55 | margin-top: -5%;
 56 | width: 20%;
 57 | height: 40%;
 58 | mix-blend-mode: screen;
 59 | }
 60 | section #mountain{
 61 |   z-index: 10;
 62 | }
 63 | #text{
 64 |   position: absolute;
 65 |   color: white;
 66 |   white-space: nowrap;
 67 |   font-size: 9.5vw;
 68 |   z-index: 9;
 69 |   overflow-y: hidden;
 70 |   opacity:1;
 71 |   font-family: 'Monoton', cursive;
 72 |   font-size: 8vw;
 73 |   margin-left: 20%;
 74 |   transition: opacity 0.6s ease-in ;
 75 |   /* margin-top: 5%; */
 76 | }
 77 | section .btn{
 78 |   text-decoration: none;
 79 |   display: inline-block;
 80 |   margin-left: 15%;
 81 |   margin-bottom: -5%;
 82 |   padding: 6px 25px;
 83 |   border-radius: 40px;
 84 |   background: #fff;
 85 |   color: #2e0028;
 86 |   font-size: 1.5em;
 87 |   z-index: 9;
 88 |   overflow-y: hidden;
 89 |   transform: translateY(100px);
 90 | }
 91 | .browser-btn {
 92 |     display: flex;
 93 |     justify-content: center;
 94 |     align-items: center;
 95 |   padding: 1.5em 5em;
 96 |   width: 80px;
 97 |   height: 45px;
 98 |   background: transparent;
 99 |   border: none;
100 |   border-radius: 0.5rem;
101 |   color: #fff;
102 |   font-size: 1rem;
103 |   font-weight: 700;
104 |   letter-spacing: 0.2rem;
105 |   text-align: center;
106 |   outline: none;
107 |   cursor: pointer;
108 |   transition: 0.2s ease-in-out;
109 |   box-shadow: -2px -2px 6px rgba(21, 34, 71, 0.7),
110 |   -2px -2px 4px rgba(191, 198, 212, 0.4),
111 |   2px 2px 2px rgba(168, 168, 211, 0.13), 2px 2px 4px rgba(0, 0, 0, 0.1);
112 | }
113 | .browser-btn:hover {
114 |   box-shadow: -2px -2px 6px rgba(36, 58, 153, 0.6),
115 |     -2px -2px 4px rgba(255, 255, 255, 0.4),
116 |     2px 2px 2px rgba(255, 255, 255, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.1);
117 | }
118 | .browser-btn:active {
119 |   box-shadow: inset -2px -2px 6px rgba(1, 0, 8, 0.747),
120 |     inset -2px -2px 4px rgba(255, 255, 255, 0.5),
121 |     inset 2px 2px 2px rgba(241, 231, 231, 0.075),
122 |     inset 2px 2px 4px rgba(3, 3, 36, 0.877);
123 | }


--------------------------------------------------------------------------------
/src/pages/CreateNFT/FileUpload/FileUpload.css:
--------------------------------------------------------------------------------
  1 | .inner-container {
  2 |   height: 500px;
  3 |   border-radius: 40px;
  4 |   background: transparent;
  5 |   box-shadow: 3px 3px 6px #121230, -1px -1px 3px #393966;
  6 |   display: flex;
  7 |   align-items: center;
  8 |   flex-direction: column;
  9 |   align-self: center;
 10 |   margin-right: 100;
 11 | }
 12 | @media screen and (max-width: 1200px) {
 13 |   .inner-container{
 14 |     padding: 0;
 15 |   }
 16 | }
 17 | .line {
 18 |   transition: box-shadow 0.1s ease-out;
 19 |   height: 0.8%;
 20 |   position: relative;
 21 |   width: 100%;
 22 |   border-radius: 100px;
 23 |   box-shadow: -0.3em -0.2em 0.5em rgb(34, 51, 100),
 24 |     inset 0.4em 0.5em 0.9em #04031b75, 0.3em 0.2em 0.5em #02051690,
 25 |     inset -0.4em -0.5em 0.9em #06012590;
 26 | }
 27 | .sub-header {
 28 |   padding: 0.3em 1em 0.5em;
 29 |   font-weight: 400;
 30 |   font-size: 40px;
 31 |   color: rgb(219, 213, 213);
 32 |   font-family: "Bellefair", serif;
 33 |   position: relative;
 34 |   line-height: 1.3;
 35 |   text-align: center;
 36 | }
 37 | .draggable-cont {
 38 |   display: flex;
 39 |   flex-direction: column;
 40 |   /* align-items: center; */
 41 |   justify-content: center;
 42 |   width: 630px;
 43 |   height: 500px;
 44 | }
 45 | 
 46 | input {
 47 |   display: none;
 48 | }
 49 | 
 50 | .helper-text {
 51 |   display: flex;
 52 |   align-items: center;
 53 |   justify-content: center;
 54 |   margin: 20px;
 55 |   width: 90%;
 56 |   height: 300px;
 57 |   border: 2px dashed rgb(34, 38, 51);
 58 |   backdrop-filter: blur(5px);
 59 |   background-color: rgba(58, 58, 59, 0.2);
 60 |   /* background-color: yellow; */
 61 |   font-size: 32px;
 62 |   font-size: 20px;
 63 |   color: rgb(180, 175, 175);
 64 |   font-family: "Pollins", sans-serif;
 65 |   position: relative;
 66 |   text-align: center;
 67 | }
 68 | .browser-btn {
 69 |     display: flex;
 70 |     justify-content: center;
 71 |     align-items: center;
 72 |   padding: 1.5em 5em;
 73 |   width: 80px;
 74 |   height: 45px;
 75 |   background: transparent;
 76 |   border: none;
 77 |   border-radius: 0.5rem;
 78 |   color: #fff;
 79 |   font-size: 1rem;
 80 |   font-weight: 700;
 81 |   letter-spacing: 0.2rem;
 82 |   text-align: center;
 83 |   outline: none;
 84 |   cursor: pointer;
 85 |   transition: 0.2s ease-in-out;
 86 |   box-shadow: -2px -2px 6px rgba(21, 34, 71, 0.7),
 87 |   -2px -2px 4px rgba(191, 198, 212, 0.4),
 88 |   2px 2px 2px rgba(168, 168, 211, 0.13), 2px 2px 4px rgba(0, 0, 0, 0.1);
 89 | }
 90 | .browser-btn:hover {
 91 |   box-shadow: -2px -2px 6px rgba(36, 58, 153, 0.6),
 92 |     -2px -2px 4px rgba(255, 255, 255, 0.4),
 93 |     2px 2px 2px rgba(255, 255, 255, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.1);
 94 | }
 95 | .browser-btn:active {
 96 |   box-shadow: inset -2px -2px 6px rgba(1, 0, 8, 0.747),
 97 |     inset -2px -2px 4px rgba(255, 255, 255, 0.5),
 98 |     inset 2px 2px 2px rgba(241, 231, 231, 0.075),
 99 |     inset 2px 2px 4px rgba(3, 3, 36, 0.877);
100 | }
101 | 
102 | .file-browser-cont {
103 |   display: flex;
104 |   margin: 10px;
105 |   margin-bottom: 20px;
106 |   padding-left: 25px;
107 |   justify-content: center;
108 |   align-items: center;
109 |   /* background-color: yellow; */
110 | }
111 | .btn-upload{
112 |     display: flex;
113 |   margin-top: 10px;
114 |   margin-right: 10%;
115 |   margin-left: 10%;
116 |   justify-content: center;
117 |   align-items: center;
118 | }
119 | 


--------------------------------------------------------------------------------
/src/utils/customNFT/metaplex/ids.js:
--------------------------------------------------------------------------------
  1 | import { PublicKey } from '@solana/web3.js';
  2 | import { findProgramAddress } from './utils';
  3 | 
  4 | export const STORE_OWNER_ADDRESS = process.env
  5 |   .REACT_APP_STORE_OWNER_ADDRESS_ADDRESS
  6 |   ? new PublicKey(`${process.env.REACT_APP_STORE_OWNER_ADDRESS_ADDRESS}`) // DEFAULT STORE FRONT OWNER FOR METAPLEX
  7 |   : undefined;
  8 | console.debug(`Store owner address: ${STORE_OWNER_ADDRESS?.toBase58()}`);
  9 | 
 10 | export const AR_SOL_HOLDER_ID = new PublicKey(
 11 |   'HvwC9QSAzvGXhhVrgPmauVwFWcYZhne3hVot9EbHuFTm',
 12 | );
 13 | 
 14 | export const WRAPPED_SOL_MINT = new PublicKey(
 15 |   'So11111111111111111111111111111111111111112',
 16 | );
 17 | export const TOKEN_PROGRAM_ID = new PublicKey(
 18 |   'TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA',
 19 | );
 20 | 
 21 | export const SPL_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID = new PublicKey(
 22 |   'ATokenGPvbdGVxr1b2hvZbsiqW5xWH25efTNsLJA8knL',
 23 | );
 24 | export const BPF_UPGRADE_LOADER_ID = new PublicKey(
 25 |   'BPFLoaderUpgradeab1e11111111111111111111111',
 26 | );
 27 | 
 28 | export const METADATA_PROGRAM_ID = new PublicKey(
 29 |   'metaqbxxUerdq28cj1RbAWkYQm3ybzjb6a8bt518x1s',
 30 |   // 'GCUQ7oWCzgtRKnHnuJGxpr5XVeEkxYUXwTKYcqGtxLv4',
 31 | );
 32 | 
 33 | export const MEMO_ID = new PublicKey(
 34 |   'MemoSq4gqABAXKb96qnH8TysNcWxMyWCqXgDLGmfcHr',
 35 | );
 36 | 
 37 | export const VAULT_ID = new PublicKey(
 38 |   'vau1zxA2LbssAUEF7Gpw91zMM1LvXrvpzJtmZ58rPsn',
 39 |   // '41cCnZ1Z1upJdtsS1tzFGR34cPFgJLzvJFmgYKpCqkz7',
 40 | );
 41 | 
 42 | export const AUCTION_ID = new PublicKey(
 43 |   'auctxRXPeJoc4817jDhf4HbjnhEcr1cCXenosMhK5R8',
 44 |   // '6u5XVthCStUfmNrYhFsST94oKxzwEZfZFHFhiCnB2nR1',
 45 | );
 46 | 
 47 | export const METAPLEX_ID = new PublicKey(
 48 |   'p1exdMJcjVao65QdewkaZRUnU6VPSXhus9n2GzWfh98',
 49 |   // '98jcGaKLKx9vv33H9edLUXAydrSipHhJGDQuPXBVPVGp',
 50 | );
 51 | 
 52 | export const SYSTEM = new PublicKey('11111111111111111111111111111111');
 53 | 
 54 | export const ENABLE_FEES_INPUT = false;
 55 | 
 56 | // legacy pools are used to show users contributions in those pools to allow for withdrawals of funds
 57 | export const PROGRAM_IDS = [
 58 |   {
 59 |     name: 'mainnet-beta',
 60 |   },
 61 |   {
 62 |     name: 'testnet',
 63 |   },
 64 | 
 65 |   {
 66 |     name: 'devnet',
 67 |   },
 68 |   {
 69 |     name: 'localnet',
 70 |   },
 71 | ];
 72 | 
 73 | const getStoreID = async () => {
 74 |   if (!STORE_OWNER_ADDRESS) {
 75 |     return undefined;
 76 |   }
 77 | 
 78 |   const programs = await findProgramAddress(
 79 |     [
 80 |       Buffer.from('metaplex'),
 81 |       METAPLEX_ID.toBuffer(),
 82 |       STORE_OWNER_ADDRESS.toBuffer(),
 83 |     ],
 84 |     METAPLEX_ID,
 85 |   );
 86 |   const CUSTOM = programs[0];
 87 | 
 88 |   return CUSTOM;
 89 | };
 90 | 
 91 | let STORE;
 92 | 
 93 | export const setProgramIds = async (envName) => {
 94 |   const instance = PROGRAM_IDS.find((env) => envName.indexOf(env.name) >= 0);
 95 |   if (!instance) {
 96 |     return;
 97 |   }
 98 | 
 99 |   if (!STORE) {
100 |     STORE = await getStoreID();
101 |   }
102 | };
103 | 
104 | export const programIds = () => ({
105 |   token: TOKEN_PROGRAM_ID,
106 |   associatedToken: SPL_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID,
107 |   bpf_upgrade_loader: BPF_UPGRADE_LOADER_ID,
108 |   system: SYSTEM,
109 |   metadata: METADATA_PROGRAM_ID,
110 |   memo: MEMO_ID,
111 |   vault: VAULT_ID,
112 |   auction: AUCTION_ID,
113 |   metaplex: METAPLEX_ID,
114 |   store: STORE,
115 | });
116 | 


--------------------------------------------------------------------------------
/src/components/Stepper/Stepper.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import PropTypes from "prop-types";
  3 | import "./Stepper.css";
  4 | 
  5 | export default class Stepper extends Component {
  6 |   constructor() {
  7 |     super();
  8 |     this.state = {
  9 |       // Completed - to add a check mark
 10 |       // Selected - to fill step with color
 11 |       // Highlighted - to make text of selected step bold
 12 |       steps: []
 13 |     };
 14 |   }
 15 | 
 16 |   componentDidMount() {
 17 |     const { steps, currentStepNumber } = this.props;
 18 | 
 19 |     const stepsState = steps.map((step, index) => {
 20 |       const stepObj = {};
 21 |       stepObj.description = step;
 22 |       stepObj.highlighted = index === 0 ? true : false;
 23 |       stepObj.selected = index === 0 ? true : false;
 24 |       stepObj.completed = false;
 25 |       return stepObj;
 26 |     });
 27 | 
 28 |     const currentSteps = this.updateStep(currentStepNumber, stepsState);
 29 | 
 30 |     this.setState({
 31 |       steps: currentSteps
 32 |     });
 33 |   }
 34 | 
 35 |   componentDidUpdate(prevProps) {
 36 |     const { steps } = this.state;
 37 |     const currentSteps = this.updateStep(this.props.currentStepNumber, steps);
 38 | 
 39 |     if (prevProps.currentStepNumber !== this.props.currentStepNumber)
 40 |       this.setState({
 41 |         steps: currentSteps
 42 |       });
 43 |   }
 44 | 
 45 |   updateStep(stepNumber, steps) {
 46 |     const newSteps = [...steps];
 47 |     let stepCounter = 0;
 48 | 
 49 |     // Completed - to add a check mark
 50 |     // Selected - to fill step with color
 51 |     // Highlighted - to make text of selected step bold
 52 | 
 53 |     while (stepCounter < newSteps.length) {
 54 |       // Current step
 55 |       if (stepCounter === stepNumber) {
 56 |         newSteps[stepCounter] = {
 57 |           ...newSteps[stepCounter],
 58 |           highlighted: true,
 59 |           selected: true,
 60 |           completed: false
 61 |         };
 62 |         stepCounter++;
 63 |       }
 64 |       // Past step
 65 |       else if (stepCounter < stepNumber) {
 66 |         newSteps[stepCounter] = {
 67 |           ...newSteps[stepCounter],
 68 |           highlighted: false,
 69 |           selected: true,
 70 |           completed: true
 71 |         };
 72 |         stepCounter++;
 73 |       }
 74 |       // Future step
 75 |       else {
 76 |         newSteps[stepCounter] = {
 77 |           ...newSteps[stepCounter],
 78 |           highlighted: false,
 79 |           selected: false,
 80 |           completed: false
 81 |         };
 82 |         stepCounter++;
 83 |       }
 84 |     }
 85 | 
 86 |     return newSteps;
 87 |   }
 88 | 
 89 |   render() {
 90 |     const { direction, stepColor } = this.props;
 91 |     const { steps } = this.state;
 92 |     const stepsJSX = steps.map((step, index) => {
 93 |       return (
 94 |         <div className="step-wrapper" key={index}>
 95 |           <div
 96 |             className={`step-number ${
 97 |               step.selected ? "step-number-selected" : "step-number-disabled"
 98 |             }`}
 99 |             style={{ background: `${step.selected ? stepColor : "none"}` }}
100 |           >
101 |             {step.completed ? <span>&#10003;</span> : index + 1}
102 |           </div>
103 |           <div
104 |             className={`step-description ${step.highlighted &&
105 |               "step-description-active"}`}
106 |           >
107 |             {step.description}
108 |           </div>
109 |           {index !== steps.length - 1 && (
110 |             <div className={`divider-line divider-line-${steps.length}`} />
111 |           )}
112 |         </div>
113 |       );
114 |     });
115 | 
116 |     return <div className={`stepper-wrapper-${direction}`}>{stepsJSX}</div>;
117 |   }
118 | }
119 | 
120 | Stepper.propTypes = {
121 |   direction: PropTypes.string.isRequired,
122 |   currentStepNumber: PropTypes.number.isRequired,
123 |   steps: PropTypes.array.isRequired,
124 |   stepColor: PropTypes.string.isRequired
125 | };


--------------------------------------------------------------------------------
/src/components/navbar/Navbar.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Roboto');
  2 | 
  3 | body {
  4 |   font-family: 'Roboto', sans-serif;
  5 |   background: #00002E;
  6 |   overflow-y: scroll; 
  7 | }
  8 | * {
  9 |   margin: 0;
 10 |   padding: 0;
 11 | }
 12 | #nav{
 13 |   padding-bottom: 0px !important;
 14 | }
 15 | .navbar-logo {
 16 |   padding: 15px;
 17 |   color: #fff;
 18 |   pointer-events: none;
 19 | }
 20 | .navbar-brand{
 21 |     margin-left: 10%;
 22 | 
 23 | }
 24 | .navbar-mainbg {
 25 |   background-color: #3c3fe4;
 26 |   padding: 0;
 27 | }
 28 | 
 29 | #navbarSupportedContent {
 30 |   overflow: hidden;
 31 |   position: relative;
 32 | }
 33 | #navbarSupportedContent ul {
 34 |   padding-left: 20px;
 35 |   padding-right: 20px;
 36 |   margin: 0px;
 37 | }
 38 | 
 39 | #navbarSupportedContent li {
 40 |   list-style-type: none;
 41 |   float: left;
 42 | }
 43 | #navbarSupportedContent ul li a {
 44 |   color: rgba(255, 255, 255, 0.5);
 45 |   text-decoration: none;
 46 |   font-size: 15px;
 47 |   display: block;
 48 |   padding: 20px 20px;
 49 |   transition-duration: 0.6s;
 50 |   transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 51 |   position: relative;
 52 | }
 53 | #navbarSupportedContent > ul > li.active > a {
 54 |   color: #6cdbeb;
 55 |   background-color: transparent;
 56 |   transition: all 0.7s;
 57 | }
 58 | #navbarSupportedContent a:not(:only-child):after {
 59 |   content: '\f105';
 60 |   position: absolute;
 61 |   right: 20px;
 62 |   top: 10px;
 63 |   font-size: 14px;
 64 |   font-family: 'Font Awesome 5 Free';
 65 |   display: inline-block;
 66 |   padding-right: 3px;
 67 |   vertical-align: middle;
 68 |   font-weight: 900;
 69 |   transition: 0.5s;
 70 | }
 71 | #navbarSupportedContent .active > a:not(:only-child):after {
 72 |   transform: rotate(90deg);
 73 | }
 74 | 
 75 | .hori-selector {
 76 |   display: flex;
 77 |   position: absolute;
 78 |   height: 100%;
 79 |   top: 0px;
 80 |   left: 0px;
 81 |   transition-duration: 0.6s;
 82 |   transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 83 |   background-color: #00002E;
 84 |   border-top-left-radius: 15px;
 85 |   border-top-right-radius: 15px;
 86 |   margin-top: 10px;
 87 |   margin-bottom: 0;
 88 | }
 89 | .hori-selector .right,
 90 | .hori-selector .left {
 91 |   position: absolute;
 92 |   width: 25px;
 93 |   height: 25px;
 94 |   background-color: #00002E;
 95 |   bottom: 10px;
 96 | }
 97 | .hori-selector .right {
 98 |   right: -25px;
 99 | }
100 | .hori-selector .left {
101 |   left: -25px;
102 | }
103 | .hori-selector .right:before,
104 | .hori-selector .left:before {
105 |   content: '';
106 |   position: absolute;
107 |   width: 50px;
108 |   height: 50px;
109 |   border-radius: 50%;
110 |   background-color: #3c3fe4;
111 | }
112 | .hori-selector .right:before {
113 |   bottom: 0;
114 |   right: -25px;
115 | }
116 | .hori-selector .left:before {
117 |   bottom: 0;
118 |   left: -25px;
119 | }
120 | li {
121 |   display: flex;
122 |   align-items: center;    
123 | }
124 | a {
125 |   display: flex;
126 |   align-self: center;
127 | }
128 | @media (max-width: 991px) {
129 |   #navbarSupportedContent ul li a {
130 |     padding: 12px 30px;
131 |   }
132 |   .hori-selector {
133 |     margin-top: 0px;
134 |     margin-left: 10px;
135 |     border-radius: 0;
136 |     border-top-left-radius: 25px;
137 |     border-bottom-left-radius: 25px;
138 |   }
139 |   .hori-selector .left,
140 |   .hori-selector .right {
141 |     right: 10px;
142 |   }
143 |   .hori-selector .left {
144 |     top: -25px;
145 |     left: auto;
146 |   }
147 |   .hori-selector .right {
148 |     bottom: -25px;
149 |   }
150 |   .hori-selector .left:before {
151 |     left: -25px;
152 |     top: -25px;
153 |   }
154 |   .hori-selector .right:before {
155 |     bottom: -25px;
156 |     left: -25px;
157 |   }
158 |   /* changes */
159 |   .navbar-toggler{
160 |    background:#6cdbeb ;
161 |    width: fit-content;
162 |    box-shadow: none;
163 |   }
164 |   .navbar-toggler:hover{
165 |     box-shadow: none;
166 |    }
167 | }


--------------------------------------------------------------------------------
/src/components/navbar/Navbar.js:
--------------------------------------------------------------------------------
  1 | import React , {useEffect} from 'react'
  2 | import { NavLink } from 'react-router-dom';
  3 | import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
  4 | import { useWallet } from '@solana/wallet-adapter-react';
  5 | import $ from 'jquery';
  6 | import './Navbar.css';
  7 | require('@solana/wallet-adapter-react-ui/styles.css');
  8 | const Navbar = () => {
  9 |   function animation(){
 10 |     var tabsNewAnim = $('#navbarSupportedContent');
 11 |     var activeItemNewAnim = tabsNewAnim.find('.active');
 12 |     var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
 13 |     var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
 14 |     var itemPosNewAnimTop = activeItemNewAnim.position();
 15 |     var itemPosNewAnimLeft = activeItemNewAnim.position();
 16 |     $(".hori-selector").css({
 17 |       "top":itemPosNewAnimTop.top + "px", 
 18 |       "left":itemPosNewAnimLeft.left + "px",
 19 |       "height": activeWidthNewAnimHeight + "px",
 20 |       "width": activeWidthNewAnimWidth + "px"
 21 |     });
 22 |     $("#navbarSupportedContent").on("click","li",function(e){
 23 |       $('#navbarSupportedContent ul li').removeClass("active");
 24 |       $(this).addClass('active');
 25 |       var activeWidthNewAnimHeight = $(this).innerHeight();
 26 |       var activeWidthNewAnimWidth = $(this).innerWidth();
 27 |       var itemPosNewAnimTop = $(this).position();
 28 |       var itemPosNewAnimLeft = $(this).position();
 29 |       $(".hori-selector").css({
 30 |         "top":itemPosNewAnimTop.top + "px", 
 31 |         "left":itemPosNewAnimLeft.left + "px",
 32 |         "height": activeWidthNewAnimHeight + "px",
 33 |         "width": activeWidthNewAnimWidth + "px"
 34 |       });
 35 |     });
 36 |   }
 37 | 
 38 |   useEffect(() => {
 39 |     
 40 |     animation();
 41 |     $(window).on('resize', function(){
 42 |       setTimeout(function(){ animation(); }, 500);
 43 |     });
 44 |     
 45 |   }, []);
 46 | 
 47 |   return (
 48 |   <nav className="navbar navbar-expand-lg navbar-mainbg" id="nav">
 49 |     
 50 |       <NavLink className="navbar-brand navbar-logo ml-auto" to="/" exact>
 51 |       
 52 |         <div style={{fontSize: 35}}>SILKROAD</div>
 53 |       </NavLink>
 54 |     
 55 |      
 56 |       <button 
 57 |         className="navbar-toggler"
 58 |         onClick={ function(){
 59 |           setTimeout(function(){ animation(); });
 60 |         }}
 61 |         type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 62 |         <i className="fas fa-bars text-white"></i>
 63 |       </button>
 64 |       <div class="container-fluid">
 65 |       <div 
 66 |         className="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
 67 |         <ul className="navbar-nav-ml-auto" id="navbarSupportedContent" style={{marginRight: 20}}>
 68 |             
 69 |             <div className="hori-selector">
 70 |               <div className="left"></div>
 71 |               <div className="right"></div>
 72 |             </div>
 73 |             <li className="nav-item active">
 74 |               <NavLink className="nav-link" to="/" exact>
 75 |                 <i 
 76 |                 className="fas ">
 77 |                 </i>Home
 78 |               </NavLink>
 79 |             </li>
 80 | 
 81 |             <li className="nav-item">
 82 |               <NavLink className="nav-link" to="/explore" exact>
 83 |                 <i 
 84 |                 className="far ">
 85 |                 </i>Explore
 86 |               </NavLink> 
 87 |             </li>
 88 | 
 89 |             <li className="nav-item">
 90 |               <NavLink className="nav-link" to="/createnft" exact>
 91 |                 <i 
 92 |                 className="far">
 93 |                 </i>Create
 94 |               </NavLink>
 95 |             </li>
 96 |         </ul>
 97 |         <WalletMultiButton style={{backgroundColor: "#c212b3"}}/>
 98 |       </div>
 99 |       </div>
100 |   </nav>
101 |   )
102 | }
103 | export default Navbar;


--------------------------------------------------------------------------------
/src/components/TextInput/TextInput.css:
--------------------------------------------------------------------------------
  1 | /* input{ */
  2 |   /* background: rgba(255, 255, 255, 0.15);
  3 |   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  4 |   border-radius: 2rem;
  5 |   width: 80%;
  6 |   height: 3rem;
  7 |   padding: 1rem;
  8 |   border: none;
  9 |   outline: none;
 10 |   color: #3c354e;
 11 |   font-size: 1rem;
 12 |   
 13 | }
 14 | 
 15 | /* .input-field:focus {
 16 |   display: inline-block;
 17 |   box-shadow: 0 0 0 0.2rem #b9abe0;
 18 |   backdrop-filter: blur(12rem);
 19 |   border-radius: 2rem;
 20 | }
 21 | .input-field::placeholder {
 22 |   color: #b9abe099;
 23 |   font-weight: 100;
 24 |   font-size: 1rem;
 25 | } */
 26 | 
 27 | 
 28 | 
 29 | /* .field input{
 30 |     width: 100%;
 31 |     height: 45px;
 32 |     margin-right: 10%;
 33 |     margin-left: 10%;
 34 |     padding-left: 45px;
 35 |     font-size: 18px;
 36 |     outline: none;
 37 |     border: none;
 38 |     color: #fff8f8;
 39 |     background: transparent;
 40 |     border-radius: 25px;
 41 |     box-shadow: inset 2px 2px 5px #babecc,
 42 |                 inset -5px -5px 10px #ffffff73;
 43 |   }
 44 |   
 45 |   .field input:focus ~ label{
 46 |     box-shadow: inset 2px 2px 5px #babecc,
 47 |                 inset -1px -1px 2px #ffffff73;
 48 |   }
 49 |   .field label{
 50 |     position: absolute;
 51 |     top: 50%;
 52 |     left: 45px;
 53 |     pointer-events: none;
 54 |     color: #666666;
 55 |     transform: translateY(-50%);
 56 |   }
 57 |   
 58 |   
 59 |   .field input:focus ~ label{
 60 |     opacity: 0;
 61 |   } */
 62 | 
 63 |   .field {
 64 |     width: 100%;
 65 |     height: 56px;
 66 |     border-radius: 4px;
 67 |     position: relative;
 68 |     background-color: rgba(255, 255, 255, 0.3);
 69 |     transition: 0.3s background-color ease-in-out, 0.3s box-shadow ease-in-out;
 70 |   }
 71 |   
 72 |   .field:hover {
 73 |     background-color: rgba(255, 255, 255, 0.45);
 74 |     box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
 75 |   }
 76 |   
 77 |   .field.active {
 78 |     background-color: #ffffff;
 79 |     box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.2);
 80 |   }
 81 |   
 82 |   .field.active input {
 83 |     padding: 24px 16px 8px 16px;
 84 |   }
 85 |   
 86 |   .field.active input + label {
 87 |     top: 4px;
 88 |     opacity: 1;
 89 |     color: #512da8;
 90 |   }
 91 |   
 92 |   .field.locked {
 93 |     pointer-events: none;
 94 |   }
 95 |   
 96 |   .field input {
 97 |     width: 100%;
 98 |     height: 56px;
 99 |     position: relative;
100 |     padding: 0px 16px;
101 |     border: none;
102 |     border-radius: 4px;
103 |     font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
104 |     font-size: 16px;
105 |     font-weight: 400;
106 |     line-height: normal;
107 |     background-color: transparent;
108 |     color: #282828;
109 |     outline: none;
110 |     box-shadow: 0px 4px 20px 0px transparent;
111 |     transition: 0.3s background-color ease-in-out, 0.3s box-shadow ease-in-out,
112 |       0.1s padding ease-in-out;
113 |     -webkit-appearance: none;
114 |   }
115 |   
116 |   .field input::-webkit-input-placeholder {
117 |     color: rgba(255, 255, 255, 0.8);
118 |   }
119 |   .field input::-moz-placeholder {
120 |     color: rgba(255, 255, 255, 0.8);
121 |   }
122 |   .field input:-ms-input-placeholder {
123 |     color: rgba(255, 255, 255, 0.8);
124 |   }
125 |   .field input:-moz-placeholder {
126 |     color: rgba(255, 255, 255, 0.8);
127 |   }
128 |   
129 |   .field input + label {
130 |     position: absolute;
131 |     top: 24px;
132 |     left: 16px;
133 |     font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
134 |     font-size: 12px;
135 |     font-weight: 600;
136 |     line-height: 24px;
137 |     color: #ffffff;
138 |     opacity: 0;
139 |     pointer-events: none;
140 |     transition: 0.1s all ease-in-out;
141 |   }
142 |   
143 |   .field input + label.error {
144 |     color: #ec392f;
145 |   }
146 |   
147 |   .field p.predicted {
148 |     position: absolute;
149 |     top: 8px;
150 |     left: 16px;
151 |     font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
152 |     font-size: 16px;
153 |     font-weight: 400;
154 |     line-height: 24px;
155 |     color: #e0e0e0;
156 |     opacity: 1;
157 |     pointer-events: none;
158 |   }
159 |   


--------------------------------------------------------------------------------
/src/components/PopUp/SellPopUp.js:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { Modal, Button, Form } from "react-bootstrap";
  3 | import React from "react";
  4 | import { InputGroup, FormControl } from "react-bootstrap";
  5 | import "./PopUp.css";
  6 | import { createSale } from "../../utils/createSale";
  7 | 
  8 | 
  9 | export default class PopUp extends React.Component {
 10 |     data;
 11 |     constructor(props) {
 12 |       super(props);
 13 |       this.handleChange = this.handleChange.bind(this);
 14 |       this.handleFormSubmit = this.handleFormSubmit.bind(this);
 15 |       this.state = {
 16 |         price: " ",
 17 |         showHide: false,
 18 |         title: this.props.title,
 19 |         connection:this.props.connection,
 20 |         publicKey:this.props.publicKey,
 21 |         sendTransaction:this.props.sendTransaction,
 22 |         nft_address:this.props.nft
 23 |       }
 24 |     }
 25 |   
 26 |     handleChange = (e) => {
 27 |       this.setState({ [e.target.name]: e.target.value });
 28 |     }
 29 |     // on form submit...
 30 |     handleFormSubmit(e) {
 31 |       console.log(this.state)
 32 |       e.preventDefault()
 33 |       this.setState({ showHide: !this.state.showHide });
 34 |       createSale(this.state.nft_address,this.state.publicKey,this.state.price,this.state.connection,this.state.sendTransaction).then((res)=>{
 35 |         alert("Successfully Created Sale!")
 36 |       })
 37 |     }
 38 | 
 39 |   
 40 | 
 41 |   handleModalShowHide() {
 42 |     this.setState({ showHide: !this.state.showHide });
 43 |   }
 44 |   handlePay(){
 45 |     // this.setState({ showHide: !this.state.showHide });
 46 |   }
 47 |   render() {
 48 |     const sell = this.state.title==='Sell'?true:false;
 49 |     return (
 50 |       <div>
 51 |         <Button variant="outline-info" onClick={() => this.handleModalShowHide()} >
 52 |           {this.props.title}
 53 |         </Button>
 54 |         {sell? (
 55 |             <Modal  show={this.state.showHide} centered>
 56 |             <Modal.Header className="my-modal" closeButton onClick={() => this.handleModalShowHide()}>
 57 |               <Modal.Title>Create Sale</Modal.Title>
 58 |             </Modal.Header>
 59 |             <Modal.Body className="my-modal" >
 60 |   
 61 |               <Form.Label className="labels">Price </Form.Label>
 62 |               <InputGroup size="sm" className="mb-3">
 63 |                 <Form.Control
 64 |                   className=" input-field"
 65 |                   type="number"
 66 |                   placeholder="Price"
 67 |                   value={this.state.price}
 68 |                   onChange={this.handleChange}
 69 |                   name="price"
 70 |                 />
 71 |               </InputGroup>
 72 |             </Modal.Body>
 73 |             <Modal.Footer className="my-modal">
 74 |               <Button
 75 |                 variant="outline-info"
 76 |                 onClick={() => this.handleModalShowHide()}
 77 |               >
 78 |                 Close
 79 |               </Button>
 80 |               <Button className="save-btn" variant="info"
 81 |                 type="submit" onClick={this.handleFormSubmit}
 82 |               >
 83 |                 Save Changes
 84 |               </Button>
 85 |             </Modal.Footer>
 86 |           </Modal>
 87 |         ):(
 88 |           <Modal  show={this.state.showHide} centered>
 89 |             <Modal.Header className="my-modal" closeButton onClick={() => this.handleModalShowHide()}>
 90 |               <Modal.Title>Purchase NFT</Modal.Title>
 91 |             </Modal.Header>
 92 |             <Modal.Body className="my-modal" >
 93 |               <p>Click 'Pay' to confirm purchase!</p>
 94 |             </Modal.Body>
 95 |             <Modal.Footer className="my-modal">
 96 |               <Button
 97 |                 variant="outline-info"
 98 |                 onClick={() => this.handleModalShowHide()}
 99 |               >
100 |                 Close
101 |               </Button>
102 |               <Button className="save-btn" variant="info"
103 |                 type="submit" onClick={this.handlePay()}
104 |               >
105 |                 Pay
106 |               </Button>
107 |             </Modal.Footer>
108 |           </Modal>
109 |         )}
110 |         
111 |       </div>
112 |     );
113 |   }
114 | }
115 | 
116 | 


--------------------------------------------------------------------------------
/src/pages/Home/Home.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import './Home.css'
  3 | import { useState, useCallback, useEffect } from "react";
  4 | import ArtCard from "../../components/ArtCard/ArtCard";
  5 | import Header from "../../components/Header/Header";
  6 | import { useConnection, useWallet } from "@solana/wallet-adapter-react";
  7 | import { WalletNotConnectedError } from "@solana/wallet-adapter-base";
  8 | import { Button } from "react-bootstrap";
  9 | import image from "./../../img/stars.png";
 10 | import image1 from "./../../img/mountain_front.png";
 11 | import image2 from "./../../img/moon.png";
 12 | import CustomButton from "../../components/customButton/CustomButton";
 13 | // import CustomButton from '../../components/customButton/CustomButton'
 14 | import PopUp from "../../components/PopUp/SellPopUp";
 15 | const { programs } = require("@metaplex/js");
 16 | 
 17 | const Home = () => {
 18 |   const { connection } = useConnection();
 19 |   const { publicKey, sendTransaction } = useWallet();
 20 |   const [nfts, setNFTs] = useState([]);
 21 |   const fetchNFTs = async () => {
 22 |     if (!publicKey) throw new WalletNotConnectedError();
 23 |     let fetchednfts = await programs.metadata.Metadata.findByOwnerV2(
 24 |       connection,
 25 |       publicKey.toBase58()
 26 |     );
 27 |     // let ntfdata=[]
 28 |     // for(let nft of fetchednfts){
 29 |     //   const Metadata = await programs.metadata.Metadata.load(
 30 |     //     connection,
 31 |     //     nft.pubkey.toBase58()
 32 |     //   );
 33 |     //   axios.get(Metadata.data.data.uri).then((response) => {
 34 |     //     ntfdata.push(response.data)
 35 |     //   });
 36 |     // }
 37 |     setNFTs(fetchednfts); ////yeh set nhi ho rha
 38 |   };
 39 |   const [offsetY, setOffsetY] = useState(0);
 40 |   const [margin, setMargin] = useState("10%");
 41 | 
 42 |   const handleScroll = () => {
 43 |     setOffsetY(window.pageYOffset);
 44 |     setMargin({ margin: "-5%" });
 45 |   };
 46 |   useEffect(() => {
 47 |     window.addEventListener("scroll", handleScroll);
 48 |     return () => window.removeEventListener("scroll", handleScroll);
 49 |   }, []);
 50 | 
 51 |   return (
 52 |     <>
 53 |       <section>
 54 |         <img
 55 |           className="img"
 56 |           src={image}
 57 |           id="background"
 58 |           style={{ transform: `translateX(${-offsetY * 0.5}px)` }}
 59 |         />
 60 |         <div className="moons">
 61 |           <img className="img" src={image2} id="moon" />
 62 |         </div>
 63 |         <h2
 64 |           id="text"
 65 |           style={{
 66 |             transform: `translateY(${offsetY * 0.4}px)`,
 67 |             marginBottom: `${margin}`,
 68 |           }}
 69 |         >
 70 |           {" "}
 71 |           Silk Road
 72 |         </h2>
 73 |         <a
 74 |           href="#body"
 75 |           className="btn"
 76 |           id="btns"
 77 |           style={{ transform: `translateY(${offsetY * 0.3}px)` }}
 78 |         >
 79 |           NFTs
 80 |         </a>
 81 |         <img className="img" src={image1} id="mountain" />
 82 |         {/* <Helmet>
 83 |          <script src="./screen.js">
 84 |     
 85 | 
 86 |          </script>
 87 |       </Helmet> */}
 88 |       </section>
 89 |       <div className="main-cont" id="body">
 90 |         <div
 91 |           className="Head"
 92 |           style={{
 93 |             display: "flex",
 94 |             flexDirection: "column",
 95 |             alignItems: "center",
 96 |           }}
 97 |         >
 98 |           <Header heading="Your NFT's" />
 99 |           <button
100 |             className="browser-btn"
101 |             onClick={fetchNFTs}
102 |             style={{ width: 150, margin: 50 }}
103 |           >
104 |             Fetch
105 |           </button>
106 |         </div>
107 |         <div className="container">
108 |           {nfts.map((nft) => (
109 |             <ArtCard
110 |               key={nft.pubkey.toBase58()}
111 |               pubkey={nft.pubkey.toBase58()}
112 |               connection={connection}
113 |               publicKey={publicKey}
114 |               sendTransaction={sendTransaction}
115 |               type="Sell"
116 |             />
117 |           ))}
118 |         </div>
119 |         <hr className="hr-line" />
120 |       </div>
121 |     </>
122 |   );
123 | };
124 | 
125 | export default Home;
126 | 


--------------------------------------------------------------------------------
/src/pages/CreateNFT/Launch/Launch.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     box-sizing: border-box;
  3 | }
  4 | .boxs {
  5 |   position: relative;
  6 |   padding: 50px;
  7 |   width: 660px;
  8 |   height: 1100px;
  9 |   max-height: fit-content;
 10 |   display: flex;
 11 |   flex-direction: column;
 12 |   justify-content: center;
 13 |   align-items: center;
 14 |   background: rgba(255, 255, 255, 0.1);
 15 |   border-radius: 8px;
 16 |   box-shadow: 0 5px 35px rgba(0, 0, 0, 0.5);
 17 | }
 18 | 
 19 | .box:after {
 20 |   content: "";
 21 |   position: absolute;
 22 |   top: 5px;
 23 |   left: 5px;
 24 |   right: 5px;
 25 |   bottom: 5px;
 26 |   border-radius: 5px;
 27 |   pointer-events: none;
 28 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%,
 29 |     rgba(255, 255, 255, 0.1) 15%, transaparent 50%, transaparent 85%,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.3) 100%);
 30 | }
 31 | 
 32 | 
 33 | .box .text-field{
 34 |     position: relative ;
 35 |     width: 100%;
 36 |     margin-bottom: 20px;
 37 |     outline: none;
 38 |     border: 1px solid rgba(255,255,255,0.2);
 39 |     background: transparent;
 40 |     border-radius: 6px;
 41 |     padding: 8px;
 42 |     color: #fff;
 43 |     box-shadow: inset 0 0 25px rgba(0,0,0,0.2);
 44 |     font-size: 14px;
 45 |     font-weight: 300;
 46 | }
 47 | .llines{
 48 |     position: absolute;
 49 |     bottom: 0;
 50 |     left: 0;
 51 |     background-color: aqua;
 52 |   /* background: white; */
 53 |   width: 100%;
 54 |   border-radius: 50%;
 55 |   overflow: hidden;
 56 |   height: 2px;
 57 |   box-shadow: 0px 0px 12px aqua;
 58 |   background: linear-gradient(rgba(255, 255, 255, 0), rgb(16, 227, 255), rgba(255, 255, 255, 0));
 59 | }
 60 | .liness{
 61 |     position: absolute;
 62 |     top: 0;
 63 |     left: 0;
 64 |     background-color: aqua;
 65 |   /* background: white; */
 66 |   width: 100%;
 67 |   border-radius: 50%;
 68 |   overflow: hidden;
 69 |   height: 2px;
 70 |   box-shadow: 0px 0px 12px aqua;
 71 |   background: linear-gradient(rgba(255, 255, 255, 0), rgb(16, 227, 255), rgba(255, 255, 255, 0));
 72 |  }
 73 | .imag-box{
 74 |     position: relative;
 75 |     width: 50%;
 76 |     height: 400px;
 77 |     overflow: hidden;
 78 |     transition: 0.5s;
 79 |     border-left: 2px solid white;
 80 |     border-right: 2px solid white;
 81 |     border-bottom: 2px solid white;
 82 |     /* margin-bottom: 20%; */
 83 |     box-shadow: 0px 0px 8px aqua;
 84 |     border-top-left-radius: 50% 30% !important;
 85 |     border-top-right-radius: 50% 30% !important;
 86 | }
 87 | .imag-box:hover{
 88 |     z-index: 1;
 89 |     transform: scale(1.25);
 90 |     /* border-left: 1px solid white; */
 91 |     border: 2px solid #00002e;
 92 |     filter: brightness(1.1);
 93 | box-shadow: 0px 0px 35px #000;}
 94 | /* .imgBx:before{
 95 |     content: '';
 96 |     position: absolute;
 97 |     width: 100%;
 98 |     height: 100%;
 99 |     z-index: 1;
100 |     background: linear-gradient(180deg, rgb(0, 204, 255),rgba(8, 8, 8, 0.925));
101 |     mix-blend-mode: multiply;
102 |     opacity: 0;
103 |     transition: 0.5s;
104 | } */
105 | .imag-box img{
106 |     position: absolute;
107 |     object-fit: cover;
108 |     width: 100%;
109 |     height: 100%;
110 | 
111 | }
112 | 
113 | .conta{
114 |     width: 100%;
115 |     height: 400px;
116 |     display: flex;
117 |     justify-content: center;
118 |     align-items: center;
119 |     margin-bottom: 10px;
120 | }
121 | .contents{
122 |     position: relative;
123 |     width: 100%;
124 |     height: 100%;
125 |     z-index: 1;
126 |     display: flex;
127 |     padding: 20px;
128 |     align-items: flex-end;
129 | }
130 | .contents h2{
131 |     color: rgb(4, 16, 54);
132 |     transition: 0.5s;
133 |     text-align: center;
134 |     letter-spacing: 1px;
135 |     font-family: 'Roboto', sans-serif;
136 |     font-size: 18px;
137 |     transform: translateY(150px);
138 | }
139 | .imag-box:hover h2{
140 | 
141 |     transform: translateY(0);
142 |     transition-delay: 0.01s;
143 | }
144 | .conts{
145 |     display: flex;
146 |     flex-direction: column;
147 |   margin-top: 15%;
148 |   padding: 25px;
149 |   width: 100%;
150 |   height: 100%;
151 |   backdrop-filter: blur(5px);
152 |   background-color: rgba(58, 58, 59, 0.2);
153 |   /* background-color: yellow; */
154 |   font-size: 32px;
155 |   font-size: 20px;
156 |   color: rgb(180, 175, 175);
157 |   font-family: "Pollins", sans-serif;
158 |   position: relative;
159 | }
160 | .head-one{
161 |     margin: 15px;
162 |     letter-spacing: 2px;
163 |     text-transform: capitalize;
164 |     color: rgb(165, 163, 163);
165 |     font-size: 22px;
166 |     font-family:monospace;
167 | }
168 | .res-one{
169 |     border-bottom: 1px solid cyan;
170 |     width: 50%;
171 |     margin-bottom: 35px;
172 |     padding-left: 55px;
173 |     color: rgb(250, 250, 250);
174 |     font-size: 72px;
175 |     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
176 | }


--------------------------------------------------------------------------------
/src/utils/createSale.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Connection,
  3 |   TransactionInstruction,
  4 |   Transaction,
  5 |   sendAndConfirmTransaction,
  6 |   PublicKey,
  7 |   SystemProgram,
  8 |   Keypair,
  9 | } from "@solana/web3.js";
 10 | 
 11 | import * as borsh from 'borsh';
 12 | 
 13 | 
 14 | async function establishConnection():Promise<Connection> {
 15 |   const rpcUrl = "http://api.devnet.solana.com";
 16 |   return new Connection(rpcUrl, "confirmed");
 17 | }
 18 | 
 19 | export class SaleAccount {
 20 |   owner = ' '.repeat(44)
 21 |   nft_address = ' '.repeat(44)
 22 |   price = ' '.repeat(10)
 23 |   is_available = ' '
 24 |   constructor(fields: { owner: string, nft_address: string, price: string, is_available: string} | undefined = undefined) {
 25 |     if (fields) {
 26 |       this.owner = fields.owner;
 27 |       this.nft_address = fields.nft_address;
 28 |       this.price = fields.price;
 29 |       this.is_available = fields.is_available;
 30 |     }
 31 |   }
 32 | }
 33 | 
 34 | 
 35 | const SaleSchema = new Map([
 36 |   [SaleAccount, { kind: 'struct', fields: [['owner', 'string'], ['nft_address', 'string'], ['price', 'string'], ['is_available', 'string']] }],
 37 | ]);
 38 | 
 39 | export const Sale_Size = borsh.serialize(
 40 |   SaleSchema,
 41 |   new SaleAccount(),
 42 | ).length;
 43 |   
 44 | export const program_id = new PublicKey("J21V5E6uFj1dKUK3f3JQbmEdheuAUmoL56xD9BWzFTHn");
 45 |   
 46 | export async function createSale(nft_address: any, initializerAccount: PublicKey, money:number, connection:any, sendTransaction:any) {
 47 |   const initializerAccountKey =initializerAccount;
 48 |   const SaleAccountPubkey = await PublicKey.createWithSeed(
 49 |     initializerAccountKey,
 50 |     nft_address.slice(0,10),
 51 |     program_id
 52 |   );
 53 |   
 54 |   const lamports = await connection.getMinimumBalanceForRentExemption(
 55 |     Sale_Size
 56 |   );
 57 |   let price=money.toString()+' '.repeat(10-money.toString().length)
 58 |   const instruction = SystemProgram.createAccountWithSeed({
 59 |     fromPubkey: initializerAccountKey,
 60 |     basePubkey: initializerAccountKey,
 61 |     seed: nft_address.slice(0,10),
 62 |     newAccountPubkey: SaleAccountPubkey,
 63 |     lamports: lamports,
 64 |     space: Sale_Size,
 65 |     programId: program_id,
 66 |   });
 67 | 
 68 |   const transaction = new Transaction().add(instruction);
 69 |   const signature = await sendTransaction(transaction, connection);
 70 |   console.log('created nft account',SaleAccountPubkey.toBase58());
 71 |   await connection.confirmTransaction(signature, 'processed');
 72 |   
 73 |   const initAccount = new TransactionInstruction({
 74 |     programId: program_id,
 75 |     keys: [
 76 |       { pubkey: SaleAccountPubkey, isSigner: false, isWritable: true },
 77 |       { pubkey: initializerAccountKey, isSigner: true, isWritable: false },
 78 |       { pubkey: new PublicKey(nft_address), isSigner: false, isWritable: false },
 79 |     ],
 80 |     data: Buffer.from(
 81 |       Uint8Array.of(0, ...Array.from(new TextEncoder().encode(price)))
 82 |     ),
 83 |   });
 84 | 
 85 |   const transaction2 = new Transaction().add(initAccount);
 86 |   const signature2 = await sendTransaction(transaction2, connection);
 87 |   await connection.confirmTransaction(signature2, 'processed');
 88 | 
 89 |   return SaleAccountPubkey.toBase58();
 90 | }
 91 | 
 92 | export async function saleHappened(nft_address: string, initializerAccount: string) {
 93 | 
 94 |   const connection = await establishConnection();
 95 |   const initializerAccountKey :PublicKey = new PublicKey(initializerAccount)
 96 |   const SaleAccountPubkey = await PublicKey.createWithSeed(
 97 |     initializerAccountKey,
 98 |     nft_address.slice(0,10),
 99 |     program_id
100 |   );
101 | 
102 |   const accountInfo = await connection.getAccountInfo(SaleAccountPubkey);
103 |   if (accountInfo === null) {
104 |     throw 'Error: cannot find the account';
105 |   }
106 |   else {
107 |     const initAccount = new TransactionInstruction({
108 |       programId: program_id,
109 |       keys: [
110 |         { pubkey: SaleAccountPubkey, isSigner: false, isWritable: true },
111 |         { pubkey: initializerAccountKey, isSigner: true, isWritable: false },
112 |       ],
113 |       data: Buffer.from(
114 |         Uint8Array.of(1)
115 |       ),
116 |     });
117 | 
118 |     const transaction2 = new Transaction().add(initAccount);
119 | 
120 |     // await sendAndConfirmTransaction(connection, transaction2, [
121 |     //   initializerAccount,
122 |     // ]);
123 | 
124 |     return SaleAccountPubkey.toBase58()
125 | 
126 |   }
127 | }
128 | 
129 | export async function fetch(key: string) {
130 |     const connection = await establishConnection();
131 |     var salepubkey = new PublicKey(key);
132 |     const accountInfo = await connection.getAccountInfo(salepubkey);
133 |     if (accountInfo === null) {
134 |       throw Error
135 |     }
136 |     const Sale = borsh.deserialize(
137 |       SaleSchema,
138 |       SaleAccount,
139 |       accountInfo.data
140 |     );
141 |     return Sale
142 |   }
143 | 
144 | export async function fetchall() {
145 |     const connection = await establishConnection();
146 |     let abc= await connection.getProgramAccounts(program_id)
147 |     return abc
148 |   }
149 | 


--------------------------------------------------------------------------------
/src/pages/CreateNFT/CreateNFT.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 |   margin: 0;
  4 |   padding: 0;
  5 | }
  6 | u {
  7 |   text-align: center;
  8 |   font-size: 20px;
  9 | }
 10 | .progress-cont {
 11 |   display: flex;
 12 |   /* background-color: yellow; */
 13 |   flex-direction: column;
 14 |   align-items: center;
 15 |   margin-left: 10%;
 16 |   margin-top: 5%;
 17 |   padding-top: 30px;;
 18 |   color: rgb(165, 165, 165);
 19 |   font-family: "Poppins", sans-serif;
 20 |   /* background-color: greenyellow; */
 21 |   width: 100%
 22 | }
 23 | .options {
 24 |   /* background-color: gold; */
 25 |   display: flex;
 26 |   flex-wrap: wrap;
 27 |   justify-content: flex-end;
 28 |   align-items: center;
 29 |   margin-left: 2.5%;
 30 |   margin-right: 10%;
 31 |   margin-top: 5%;
 32 | }
 33 | .nft-container {
 34 |   display: flex;
 35 |   flex-direction: column;
 36 |   margin-left: 10%;
 37 |   margin-right: 10%;
 38 |   margin-top: 3%;
 39 |   margin-bottom: 3%;
 40 |   /* background-color: chartreuse; */
 41 | }
 42 | .pane-view {
 43 |   display: flex;
 44 |   flex-direction: row;
 45 |   padding:0;
 46 |   margin: 0;
 47 | }
 48 | .buttons {
 49 |   letter-spacing: 0.2rem;
 50 |   margin-top: 5%;
 51 |   display: flex;
 52 |   justify-content: space-evenly;
 53 | }
 54 | .step-btn {
 55 |   width: 160px;
 56 |   height: 60px;
 57 |   letter-spacing: 0.2rem;
 58 |   background: #00002e;
 59 |   position: relative;
 60 |   background: #00002e;
 61 |   margin-bottom: 25px;
 62 |   border-radius: 32px;
 63 |   text-align: center;
 64 |   cursor: pointer;
 65 |   color: white;
 66 |   transition: all 0.1s;
 67 | }
 68 | .step-btn:hover {
 69 |   opacity: 0.3;
 70 |   box-shadow: -6px -6px 10px rgba(33, 48, 116, 0.8),
 71 |     6px 6px 10px rgba(19, 24, 70, 0.377);
 72 | }
 73 | .step-btn:active {
 74 |   opacity: 0.8;
 75 |   box-shadow: inset -2px -2px 4px rgba(109, 109, 109, 0.747),
 76 |     inset 8px 8px 16px rgba(2, 6, 22, 0.1);
 77 |   color: #79e3b6;
 78 | }
 79 | .step-btn-mint {
 80 |   color: #fff;
 81 |   background-color: transparent;
 82 |   border-radius: 8px;
 83 |   cursor: pointer;
 84 |   display: block;
 85 |   font-size: 16px;
 86 |   font-weight: 400;
 87 |   max-width: 160px;
 88 |   width: 160px;
 89 |   height: 60px;
 90 |   position: relative;
 91 |   text-transform: uppercase;
 92 |   vertical-align: middle;
 93 |   width: 100%;
 94 |   border: 0 solid;
 95 |   box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
 96 |   outline: 1px solid;
 97 |   outline-color: rgba(255, 255, 255, 0);
 98 |   outline-offset: 0px;
 99 |   text-shadow: none;
100 |   -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
101 |           transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
102 |   outline-color: rgba(255, 255, 255, 0.5);
103 |   outline-offset: 0px;
104 | }
105 | .step-btn-mint:hover {
106 |   border: 1px solid;
107 |   box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
108 |   outline-offset: 15px;
109 |   outline-color: rgba(255, 255, 255, 0);
110 |   text-shadow: 1px 1px 2px #427388;
111 | }
112 | .pbar {
113 |   display: flex;
114 |   justify-content: center;
115 |   width: 100%;
116 |   height: 80px;
117 |   align-items: center;
118 |   /* background-color: yellow; */
119 | }
120 | .pbar-item {
121 |   width: 350px;
122 |   height: 25px;
123 | }
124 | .hr-line{
125 |   size: 8px;
126 |   margin-top:8%;;
127 |   margin-left: 10%;
128 |   margin-right: 10%;
129 |   color: white;
130 |   box-shadow: white;
131 | }
132 | .image{
133 |   /* background-color: red; */
134 |   display: flex;
135 |   margin-top: 100%;
136 |   margin-left: -5%;
137 |   position: relative;
138 | }
139 | 
140 |   
141 | .txt-shine {
142 |   position: absolute;
143 |   display: flex;
144 |   text-align: center;
145 |   justify-content: center;
146 |   align-items: center;
147 |   margin-left: 5%;
148 |   margin-top: 5%;
149 |   background-image: radial-gradient(
150 |     ellipse 50% 35% at 50% 50%,
151 |     #6b1839,
152 |     transparent
153 |   );
154 |   transform: translate(-50%, -50%);
155 |   letter-spacing: 2;
156 |   font-family: "Clip";
157 |   font-size: 2em;
158 |   color: #ffe6ff;
159 |   text-shadow: 0 0 0.6rem #d8f1ffda, 0 0 1.5rem #65e0ffc4,
160 |     -0.2rem 0.1rem 1rem #4698ada9, 0.2rem 0.1rem 1rem #178fadb4,
161 |     0 -0.5rem 2rem #047e9c93, 0 0.5rem 3rem #096b83b9;
162 |   animation: shine 2s forwards, flicker 3s infinite;
163 | }
164 | 
165 | @media screen and (max-width:1200px) {
166 |   .pane-view {
167 |     display: flex;
168 |     flex-direction:column;
169 |     padding:0;
170 |     margin-left: 8%;
171 |     align-items: center;
172 |   }
173 |   .image{
174 |     visibility: hidden;
175 |   }
176 |   .progress-cont{
177 |     height: 100px;
178 |   }
179 |   .options{
180 |     width: 80%;
181 |     /* margin-right: -15%; */
182 |   }
183 |   
184 | }
185 | @media screen and ( min-width:1205px) and (max-width: 1600px) {
186 |   .pane-view {
187 |     padding:0;
188 |     margin: 0;
189 |     align-items: center;
190 |   }
191 |   .options{
192 |     width: 40%;
193 |     /* margin-right: -15%; */
194 |   }
195 |   .progress-cont{
196 |     margin-left: 0px;
197 |   }
198 |   .nft-container{
199 | 
200 |     margin-left: 5%;
201 |     padding: 0;
202 |     /* margin-right: 5%; */
203 |   }
204 | }


--------------------------------------------------------------------------------
/src/pages/CreateNFT/DetailsForm/DetailsForm.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 | }
  4 | .box {
  5 |   position: relative;
  6 |   padding: 50px;
  7 |   width: 660px;
  8 |   height: 1250px;
  9 |   max-height: fit-content;
 10 |   display: flex;
 11 |   flex-direction: column;
 12 |   justify-content: center;
 13 |   align-items: center;
 14 |   background: rgba(255, 255, 255, 0.1);
 15 |   border-radius: 8px;
 16 |   box-shadow: 0 5px 35px rgba(0, 0, 0, 0.5);
 17 | }
 18 | 
 19 | .box:after {
 20 |   content: "";
 21 |   position: absolute;
 22 |   top: 5px;
 23 |   left: 5px;
 24 |   right: 5px;
 25 |   bottom: 5px;
 26 |   border-radius: 5px;
 27 |   pointer-events: none;
 28 |   background: linear-gradient(
 29 |     to bottom,
 30 |     rgba(255, 255, 255, 0.3) 0%,
 31 |     rgba(255, 255, 255, 0.1) 15%,
 32 |     transaparent 50%,
 33 |     transaparent 85%,
 34 |     rgba(255, 255, 255, 0.1) 0%,
 35 |     rgba(255, 255, 255, 0.3) 100%
 36 |   );
 37 | }
 38 | 
 39 | .box .form {
 40 |   position: relative;
 41 |   width: 100%;
 42 |   color: white;
 43 | }
 44 | .box .form .input-field {
 45 |   position: relative;
 46 |   width: 100%;
 47 |   margin-bottom: 20px;
 48 |   outline: none;
 49 |   border: 1px solid rgba(255, 255, 255, 0.2);
 50 |   background: transparent;
 51 |   border-radius: 6px;
 52 |   padding: 8px;
 53 |   color: #fff;
 54 |   box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.2);
 55 |   font-size: 14px;
 56 |   font-weight: 300;
 57 | }
 58 | 
 59 | .label {
 60 |   letter-spacing: 2px;
 61 |   color: rgb(199, 194, 194);
 62 | }
 63 | .lines {
 64 |   width: 100%;
 65 |   height: 1px;
 66 |   background-color: rgba(129, 172, 252, 0.315);
 67 |   margin-top: 5%;
 68 |   margin-bottom: 6%;
 69 | }
 70 | .img-box {
 71 |   position: relative;
 72 |   width: 50%;
 73 |   height: 200px;
 74 |   overflow: hidden;
 75 |   transition: 0.5s;
 76 |   border-left: 2px solid white;
 77 |   border-right: 2px solid white;
 78 | }
 79 | .img-box:hover {
 80 |   z-index: 1;
 81 |   transform: scale(1.25);
 82 |   /* border-left: 1px solid white; */
 83 |   border: 1px solid white;
 84 |   border-left: none;
 85 |   border-right: none;
 86 |   box-shadow: 0 25px 40px rgba(0, 0, 0, 0.5);
 87 | }
 88 | .imgBx:before {
 89 |   content: "";
 90 |   position: absolute;
 91 |   width: 100%;
 92 |   height: 100%;
 93 |   z-index: 1;
 94 |   background: linear-gradient(180deg, rgb(0, 204, 255), rgba(8, 8, 8, 0.925));
 95 |   mix-blend-mode: multiply;
 96 |   opacity: 0;
 97 |   transition: 0.5s;
 98 | }
 99 | .imgBx img {
100 |   position: absolute;
101 |   object-fit: cover;
102 |   width: 100%;
103 |   height: 100%;
104 | }
105 | .add {
106 |   position: relative;
107 |   margin-bottom: 20px;
108 |   outline: none;
109 |   width: 40px;
110 |   border: 1px solid rgba(255, 255, 255, 0.2);
111 |   background: transparent;
112 |   border-radius: 25px;
113 |   padding: 8px;
114 |   color: #fff;
115 |   box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.2);
116 |   font-size: 14px;
117 |   font-weight: 300;
118 | }
119 | .pop-overs {
120 |   margin-bottom: 0;
121 |   display: flex;
122 |   justify-content: center;
123 |   align-items: center;
124 |   background: #00002e;
125 |   border: 1px solid grey;
126 | }
127 | .pop-head {
128 |   background-color: transparent;
129 | 
130 |   border: 1px solid grey;
131 | }
132 | .cont {
133 |   width: 100%;
134 |   height: 240px;
135 |   /* background: yellow; */
136 |   display: flex;
137 |   justify-content: center;
138 |   align-items: center;
139 |   margin-bottom: 10px;
140 | }
141 | .img-box:hover .imgBx::before {
142 |   opacity: 1;
143 | }
144 | .content {
145 |   position: relative;
146 |   width: 100%;
147 |   height: 100%;
148 |   z-index: 1;
149 |   display: flex;
150 |   padding: 20px;
151 |   align-items: flex-end;
152 | }
153 | .content h2 {
154 |   color: rgb(187, 184, 184);
155 |   transition: 0.5s;
156 |   text-align: center;
157 |   letter-spacing: 1px;
158 |   font-family: "Roboto", sans-serif;
159 |   font-size: 18px;
160 |   transform: translateY(150px);
161 | }
162 | .img-box:hover h2 {
163 |   transform: translateY(0);
164 |   transition-delay: 0.01s;
165 | }
166 | .browser-btn {
167 |     display: flex;
168 |     justify-content: center;
169 |     align-items: center;
170 |   padding: 1.5em 5em;
171 |   width: 80px;
172 |   height: 45px;
173 |   background: transparent;
174 |   border: none;
175 |   border-radius: 0.5rem;
176 |   color: #fff;
177 |   font-size: 1rem;
178 |   font-weight: 700;
179 |   letter-spacing: 0.2rem;
180 |   text-align: center;
181 |   outline: none;
182 |   cursor: pointer;
183 |   transition: 0.2s ease-in-out;
184 |   box-shadow: -2px -2px 6px rgba(21, 34, 71, 0.7),
185 |   -2px -2px 4px rgba(191, 198, 212, 0.4),
186 |   2px 2px 2px rgba(168, 168, 211, 0.13), 2px 2px 4px rgba(0, 0, 0, 0.1);
187 | }
188 | .browser-btn:hover {
189 |   box-shadow: -2px -2px 6px rgba(36, 58, 153, 0.6),
190 |     -2px -2px 4px rgba(255, 255, 255, 0.4),
191 |     2px 2px 2px rgba(255, 255, 255, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.1);
192 | }
193 | .browser-btn:active {
194 |   box-shadow: inset -2px -2px 6px rgba(1, 0, 8, 0.747),
195 |     inset -2px -2px 4px rgba(255, 255, 255, 0.5),
196 |     inset 2px 2px 2px rgba(241, 231, 231, 0.075),
197 |     inset 2px 2px 4px rgba(3, 3, 36, 0.877);
198 | }
199 | .spinner {
200 |   width: 300px;
201 |   height: 300px;
202 |   display: flex;
203 |   justify-content: center;
204 |   align-items: center;
205 |   background-color: transparent;
206 | }
207 | 
208 | .spinner span {
209 |   font-size: 2rem;
210 |   animation: fade 1s linear 0s infinite;
211 |   padding-right: 1rem;
212 | }
213 | 
214 | .half-spinner {
215 |   width: 50px;
216 |   height: 50px;
217 |   border: 3px solid #03fc4e;
218 |   border-top: 3px solid transparent;
219 |   border-radius: 50%;
220 |   animation: spin 0.5s linear 0s infinite;
221 | }
222 | 
223 | @keyframes spin {
224 |   from {
225 |     transform: rotate(0);
226 |   }
227 |   to {
228 |     transform: rotate(360deg);
229 |   }
230 | }
231 | 
232 | @keyframes fade {
233 |   from {
234 |     opacity: 0;
235 |   }
236 |   to {
237 |     opacity: 1;
238 |   }
239 | }
240 | #image-preview{
241 |   display: flex;
242 |   height: 100%;
243 |   width: 100%;
244 | }


--------------------------------------------------------------------------------
/src/pages/CreateNFT/CreateNFT.js:
--------------------------------------------------------------------------------
  1 | import React, { Component, useState } from "react";
  2 | import Header from "../../components/Header/Header";
  3 | import ItemButton from "../../components/ItemButton/ItemButton";
  4 | import { useConnection, useWallet } from "@solana/wallet-adapter-react";
  5 | import { WalletNotConnectedError } from "@solana/wallet-adapter-base";
  6 | import "./CreateNFT.css";
  7 | import Progress from "./Progress";
  8 | import Stepper from "../../components/Stepper/Stepper";
  9 | import TextInput from "../../components/TextInput/TextInput";
 10 | import FileUpload from "./FileUpload/FileUpload";
 11 | import treasure from "../../img/treasure.png";
 12 | import DetailsForm from "./DetailsForm/DetailsForm";
 13 | import Launch from "./Launch/Launch";
 14 | // const CreateNFT = () => {
 15 | //     return (
 16 | //       <div className = "nft-container">
 17 | //         <Header heading="Create NFT"/>
 18 | //         <div className="pane-view">
 19 | //           <div className="progress-cont">
 20 | //             <Progress/>
 21 | //           </div>
 22 | //           <div className="options">
 23 | //             <ItemButton heading="Image" subheading="(.PNG,.JPG,.SVG)"/>
 24 | //             <ItemButton heading="Video" subheading="(.PNG,.JPG,.SVG)"/>
 25 | //             <ItemButton heading="Audio" subheading="(.PNG,.JPG,.SVG)"/>
 26 | //             </div>
 27 | //             </div>
 28 | //       </div>
 29 | //     );
 30 | //   }
 31 | 
 32 | //   export default CreateNFT;
 33 | 
 34 | export default function CreateNFT() {
 35 |   const { connection } = useConnection();
 36 |   const { publicKey,signTransaction } = useWallet();
 37 |   const [page, setPage] = useState(1);
 38 |   const [data, setData] = useState({
 39 |     user: {},
 40 |     profile: {},
 41 |     settings: {},
 42 |   });
 43 | 
 44 |   function goNextPage() {
 45 |     if (page === 2) return;
 46 |     setPage((page) => page + 1);
 47 |   }
 48 |   function goPrevPage() {
 49 |     if (page === 1) return;
 50 |     setPage((page) => page - 1);
 51 |   }
 52 |   function mint() {
 53 |     console.log("mint");
 54 |   }
 55 |   function updateData(type, newData) {
 56 |     setData((data) => {
 57 |       return { ...data, [type]: newData };
 58 |     });
 59 |   }
 60 | 
 61 |   function submit() {
 62 |     fetch("/api/form", { method: "POST", body: JSON.stringify(data) });
 63 |   }
 64 | 
 65 |   return (
 66 |     <div className="nft-container">
 67 |       <Header heading="Create NFT" />
 68 |       <div className="pbar">
 69 |         <progress variant="light" className="pbar-item" max="2" value={page} />
 70 |       </div>
 71 | 
 72 |       {/* the content goes here */}
 73 |       <div>
 74 |         {page === 1 && <OnboardingOne data={data.user} update={updateData} />}
 75 |         {page === 2 && (
 76 |           <OnboardingThree data={data.settings} update={updateData} connection={connection} publicKey={publicKey} signTransaction={signTransaction}/>
 77 |         )}
 78 |         {/* {page === 3 && <OnboardingFour />} */}
 79 |       </div>
 80 |       <hr className="hr-line" />
 81 |       <div className="buttons">
 82 |         {page !== 1 && (
 83 |           <button className="step-btn-mint" onClick={goPrevPage}>
 84 |             Back
 85 |           </button>
 86 |         )}
 87 |         {page !== 2 && (
 88 |           // <button className="step-btn" onClick={goNextPage}>
 89 |           <button className="step-btn-mint" onClick={goNextPage}>
 90 |             Next
 91 |           </button>
 92 |         )}
 93 |         {/* {page === 2 && (
 94 |           <button className="step-btn-mint" type="submit" onClick={mint}>
 95 |             Back
 96 |           </button>
 97 |         )} */}
 98 |       </div>
 99 |     </div>
100 |   );
101 | }
102 | 
103 | function OnboardingOne({ data, update }) {
104 |   const newData = {};
105 | 
106 |   return (
107 |     <div className="pane-view">
108 |       <div className="progress-cont">
109 |         <div className="txt-shine">
110 |           <u>Step 1:</u> Choose Item Type
111 |         </div>
112 |         <div className="image">
113 |           <img src={treasure} alt="" />
114 |         </div>
115 |       </div>
116 |       <div className="options">
117 |         <ItemButton
118 |           heading="Image"
119 |           subheading="(PNG,JPG,GIF) "
120 |           type="submit"
121 |           onClick={() => this.handleClick("next")}
122 |         />
123 |         <ItemButton
124 |           className="disabled"
125 |           heading="Video"
126 |           subheading="(MP4, MOV) (Coming Soon)"
127 |           type="submit"
128 |           onClick={() => this.handleClick("next")}
129 |         />
130 |         <ItemButton
131 |           className="disabled"
132 |           heading="Audio"
133 |           subheading="(MP3, WAV, FLAC) (Coming Soon)"
134 |           type="submit"
135 |           onclick={() => this.handleClick("next")}
136 |         />
137 |         <ItemButton
138 |           className="disabled"
139 |           heading="AR/3D"
140 |           subheading="(GLB) (Coming Soon)"
141 |           type="submit"
142 |           onClick={() => this.handleClick("next")}
143 |         />
144 |         <ItemButton
145 |           className="disabled"
146 |           heading="HTML Asset"
147 |           subheading="(HTML) (Coming Soon)"
148 |           type="submit"
149 |           onClick={() => this.handleClick("next")}
150 |         />
151 |       </div>
152 |     </div>
153 |   );
154 | }
155 | 
156 | function OnboardingTwo({ data, update }) {
157 |   return (
158 |     <div className="pane-view">
159 |       <div className="progress-cont">
160 |         <div className="txt-shine">
161 |           <u>Step 2:</u> Upload Files
162 |         </div>
163 |         <div className="image">
164 |           <img src={treasure} alt="" />
165 |         </div>
166 |       </div>
167 |       <div className="options">
168 |         <FileUpload />
169 |       </div>
170 |     </div>
171 |   );
172 | }
173 | 
174 | function OnboardingThree(props) {
175 |   return (
176 |     <div className="pane-view">
177 |       <div className="progress-cont">
178 |         <div className="txt-shine">
179 |           <u>Step 2:</u> Enter Details
180 |         </div>
181 |         <div className="image">
182 |           <img src={treasure} alt="" />
183 |         </div>
184 |       </div>
185 |       <div className="options">
186 |         <DetailsForm connection={props.connection} signTransaction={props.signTransaction} publicKey={props.publicKey}/>
187 |       </div>
188 |     </div>
189 |   );
190 | }
191 | 
192 | function OnboardingFour({ data, update }) {
193 |   return (
194 |     <div className="pane-view">
195 |       <div className="progress-cont">
196 |         <div className="txt-shine">
197 |           <u>Step 3:</u> Launch
198 |         </div>
199 |         <div className="image">
200 |           <img src={treasure} alt="" />
201 |         </div>
202 |       </div>
203 |       <div className="options">
204 |         <Launch royalty="30%" price="10" />
205 |       </div>
206 |     </div>
207 |   );
208 | }
209 | 


--------------------------------------------------------------------------------
/src/utils/customNFT/metaplex/connectionHelpers.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable no-async-promise-executor */
  2 | /* eslint-disable prefer-promise-reject-errors */
  3 | /* eslint-disable no-param-reassign */
  4 | /* eslint-disable no-underscore-dangle */
  5 | import { Transaction } from '@solana/web3.js';
  6 | 
  7 | export const getUnixTs = () => new Date().getTime() / 1000;
  8 | 
  9 | export function sleep(ms) {
 10 |   return new Promise((resolve) => setTimeout(resolve, ms));
 11 | }
 12 | 
 13 | async function simulateTransaction(
 14 |   connection,
 15 |   transaction,
 16 |   commitment,
 17 | ) {
 18 |   transaction.recentBlockhash = await connection._recentBlockhash(
 19 |     connection._disableBlockhashCaching,
 20 |   );
 21 | 
 22 |   const signData = transaction.serializeMessage();
 23 |   const wireTransaction = transaction._serialize(signData);
 24 |   const encodedTransaction = wireTransaction.toString('base64');
 25 |   const config = { encoding: 'base64', commitment };
 26 |   const args = [encodedTransaction, config];
 27 | 
 28 |   const res = await connection._rpcRequest('simulateTransaction', args);
 29 |   if (res.error) {
 30 |     throw new Error(`failed to simulate transaction: ${res.error.message}`);
 31 |   }
 32 |   return res.result;
 33 | }
 34 | 
 35 | async function awaitTransactionSignatureConfirmation(
 36 |   txid,
 37 |   timeout,
 38 |   connection,
 39 |   commitment = 'recent',
 40 |   queryStatus = false,
 41 | ) {
 42 |   let done = false;
 43 |   let status = {
 44 |     slot: 0,
 45 |     confirmations: 0,
 46 |     err: null,
 47 |   };
 48 |   let subId = 0;
 49 |   status = await new Promise(async (resolve, reject) => {
 50 |     setTimeout(() => {
 51 |       if (done) {
 52 |         return;
 53 |       }
 54 |       done = true;
 55 |       console.log('Rejecting for timeout...');
 56 |       reject({ timeout: true });
 57 |     }, timeout);
 58 |     try {
 59 |       subId = connection.onSignature(
 60 |         txid,
 61 |         (result, context) => {
 62 |           done = true;
 63 |           status = {
 64 |             err: result.err,
 65 |             slot: context.slot,
 66 |             confirmations: 0,
 67 |           };
 68 |           if (result.err) {
 69 |             console.log('Rejected via websocket', result.err);
 70 |             reject(status);
 71 |           } else {
 72 |             console.log('Resolved via websocket', result);
 73 |             resolve(status);
 74 |           }
 75 |         },
 76 |         commitment,
 77 |       );
 78 |     } catch (e) {
 79 |       done = true;
 80 |       console.error('WS error in setup', txid, e);
 81 |     }
 82 |     while (!done && queryStatus) {
 83 |       // eslint-disable-next-line no-loop-func
 84 |       (async () => {
 85 |         try {
 86 |           const signatureStatuses = await connection.getSignatureStatuses([
 87 |             txid,
 88 |           ]);
 89 |           status = signatureStatuses && signatureStatuses.value[0];
 90 |           if (!done) {
 91 |             if (!status) {
 92 |               console.log('REST null result for', txid, status);
 93 |             } else if (status.err) {
 94 |               console.log('REST error for', txid, status);
 95 |               done = true;
 96 |               reject(status.err);
 97 |             } else if (!status.confirmations) {
 98 |               console.log('REST no confirmations for', txid, status);
 99 |             } else {
100 |               console.log('REST confirmation for', txid, status);
101 |               done = true;
102 |               resolve(status);
103 |             }
104 |           }
105 |         } catch (e) {
106 |           if (!done) {
107 |             console.log('REST connection error: txid', txid, e);
108 |           }
109 |         }
110 |       })();
111 |       // eslint-disable-next-line no-await-in-loop
112 |       await sleep(2000);
113 |     }
114 |   });
115 | 
116 |   if (connection._signatureSubscriptions[subId]) { connection.removeSignatureListener(subId); }
117 |   done = true;
118 |   console.log('Returning status', status);
119 |   return status;
120 | }
121 | 
122 | const DEFAULT_TIMEOUT = 25000;
123 | 
124 | export async function sendSignedTransaction({
125 |   signedTransaction,
126 |   connection,
127 |   timeout = DEFAULT_TIMEOUT,
128 | }) {
129 |   const rawTransaction = signedTransaction.serialize();
130 |   const startTime = getUnixTs();
131 |   let slot = 0;
132 |   const txid = await connection.sendRawTransaction(
133 |     rawTransaction,
134 |     {
135 |       skipPreflight: true,
136 |     },
137 |   );
138 | 
139 |   console.log('Started awaiting confirmation for', txid);
140 | 
141 |   let done = false;
142 |   (async () => {
143 |     while (!done && getUnixTs() - startTime < timeout) {
144 |       connection.sendRawTransaction(rawTransaction, {
145 |         skipPreflight: true,
146 |       });
147 |       // eslint-disable-next-line no-await-in-loop
148 |       await sleep(500);
149 |     }
150 |   })();
151 |   try {
152 |     const confirmation = await awaitTransactionSignatureConfirmation(
153 |       txid,
154 |       timeout,
155 |       connection,
156 |       'recent',
157 |       true,
158 |     );
159 | 
160 |     if (!confirmation) { throw new Error('Timed out awaiting confirmation on transaction'); }
161 | 
162 |     if (confirmation.err) {
163 |       console.error(confirmation.err);
164 |       throw new Error('Transaction failed: Custom instruction error');
165 |     }
166 | 
167 |     slot = confirmation?.slot || 0;
168 |   } catch (err) {
169 |     console.error('Timeout Error caught', err);
170 |     if (err.timeout) {
171 |       throw new Error('Timed out awaiting confirmation on transaction');
172 |     }
173 |     let simulateResult = null;
174 |     try {
175 |       simulateResult = (
176 |         await simulateTransaction(connection, signedTransaction, 'single')
177 |       ).value;
178 |       // eslint-disable-next-line no-empty
179 |     } catch (e) { }
180 |     if (simulateResult && simulateResult.err) {
181 |       if (simulateResult.logs) {
182 |         // eslint-disable-next-line no-plusplus
183 |         for (let i = simulateResult.logs.length - 1; i >= 0; --i) {
184 |           const line = simulateResult.logs[i];
185 |           if (line.startsWith('Program log: ')) {
186 |             throw new Error(
187 |               `Transaction failed: ${line.slice('Program log: '.length)}`,
188 |             );
189 |           }
190 |         }
191 |       }
192 |       throw new Error(JSON.stringify(simulateResult.err));
193 |     }
194 |     // throw new Error('Transaction failed');
195 |   } finally {
196 |     done = true;
197 |   }
198 | 
199 |   console.log('Latency', txid, getUnixTs() - startTime);
200 |   return { txid, slot };
201 | }
202 | 
203 | export const sendTransactionWithRetry = async (
204 |   connection,
205 |   wallet,
206 |   instructions,
207 |   signers,
208 |   commitment = 'singleGossip',
209 |   includesFeePayer = false,
210 |   block,
211 |   beforeSend,
212 | ) => {
213 |   let transaction = new Transaction();
214 |   instructions.forEach((instruction) => transaction.add(instruction));
215 |   transaction.recentBlockhash = (
216 |     block || (await connection.getRecentBlockhash(commitment))
217 |   ).blockhash;
218 | 
219 |   if (includesFeePayer) {
220 |     transaction.setSigners(...signers.map((s) => s.publicKey));
221 |   } else {
222 |     transaction.setSigners(
223 |       // fee payed by the wallet owner
224 |       wallet.publicKey,
225 |       ...signers.map((s) => s.publicKey),
226 |     );
227 |   }
228 | 
229 |   if (signers.length > 0) {
230 |     transaction.partialSign(...signers);
231 |   }
232 |   if (!includesFeePayer) {
233 |     transaction = await wallet.signTransaction(transaction);
234 |   }
235 | 
236 |   if (beforeSend) {
237 |     beforeSend();
238 |   }
239 | 
240 |   const { txid, slot } = await sendSignedTransaction({
241 |     connection,
242 |     signedTransaction: transaction,
243 |   });
244 | 
245 |   return { txid, slot };
246 | };
247 | 


--------------------------------------------------------------------------------
/src/utils/customNFT/mintNFT.js:
--------------------------------------------------------------------------------
  1 | import { MintLayout, Token } from '@solana/spl-token';
  2 | import { PublicKey, SystemProgram, TransactionInstruction } from '@solana/web3.js';
  3 | import crypto from 'crypto';
  4 | import { toast } from 'react-toastify';
  5 | import { sleep } from '.';
  6 | import { createAssociatedTokenAccountInstruction, createMint } from './metaplex/accounts';
  7 | import { getAssetCostToStore } from './metaplex/assets';
  8 | import { sendTransactionWithRetry } from './metaplex/connectionHelpers';
  9 | import { AR_SOL_HOLDER_ID, programIds } from './metaplex/ids';
 10 | import {
 11 |   createMasterEdition, createMetadata, Data, updateMetadata
 12 | } from './metaplex/metadata';
 13 | import { findProgramAddress } from './metaplex/utils';
 14 | 
 15 | const RESERVED_TXN_MANIFEST = 'manifest.json';
 16 | 
 17 | export default async function mintNFT(connection, wallet, files, metadata) {
 18 |   // Check the wallet eligibility
 19 |   const walletBalance = await connection.getBalance(new PublicKey(wallet.publicKey.toString()));
 20 |   if (walletBalance < 50000000) {
 21 |     throw new Error('You need at least 0.05 SOL in your wallet');
 22 |   }
 23 | 
 24 |   const metadataContent = {
 25 |     name: metadata.name,
 26 |     symbol: metadata.symbol,
 27 |     description: metadata.description,
 28 |     seller_fee_basis_points: metadata.sellerFeeBasisPoints,
 29 |     image: metadata.image,
 30 |     animation_url: metadata.animation_url,
 31 |     external_url: metadata.external_url,
 32 |     attributes:metadata.attributes,
 33 |     properties: {
 34 |       ...metadata.properties,
 35 |       creators: metadata.creators?.map((creator) => ({
 36 |         address: creator.address.toBase58(),
 37 |         share: creator.share,
 38 |       })),
 39 |     },
 40 |   };
 41 | 
 42 |   const realFiles = [
 43 |     ...files,
 44 |     new File([JSON.stringify(metadataContent)], 'metadata.json'),
 45 |   ];
 46 | 
 47 |   // eslint-disable-next-line no-use-before-define
 48 |   const { instructions: pushInstructions, signers: pushSigners } = await prepPayForFilesTxn(wallet, realFiles, metadata);
 49 | 
 50 |   const TOKEN_PROGRAM_ID = programIds().token;
 51 |   const mintRent = await connection.getMinimumBalanceForRentExemption(
 52 |     MintLayout.span,
 53 |   );
 54 | 
 55 |   const payerPublicKey = new PublicKey(wallet.publicKey.toString());
 56 |   const instructions = [...pushInstructions];
 57 |   const signers = [...pushSigners];
 58 | 
 59 |   const mintKey = createMint(
 60 |     instructions,
 61 |     wallet.publicKey,
 62 |     mintRent,
 63 |     0,
 64 |     // Some weird bug with phantom where it's public key doesnt mesh with data encode wellff
 65 |     payerPublicKey,
 66 |     payerPublicKey,
 67 |     signers,
 68 |   );
 69 | 
 70 |   const recipientKey = (
 71 |     await findProgramAddress(
 72 |       [
 73 |         wallet.publicKey.toBuffer(),
 74 |         programIds().token.toBuffer(),
 75 |         mintKey.toBuffer(),
 76 |       ],
 77 |       programIds().associatedToken,
 78 |     )
 79 |   )[0];
 80 |   createAssociatedTokenAccountInstruction(
 81 |     instructions,
 82 |     recipientKey,
 83 |     wallet.publicKey,
 84 |     wallet.publicKey,
 85 |     mintKey,
 86 |   );
 87 | 
 88 |   const metadataAccount = await createMetadata(
 89 |     new Data({
 90 |       symbol: metadata.symbol,
 91 |       name: metadata.name,
 92 |       uri: ' '.repeat(64), // size of url for arweave
 93 |       sellerFeeBasisPoints: metadata.sellerFeeBasisPoints,
 94 |       creators: metadata.creators,
 95 |     }),
 96 |     payerPublicKey,
 97 |     mintKey,
 98 |     payerPublicKey,
 99 |     instructions,
100 |     wallet.publicKey,
101 |   );
102 | 
103 |   toast.success("Waiting for signature...")
104 | 
105 |   const { txid } = await sendTransactionWithRetry(
106 |     connection,
107 |     wallet,
108 |     instructions,
109 |     signers,
110 |     'singleGossip',
111 |     false,
112 |     undefined,
113 |     () => {
114 |       toast.success("Creating token...")
115 |     },
116 |   );
117 | 
118 |   try {
119 |     await connection.confirmTransaction(txid, 'max');
120 |   } catch {
121 |     // ignore
122 |   }
123 | 
124 |   // Force wait for max confirmations
125 |   // await connection.confirmTransaction(txid, 'max');
126 |   await connection.getParsedConfirmedTransaction(txid, 'confirmed');
127 | 
128 |   // this means we're done getting AR txn setup. Ship it off to ARWeave!
129 |   const data = new FormData();
130 | 
131 |   const tags = realFiles.reduce(
132 |     (acc, f) => {
133 |       acc[f.name] = [{ name: 'mint', value: mintKey.toBase58() }];
134 |       return acc;
135 |     },
136 |     {},
137 |   );
138 |   data.append('tags', JSON.stringify(tags));
139 |   data.append('transaction', txid);
140 |   realFiles.map((f) => data.append('file[]', f));
141 | 
142 |   toast.success("Uploading file...")
143 | 
144 |   const result = await (
145 |     await fetch(
146 |       "https://us-central1-principal-lane-200702.cloudfunctions.net/uploadFile2",
147 |       {
148 |         method: 'POST',
149 |         body: data,
150 |       },
151 |     )
152 |   ).json();
153 | 
154 |   const metadataFile = result.messages?.find(
155 |     (m) => m.filename === RESERVED_TXN_MANIFEST,
156 |   );
157 | 
158 |   if (metadataFile?.transactionId && wallet.publicKey) {
159 |     const updateInstructions = [];
160 |     const updateSigners = [];
161 | 
162 |     // TODO: connect to testnet arweave
163 |     const arweaveLink = `https://arweave.net/${metadataFile.transactionId}`;
164 |     await updateMetadata(
165 |       new Data({
166 |         name: metadata.name,
167 |         symbol: metadata.symbol,
168 |         uri: arweaveLink,
169 |         creators: metadata.creators,
170 |         sellerFeeBasisPoints: metadata.sellerFeeBasisPoints,
171 |       }),
172 |       undefined,
173 |       undefined,
174 |       mintKey,
175 |       payerPublicKey,
176 |       updateInstructions,
177 |       metadataAccount,
178 |     );
179 | 
180 |     updateInstructions.push(
181 |       Token.createMintToInstruction(
182 |         TOKEN_PROGRAM_ID,
183 |         mintKey,
184 |         recipientKey,
185 |         payerPublicKey,
186 |         [],
187 |         1,
188 |       ),
189 |     );
190 | 
191 |     // // In this instruction, mint authority will be removed from the main mint, while
192 |     // // minting authority will be maintained for the Printing mint (which we want.)
193 |     await createMasterEdition(
194 |       undefined,
195 |       mintKey,
196 |       payerPublicKey,
197 |       payerPublicKey,
198 |       payerPublicKey,
199 |       updateInstructions,
200 |     );
201 | 
202 |     toast.success('Waiting for signature...')
203 | 
204 |     await sendTransactionWithRetry(
205 |       connection,
206 |       wallet,
207 |       updateInstructions,
208 |       updateSigners,
209 |       'singleGossip',
210 |       false,
211 |       undefined,
212 |       () => {
213 |         toast.success('Updating metadata...');
214 |       },
215 |     );
216 | 
217 |     await sleep(2000);
218 | 
219 |     toast.success("NFT created!")
220 |   }
221 | 
222 |   return { metadataAccount, mintKey, nftAddress: recipientKey.toString() };
223 | }
224 | 
225 | export const prepPayForFilesTxn = async (wallet, files) => {
226 |   const { memo } = programIds();
227 | 
228 |   const instructions = [];
229 |   const signers = [];
230 | 
231 |   if (wallet.publicKey) {
232 |     instructions.push(
233 |       SystemProgram.transfer({
234 |         fromPubkey: wallet.publicKey,
235 |         toPubkey: AR_SOL_HOLDER_ID,
236 |         lamports: await getAssetCostToStore(files),
237 |       }),
238 |     );
239 |   }
240 | 
241 |   for (let i = 0; i < files.length; i += 1) {
242 |     const hashSum = crypto.createHash('sha256');
243 |     // eslint-disable-next-line no-await-in-loop
244 |     hashSum.update(await files[i].text());
245 |     const hex = hashSum.digest('hex');
246 |     instructions.push(
247 |       new TransactionInstruction({
248 |         keys: [],
249 |         programId: memo,
250 |         data: Buffer.from(hex),
251 |       }),
252 |     );
253 |   }
254 | 
255 |   return {
256 |     instructions,
257 |     signers,
258 |   };
259 | };
260 | 


--------------------------------------------------------------------------------
/src/pages/CreateNFT/DetailsForm/DetailsForm.js:
--------------------------------------------------------------------------------
  1 | import React, { Component, useState } from "react";
  2 | import { ReactDOM } from "react";
  3 | import { Form, Popover, Button, OverlayTrigger } from "react-bootstrap";
  4 | import "./DetailsForm.css";
  5 | import { PublicKey } from "@solana/web3.js";
  6 | import { WalletNotConnectedError } from "@solana/wallet-adapter-base";
  7 | import html2canvas from "html2canvas";
  8 | import { InputGroup, FormControl } from "react-bootstrap";
  9 | import { useConnection, useWallet } from "@solana/wallet-adapter-react";
 10 | import { Creator, extendBorsh } from "../../../utils/customNFT/metaplex/metadata";
 11 | import mintNFT from "../../../utils/customNFT/mintNFT";
 12 | import Tag from "../../../components/Tag/Tag"
 13 | import Attribute from "../../../components/Attributes/Attributes";
 14 | import Alert from 'react-bootstrap/Alert';
 15 | import { render } from "@testing-library/react";
 16 | import Lottie from "react-lottie";
 17 | 
 18 | import * as location from "../1055-world-locations.json";
 19 | import { isConstructorDeclaration } from "typescript";
 20 | 
 21 | var LoadCheck = 0;
 22 | 
 23 | const defaultOptions1 = {
 24 |   loop: true,
 25 |   autoplay: true,
 26 |   animationData: location.default,
 27 |   rendererSettings: {
 28 |     preserveAspectRatio: "xMidYMid slice",
 29 |   },
 30 | };
 31 | 
 32 | const popover = (
 33 |   <Popover id="popover-basic" className="pop-over">
 34 |     <Popover.Header className="pop-head" as="h3">
 35 |       Add new creator
 36 |     </Popover.Header>
 37 |     <Popover.Body>
 38 |       <Form.Group className="mb-3" controlId="exampleForm.ControlInput2">
 39 |         <Form.Control
 40 |           className="input-field"
 41 |           type="text"
 42 |           placeholder="Address"
 43 |         />
 44 |       </Form.Group>
 45 |     </Popover.Body>
 46 |   </Popover>
 47 | );
 48 | 
 49 | const PopOut = () => (
 50 |   <OverlayTrigger trigger="click" placement="right" overlay={popover}>
 51 |     <button
 52 |       className="add"
 53 |       onClick={(e) => {
 54 |         e.preventDefault();
 55 |       }}
 56 |     >
 57 |       +
 58 |     </button>
 59 |   </OverlayTrigger>
 60 | );
 61 | 
 62 | export const DetailsForm = (props) => {
 63 |   const initialState = () => 0;
 64 |   const [valued, setValued] = useState(initialState);
 65 |   const connection = props.connection;
 66 |   const publickey = props.publicKey;
 67 |   const signTransaction = props.signTransaction;
 68 |   const [tags, setTags] = useState([]);
 69 |   const handlePhoto = (e) => {
 70 |     e.preventDefault();
 71 |     const file = e.currentTarget.files[0];
 72 |     var img = document.querySelector("#image-preview");
 73 |     img.src = URL.createObjectURL(file);
 74 |     img.addEventListener("load", () => {
 75 |       console.log("h", img.height);
 76 |       console.log("w", img.width);
 77 |     });
 78 |   };
 79 |   const dataURLtoFile = (dataurl, filename) => {
 80 |     var arr = dataurl.split(","),
 81 |       mime = arr[0].match(/:(.*?);/)[1],
 82 |       bstr = atob(arr[1]),
 83 |       n = bstr.length,
 84 |       u8arr = new Uint8Array(n);
 85 | 
 86 |     while (n--) {
 87 |       u8arr[n] = bstr.charCodeAt(n);
 88 |     }
 89 |     return new File([u8arr], filename, { type: mime });
 90 |   };
 91 | 
 92 |   const handleFormSubmit = (e) => {
 93 |     if (!publickey) throw new WalletNotConnectedError();
 94 |     html2canvas(document.querySelector("#image-preview")).then(async function (
 95 |       canvas
 96 |     ) {
 97 |       var dataUrl = canvas.toDataURL("image/png", 1.0);
 98 |       var file = await dataURLtoFile(dataUrl, `abc.png`);
 99 |       create(file);
100 |     });
101 |   };
102 | 
103 |   const create = async (file) => {
104 |     extendBorsh();
105 |     const metadata = {
106 |       animation_url: undefined,
107 |       creators: [
108 |         new Creator({
109 |           address: new PublicKey(publickey),
110 |           verified: true,
111 |           share: 100,
112 |         }),
113 |       ],
114 |       description: document.getElementById('description').value,
115 |       external_url: "",
116 |       image: file.name,
117 |       name: document.getElementById('title').value,
118 |       symbol: '',
119 |       attributes: tags,
120 |       sellerFeeBasisPoints: parseInt(document.getElementById('royalties').value) * 100,
121 |       properties: {
122 |         category: "image",
123 |         files: [{ type: file.type, uri: file.name }],
124 |       },
125 |     };
126 |     const wallet = {
127 |       publicKey: publickey,
128 |       signTransaction: signTransaction,
129 |     };
130 |     setValued((1));
131 |     const { metadataAccount, mintKey, nftAddress } = await mintNFT(
132 |       connection,
133 |       wallet,
134 |       [file],
135 |       metadata
136 |     );
137 |     console.log(metadataAccount, mintKey, nftAddress);
138 |     setValued((0));
139 |     alert("Your NFT has been created. Go to the HomePage to see it.");
140 |   }
141 | 
142 |   return (
143 |     <>
144 |       {valued ? (
145 |         <>
146 |           <div className="box">
147 |             <Lottie options={defaultOptions1} height={400} width={400} />
148 |           </div>
149 |         </>
150 |       ) : (
151 |         <>
152 |           <div className="box" style={{ display: "flex", flexDirection: "column" }}>
153 |             <Form className="form">
154 |               <div className="lines"></div>
155 |               <div
156 |                 className="cont"
157 |                 style={{
158 |                   display: "flex",
159 |                   height: 500,
160 |                   alignItems: "center",
161 |                   justifyContent: "center",
162 |                   marginBottom: 30,
163 |                 }}
164 |               >
165 |                 <div style={{ display: "flex", alignSelf: "center" }}>
166 |                   <div
167 |                     style={{
168 |                       display: "flex",
169 |                       flexDirection: "column",
170 |                       alignSelf: "center",
171 |                     }}
172 |                     className="inner-container"
173 |                   >
174 |                     <div className="sub-header">Drag the file</div>
175 |                     <div class="line"></div>
176 |                     <div className="draggable-cont" style={{ display: "flex", alignItems: "center" }}>
177 |                       <Form.Control
178 |                         className="input-field"
179 |                         type="file"
180 |                         name="image"
181 |                         id="image"
182 |                         onChange={handlePhoto}
183 |                         style={{ width: 300 }}
184 |                       />
185 | 
186 |                       <img
187 |                         className="file-preview-cont"
188 |                         src=""
189 |                         id="image-preview"
190 |                       ></img>
191 |                       <div className="file-browser-cont"></div>
192 |                     </div>
193 |                   </div>
194 |                 </div>
195 |               </div>
196 | 
197 |               <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
198 |                 <Form.Label className="label">Title</Form.Label>
199 |                 <Form.Control
200 |                   className="input-field"
201 |                   type="text"
202 |                   placeholder="Max 50 characters"
203 |                   name="title"
204 |                   id="title"
205 |                 />
206 |               </Form.Group>
207 |               <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
208 |                 <Form.Label className="label">Description</Form.Label>
209 |                 <Form.Control
210 |                   className=" input-field"
211 |                   as="textarea"
212 |                   rows={3}
213 |                   name="description"
214 |                   id="description"
215 |                 />
216 |               </Form.Group>
217 |               <div className="main-container">
218 |                 Tags
219 |                 <div className='tags'>
220 |                   {tags.map((val) => (
221 |                     <Tag trait_type={val.trait_type} value={val.value}></Tag>
222 |                   ))}
223 |                 </div>
224 |                 <div className="input-container">
225 |                   <div className="input-inner">
226 |                     <InputGroup size="sm" className="mb-3">
227 |                       <FormControl placeholder="Attribute" aria-label="Attribute" className=" input-field" id="trait-input" />
228 |                     </InputGroup>
229 |                   </div>
230 |                   <div className="input-inner">
231 |                     <InputGroup size="sm" className="mb-3">
232 |                       <FormControl placeholder="Value" aria-label="Attribute" className=" input-field" id="value-input" />
233 |                     </InputGroup>
234 |                   </div>
235 |                 </div>
236 |                 <div className="add-div">
237 |                   <div className="add-btn" onClick={() => setTags([...tags, { "trait_type": document.getElementById("trait-input").value, "value": document.getElementById("value-input").value }])}>Add</div>
238 |                 </div>
239 |               </div>
240 |               <Form.Group className="mb-3" controlId="exampleForm.ControlInput2">
241 |                 <Form.Label className="label">Royalties</Form.Label>
242 |                 <Form.Control
243 |                   className=" input-field"
244 |                   type="number"
245 |                   placeholder="Between 0 and 100"
246 |                   name="royalties"
247 |                   id="royalties"
248 |                 />
249 |               </Form.Group>
250 |               <div style={{ display: "flex", flexDirection: "column" }}>
251 |                 <button variant="primary" type="button" onClick={handleFormSubmit} className="browser-btn">
252 |                   Submit
253 |                 </button>
254 |               </div>
255 |             </Form>
256 |             <div className="lines"></div>
257 |           </div>
258 |         </>
259 |       )}</>);
260 | };
261 | export default DetailsForm;


--------------------------------------------------------------------------------
/src/utils/customNFT/metaplex/metadata.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable max-classes-per-file */
  2 | import {
  3 |   PublicKey, SystemProgram, SYSVAR_RENT_PUBKEY, TransactionInstruction,
  4 | } from '@solana/web3.js';
  5 | import {
  6 |   deserializeUnchecked, BinaryReader, BinaryWriter, serialize,
  7 | } from 'borsh';
  8 | import { programIds } from './ids';
  9 | 
 10 | export const METADATA_PREFIX = 'metadata';
 11 | export const EDITION = 'edition';
 12 | export const RESERVATION = 'reservation';
 13 | export const EDITION_MARKER_BIT_SIZE = 248;
 14 | export const MAX_NAME_LENGTH = 32;
 15 | export const MAX_SYMBOL_LENGTH = 10;
 16 | export const MAX_URI_LENGTH = 200;
 17 | export const MAX_CREATOR_LIMIT = 5;
 18 | export const MAX_CREATOR_LEN = 32 + 1 + 1;
 19 | export const MAX_METADATA_LEN = 1 + 32 + 32
 20 | + MAX_NAME_LENGTH + MAX_SYMBOL_LENGTH + MAX_URI_LENGTH + MAX_CREATOR_LIMIT * MAX_CREATOR_LEN + 2 + 1 + 1 + 198;
 21 | 
 22 | export const extendBorsh = () => {
 23 |   (BinaryReader.prototype).readPubkey = function readPubkey() {
 24 |     const reader = this;
 25 |     const array = reader.readFixedArray(32);
 26 |     return new PublicKey(array);
 27 |   };
 28 | 
 29 |   (BinaryWriter.prototype).writePubkey = function writePubkey(value) {
 30 |     const writer = this;
 31 |     writer.writeFixedArray(value.toBuffer());
 32 |   };
 33 | };
 34 | 
 35 | const MetadataKey = {
 36 |   Uninitialized: 0,
 37 |   MetadataV1: 4,
 38 |   EditionV1: 1,
 39 |   MasterEditionV1: 2,
 40 |   MasterEditionV2: 6,
 41 |   EditionMarker: 7,
 42 | };
 43 | 
 44 | export const findProgramAddress = async (seeds, programId) => {
 45 |   const key = `pda-${seeds.reduce((agg, item) => agg + item.toString('hex'), '')}${programId.toString()}`;
 46 |   const cached = localStorage.getItem(key);
 47 |   if (cached) {
 48 |     const value = JSON.parse(cached);
 49 | 
 50 |     return [new PublicKey(value.key), parseInt(value.nonce, 10)];
 51 |   }
 52 |   const result = await PublicKey.findProgramAddress(seeds, programId);
 53 |   localStorage.setItem(
 54 |     key,
 55 |     JSON.stringify({
 56 |       key: result[0].toBase58(),
 57 |       nonce: result[1],
 58 |     }),
 59 |   );
 60 |   return result;
 61 | };
 62 | 
 63 | async function getEdition(tokenMint) {
 64 |   const PROGRAM_IDS = programIds();
 65 | 
 66 |   return (
 67 |     await findProgramAddress(
 68 |       [
 69 |         Buffer.from(METADATA_PREFIX),
 70 |         PROGRAM_IDS.metadata.toBuffer(),
 71 |         tokenMint.toBuffer(),
 72 |         Buffer.from(EDITION),
 73 |       ],
 74 |       PROGRAM_IDS.metadata,
 75 |     )
 76 |   )[0];
 77 | }
 78 | 
 79 | export class Metadata {
 80 |   constructor(args) {
 81 |     this.key = MetadataKey.MetadataV1;
 82 |     this.updateAuthority = args.updateAuthority;
 83 |     this.mint = args.mint;
 84 |     this.data = args.data;
 85 |     this.primarySaleHappened = args.primarySaleHappened;
 86 |     this.isMutable = args.isMutable;
 87 |   }
 88 | 
 89 |   async init() {
 90 |     const edition = await getEdition(this.mint);
 91 |     this.edition = edition;
 92 |     this.masterEdition = edition;
 93 |   }
 94 | }
 95 | 
 96 | export class MasterEditionV1 {
 97 |   constructor(args) {
 98 |     this.key = MetadataKey.MasterEditionV1;
 99 |     this.supply = args.supply;
100 |     this.maxSupply = args.maxSupply;
101 |     this.printingMint = args.printingMint;
102 |     this.oneTimePrintingAuthorizationMint = args.oneTimePrintingAuthorizationMint;
103 |   }
104 | }
105 | 
106 | export class MasterEditionV2 {
107 |   constructor(args) {
108 |     this.key = MetadataKey.MasterEditionV2;
109 |     this.supply = args.supply;
110 |     this.maxSupply = args.maxSupply;
111 |   }
112 | }
113 | 
114 | class CreateMetadataArgs {
115 |   constructor(args) {
116 |     this.data = args.data;
117 |     this.isMutable = args.isMutable;
118 |     this.instruction = 0;
119 |   }
120 | }
121 | 
122 | class UpdateMetadataArgs {
123 |   constructor(args) {
124 |     this.data = args.data ? args.data : null;
125 |     this.updateAuthority = args.updateAuthority
126 |       ? new PublicKey(args.updateAuthority)
127 |       : null;
128 |     this.primarySaleHappened = args.primarySaleHappened;
129 |     this.instruction = 1;
130 |   }
131 | }
132 | 
133 | class CreateMasterEditionArgs {
134 |   constructor(args) {
135 |     this.maxSupply = args.maxSupply;
136 |     this.instruction = 10;
137 |   }
138 | }
139 | 
140 | class MintPrintingTokensArgs {
141 |   constructor(args) {
142 |     this.supply = args.supply;
143 |     this.instruction = 9;
144 |   }
145 | }
146 | 
147 | export class EditionMarker {
148 |   constructor(args) {
149 |     this.key = MetadataKey.EditionMarker;
150 |     this.ledger = args.ledger;
151 |   }
152 | 
153 |   editionTaken(edition) {
154 |     const editionOffset = edition % EDITION_MARKER_BIT_SIZE;
155 |     const indexOffset = Math.floor(editionOffset / 8);
156 | 
157 |     if (indexOffset > 30) {
158 |       throw new Error('bad index for edition');
159 |     }
160 | 
161 |     const positionInBitsetFromRight = 7 - (editionOffset % 8);
162 | 
163 |     const mask = positionInBitsetFromRight ** 2;
164 | 
165 |     // eslint-disable-next-line no-bitwise
166 |     const appliedMask = this.ledger[indexOffset] & mask;
167 | 
168 |     return appliedMask !== 0;
169 |   }
170 | }
171 | 
172 | export class Edition {
173 |   constructor(args) {
174 |     this.key = MetadataKey.EditionV1;
175 |     this.parent = args.parent;
176 |     this.edition = args.edition;
177 |   }
178 | }
179 | export class Creator {
180 |   constructor(args) {
181 |     this.address = args.address;
182 |     this.verified = args.verified;
183 |     this.share = args.share;
184 |   }
185 | }
186 | 
187 | export class Data {
188 |   constructor(args) {
189 |     this.name = args.name;
190 |     this.symbol = args.symbol;
191 |     this.uri = args.uri;
192 |     this.sellerFeeBasisPoints = args.sellerFeeBasisPoints;
193 |     this.creators = args.creators;
194 |   }
195 | }
196 | 
197 | export const METADATA_SCHEMA = new Map([
198 |   [
199 |     CreateMetadataArgs,
200 |     {
201 |       kind: 'struct',
202 |       fields: [
203 |         ['instruction', 'u8'],
204 |         ['data', Data],
205 |         ['isMutable', 'u8'], // bool
206 |       ],
207 |     },
208 |   ],
209 |   [
210 |     UpdateMetadataArgs,
211 |     {
212 |       kind: 'struct',
213 |       fields: [
214 |         ['instruction', 'u8'],
215 |         ['data', { kind: 'option', type: Data }],
216 |         ['updateAuthority', { kind: 'option', type: 'pubkey' }],
217 |         ['primarySaleHappened', { kind: 'option', type: 'u8' }],
218 |       ],
219 |     },
220 |   ],
221 | 
222 |   [
223 |     CreateMasterEditionArgs,
224 |     {
225 |       kind: 'struct',
226 |       fields: [
227 |         ['instruction', 'u8'],
228 |         ['maxSupply', { kind: 'option', type: 'u64' }],
229 |       ],
230 |     },
231 |   ],
232 |   [
233 |     MintPrintingTokensArgs,
234 |     {
235 |       kind: 'struct',
236 |       fields: [
237 |         ['instruction', 'u8'],
238 |         ['supply', 'u64'],
239 |       ],
240 |     },
241 |   ],
242 |   [
243 |     MasterEditionV1,
244 |     {
245 |       kind: 'struct',
246 |       fields: [
247 |         ['key', 'u8'],
248 |         ['supply', 'u64'],
249 |         ['maxSupply', { kind: 'option', type: 'u64' }],
250 |         ['printingMint', 'pubkey'],
251 |         ['oneTimePrintingAuthorizationMint', 'pubkey'],
252 |       ],
253 |     },
254 |   ],
255 |   [
256 |     MasterEditionV2,
257 |     {
258 |       kind: 'struct',
259 |       fields: [
260 |         ['key', 'u8'],
261 |         ['supply', 'u64'],
262 |         ['maxSupply', { kind: 'option', type: 'u64' }],
263 |       ],
264 |     },
265 |   ],
266 |   [
267 |     Edition,
268 |     {
269 |       kind: 'struct',
270 |       fields: [
271 |         ['key', 'u8'],
272 |         ['parent', 'pubkey'],
273 |         ['edition', 'u64'],
274 |       ],
275 |     },
276 |   ],
277 |   [
278 |     Data,
279 |     {
280 |       kind: 'struct',
281 |       fields: [
282 |         ['name', 'string'],
283 |         ['symbol', 'string'],
284 |         ['uri', 'string'],
285 |         ['sellerFeeBasisPoints', 'u16'],
286 |         ['creators', { kind: 'option', type: [Creator] }],
287 |       ],
288 |     },
289 |   ],
290 |   [
291 |     Creator,
292 |     {
293 |       kind: 'struct',
294 |       fields: [
295 |         ['address', 'pubkey'],
296 |         ['verified', 'u8'],
297 |         ['share', 'u8'],
298 |       ],
299 |     },
300 |   ],
301 |   [
302 |     Metadata,
303 |     {
304 |       kind: 'struct',
305 |       fields: [
306 |         ['key', 'u8'],
307 |         ['updateAuthority', 'pubkey'],
308 |         ['mint', 'pubkey'],
309 |         ['data', Data],
310 |         ['primarySaleHappened', 'u8'], // bool
311 |         ['isMutable', 'u8'], // bool
312 |       ],
313 |     },
314 |   ],
315 |   [
316 |     EditionMarker,
317 |     {
318 |       kind: 'struct',
319 |       fields: [
320 |         ['key', 'u8'],
321 |         ['ledger', [31]],
322 |       ],
323 |     },
324 |   ],
325 | ]);
326 | 
327 | export async function updateMetadata(
328 |   data,
329 |   newUpdateAuthority,
330 |   primarySaleHappened,
331 |   mintKey,
332 |   updateAuthority,
333 |   instructions,
334 |   metadataAccount,
335 | ) {
336 |   const metadataProgramId = programIds().metadata;
337 | 
338 |   // eslint-disable-next-line no-param-reassign
339 |   metadataAccount = metadataAccount
340 |     || (
341 |       await findProgramAddress(
342 |         [
343 |           Buffer.from('metadata'),
344 |           metadataProgramId.toBuffer(),
345 |           mintKey.toBuffer(),
346 |         ],
347 |         metadataProgramId,
348 |       )
349 |     )[0];
350 | 
351 |   const value = new UpdateMetadataArgs({
352 |     data,
353 |     updateAuthority: !newUpdateAuthority ? undefined : newUpdateAuthority,
354 |     primarySaleHappened:
355 |       primarySaleHappened === null || primarySaleHappened === undefined
356 |         ? null
357 |         : primarySaleHappened,
358 |   });
359 |   const txnData = Buffer.from(serialize(METADATA_SCHEMA, value));
360 |   const keys = [
361 |     {
362 |       pubkey: metadataAccount,
363 |       isSigner: false,
364 |       isWritable: true,
365 |     },
366 |     {
367 |       pubkey: updateAuthority,
368 |       isSigner: true,
369 |       isWritable: false,
370 |     },
371 |   ];
372 |   instructions.push(
373 |     new TransactionInstruction({
374 |       keys,
375 |       programId: metadataProgramId,
376 |       data: txnData,
377 |     }),
378 |   );
379 | 
380 |   return metadataAccount;
381 | }
382 | 
383 | export async function createMetadata(
384 |   data,
385 |   updateAuthority,
386 |   mintKey,
387 |   mintAuthorityKey,
388 |   instructions,
389 |   payer,
390 | ) {
391 |   const metadataProgramId = programIds().metadata;
392 | 
393 |   const metadataAccount = (
394 |     await findProgramAddress(
395 |       [
396 |         Buffer.from('metadata'),
397 |         metadataProgramId.toBuffer(),
398 |         mintKey.toBuffer(),
399 |       ],
400 |       metadataProgramId,
401 |     )
402 |   )[0];
403 |   const value = new CreateMetadataArgs({ data, isMutable: true });
404 |   const txnData = Buffer.from(serialize(METADATA_SCHEMA, value));
405 | 
406 |   const keys = [
407 |     {
408 |       pubkey: metadataAccount,
409 |       isSigner: false,
410 |       isWritable: true,
411 |     },
412 |     {
413 |       pubkey: mintKey,
414 |       isSigner: false,
415 |       isWritable: false,
416 |     },
417 |     {
418 |       pubkey: mintAuthorityKey,
419 |       isSigner: true,
420 |       isWritable: false,
421 |     },
422 |     {
423 |       pubkey: payer,
424 |       isSigner: true,
425 |       isWritable: false,
426 |     },
427 |     {
428 |       pubkey: updateAuthority,
429 |       isSigner: false,
430 |       isWritable: false,
431 |     },
432 |     {
433 |       pubkey: SystemProgram.programId,
434 |       isSigner: false,
435 |       isWritable: false,
436 |     },
437 |     {
438 |       pubkey: SYSVAR_RENT_PUBKEY,
439 |       isSigner: false,
440 |       isWritable: false,
441 |     },
442 |   ];
443 |   instructions.push(
444 |     new TransactionInstruction({
445 |       keys,
446 |       programId: metadataProgramId,
447 |       data: txnData,
448 |     }),
449 |   );
450 | 
451 |   return metadataAccount;
452 | }
453 | 
454 | export async function createMasterEdition(
455 |   maxSupply,
456 |   mintKey,
457 |   updateAuthorityKey,
458 |   mintAuthorityKey,
459 |   payer,
460 |   instructions,
461 | ) {
462 |   const metadataProgramId = programIds().metadata;
463 | 
464 |   const metadataAccount = (
465 |     await findProgramAddress(
466 |       [
467 |         Buffer.from(METADATA_PREFIX),
468 |         metadataProgramId.toBuffer(),
469 |         mintKey.toBuffer(),
470 |       ],
471 |       metadataProgramId,
472 |     )
473 |   )[0];
474 | 
475 |   const editionAccount = (
476 |     await findProgramAddress(
477 |       [
478 |         Buffer.from(METADATA_PREFIX),
479 |         metadataProgramId.toBuffer(),
480 |         mintKey.toBuffer(),
481 |         Buffer.from(EDITION),
482 |       ],
483 |       metadataProgramId,
484 |     )
485 |   )[0];
486 | 
487 |   const value = new CreateMasterEditionArgs({ maxSupply: maxSupply || null });
488 |   const data = Buffer.from(serialize(METADATA_SCHEMA, value));
489 | 
490 |   const keys = [
491 |     {
492 |       pubkey: editionAccount,
493 |       isSigner: false,
494 |       isWritable: true,
495 |     },
496 |     {
497 |       pubkey: mintKey,
498 |       isSigner: false,
499 |       isWritable: true,
500 |     },
501 |     {
502 |       pubkey: updateAuthorityKey,
503 |       isSigner: true,
504 |       isWritable: false,
505 |     },
506 |     {
507 |       pubkey: mintAuthorityKey,
508 |       isSigner: true,
509 |       isWritable: false,
510 |     },
511 |     {
512 |       pubkey: payer,
513 |       isSigner: true,
514 |       isWritable: false,
515 |     },
516 |     {
517 |       pubkey: metadataAccount,
518 |       isSigner: false,
519 |       isWritable: false,
520 |     },
521 | 
522 |     {
523 |       pubkey: programIds().token,
524 |       isSigner: false,
525 |       isWritable: false,
526 |     },
527 |     {
528 |       pubkey: SystemProgram.programId,
529 |       isSigner: false,
530 |       isWritable: false,
531 |     },
532 |     {
533 |       pubkey: SYSVAR_RENT_PUBKEY,
534 |       isSigner: false,
535 |       isWritable: false,
536 |     },
537 |   ];
538 | 
539 |   instructions.push(
540 |     new TransactionInstruction({
541 |       keys,
542 |       programId: metadataProgramId,
543 |       data,
544 |     }),
545 |   );
546 | }
547 | 
548 | export const decodeMetadata = (buffer) => {
549 |   const metadata = deserializeUnchecked(
550 |     METADATA_SCHEMA,
551 |     Metadata,
552 |     buffer,
553 |   );
554 |   return metadata;
555 | };
556 | 


--------------------------------------------------------------------------------
/src/pages/CreateNFT/1055-world-locations.json:
--------------------------------------------------------------------------------
1 | {"v":"5.0.1","fr":60,"ip":0,"op":301,"w":800,"h":600,"nm":"World","ddd":0,"assets":[{"id":"comp_5","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"here 4","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":15,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":45,"s":[100],"e":[0]},{"t":75}],"ix":11,"x":"var $bm_rt;\n$bm_rt = loopOut('cycle');"},"r":{"a":0,"k":-22.856,"ix":10},"p":{"a":0,"k":[75,75,0],"ix":2},"a":{"a":0,"k":[-252.5,-48.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.14,0.14],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p14_1_0p167_0p167","0p14_1_0p167_0p167"],"t":15,"s":[2,2],"e":[40,40]},{"t":75}],"ix":2,"x":"var $bm_rt;\n$bm_rt = loopOut('cycle');"},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.972549019608,0.576470588235,0.188235294118,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.14],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p14_1_0p167_0p167"],"t":15,"s":[10],"e":[0]},{"t":75}],"ix":5,"x":"var $bm_rt;\n$bm_rt = loopOut('cycle');"},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-252.5,-48.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":15,"op":715,"st":15,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"here","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[100],"e":[0]},{"t":60}],"ix":11,"x":"var $bm_rt;\n$bm_rt = loopOut('cycle');"},"r":{"a":0,"k":-22.856,"ix":10},"p":{"a":0,"k":[75,75,0],"ix":2},"a":{"a":0,"k":[-252.5,-48.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.14,0.14],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p14_1_0p167_0p167","0p14_1_0p167_0p167"],"t":0,"s":[2,2],"e":[60,60]},{"t":60}],"ix":2,"x":"var $bm_rt;\n$bm_rt = loopOut('cycle');"},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.972549019608,0.576470588235,0.188235294118,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.14],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p14_1_0p167_0p167"],"t":0,"s":[10],"e":[0]},{"t":60}],"ix":5,"x":"var $bm_rt;\n$bm_rt = loopOut('cycle');"},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-252.5,-48.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":730,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":2,"ty":3,"nm":"NULL CONTROL","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":-9,"ix":10},"p":{"a":0,"k":[396,281,0],"ix":2},"a":{"a":0,"k":[60,60,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":72,"op":301,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"rings 4","parent":2,"sr":1,"ks":{"o":{"a":0,"k":35,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[58.436,59.877,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[334,66.48],"ix":2},"p":{"a":0,"k":[0,55],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.686274509804,0.933333333333,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5,"ix":5},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0.5,-9.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":210,"s":[21.5],"e":[26]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":225.6,"s":[26],"e":[79]},{"t":262}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":210,"s":[21.5],"e":[79]},{"t":236}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":210,"op":301,"st":210,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"rings 3","parent":2,"sr":1,"ks":{"o":{"a":0,"k":35,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[60,70,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[417,83],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.686274509804,0.933333333333,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5,"ix":5},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0.5,-9.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":202,"s":[15],"e":[26]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":217.6,"s":[26],"e":[84]},{"t":254}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":202,"s":[15],"e":[84]},{"t":228}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":202,"op":301,"st":202,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"rings 2","parent":2,"sr":1,"ks":{"o":{"a":0,"k":35,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[58.436,59.877,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[334,66.48],"ix":2},"p":{"a":0,"k":[0,55],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.686274509804,0.933333333333,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5,"ix":5},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0.5,-9.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":60,"s":[21.5],"e":[26]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":75.6,"s":[26],"e":[79]},{"t":112}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":60,"s":[21.5],"e":[79]},{"t":86}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":60,"op":301,"st":60,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"rings","parent":2,"sr":1,"ks":{"o":{"a":0,"k":35,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[60,70,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[417,83],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.686274509804,0.933333333333,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5,"ix":5},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0.5,-9.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":52,"s":[15],"e":[26]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":67.6,"s":[26],"e":[84]},{"t":104}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":52,"s":[15],"e":[84]},{"t":78}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":52,"op":301,"st":52,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"maspMask 5","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[-18.5,-5.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-81.462,0],[0,-81.462],[81.462,0],[0,81.462]],"o":[[81.462,0],[0,81.462],[-81.462,0],[0,-81.462]],"v":[[-18.5,-153],[129,-5.5],[-18.5,142],[-166,-5.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.662744978362,0.67843095368,0.650979973288,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":0,"nm":"Here rings","parent":16,"tt":1,"refId":"comp_5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[70.408,63.975,0],"ix":2},"a":{"a":0,"k":[75,75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":150,"h":150,"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"maspMask 4","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[-18.5,-5.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-81.462,0],[0,-81.462],[81.462,0],[0,81.462]],"o":[[81.462,0],[0,81.462],[-81.462,0],[0,-81.462]],"v":[[-18.5,-153],[129,-5.5],[-18.5,142],[-166,-5.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.662744978362,0.67843095368,0.650979973288,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":0,"nm":"Here rings","parent":16,"tt":1,"refId":"comp_5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-80.007,318.38,0],"ix":2},"a":{"a":0,"k":[75,75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":150,"h":150,"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"maspMask 3","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[-18.5,-5.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-81.462,0],[0,-81.462],[81.462,0],[0,81.462]],"o":[[81.462,0],[0,81.462],[-81.462,0],[0,-81.462]],"v":[[-18.5,-153],[129,-5.5],[-18.5,142],[-166,-5.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.662744978362,0.67843095368,0.650979973288,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":0,"nm":"Here rings","parent":16,"tt":1,"refId":"comp_5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-170.998,95.543,0],"ix":2},"a":{"a":0,"k":[75,75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":150,"h":150,"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"maspMask 2","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[-18.5,-5.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-81.462,0],[0,-81.462],[81.462,0],[0,81.462]],"o":[[81.462,0],[0,81.462],[-81.462,0],[0,-81.462]],"v":[[-18.5,-153],[129,-5.5],[-18.5,142],[-166,-5.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.662744978362,0.67843095368,0.650979973288,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":0,"nm":"Here rings","parent":16,"tt":1,"refId":"comp_5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-191.425,-28.874,0],"ix":2},"a":{"a":0,"k":[75,75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":150,"h":150,"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"maspMask","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[-18.5,-5.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-81.462,0],[0,-81.462],[81.462,0],[0,81.462]],"o":[[81.462,0],[0,81.462],[-81.462,0],[0,-81.462]],"v":[[-18.5,-153],[129,-5.5],[-18.5,142],[-166,-5.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.662744978362,0.67843095368,0.650979973288,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"map","tt":1,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.95],"y":[0]},"n":["0p833_0p833_0p95_0"],"t":16,"s":[0],"e":[100]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"n":["0p833_1_0p167_0"],"t":86,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.95],"y":[0]},"n":["0p833_0p833_0p95_0"],"t":180,"s":[100],"e":[0]},{"t":239}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.14],"y":[1]},"o":{"x":[0.58],"y":[0]},"n":["0p14_1_0p58_0"],"t":16,"s":[-22.856],"e":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"n":["0p833_1_0p167_0"],"t":146,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.72],"y":[0]},"n":["0p833_0p833_0p72_0"],"t":180,"s":[0],"e":[51]},{"t":246}],"ix":10},"p":{"a":0,"k":[240.55,-287.518,0],"ix":2},"a":{"a":0,"k":[-409.527,-960.177,0],"ix":1},"s":{"a":0,"k":[53.851,53.851,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.207,0.165],[0.867,1.221],[-0.146,-1.605],[-0.425,-1.251],[1.443,0.861]],"o":[[0.99,-1.532],[0.914,1.268],[0.125,1.365],[-0.831,-1.273],[0.19,-0.107]],"v":[[53.422,-169.413],[53.886,-174.034],[55.387,-169.683],[56.25,-165.777],[52.829,-169.024]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-0.221,0.036],[0.202,-0.081]],"o":[[-0.202,0.081],[0.179,-0.142]],"v":[[79.925,-218.282],[79.321,-218.037]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[-0.097,0.141],[0.026,-0.316],[0.23,-0.223],[-0.222,0.297]],"o":[[-0.005,0.307],[-0.328,0.057],[0.146,-0.325],[0.107,-0.144]],"v":[[70.501,91.15],[70.466,92.085],[69.632,92.509],[70.199,91.575]],"c":true},"ix":2},"nm":"Path 3","mn":"ADBE Vector Shape - Group","hd":false},{"ind":3,"ty":"sh","ix":4,"ks":{"a":0,"k":{"i":[[-0.302,-0.569],[-2.966,1.735],[-0.508,0.195],[-0.288,0.188],[-0.146,-0.057],[0.432,-0.165],[-0.447,-1.656],[2.425,0.115],[0.108,0.207],[0.313,1.452]],"o":[[1.559,2.949],[0.534,-0.286],[0.261,-0.182],[0.144,0.056],[-0.41,0.1],[-2.584,1.813],[-1.28,-1.834],[-0.111,-0.206],[0.406,-1.54],[0.28,0.576]],"v":[[58.462,-160.873],[65.125,-158.758],[66.684,-159.461],[67.511,-160.019],[67.945,-159.848],[66.684,-159.461],[63.503,-154.417],[57.797,-157.441],[57.467,-158.059],[57.588,-162.59]],"c":true},"ix":2},"nm":"Path 4","mn":"ADBE Vector Shape - Group","hd":false},{"ind":4,"ty":"sh","ix":5,"ks":{"a":0,"k":{"i":[[2.019,-0.203],[1.848,1.224],[0.979,0.677],[0.668,0.287],[0.085,0.232],[0.382,0.604],[3.152,1.27],[0.544,4.318],[2.55,2.615],[0,0],[-1.086,3.211],[3.016,0.917],[1.605,3.901],[0,0.003],[-1.369,0.237],[-0.134,-0.385],[-2.91,-12.044],[-0.776,-0.561],[-4.493,-5.058],[-1.334,-0.655],[-1.389,-3.659],[-0.091,-0.245]],"o":[[-1.847,-1.226],[-0.005,-1.235],[-0.657,-0.321],[-0.084,-0.232],[0.504,-0.437],[-1.885,-2.146],[-2.966,-2.857],[-0.431,-3.362],[0,0],[-2.126,-1.468],[1.301,-3.024],[-3.297,-2.917],[0,0],[0.67,-1.565],[0.184,0.361],[6.125,10.035],[0.229,0.933],[5.65,4.112],[0.963,1.083],[-2.97,3.861],[0.093,0.263],[-2.088,0.607]],"v":[[-9.095,165.196],[-14.642,161.523],[-16.196,158.702],[-18.175,157.758],[-18.433,157.066],[-18.231,155.506],[-22.932,148.401],[-28.253,137.917],[-32.158,128.44],[-32.158,128.44],[-35.338,122.303],[-38.049,116.461],[-44.127,105.489],[-44.127,105.486],[-41.037,102.837],[-40.546,103.952],[-22.555,134.295],[-21.068,136.785],[-8.533,152.74],[-5.465,155.753],[-3.832,166.843],[-3.559,167.585]],"c":true},"ix":2},"nm":"Path 5","mn":"ADBE Vector Shape - Group","hd":false},{"ind":5,"ty":"sh","ix":6,"ks":{"a":0,"k":{"i":[[-1.611,0.833],[-2.113,1.572],[-0.011,0.004],[1.444,9.227],[-1.949,0.979],[-1.452,5.235],[-1.205,-0.651],[-4.261,3.828],[-1.263,0.803],[-0.064,-0.102],[-2.206,-0.692],[0.03,-0.378],[-5.151,-1.208],[-0.767,-0.452],[-0.467,0.059],[0.03,-0.127],[-1.628,0.466],[0.059,-0.628],[6.221,-0.498],[0.058,-3.047],[-2.229,-0.301],[-0.498,0.26],[-1.904,3.28],[-0.126,-0.064],[-1.598,0.955],[-0.054,0.758],[0,0],[-0.512,3.445],[0,0],[-0.487,1.3],[0.803,0.474],[1.709,0.909],[1.051,5.31],[-0.615,4.649],[-0.034,0.039],[-3.736,-3.599],[-2.427,1.091],[-0.07,-0.076],[-1.559,-0.503],[-0.899,-1.636],[-1.047,0.186],[-0.034,-0.256],[-1.297,-0.448],[-0.139,-0.02],[-0.027,-0.276],[0,0],[-0.999,-2.421],[0,0],[1.108,-0.057],[-0.083,-1.499],[-0.989,0.016],[-2.42,0.89],[-4.521,6.094],[-0.582,0.696],[-0.485,0.149],[-0.209,0.003],[1.303,1.458],[1.388,-0.047],[0.247,0.085],[0.344,1.099],[-0.115,0.437],[0,0.003],[-0.003,-0.003],[-4.402,-0.406],[-3.696,-5.259],[-0.385,-0.139],[-2.098,0.334],[-0.023,-0.097],[-8.01,-2.744],[-1.77,1.139],[-0.63,0.44],[-2.018,-2.544],[-0.091,-1.878],[-0.222,-0.482],[0.301,-0.402],[0.104,-0.517],[-0.023,-0.642],[0.47,-0.164],[-0.034,-0.892],[-0.07,-0.18],[0.831,-2.62],[-0.003,-0.054],[0.615,-0.059],[3.769,-1.769],[5.721,0.761],[2.154,-0.758],[0.06,-0.102],[3.676,1.63],[2.718,-0.603],[2.103,-3.244],[1.166,0.107],[-0.016,0.057],[1.988,1.048],[1.886,1.985],[4.131,0.57],[1.834,1.419],[1.213,-0.773],[0.02,-0.177],[0.928,0.318],[0.218,0.508],[-0.088,0.127],[-1.262,0.764],[0.092,1.911],[0.298,2.018],[2.657,0.046],[1.323,-1.104],[5.808,0.145],[4.091,-2.217],[7.579,1.333],[0,0]],"o":[[2.34,-0.055],[0.008,-0.006],[6.339,-3.243],[-0.341,-2.19],[4.754,-2.396],[0.447,-1.605],[6.806,3.662],[1.155,-1.247],[0.038,0.107],[1.46,1.238],[0.768,0.07],[1.181,5.686],[0.766,0.451],[0.466,-0.065],[-0.034,0.112],[0.248,1.67],[-0.321,0.486],[1.331,3.842],[-2.368,0.19],[0.314,2.527],[0.493,-0.291],[2.456,0.85],[0.123,0.054],[1.885,-0.534],[0.057,-0.76],[0,0],[2.081,-3.217],[0,0],[1.063,-0.279],[0.408,-1.091],[-1.668,-0.984],[-2.968,-3.323],[-2.772,-2.806],[0.032,-0.039],[3.051,4.341],[2.424,0.062],[0.066,0.078],[1.276,1.041],[-0.368,1.915],[0.798,0.638],[0.046,0.251],[0.357,1.338],[0.139,0.031],[0.026,0.271],[0,0],[-0.497,3.113],[0,0],[-1.104,0.053],[0.084,1.498],[0.988,-0.014],[0.416,1.976],[4.432,5.832],[0.542,-0.729],[0.485,-0.148],[0.203,0.027],[1.449,-1.446],[-1.389,0.047],[-0.23,-0.122],[-0.345,-1.097],[0.115,-0.44],[0,-0.003],[0,0.003],[3.945,-0.73],[-2.902,4.527],[0.383,0.134],[-0.168,1.234],[0.026,0.097],[6.16,9.39],[1.782,0.611],[0.65,-0.42],[2.869,-2.015],[-2.336,1.185],[0.378,0.528],[-0.305,0.402],[-0.349,0.39],[0.02,0.645],[-0.364,0.196],[-0.571,0.665],[0.081,0.175],[-2.24,1.809],[0.003,0.053],[-0.613,0.055],[-4.027,0.405],[-6.048,2.836],[-2.042,-0.274],[-0.073,0.102],[-3.675,-1.638],[-2.72,-2.133],[-3.403,2.794],[-0.918,0.868],[0.02,-0.053],[-0.621,-2.811],[-2.199,-1.156],[-2.232,-4.026],[-2.065,-0.284],[-1.066,-0.812],[-0.037,0.195],[-0.929,-0.321],[-0.219,-0.509],[0.085,-0.126],[-0.144,-1.586],[1.259,-1.353],[-0.249,-2.031],[-1.116,-2.459],[-1.873,0.022],[-5.796,-0.195],[-4.63,-0.114],[-6.651,3.599],[0,0],[-3.783,-2.584]],"v":[[-201.566,62.709],[-194.681,61.622],[-194.655,61.608],[-183.507,45.949],[-180.181,40.758],[-170.687,29.554],[-167.799,27.419],[-152.89,22.353],[-148.702,21.522],[-148.572,21.84],[-145.009,26.319],[-144.486,27.273],[-134.181,36.711],[-131.879,38.065],[-130.483,37.875],[-130.585,38.214],[-128.112,40.538],[-128.689,42.202],[-132.312,50.08],[-136.83,55.238],[-132.614,59.013],[-131.128,58.178],[-124.193,57.479],[-123.824,57.651],[-119.271,54.426],[-119.103,52.147],[-119.337,51.87],[-117.907,41.525],[-117.911,41.525],[-114.869,40.42],[-116.404,38.211],[-121.52,35.461],[-130.877,25.963],[-136.711,16.196],[-136.612,16.074],[-125.442,26.945],[-118.188,27.941],[-117.982,28.172],[-113.845,30.7],[-111.917,35.777],[-109.302,36.953],[-109.169,37.714],[-106.71,40.417],[-106.296,40.482],[-106.216,41.3],[-106.216,41.3],[-103.035,48.467],[-103.035,48.467],[-106.357,48.631],[-106.11,53.128],[-103.145,53.081],[-99.585,55.694],[-90.636,55.43],[-88.891,53.342],[-87.434,52.895],[-86.822,52.931],[-86.808,48.574],[-90.976,48.715],[-91.689,48.411],[-92.718,45.108],[-92.371,43.79],[-92.371,43.785],[-92.368,43.79],[-81.592,38.933],[-80.377,54.881],[-79.229,55.302],[-76.788,56.965],[-76.71,57.257],[-52.36,64.331],[-46.798,63.699],[-46.333,63.351],[-39.024,64.139],[-39.642,69.508],[-38.749,71.019],[-39.653,72.228],[-40.336,73.588],[-40.267,75.519],[-41.517,76.057],[-42.337,78.395],[-42.119,78.927],[-45.435,86.313],[-45.422,86.477],[-47.266,86.651],[-58.981,85.35],[-76.231,84.787],[-82.382,84.095],[-82.566,84.399],[-93.591,79.497],[-101.744,79.508],[-105.271,90.199],[-108.457,91.09],[-108.39,90.932],[-113.533,86.784],[-120.418,84.2],[-130.54,78.38],[-136.647,77.044],[-140.045,76.711],[-140.12,77.255],[-142.905,76.291],[-143.561,74.77],[-143.301,74.392],[-141.42,70.987],[-139.529,66.158],[-139.967,60.053],[-145.607,56.263],[-150.687,57.382],[-168.093,58.274],[-181.952,61.6],[-202.708,66.412],[-202.708,66.412]],"c":true},"ix":2},"nm":"Path 6","mn":"ADBE Vector Shape - Group","hd":false},{"ind":6,"ty":"sh","ix":7,"ks":{"a":0,"k":{"i":[[-1.116,3.287],[-0.344,0.171],[-1.207,1.991],[0.318,2.654],[-0.707,2.084],[-0.673,0.718],[5.35,5.919],[0.21,1.62],[-2.657,4.037],[-1.909,2.382],[-0.008,0.005],[0,0],[-0.238,-0.085],[-0.011,0.762],[-3.676,3.086],[-0.295,-1.163],[-0.144,-0.482],[1.821,-1.878],[-2.039,-8.125],[-3.893,1.121],[-4.719,3.957],[0.33,-1.953],[5.02,-5.165],[0.073,-0.259],[-3.032,-5.406],[-2.358,-4.092],[-0.176,-0.314],[-0.062,-0.051],[2.156,0.831],[6.284,-4.668],[2.378,-0.054],[-0.382,0.781]],"o":[[0.302,-0.138],[2.953,-0.811],[1.253,-1.586],[-0.255,-2.098],[0.361,-0.94],[5.4,-5.754],[-1.156,-1.281],[-0.64,-4.967],[1.909,-2.383],[0.011,-0.006],[0,0],[0.177,0.107],[0.781,-0.149],[0.069,-5.266],[0.276,1.173],[0.039,0.486],[0.628,3.093],[-5.884,6.076],[1.032,4.123],[5.479,-1.58],[0.846,1.802],[-5.823,-1.471],[-0.099,0.259],[-3.071,2.233],[-4.573,5.976],[0.069,0.309],[0.066,0.051],[-1.594,1.491],[-8.455,-3.258],[-1.886,-1.498],[0.38,-0.781],[0.879,-3.651]],"v":[[-133.233,-45.102],[-132.261,-45.565],[-126.05,-49.778],[-124.521,-55.992],[-123.943,-62.386],[-122.303,-64.802],[-122.196,-77.796],[-123.883,-82.015],[-120.423,-95.355],[-114.695,-102.503],[-114.664,-102.52],[-114.664,-102.52],[-114.048,-102.227],[-112.273,-103.47],[-105.785,-115.441],[-104.018,-112.477],[-103.792,-111.005],[-106.7,-103.64],[-111.81,-82.533],[-100.901,-72.481],[-84.436,-77.663],[-83.989,-71.987],[-100.637,-69.66],[-100.888,-68.883],[-105.265,-59.672],[-108.594,-44.484],[-108.231,-43.553],[-108.041,-43.4],[-113.651,-42.339],[-134.728,-36.408],[-141.209,-38.32],[-140.065,-40.663]],"c":true},"ix":2},"nm":"Path 7","mn":"ADBE Vector Shape - Group","hd":false},{"ind":7,"ty":"sh","ix":8,"ks":{"a":0,"k":{"i":[[0.003,0],[0,0],[-0.003,-0.003]],"o":[[0,-0.003],[0.003,0.003],[-0.003,0]],"v":[[310.8,75.721],[310.8,75.715],[310.806,75.721]],"c":true},"ix":2},"nm":"Path 8","mn":"ADBE Vector Shape - Group","hd":false},{"ind":8,"ty":"sh","ix":9,"ks":{"a":0,"k":{"i":[[0.01,0.008],[0,0],[-0.005,-0.005],[0.003,-0.003]],"o":[[0,0],[0.009,0.008],[0,0.003],[-0.008,-0.011]],"v":[[-185.481,178.021],[-185.478,178.021],[-185.455,178.05],[-185.458,178.055]],"c":true},"ix":2},"nm":"Path 9","mn":"ADBE Vector Shape - Group","hd":false},{"ind":9,"ty":"sh","ix":10,"ks":{"a":0,"k":{"i":[[-0.011,0.005],[0,-0.026],[0,0],[0,0],[0.011,0.018]],"o":[[0.003,0.023],[0,0],[0,0],[-0.012,-0.018],[0.008,-0.003]],"v":[[-99.502,344.448],[-99.498,344.516],[-99.498,344.516],[-99.498,344.516],[-99.533,344.462]],"c":true},"ix":2},"nm":"Path 10","mn":"ADBE Vector Shape - Group","hd":false},{"ind":10,"ty":"sh","ix":11,"ks":{"a":0,"k":{"i":[[-0.108,-0.217],[0.471,0.573],[0.233,0.213],[0.886,0.39],[1.429,-0.141],[-1.49,-0.653],[-0.849,-0.764],[-0.754,-0.144]],"o":[[-0.658,0.102],[-0.222,-0.274],[-0.911,-0.44],[-1.575,-0.307],[1.639,-1.078],[0.925,0.18],[0.707,0.344],[0.066,0.234]],"v":[[-49.604,-113.833],[-51.367,-114.558],[-52.056,-115.276],[-54.738,-116.618],[-59.361,-116.48],[-54.738,-116.618],[-52.056,-115.276],[-49.866,-114.513]],"c":true},"ix":2},"nm":"Path 11","mn":"ADBE Vector Shape - Group","hd":false},{"ind":11,"ty":"sh","ix":12,"ks":{"a":0,"k":{"i":[[0.139,-0.083],[-0.154,0.068]],"o":[[0.149,-0.083],[-0.154,0.074]],"v":[[-36.011,3.559],[-35.554,3.341]],"c":true},"ix":2},"nm":"Path 12","mn":"ADBE Vector Shape - Group","hd":false},{"ind":12,"ty":"sh","ix":13,"ks":{"a":0,"k":{"i":[[-0.061,0.01],[-0.003,-0.001],[0.066,-0.008]],"o":[[0.001,0],[-0.062,0.007],[0.06,-0.01]],"v":[[-32.657,-59.234],[-32.646,-59.228],[-32.83,-59.219]],"c":true},"ix":2},"nm":"Path 13","mn":"ADBE Vector Shape - Group","hd":false},{"ind":13,"ty":"sh","ix":14,"ks":{"a":0,"k":{"i":[[0.007,-0.003],[0.003,0.003],[0,0],[0,-0.005]],"o":[[-0.005,0],[0,0],[0.006,0.005],[-0.008,0.005]],"v":[[-27.527,88.936],[-27.538,88.93],[-27.511,88.902],[-27.503,88.918]],"c":true},"ix":2},"nm":"Path 14","mn":"ADBE Vector Shape - Group","hd":false},{"ind":14,"ty":"sh","ix":15,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[-0.026,0],[0.032,-0.027],[-0.009,0.019]],"o":[[0,0],[0.011,0.016],[0.028,-0.003],[-0.032,0.019],[0.008,-0.019],[0,0]],"v":[[-28.811,89.04],[-28.811,89.037],[-28.785,89.077],[-28.707,89.071],[-28.813,89.129],[-28.785,89.077]],"c":true},"ix":2},"nm":"Path 15","mn":"ADBE Vector Shape - Group","hd":false},{"ind":15,"ty":"sh","ix":16,"ks":{"a":0,"k":{"i":[[-0.018,-0.001],[0,0],[0.008,-0.022],[0.008,0.026]],"o":[[0,0],[-0.01,0.023],[-0.008,-0.024],[0.013,0.003]],"v":[[-71.66,-97.691],[-71.66,-97.691],[-71.683,-97.626],[-71.704,-97.702]],"c":true},"ix":2},"nm":"Path 16","mn":"ADBE Vector Shape - Group","hd":false},{"ind":16,"ty":"sh","ix":17,"ks":{"a":0,"k":{"i":[[0.177,-0.039],[0.104,0.042],[-0.173,0.068],[0.008,0.013],[-0.158,-0.039],[-0.049,-0.084],[0.028,-0.003],[0.072,-0.023]],"o":[[-0.106,-0.045],[0.173,-0.042],[-0.005,-0.012],[-0.168,-0.31],[0.049,0.088],[-0.023,0.005],[-0.068,0.031],[0.043,0.123]],"v":[[-95.533,34.766],[-95.851,34.646],[-95.331,34.508],[-95.339,34.477],[-95.207,34.154],[-95.06,34.414],[-95.12,34.435],[-95.331,34.508]],"c":true},"ix":2},"nm":"Path 17","mn":"ADBE Vector Shape - Group","hd":false},{"ind":17,"ty":"sh","ix":18,"ks":{"a":0,"k":{"i":[[2.527,-1.28],[0.267,1.108],[-1.144,0.263],[-0.364,0.852],[-2.1,1.244],[0.589,-2.386]],"o":[[-0.267,-1.108],[1.143,-0.232],[0.871,-0.437],[2.811,1.19],[-2.084,1.297],[-2.77,-0.317]],"v":[[-47.475,12.071],[-48.274,8.747],[-44.841,7.984],[-42.88,6.145],[-36.207,3.677],[-39.671,9.604]],"c":true},"ix":2},"nm":"Path 18","mn":"ADBE Vector Shape - Group","hd":false},{"ind":18,"ty":"sh","ix":19,"ks":{"a":0,"k":{"i":[[2.326,-0.569],[2.464,5.289],[0.217,1.67],[2.272,3.953],[0.753,-0.057],[1.62,3.556],[-3.727,2.745],[-0.019,0.055],[-3.113,-1.19],[-7.056,-8.008],[-0.68,-1.657],[-1.373,-0.446],[-2.937,-5.949]],"o":[[-5.159,1.258],[0.677,-1.331],[1.93,-5.086],[-0.696,-0.516],[-0.023,-4.294],[-1.992,-4.385],[0.018,-0.055],[2.945,0.789],[-5.583,9.238],[1.164,1.323],[0.601,1.473],[1.77,6.553],[0.116,2.49]],"v":[[29.439,56.595],[15.329,48.478],[16.1,44.011],[12.809,31.195],[10.654,30.33],[5.95,19.415],[7.881,9.355],[7.94,9.19],[16.648,7.13],[18.286,26.251],[21.18,30.589],[24.056,33.625],[32.894,51.476]],"c":true},"ix":2},"nm":"Path 19","mn":"ADBE Vector Shape - Group","hd":false},{"ind":19,"ty":"sh","ix":20,"ks":{"a":0,"k":{"i":[[5.909,-2.578],[3.184,-1.656],[1.664,2.897],[-0.902,1.963],[-0.374,0.81],[1.932,1.4],[-0.264,0.271],[-0.182,0.508],[-0.199,0.865],[-0.735,1.217],[-3.293,-2.581],[-0.175,-0.065],[0.022,-0.177],[-0.563,-0.414],[0,0],[0,0],[0.13,-0.341],[-4.339,3.307],[-0.043,-0.065],[-0.673,0.646],[-2.567,-1.178],[-1.068,-0.649],[-4.329,-5.037],[0.253,-0.693],[1.165,-0.428],[4.804,2.149]],"o":[[-3.267,1.461],[-2.478,0.014],[-0.906,-1.966],[0.378,-0.81],[0.815,-1.729],[0.265,-0.276],[0.376,-0.456],[0.515,-0.565],[1.999,0.942],[2.131,-3.532],[0.183,0.054],[-0.024,0.175],[0.566,0.412],[0,0],[0,0],[-0.064,0.362],[3.166,6.834],[0.039,0.065],[0.826,0.393],[2.638,-1.45],[0.697,0.802],[5.652,3.444],[-0.038,0.57],[-1.22,0.085],[-5.069,0.609],[-5.562,-2.485]],"v":[[-56.802,30.617],[-66.388,35.498],[-72.809,31.836],[-72.809,25.944],[-71.683,23.515],[-71.995,18.663],[-71.198,17.84],[-70.361,16.393],[-69.309,14.232],[-66.234,11.502],[-58.273,9.815],[-57.734,9.993],[-57.803,10.521],[-56.109,11.761],[-56.107,11.761],[-56.107,11.761],[-56.396,12.813],[-48.462,16.592],[-48.356,16.782],[-46.108,16.444],[-38.561,16.483],[-35.892,18.647],[-20.681,31.097],[-21.129,32.987],[-24.742,33.5],[-39.374,31.275]],"c":true},"ix":2},"nm":"Path 20","mn":"ADBE Vector Shape - Group","hd":false},{"ind":20,"ty":"sh","ix":21,"ks":{"a":0,"k":{"i":[[0.099,-0.104],[-0.362,0.765],[-0.715,2.416],[-0.046,0.421],[0.588,1.469],[-0.808,-0.642],[-0.022,-0.167],[-0.02,-0.056],[0.441,-1.194],[0.066,-0.215],[1.086,-2.298],[0.608,-0.708]],"o":[[0.574,-0.674],[0.945,-2.377],[0.042,-0.429],[0.221,-2.034],[0.466,0.589],[0.02,0.169],[0.019,0.057],[-0.771,0.922],[-0.076,0.21],[-0.241,2.527],[-0.316,0.793],[-0.088,0.088]],"v":[[61.858,-136.661],[63.232,-138.833],[64.818,-146.287],[64.948,-147.562],[64.345,-152.843],[66.262,-151.002],[66.323,-150.499],[66.373,-150.333],[65.031,-146.926],[64.818,-146.287],[63.232,-138.833],[61.882,-136.571]],"c":true},"ix":2},"nm":"Path 21","mn":"ADBE Vector Shape - Group","hd":false},{"ind":21,"ty":"sh","ix":22,"ks":{"a":0,"k":{"i":[[-0.807,-3.649],[-1.399,-4.245],[-0.712,-1.1],[0.574,-4.915],[-1.324,-0.956],[-0.976,-0.487],[-1.391,-1.193],[-0.225,-0.16],[-1.304,-1.701],[0,0],[0.001,-0.076],[-0.242,-1.433],[-0.488,-0.288],[-0.344,-0.125],[-5.449,-1.576],[0.567,1.506],[-0.028,0.956],[0,0],[1.128,-0.037],[1.167,2.823],[1.564,1.207],[0,0],[2.28,1.802],[-0.023,0.184],[1.901,2.264],[-1.429,3.142],[0.034,0.295],[-0.226,0.122],[-0.261,0.559],[-0.265,1.487],[-0.138,0.074],[-0.321,-0.539],[-0.542,-0.24],[-1.567,-0.244],[-3.629,-3.523],[-0.072,-1.182],[-0.573,0.325],[-0.108,0.118],[-1.744,0.383],[-0.022,1.913],[0.944,10.711],[0.494,0.431],[-0.004,0.394],[0,0],[3.534,2.829],[0.348,3.396],[-1.645,2.172],[0.111,1.036],[-0.474,0.199],[-2.643,-3.472],[-1.381,1.467],[-1.609,0.758],[-0.494,0.226],[-1.618,1.036],[-1.691,0.232],[-4.585,5.144],[-2.095,3.047],[-1.703,3.467],[2.53,4.066],[0.073,1.768],[0.241,1.242],[-0.012,0.817],[0.119,-0.008],[0.012,0.325],[1.752,3.587],[2.276,-0.336],[0,0],[-1.448,1.813],[-3.936,0.745],[0.037,1.759],[1.407,0.049],[4.088,-3.545],[1.492,1.274],[-0.956,0.748],[-4.453,1.698],[-1.905,-1.334],[-1.262,0.226],[-2.595,2.039],[-0.089,-0.12],[-0.187,-2.248],[-4.186,1.261],[-0.481,0.454],[2.348,-3.207],[0.291,-2.826],[-2.102,-0.682],[-0.925,2.14],[0.034,0.301],[-0.157,0.107],[0.655,4.438],[0,0],[0,0],[-0.295,0.011],[0.206,0.516],[0.436,1.109],[0.381,0.562],[-0.079,0.077],[0.494,0.466],[0,0],[2.941,0.883],[0,0],[0.55,0.742],[0.449,0.945],[0.45,0.341],[0.123,0.107],[-0.752,2.795],[0.115,0.102],[-0.004,1.839],[-6.347,0.454],[-0.5,5.495],[-0.636,1.477],[1.678,14.476],[0.21,0.594],[1.433,4.343],[-0.033,-0.052],[-1.319,-0.896],[-0.318,-0.118],[-3.097,-3.1],[0.16,-0.314],[0.435,-3.068],[-0.234,-0.526],[-1.862,-1.808],[-0.256,-0.096],[-0.413,1.41],[-1.774,-1.653],[-0.273,0.028],[0.221,1.591],[1.523,0.626],[1.647,3.857],[0.068,0.357],[0,0],[-0.001,0],[-0.516,0.301],[0.98,2.026],[3.138,9.498],[1.829,1.555],[0.385,1.163],[-1.003,-2.729],[-0.802,-0.018],[0.309,-1.326],[2.995,1.481],[1.842,-0.764],[1.215,-0.798],[0.371,-0.257],[-0.156,2.279],[-0.455,1.075],[0.318,0.153],[0.737,-1.357],[0.173,-0.175],[0.064,0.054],[-0.409,2.177],[-1.16,7.173],[-10.416,2.261],[-0.157,0.225],[-0.409,0.379],[-0.754,0.276],[-0.772,1.35],[-0.404,0.459],[-3.725,-1.453],[-0.963,-0.196],[-2.554,0.386],[-2.512,-0.18],[0,0],[-0.103,-0.337],[0,0],[0,0],[5.675,0.762],[0.141,1.23],[-0.042,0.345],[-0.023,0.066],[-0.127,2.156],[0.139,1.649],[0.045,0.218],[-0.007,0.152],[-0.628,1.479],[-3.273,-1.667],[-0.608,-0.663],[-1.526,-0.271],[-0.238,1.242],[-0.576,0.645],[-0.571,1.301],[-0.937,0],[0.035,-0.394],[0.477,-1.395],[0.692,-7.284],[3.383,-3.274],[-0.008,-0.259],[1.077,-2.578],[-0.994,-3.453],[-2.554,-4.171],[-4.011,-6.665],[-2.329,0.473],[-0.402,2.133],[-1.285,3.606],[2.779,2.398],[0,0],[-3.205,1.714],[1.959,2.708],[-4.146,3.303],[-0.036,0.854],[1.383,0.15],[0.003,0],[0,0],[-0.8,3.858],[3.93,-1.915],[0,0],[0.099,2.058],[1.051,3.217],[-2.828,1.427],[-0.088,0.126],[-0.445,-0.233],[-0.501,1.487],[-0.647,-0.008],[-1.014,-0.041],[0,1.133],[0,0],[-5.72,-3.465],[-1.605,0.334],[-7.3,9.258],[-0.962,3.635],[2.918,1.709],[1.587,2.631],[0.198,0.533],[-1.481,3.857],[0.004,0],[6.409,5.404],[-1.336,1.748],[-0.94,-0.585],[-1.793,0.026],[-4.432,-1.916],[-3.111,1.82],[0,0],[-1.083,0.868],[0.111,1.519],[1.449,0.421],[0.177,0.118],[3.01,1.369],[0.003,0],[-0.234,1.397],[2.631,2.707],[0,0],[3.541,0.288],[0,0],[2.336,0.708],[0.968,-2.901],[1.135,0.421],[2.135,-2.58],[-0.004,-0.001],[0,0],[2.543,0.326],[4.76,1.236],[8.932,-4.175],[2.573,0.688],[-2.045,-2.011],[1.722,-3.863],[3.49,2.098],[0.367,0.509],[3.797,-1.129],[-0.148,-0.374],[0.056,-0.05],[4.058,-0.097],[1.693,-1.355],[-0.024,0.009],[0,0],[-0.007,0.004],[1.572,-1.174],[2.631,4.89],[1.209,0.712],[0.368,0.404],[5.423,-4.199],[4.473,5.058],[0.917,2.928],[4.796,-2.159],[0,0],[1.188,-0.149],[2.914,-1.374],[0,0],[0.232,-7.153],[-0.2,-2.077],[-1.086,0.643],[0,0],[8.845,-2.674],[1.904,-0.299],[0,0],[1.307,-0.301],[2.544,-0.594],[0.144,-0.096],[0.517,-0.431],[-0.536,-0.766],[0.05,-0.423],[-0.904,-2.237],[5.945,1.767],[0.061,0.605],[-0.043,1.693],[2.113,0.255],[0,0],[0.198,0.322],[0.746,1.479],[4.325,-4.347],[0,0],[1.836,-0.004],[-0.727,-3.593],[3.027,-1.448],[3.553,3.098],[0.493,-0.046],[0.849,0.142],[0.326,0.133],[0.053,1.991],[4.274,-0.78],[4.132,1.378],[-0.536,-4.567],[-0.29,-0.767],[-0.003,0],[0,0],[3.996,-0.186],[0.315,0.414],[0,0],[0,0],[-3.008,9.428],[1.148,1.272],[0.091,0.375],[0,0],[5.807,2.783],[0,0],[1.521,-0.827],[0.849,-0.585],[0,0.001],[1.58,0.315],[0,0],[0,0],[0.666,-0.16],[0.425,5.946],[2.108,0.173],[0.414,-1.815],[-3.724,-3.965],[-0.015,-1.228],[-0.003,0],[0,-0.001],[0.815,-0.054],[0.223,-0.704],[0.145,-0.395],[0,0],[0.473,-0.39],[0,-0.001],[3.005,5.111],[2.046,-2.306],[0.12,-1.464],[0,-0.001],[1.721,-1.511],[0.244,-7.916],[-1.098,-0.38],[0,0],[-0.819,-0.459],[0,0],[0.626,-1.522],[0.753,-0.077],[3.687,-1.093],[-1.315,-3.533],[-3.709,-3.07],[1.674,-0.108],[0.233,0.088],[4.429,-1.278],[1.303,0.096],[-1.693,-1.484],[0.779,-0.45],[0.008,-0.386],[0,0],[0.001,-0.001],[0.099,0.103],[1.11,0.394],[0.498,0.773],[0.854,-1.8],[0,0],[0.328,-0.019],[-3.225,-3.158],[-0.18,-0.222],[0.213,0.127],[0.777,5.163],[0.739,0.821],[2.91,-0.412],[-0.232,-1.848],[-0.031,-0.387],[-0.19,-0.971],[-0.047,-0.918],[0.479,-2.657],[0.026,-0.062],[-0.034,-0.596],[0.087,-1.224],[-0.161,-2.433],[-3.579,-1.731],[-0.008,-0.007],[4.74,2.206],[2.811,-1.406],[2.251,2.689],[-2.283,-1.541],[-1.921,-1.075],[-0.176,-0.329],[4.599,1.297],[0.514,-0.257],[0.374,-0.222],[0.594,0.005],[1.697,0.976],[3.425,-1.782],[0.552,-0.588],[0.598,-0.275],[0.344,-0.44],[0.176,-0.406],[0.603,-0.371],[0.753,-0.423],[0.711,-1.93],[1.805,1.021],[-0.329,1.628],[0.003,0],[0,0],[0,0],[4.402,-0.418],[-0.915,-3.134],[-0.222,-1.58],[-0.355,-0.456],[-0.031,-0.039],[0.032,-0.042],[-0.362,-0.325],[2.386,0.054],[0.202,4.087],[1.618,0.813],[0.038,-0.015],[0.088,0.073],[0.563,0.596],[3.483,3.1],[5.932,-0.571],[2.164,6.149],[0,0],[5.104,-1.989],[3.096,-3.499],[0,0],[0.003,-0.003],[0,0],[0.502,-0.301],[0.5,-0.32],[1.406,-0.279],[3.074,-1.634],[0.692,-0.741],[1.033,-1.301],[1.362,-0.229],[-1.106,-3.477],[-0.085,-0.638],[-0.171,-1.009],[1.637,-1.047],[-0.726,-1.198],[-0.114,-0.077],[0,0],[0.232,-0.121],[4.607,-3.434],[0.623,-1.28],[4.335,-3.542],[-2.306,-6.346],[0.118,-3.965],[-6.062,1.783],[-2.539,2.613],[-0.852,-2.71],[-1.636,-0.779],[-0.023,-0.077],[-0.211,-0.539],[-0.36,-0.589],[0.027,-0.6],[1.099,-1.086],[0.45,0.129],[0.214,-0.073],[-0.062,0.219],[0.978,3.047],[2.007,-0.479],[-2.674,-5.847],[-0.013,-0.024],[0.165,-0.015],[-0.932,-1.477],[0,0],[-0.053,-0.49],[0.861,-0.844],[0.232,-0.081],[2.007,-6.069],[4.382,-0.961],[-0.67,1.652],[2.31,1.293],[1.124,0.624],[0.034,0.416],[1.816,1.239],[0,0],[-0.018,5.31],[2.886,3.173],[3.522,-1.743],[-1.205,-4.66],[7.166,-1.587],[0.175,-0.352],[1.171,-1.189],[0.05,-2.841],[1.354,-2.295],[0,0],[-4.268,-0.781],[-1.533,0.062],[-2.05,0.853],[2.354,4.06],[-0.175,1.686],[-1.682,1.351],[-0.066,0.186],[-0.543,-0.26],[-0.003,0.004],[-0.795,-0.746],[0,0],[0.716,0.011],[-0.188,-0.41],[0.853,-0.891],[0.443,-0.542],[-1.067,-1.102],[0,0],[0,-0.001],[-0.095,-0.083],[0.035,-0.037],[0.103,-0.619],[0.003,-0.362],[-0.418,-1.909],[-0.666,0.028],[0.005,-2.014],[1.075,-0.754],[-1.324,-0.252],[-0.385,-0.406],[-1.119,0.164],[-1.04,0.295],[-1.209,0.497],[1.471,-0.416],[1.089,-0.164],[0.542,-1.487],[0.02,-0.387],[0,0],[-1.132,-2.378],[-0.822,0.273],[-0.769,-0.039],[2.497,-5.881],[0,0],[2.819,0.482],[6.447,0.176],[-1.251,-4.047],[1.102,-3.372],[-0.914,-1.467],[0.638,-0.039],[0.023,-0.367],[-0.749,-1.596],[-2.684,-1.477],[-1.556,-0.367],[-0.742,-3.18],[0,0],[0,0],[0.042,-1.171],[-0.035,-0.275],[0.26,-0.257],[1.905,-0.753],[0.585,-5.937],[6.563,-2.544],[-1.393,-2.279],[0.963,-4.657],[0,0],[0.13,-0.689],[3.496,-3.12],[-0.865,-1.743],[-0.36,-0.398],[-0.378,-0.042],[-0.02,-0.226],[1.328,-5.318],[-0.104,-0.467],[-2.127,-4.531],[-0.15,-0.902],[0.046,-0.305],[-0.813,-1.007],[0,0],[-0.012,-0.84],[-2.218,0.014],[-3.677,-2.576],[-0.043,-1.156],[-0.393,-0.383],[-0.032,-0.44],[0,0],[-3.647,-0.956],[-0.406,-0.191],[-1.564,-0.776],[0,0],[0,0],[-2.168,-1.323],[0,0],[0,0],[-2.112,1.077],[-6.09,-1.156],[0,0.003],[-3.942,2.565],[-5.958,-2.25],[0,0],[-0.417,-0.821],[-0.558,-1.074],[0,0],[-3.955,1.005],[0,0],[-1.081,-0.417],[0.527,-3.766],[-0.007,-0.037],[0.336,-0.533],[0.107,-0.81],[-0.481,-0.02],[-8.822,-5.763],[-0.367,-0.445],[0,-0.003],[-0.248,-0.293],[-0.005,0],[0,-0.003],[-0.146,-0.737],[-0.624,-0.409],[0,0.003],[0,0],[-2.14,-1.82],[0,0],[-2.1,-5.427],[2.349,-2.341],[0.248,-7.189],[-1.485,-2.547],[-0.937,-7.016],[-7.77,-8.623],[-0.072,0.2],[0,0],[-0.115,-0.034],[0.153,-0.184],[0.11,-6.744],[-5.36,1.089],[-4.519,-0.471],[-5.621,4.118],[-6.52,6.975],[0.519,2.934],[-1.044,2.412],[-1.958,3.579],[2.299,3.839],[0,0],[0.135,0.386],[-0.349,1.779],[0.003,-0.003],[0,0],[-2.563,2.07],[-0.802,1.649],[0,0],[-0.543,0.539],[0,0],[0,0],[-0.012,8.503],[-0.143,3.72],[2.318,1.334],[1.289,4.305],[-1.801,4.037],[-2.455,4.425],[0,0],[-0.08,0.375],[-7.348,2.897],[-0.799,0.691],[0.429,0.527],[-0.119,0.221],[-0.364,0.122],[-0.389,0.397],[-0.668,0.699],[-0.326,0.042],[-1.063,1.693],[-0.446,-0.028],[-1.578,3.54],[0.19,0.333],[-0.142,0.104],[-0.859,2.714],[2.191,3.19],[3.073,-0.214],[8.345,2.373],[-0.03,0.245],[0.284,0.313],[-1.569,0.706],[-1.811,0.465],[-3.954,1.993],[-0.031,2.841],[0.064,0.157],[0.06,0.078],[0,0],[0.018,0.007],[0.009,0.015],[0,0.034],[-0.064,-0.164],[-0.225,-0.16],[-3.523,1.915],[-2.237,2.331],[0,0],[-3.515,3.336],[-2.133,0.825],[-2.066,2.378],[6.161,6.603],[-0.004,0.003],[2.574,0.485],[1.231,1.969],[0,0],[0,0],[-0.061,0.428],[2.194,0.497],[0.241,-1.066],[0,0],[1.476,-1.308],[0.424,-1.139],[1.128,-0.46],[2.802,1.816],[0,0],[0.391,1.597],[0,0],[-0.362,0.364],[1.324,0.192],[0.238,-0.872],[0.929,0.548],[3.346,1.774],[0,0],[0.857,1.559],[1.077,0.922],[0,0],[0,0.003],[-0.309,1.06],[-0.789,-0.013],[-1.383,-2.205],[-3.67,-2.813],[-0.879,-0.224],[-1.113,-0.167],[-1.492,0.362],[-1.147,-0.37],[-1.885,-1.339],[-6.972,1.368],[-0.627,-0.474],[-1.556,0.046],[-4.902,-7.687],[-1.555,1.15],[-1.11,-2.922],[-7.365,2.975],[-0.408,-1.495],[-0.819,-2.513],[-6.512,-14.625],[-3.354,2.93],[-1.301,3.18],[-0.007,0.054],[-0.141,1.503],[-6.411,8.54],[-1.373,1.354],[-9.085,3.303],[-1.471,-0.046],[-2.227,0.055],[-1.647,-1.794],[0.52,-8.358],[-0.764,-0.62],[-2.417,0.857]],"o":[[0.984,4.44],[0.58,1.308],[-0.074,4.942],[0.037,1.676],[0.967,0.513],[0.808,1.69],[0.229,0.158],[0.378,2.02],[0,0],[-0.005,0.077],[-2.261,1.018],[0.019,0.576],[0.362,0.073],[3.352,4.434],[1.514,-1.515],[0.031,-0.956],[0,0],[-0.539,-0.895],[-0.289,-2.962],[-1.564,-1.208],[0,0],[-2.276,-1.806],[0.033,-0.169],[0.245,-3.384],[-2.322,-2.753],[-0.032,-0.297],[0.207,-0.096],[0.471,-0.383],[0.707,-1.378],[0.118,-0.099],[0.326,0.544],[0.419,0.42],[1.517,0.547],[3.625,3.522],[0.074,1.185],[0.475,0.46],[0.141,-0.115],[2.095,0.589],[0.578,-1.575],[9.253,-2.987],[-0.49,-0.425],[0.003,-0.393],[0,0],[-0.169,-4.948],[-5.716,-4.578],[1.175,-2.458],[0.678,-0.742],[0.422,0.37],[3.704,-1.555],[1.196,1.574],[1.173,-1.246],[0.517,-0.156],[1.625,-1.032],[1.393,-1.125],[7.145,-0.984],[2.593,-2.914],[1.104,-3.758],[1.94,-3.942],[-0.964,-1.549],[-0.603,-1.159],[0.011,-0.815],[-0.118,0.007],[-0.024,-0.328],[-1.942,-3.383],[-0.98,-2.011],[0,0],[-1.085,-1.504],[2.144,-2.693],[1.741,-0.326],[-0.03,-1.513],[-3.783,-0.127],[-1.72,1.49],[-1.089,-0.932],[3.352,-2.615],[1.07,1.919],[0.963,0.727],[2.681,-1.848],[0.091,0.12],[2.146,1.713],[0.338,4.076],[0.57,-0.345],[2.06,1.461],[-0.111,2.761],[-0.213,2.061],[2.127,0.695],[0.064,-0.329],[0.183,-0.019],[5.282,1.337],[0,0],[0,0],[0.288,0.064],[-0.207,-0.519],[-0.436,-1.114],[-0.379,-0.562],[0.079,-0.07],[0.363,-0.581],[0,0],[-0.138,-3.06],[0,0],[-0.139,-1.167],[-0.41,-0.971],[-0.325,-0.46],[-0.129,-0.096],[1.185,-2.555],[-0.118,-0.099],[1.205,-1.25],[0.008,-6.589],[4.872,-0.352],[1.53,-0.149],[5.575,-12.967],[-0.036,-0.63],[-3.716,-3.586],[0.034,0.05],[0.938,1.33],[0.303,0.158],[-0.696,4.539],[-0.2,0.234],[-0.546,3.089],[0.095,0.565],[1.018,2.29],[0.26,0.093],[0.758,0.237],[1.238,-4.213],[0.273,0.005],[2.053,-2.202],[-0.961,-1.255],[-4.443,-2.826],[0.073,-0.357],[0,0],[0,0],[0.515,-0.301],[1.232,-0.058],[-4.443,-8.767],[0.259,-2.876],[-0.383,-1.162],[-1.508,-0.024],[0.506,0.559],[-0.844,0.947],[-2.217,-2.528],[-1.935,-0.52],[-1.166,0.891],[-0.401,0.195],[-1.097,-1.567],[0.894,0.039],[0.15,-0.356],[-1.354,-0.666],[-0.171,0.175],[-0.062,-0.054],[-2.206,-2.153],[1.346,-7.131],[1.781,-11.005],[0.154,-0.229],[0.19,-0.831],[0.775,-0.227],[1.661,-0.062],[0.357,-0.626],[3.398,-2.008],[0.903,0.429],[-0.614,1.086],[2.301,-0.349],[0,0],[0.064,0.348],[0,0],[0,0],[-0.567,-1.456],[-1.441,-0.551],[0.024,-0.348],[0.018,-0.065],[0.764,-2.083],[0.28,-1.61],[-0.064,-0.229],[0.007,-0.154],[1.037,-1.208],[2.854,-2.267],[0.796,0.995],[0.755,1.617],[1.632,0.288],[0.47,-0.462],[0.049,-1.381],[0.538,-0.607],[0.018,0.38],[0.104,1.359],[-2.435,7.094],[-0.456,4.803],[0.133,0.219],[3.138,1.162],[-1.495,3.584],[1.379,4.784],[4.062,6.633],[0.967,1.609],[2.196,-0.447],[0.668,-3.554],[3.108,-0.845],[0,0],[-0.364,-3.098],[4.685,-2.508],[-2.072,-2.863],[0.773,0.414],[0.045,-1.12],[0,0],[0,0],[-0.129,-3.299],[1.016,-4.535],[0,0],[-2.5,-0.971],[-0.158,-3.334],[-1.095,-2.596],[0.092,-0.122],[0.44,0.234],[0.5,-1.486],[0.647,0.008],[0.031,0.961],[1.613,0.061],[0,0],[3.695,-5.842],[1.338,0.808],[-1.844,-12.259],[2.305,-0.913],[1.017,-3.831],[-2.762,-1.617],[-0.198,-0.532],[-0.947,-2.191],[0,0],[2.676,-8.425],[-1.534,-1.295],[1.98,-2.59],[1.483,0.93],[0.856,-3.014],[2.288,3.866],[0.003,0],[1.117,0.945],[1.281,0.026],[-0.137,-1.934],[-0.059,-0.209],[0.473,-3.013],[0,0],[-0.662,-1.07],[2.552,-1.621],[0,0],[0.687,-3.859],[0,0],[-2.339,-0.71],[-1.1,2.768],[-1.135,-0.422],[-1.926,-0.672],[0,0.001],[0,0],[-1.894,-2.589],[-4.916,-0.628],[-8.887,-2.306],[-2.232,1.045],[-4.148,3.717],[2.307,2.271],[-2.949,-2.994],[-0.395,-0.421],[-0.027,-2.061],[0.146,0.372],[-0.053,0.045],[-0.429,3.789],[-1.785,0.042],[0.024,-0.011],[0,0],[0.007,-0.005],[-1.748,0.757],[-4.593,3.442],[-0.678,-1.258],[-0.371,-0.404],[-6.569,-3.724],[-5.285,4.092],[-3.802,1.87],[-2.741,-8.755],[0,0],[-1.186,0.15],[-3.016,-0.561],[0,0],[-3.005,1.273],[-1.383,0.502],[0.118,1.179],[0,0.001],[1.054,3.257],[-1.892,0.303],[0.003,0.001],[-1.304,0.301],[-1.73,3.231],[-0.15,0.088],[-0.538,-0.515],[-1.005,0.837],[-0.148,0.347],[0.613,2.295],[-6.488,-0.5],[-0.058,-0.607],[1.068,0.295],[0.06,-2.257],[0,0],[-0.045,-0.379],[-0.746,-1.477],[-3.357,-1.633],[0,0.001],[-1.839,-0.552],[-2.287,0.007],[0.328,1.628],[-2.963,1.42],[-0.497,0.05],[-1.358,0.688],[-0.326,-0.142],[-0.869,-0.659],[-4.274,0.781],[-3.43,3.203],[-2.733,-0.911],[0.288,0.768],[0,0],[-0.003,0.001],[-1.655,3.039],[-0.315,-0.412],[0,0.001],[0,0],[3.709,-9.216],[-1.147,-1.273],[0.047,-0.383],[0,0],[-4.16,-5.358],[0,0],[-1.368,1.16],[-0.848,0.588],[0,0],[-2.903,1.427],[0,0],[0,0],[-0.738,-0.156],[-3.048,0.726],[-0.154,-2.167],[-2.164,-0.179],[-1.078,4.685],[0.018,1.231],[0,0],[0,0],[-0.812,0.055],[-0.221,0.703],[-0.144,0.394],[0,0],[-0.468,0.39],[0,0],[-1.885,1.469],[-0.594,-1.013],[-0.93,0.116],[0,0],[-1.052,2.325],[-5.204,4.562],[1.096,0.382],[0,0],[0.821,0.46],[0,0],[0.781,1.063],[-0.754,0.081],[-2.994,2.692],[-3.403,1.009],[1.988,5.331],[0.356,3.037],[-0.225,-0.095],[-3.375,-2.238],[-0.081,-1.461],[-0.917,1.473],[-0.779,0.451],[-0.008,0.383],[0,-0.001],[0,0.003],[-0.1,-0.104],[-1.109,-0.394],[-0.5,-0.773],[-0.248,2.095],[0,0],[-0.33,0.055],[-1.388,3.817],[0.207,0.207],[-0.157,-0.161],[-5.112,-3.063],[-0.482,-1.06],[-2.123,-2.367],[-1.517,0.214],[0.049,0.389],[-0.487,0.707],[0.188,0.945],[-0.299,2.683],[-0.024,0.062],[-0.222,0.562],[-0.19,1.212],[1.014,2.088],[0.261,4.064],[0.038,0.023],[-4.756,-2.149],[-3.035,-0.129],[-3.07,-0.611],[-2.849,1.458],[1.819,1.227],[-0.024,0.355],[2.321,4.378],[-0.532,-0.149],[-0.376,0.206],[-0.595,-0.004],[-2.572,0.621],[-4.622,-2.665],[-0.55,0.589],[-0.657,0.177],[-0.494,0.247],[-0.047,0.508],[-0.6,0.37],[-0.75,0.423],[-2.163,0.815],[-0.917,1.139],[-1.997,-1.125],[-0.003,0],[0,0],[0,0],[-0.163,-5.221],[-5.174,0.489],[0.437,1.504],[0.165,0.562],[0.03,0.039],[-0.031,0.036],[-0.176,0.236],[0.869,2.011],[-1.862,-0.042],[1.155,-2.049],[-0.035,0.016],[-0.085,-0.073],[0.294,-0.654],[-2.693,-4.264],[-4.302,-3.831],[-4.955,-1.649],[0,0],[-4.534,-1.468],[-3.613,-0.952],[0.003,0],[0,0],[0,0],[-0.479,0.34],[-0.509,0.305],[-1.292,0.623],[-2.137,3.555],[-0.787,0.612],[-1.36,0.989],[-0.994,0.733],[-3.112,1.839],[0.221,0.687],[-0.248,0.96],[-0.433,1.449],[-0.955,0.982],[0.116,0.104],[0,0],[-0.234,0.12],[-3.733,3.916],[-0.83,1.062],[-2.229,5.637],[-6.772,4.607],[1.393,3.833],[-0.19,6.431],[3.538,-1.04],[-0.251,2.845],[0.872,1.664],[0.026,0.076],[0.095,0.571],[0.44,0.737],[-0.027,0.6],[-1.606,0.055],[-0.424,0.031],[-0.242,0.024],[0.047,-0.222],[2.592,-3.151],[-0.58,-1.809],[-5.762,1.369],[0.015,0.024],[-0.152,0.004],[-1.101,1.637],[0,0],[0.394,0.665],[-0.592,1.035],[-0.218,0.088],[-4.525,2.114],[-1.553,4.714],[-1.025,-1.766],[0.917,-2.24],[-0.848,-1.362],[-0.035,-0.414],[1.786,-2.123],[0,0],[-2.966,-4.348],[0.018,-4.337],[-1.815,-1.996],[-3.553,1.755],[1.79,6.902],[-0.233,0.052],[-1.17,1.189],[-2.612,0.598],[-0.045,2.305],[0,0],[-2.177,4.494],[1.583,0.288],[1.819,-1.555],[3.328,-1.381],[2.387,0.108],[0.245,-2.391],[0.095,-0.177],[0.542,0.259],[0,0],[0.795,0.746],[0,0],[-0.711,-0.012],[0.187,0.409],[-1.169,0.38],[-0.441,0.54],[-1.46,1.144],[0,0],[0,0],[0.089,0.081],[-0.038,0.035],[-0.357,0.506],[-0.007,0.361],[-1.121,0.443],[0.668,-0.029],[0.84,2.148],[-1.078,0.753],[-1.036,2.6],[0.389,0.409],[1.311,0.597],[0.953,-0.516],[1.311,-0.687],[-0.876,1.154],[-0.967,0.508],[-1.066,0.573],[-0.034,0.38],[0,0],[-1.591,2.443],[0.819,0.635],[0.657,0.404],[6.836,5.625],[0,0],[-0.976,4.439],[-6.428,-1.097],[-2.947,2.716],[1.078,3.487],[-0.309,1.616],[-0.632,0.039],[-0.003,0.37],[0.749,1.597],[-2.152,2.546],[1.559,0.366],[3.106,0.139],[0,0],[0,0],[-0.042,1.169],[0.039,0.272],[-0.181,0.303],[-0.534,2.095],[-6.014,2.378],[-0.777,7.968],[-2.39,0.925],[-3.327,2.883],[-0.003,0],[-0.133,0.685],[-5.143,1.824],[-0.506,1.477],[0.357,0.398],[0.32,0.385],[0.02,0.21],[-0.909,5.349],[-0.008,0.498],[-1.266,3.893],[0.84,0.894],[0,0.311],[-0.894,1.571],[0,0],[0.01,0.834],[2.213,-0.019],[2.57,3.732],[0.045,1.159],[0.394,0.384],[0.035,0.437],[0,0],[0.959,4.183],[0.41,0.195],[0.34,2.096],[0,0],[0,0],[1.342,2.433],[0,0],[0,0],[2.065,1.831],[5.689,-2.906],[0,-0.003],[5.018,2.107],[5.7,-1.661],[0.003,0],[0.414,0.821],[0.556,1.075],[0.003,0],[3.458,4.672],[0,0],[0.247,1.304],[3.689,1.427],[0.011,0.037],[-0.49,0.156],[-0.103,0.803],[0.481,0.02],[-4.014,10.272],[0.364,0.445],[0,0.003],[0.081,0.385],[0,0],[-0.005,0],[0.145,0.742],[0.625,0.412],[0,0],[0,0.003],[-0.632,2.68],[0,0],[0.83,5.626],[1.156,2.993],[-5.352,5.334],[-0.845,2.898],[3.532,6.047],[1.476,11.017],[0.005,-0.221],[0,0],[0.116,0.039],[-0.154,0.18],[0.742,6.314],[-0.088,5.323],[4.299,-0.88],[7.104,0.739],[7.839,-5.74],[1.797,-1.927],[1.031,-2.408],[4.089,-0.666],[1.882,-4.188],[0,0.003],[-0.137,-0.387],[0.349,-1.778],[-0.003,0],[0,0],[2.559,-2.073],[1.877,-0.229],[0,0],[0.54,-0.539],[0,-0.003],[0,0],[8.484,-2.425],[0.009,-3.722],[0.102,-2.534],[-1.117,-4.601],[-1.48,-4.953],[2.18,-4.886],[0,0],[0.249,-0.283],[5.981,-4.604],[0.796,-0.691],[0.387,-0.584],[0.119,-0.229],[0.358,-0.045],[0.504,-0.219],[0.825,-0.576],[0.302,-0.15],[1.06,-1.69],[0.447,0.028],[1.58,-3.541],[0.311,-0.427],[0.126,-0.122],[1.096,-2.534],[1.07,-3.385],[-2.448,-3.556],[-8.042,0.554],[0.047,-0.078],[0.045,-0.352],[-0.349,-2.62],[1.16,-0.11],[4.107,-1.521],[1.825,-0.919],[-0.053,-0.186],[-0.057,-0.082],[0.012,-0.01],[-0.016,-0.011],[-0.008,-0.013],[-0.003,-0.031],[0.076,0.141],[0.175,0.228],[4.206,0.723],[1.966,-2.576],[0,0],[5.106,-0.628],[2.73,0.635],[0.998,-2.618],[5.693,-6.539],[0,0],[-2.578,-0.488],[-1.234,-1.974],[0,0],[0,0],[0.062,-0.435],[-0.413,-1.453],[-0.925,-0.209],[0,0],[-1.473,1.305],[-0.423,1.143],[-1.125,0.46],[-2.944,-1.278],[0,-0.003],[-0.389,-1.594],[0,0],[0.363,-0.367],[-0.364,-1.274],[-0.229,0.875],[-0.928,-0.552],[-0.387,-3.802],[0,0],[-0.861,-1.56],[-0.149,-1.332],[0,0],[0,0],[0.301,-1.059],[0.88,-0.181],[2.278,0.719],[2.566,4.087],[0.669,0.62],[1.067,0.42],[1.397,0.654],[1.182,0.138],[2.635,-0.482],[6.011,4.279],[0.019,0.727],[1.473,0.708],[6.676,-0.789],[0.956,1.5],[0.199,3.366],[2.906,7.61],[2.91,0.05],[0.096,2.531],[4.975,15.332],[1.85,4.153],[2.46,-2.148],[0.006,-0.05],[1.077,-0.443],[0.955,-10.279],[1.416,-1.312],[6.658,-6.57],[1.327,0.691],[2.164,-1.067],[-0.642,2.758],[5.074,5.534],[-0.061,0.951],[2.481,1.104],[3.277,-1.159]],"v":[[229.306,161.004],[234.246,173.453],[235.961,177.415],[234.814,192.198],[236.897,196.127],[239.817,197.622],[243.442,201.67],[244.115,202.155],[246.197,207.887],[246.197,207.889],[246.201,208.121],[245.658,212.21],[246.404,213.515],[247.459,213.814],[260.108,223.578],[260.093,219.049],[260.181,216.177],[260.18,216.158],[257.967,214.416],[256.639,205.605],[251.943,201.989],[251.943,201.989],[245.104,196.573],[245.197,196.065],[241.788,187.655],[240.412,179.201],[240.311,178.31],[240.953,178.001],[242.058,176.597],[242.916,172.143],[243.302,171.883],[244.287,173.5],[245.715,174.516],[250.314,175.833],[261.19,186.402],[261.405,189.95],[262.979,190.153],[263.347,189.806],[268.205,187.59],[270.661,183.298],[280.962,166.312],[279.487,165.027],[279.505,163.848],[279.504,163.848],[272.931,152.782],[264.467,142.605],[267.482,134.941],[268.654,132.397],[270.029,132.823],[279.395,135.116],[283.88,134.783],[287.586,131.269],[289.106,130.699],[294.373,128.732],[299.122,126.815],[315.602,116.052],[320.298,106.095],[325.157,95.591],[325.406,83.424],[323.973,78.487],[322.75,74.877],[322.787,72.429],[322.435,72.45],[322.381,71.467],[316.014,61.65],[311.116,58.208],[311.116,58.208],[310.772,53.47],[318.165,46.517],[320.65,43.027],[318.443,39.957],[307.017,39.517],[301.871,38.133],[300.761,34.567],[308.93,25.015],[311.689,30.736],[314.936,31.791],[323.889,28.322],[324.156,28.685],[325.824,35.125],[332.19,39.935],[333.735,38.693],[335.03,45.012],[335.643,53.239],[338.529,57.862],[343.217,55.574],[343.255,54.634],[343.769,54.458],[349.329,48.465],[349.328,48.465],[349.329,48.462],[350.208,48.541],[349.587,46.986],[348.275,43.652],[347.134,41.968],[347.375,41.762],[347.178,40.194],[346.949,40.389],[342.482,34.352],[342.498,34.346],[341.458,31.487],[339.948,28.702],[338.812,27.487],[338.441,27.174],[342.84,19.972],[342.491,19.67],[344.116,15.112],[352.351,6.114],[359.95,-2.139],[362.934,-4.934],[370.991,-45.634],[370.627,-47.465],[366.477,-60.555],[366.569,-60.402],[370.079,-57.202],[371.012,-56.793],[375.769,-41.198],[375.222,-40.394],[376.27,-31.452],[376.732,-29.809],[380.267,-23.23],[381.042,-22.944],[383.282,-22.616],[387.957,-23.223],[388.781,-23.261],[387.593,-27.889],[384.193,-31.076],[380.032,-42.932],[380.038,-44.006],[380.038,-44.006],[380.04,-44.006],[381.587,-44.904],[383.261,-46.878],[369.356,-72.851],[365.804,-78.741],[364.646,-82.228],[362.265,-79.944],[363.909,-78.492],[361.632,-75.474],[353.644,-81.256],[347.985,-80.82],[344.445,-78.25],[343.279,-77.575],[340.469,-82.546],[342.855,-83.299],[342.407,-84.706],[339.211,-83.555],[338.697,-83.031],[338.515,-83.198],[338.452,-89.724],[344.35,-110.563],[357.196,-124.625],[357.661,-125.307],[358.581,-127.074],[360.872,-127.835],[365.109,-128.854],[366.256,-130.47],[376.783,-131.583],[379.559,-130.562],[381.738,-129.195],[387.688,-132.106],[387.688,-132.105],[387.937,-131.078],[388.317,-131.149],[388.704,-131.149],[388.118,-135.669],[385.589,-138.629],[385.685,-139.672],[385.73,-139.869],[386.897,-146.246],[387.213,-151.122],[387.087,-151.778],[387.107,-152.237],[389.011,-156.663],[398.192,-157.695],[400.275,-155.221],[404.252,-152.499],[406.248,-154.838],[407.797,-156.487],[408.996,-160.477],[411.145,-161.476],[411.128,-160.315],[411.484,-156.237],[409.06,-134.339],[404.417,-122.337],[404.631,-121.616],[406.91,-115.381],[407.304,-105.091],[413.484,-91.825],[425.747,-71.974],[429.176,-67.962],[432.108,-73.257],[431.253,-83.674],[432.43,-88.357],[432.43,-88.358],[434.166,-96.96],[434.601,-103.975],[434.246,-113.435],[435.861,-114.05],[434.066,-116.398],[434.063,-116.397],[434.063,-116.398],[429.751,-123.942],[425.186,-127.617],[425.184,-127.617],[422.637,-133.011],[421.498,-142.903],[423.277,-149.179],[423.544,-149.557],[424.868,-148.855],[426.374,-153.315],[428.315,-153.289],[429.273,-150.842],[430.573,-153.482],[430.573,-153.482],[441.355,-156.249],[445.536,-155.018],[455.446,-186.725],[462.425,-188.449],[457.481,-196.742],[451.249,-203.129],[450.655,-204.728],[446.812,-210.617],[446.808,-210.617],[442.402,-227.075],[441.362,-231.552],[444.438,-230.343],[449.199,-228.638],[455.082,-233.115],[463.442,-231.85],[463.445,-231.85],[466.738,-231.919],[468.821,-233.842],[465.737,-236.583],[465.379,-237.073],[462.278,-243.978],[462.275,-243.979],[461.063,-247.47],[462.303,-253.675],[462.303,-253.673],[457.588,-259.526],[457.588,-259.525],[450.577,-261.648],[444.912,-255.709],[441.512,-256.973],[435.635,-257.37],[435.639,-257.366],[435.642,-257.347],[428.34,-259.575],[413.603,-261.441],[387.1,-261.674],[379.747,-260.731],[381.621,-253.373],[386.007,-245.645],[375.632,-252.09],[374.508,-253.546],[369.421,-255.492],[369.861,-254.372],[369.706,-254.243],[363.487,-248.448],[357.794,-247.266],[357.864,-247.297],[357.774,-247.253],[357.794,-247.266],[352.712,-244.641],[341.745,-246.839],[339.079,-249.86],[337.967,-251.072],[319.297,-249.47],[305.507,-249.887],[295.404,-251.458],[283.349,-254.705],[283.349,-254.705],[279.788,-254.257],[270.86,-253.741],[270.86,-253.741],[262.093,-249.402],[259.219,-246.563],[261.175,-245.634],[261.175,-245.633],[260.643,-236.082],[254.956,-235.177],[254.961,-235.175],[251.046,-234.273],[243.604,-231.854],[243.164,-231.577],[241.479,-232.011],[241.446,-229.621],[241.137,-228.476],[242.342,-221.45],[225.726,-229.562],[225.545,-231.378],[228.216,-232.148],[224.44,-235.715],[224.44,-235.716],[224.072,-236.77],[221.834,-241.203],[211.261,-243.003],[211.261,-243.001],[205.747,-244.548],[201.668,-240.416],[201.684,-235.494],[192.228,-234.317],[190.748,-234.174],[187.458,-233.38],[186.48,-233.791],[185.118,-237.806],[172.301,-235.462],[160.733,-233.414],[156.168,-230.706],[157.032,-228.405],[157.034,-228.407],[157.032,-228.405],[149.738,-222.128],[148.792,-223.365],[148.792,-223.364],[148.792,-223.364],[156.8,-251.936],[153.355,-255.755],[153.286,-256.892],[153.285,-256.892],[137.36,-267.571],[137.268,-267.602],[132.592,-265.373],[130.051,-263.614],[130.049,-263.615],[126.665,-266.33],[126.665,-266.33],[126.665,-266.33],[124.464,-266.754],[117.786,-269.924],[112.382,-272.381],[108.81,-269.223],[110.783,-255.889],[110.831,-252.199],[110.834,-252.199],[110.831,-252.197],[108.389,-252.035],[107.725,-249.921],[107.293,-248.738],[107.293,-248.738],[105.882,-247.566],[105.882,-247.564],[99.679,-246.809],[93.531,-243.207],[92.055,-240.668],[92.055,-240.666],[86.882,-236.139],[76.03,-219.176],[79.321,-218.034],[79.318,-218.034],[81.777,-216.655],[81.777,-216.655],[82.897,-213.064],[80.638,-212.823],[70.221,-208.031],[67.729,-201.89],[78.204,-191.867],[74.787,-189.219],[74.098,-189.492],[62.972,-192.863],[60.706,-194.984],[60.689,-190.552],[58.355,-189.2],[58.33,-188.047],[58.63,-187.741],[58.628,-187.735],[58.33,-188.047],[55.001,-189.227],[53.504,-191.55],[52.636,-185.739],[52.636,-185.739],[51.649,-185.626],[53.094,-174.968],[53.672,-174.323],[53.124,-174.76],[46.482,-188.022],[44.998,-191.168],[37.092,-193.456],[33.955,-190.622],[34.068,-189.46],[33.569,-186.926],[33.917,-184.132],[32.569,-176.14],[32.5,-175.956],[32.239,-174.208],[31.808,-170.557],[34.087,-164.011],[40.089,-155.455],[40.307,-155.271],[25.444,-159.575],[16.379,-159.609],[8.445,-164.618],[8.255,-159.886],[13.935,-156.547],[14.122,-155.512],[10.626,-151.038],[8.998,-150.648],[7.877,-150.001],[6.095,-150.02],[-1.48,-148.415],[-12.447,-146.437],[-14.097,-144.671],[-16.06,-144.066],[-17.317,-143.038],[-17.668,-141.68],[-19.471,-140.568],[-21.73,-139.303],[-25.206,-134.545],[-28.606,-132.3],[-28.887,-137.031],[-28.892,-137.031],[-28.889,-137.031],[-28.781,-137.05],[-35.399,-144.02],[-38.164,-137.169],[-37.847,-132.437],[-37.155,-130.862],[-37.059,-130.745],[-37.155,-130.648],[-36.875,-129.809],[-38.757,-126.366],[-43.736,-128.607],[-45.384,-132.472],[-45.495,-132.424],[-45.758,-132.642],[-46.133,-134.518],[-57.564,-142.032],[-72.804,-147.631],[-85.581,-155.946],[-85.581,-155.946],[-99.515,-158.357],[-109.876,-157.097],[-109.873,-157.097],[-109.876,-157.094],[-109.979,-157.19],[-111.451,-156.23],[-112.958,-155.289],[-116.875,-153.557],[-126.166,-148.801],[-128.356,-146.732],[-131.925,-143.255],[-135.399,-141.734],[-138.432,-133.716],[-137.996,-131.739],[-138.165,-128.775],[-141.219,-125.017],[-141.624,-121.754],[-141.28,-121.51],[-141.28,-121.51],[-141.984,-121.148],[-149.28,-107.248],[-152.103,-104.406],[-163.566,-92.227],[-169.594,-78.191],[-167.983,-66.632],[-157.406,-58.486],[-148.16,-63.69],[-145.802,-55.535],[-141.904,-52.028],[-141.831,-51.805],[-141.377,-50.127],[-140.191,-48.159],[-140.276,-46.358],[-144.278,-44.542],[-145.578,-44.655],[-146.257,-44.492],[-146.111,-45.163],[-146.311,-54.508],[-150.379,-56.804],[-156.271,-43.003],[-156.229,-42.927],[-156.691,-42.905],[-156.348,-38.28],[-156.342,-38.266],[-155.693,-36.544],[-157.983,-33.804],[-158.656,-33.551],[-171.347,-25.769],[-180.502,-17.958],[-180.127,-22.97],[-181.727,-28.478],[-185.275,-29.856],[-185.373,-31.1],[-186.485,-35.88],[-186.485,-35.882],[-193.945,-49.588],[-197.441,-59.927],[-203.31,-63.523],[-211.093,-55.338],[-217.257,-42.82],[-217.783,-41.803],[-221.294,-38.236],[-224.919,-33.252],[-224.781,-26.377],[-224.793,-26.367],[-221.569,-18.268],[-217,-18.756],[-210.737,-21.084],[-207.177,-28.439],[-204.179,-32.129],[-201.108,-37.409],[-200.887,-37.962],[-199.258,-37.183],[-199.255,-37.187],[-196.869,-34.95],[-196.991,-34.464],[-199.131,-34.495],[-198.569,-33.265],[-201.499,-31.195],[-202.821,-29.57],[-202.765,-26.21],[-202.765,-26.21],[-202.765,-26.208],[-202.49,-25.961],[-202.607,-25.865],[-203.297,-24.183],[-203.307,-23.102],[-205.069,-20.253],[-203.069,-20.339],[-204.159,-14.44],[-207.388,-12.177],[-205.093,-9.758],[-203.934,-8.533],[-200.309,-7.989],[-197.24,-9.086],[-193.495,-11.096],[-197.24,-9.086],[-200.309,-7.989],[-202.832,-5.069],[-202.913,-3.919],[-202.913,-3.919],[-202.753,3.291],[-200.293,3.931],[-198.14,4.554],[-192.333,19.947],[-192.348,19.967],[-199.678,23.306],[-218.997,22.262],[-221.867,32.216],[-222.602,42.521],[-222.922,47.285],[-224.824,47.403],[-224.865,48.507],[-222.618,53.296],[-221.363,59.23],[-216.69,60.326],[-210.793,65.144],[-210.793,65.144],[-210.795,65.144],[-210.919,68.651],[-210.806,69.47],[-211.448,70.324],[-215.283,74.431],[-225.352,87.832],[-236.938,102.194],[-239.044,106.997],[-246.47,117.555],[-246.473,117.555],[-246.867,119.612],[-255.189,130.685],[-256.031,135.251],[-254.956,136.444],[-253.912,137.064],[-253.854,137.699],[-255.384,153.885],[-255.253,155.337],[-257.304,167.34],[-257.277,170.05],[-257.348,170.973],[-256.266,174.442],[-255.985,174.437],[-255.952,176.949],[-249.307,176.899],[-239.894,186.314],[-239.758,189.786],[-238.579,190.934],[-238.468,192.249],[-238.466,192.249],[-230.757,198.987],[-229.531,199.566],[-225.944,203.084],[-225.944,203.081],[-225.944,203.084],[-219.967,207.759],[-219.967,207.759],[-219.967,207.759],[-213.612,207.969],[-195.889,206.084],[-195.889,206.079],[-183.009,202.967],[-165.662,201.766],[-165.659,201.766],[-164.414,204.225],[-162.74,207.449],[-162.737,207.449],[-151.256,208.812],[-151.256,208.812],[-149.051,211.387],[-144.752,219.359],[-144.73,219.469],[-145.847,220.815],[-146.163,223.234],[-144.723,223.294],[-136.766,247.084],[-135.669,248.42],[-135.669,248.425],[-135.172,249.441],[-135.164,249.441],[-135.17,249.444],[-134.734,251.665],[-132.857,252.891],[-132.857,252.889],[-132.857,252.891],[-130.835,259.717],[-130.835,259.717],[-127.991,276.545],[-129.764,284.671],[-136.436,304.101],[-134.719,311.762],[-126.449,331.05],[-115.826,361.523],[-115.711,360.896],[-115.711,360.896],[-115.364,360.981],[-115.826,361.523],[-112.052,380.234],[-102.549,386.039],[-89.537,383.822],[-70.739,377.834],[-51.905,356.273],[-49.853,348.473],[-46.746,341.242],[-37.947,334.497],[-38.929,322.495],[-38.929,322.498],[-39.338,321.336],[-38.295,316.005],[-38.301,316.007],[-38.298,316.005],[-30.616,309.791],[-26.789,306.728],[-26.792,306.728],[-25.168,305.111],[-25.168,305.108],[-25.168,305.108],[-13.582,290.175],[-13.416,279.009],[-16.118,273.003],[-18.142,259.085],[-16.131,247.055],[-7.073,235.017],[-7.073,235.017],[-6.577,234.03],[10.73,219.432],[13.124,217.359],[13.051,215.692],[13.407,215.018],[14.486,214.778],[15.828,213.85],[18.041,211.915],[18.977,211.608],[22.164,206.53],[23.505,206.612],[28.233,195.992],[28.395,194.861],[28.793,194.52],[32.973,187.457],[33.688,177.245],[24.58,176.839],[0.556,179.555],[0.671,179.076],[0.311,178.078],[2.83,173.776],[7.221,172.882],[19.646,168.663],[23.842,164.567],[23.67,164.048],[23.502,163.803],[23.528,163.785],[23.478,163.765],[23.451,163.723],[23.451,163.624],[23.67,164.048],[24.255,164.648],[35.516,161.56],[41.691,154.079],[41.691,154.076],[53.575,146.331],[59.876,143.617],[63.458,136.022],[62.723,122.35],[62.604,122.475],[54.875,121.016],[51.176,115.099],[51.175,115.099],[51.175,115.099],[51.358,113.807],[50.113,109.596],[48.923,112.416],[48.922,112.416],[44.497,116.337],[43.225,119.761],[39.841,121.141],[30.675,118.557],[30.675,118.555],[29.502,113.768],[29.502,113.768],[30.594,112.672],[28.143,110.38],[27.448,113],[24.667,111.347],[19.169,102.91],[19.169,102.913],[16.592,98.237],[15.113,94.696],[15.113,94.696],[15.113,94.693],[16.021,91.519],[18.516,91.296],[24.21,95.425],[34.068,105.108],[36.403,106.363],[39.687,107.184],[44.017,107.661],[47.52,108.354],[53.511,111.138],[73.223,114.523],[74.338,116.263],[78.931,116.777],[97.487,121.138],[101.749,121.855],[106.573,129.266],[119.325,134.8],[121.549,138.723],[122.279,146.299],[141.346,190.398],[149.744,192.139],[155.912,184.509],[155.929,184.35],[157.461,180.969],[166.207,152.023],[170.444,148.083],[191.156,129.373],[195.474,129.904],[202.147,129.432],[204.662,136.001],[214.007,155.495],[215.594,157.842],[222.809,157.422]],"c":true},"ix":2},"nm":"Path 22","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":10,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"null","np":23,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"outline fill","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.58],"y":[0]},"n":["0p833_0p833_0p58_0"],"t":30,"s":[0],"e":[100]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"n":["0p833_1_0p167_0"],"t":114,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.72],"y":[0]},"n":["0p833_0p833_0p72_0"],"t":180,"s":[100],"e":[0]},{"t":262}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[-18.5,-5.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-81.462,0],[0,-81.462],[81.462,0],[0,81.462]],"o":[[81.462,0],[0,81.462],[-81.462,0],[0,-81.462]],"v":[[-18.5,-153],[129,-5.5],[-18.5,142],[-166,-5.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":7,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":301,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"outline","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.37],"y":[1]},"o":{"x":[0.58],"y":[0]},"n":["0p37_1_0p58_0"],"t":0,"s":[180],"e":[785]},{"i":{"x":[0.564],"y":[1]},"o":{"x":[0.182],"y":[0]},"n":["0p564_1_0p182_0"],"t":120,"s":[785],"e":[809]},{"i":{"x":[0.41],"y":[1]},"o":{"x":[0.339],"y":[0]},"n":["0p41_1_0p339_0"],"t":180,"s":[809],"e":[1260]},{"t":300}],"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[-18.5,-5.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-81.462,0],[0,-81.462],[81.462,0],[0,81.462]],"o":[[81.462,0],[0,81.462],[-81.462,0],[0,-81.462]],"v":[[-18.5,-153],[129,-5.5],[-18.5,142],[-166,-5.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.37],"y":[1]},"o":{"x":[0.58],"y":[0]},"n":["0p37_1_0p58_0"],"t":0,"s":[99.9],"e":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"n":["0p833_1_0p167_0"],"t":120,"s":[0],"e":[0]},{"i":{"x":[0.41],"y":[1]},"o":{"x":[0.58],"y":[0]},"n":["0p41_1_0p58_0"],"t":180,"s":[0],"e":[99.9]},{"t":300}],"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.5],"y":[0]},"n":["0p833_0p833_0p5_0"],"t":0,"s":[23],"e":[4]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"n":["0p833_1_0p167_0"],"t":60,"s":[4],"e":[4]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.5],"y":[0]},"n":["0p833_0p833_0p5_0"],"t":248,"s":[4],"e":[23]},{"t":300}],"ix":5},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false}],"ip":0,"op":301,"st":0,"bm":0}]}


--------------------------------------------------------------------------------