{"version":3,"sources":["components/Header/MenuItems.jsx","components/Header/Header.jsx","store/context.js","store/contextColorFilter.js","components/gallary/ImgGrid.jsx","components/gallary/FilterColor.jsx","components/gallary/Preview.jsx","components/background/background.jsx","components/roadmap/roadmap.jsx","App.js","store/useGlobalState.js","store/useGlobalStateColorFilter.js","index.js"],"names":["DivMenuItems","styled","div","MenuItems","path","render","history","Tabs","value","location","pathname","includes","aria-label","TabIndicatorProps","style","backgroundColor","Tab","label","component","Link","to","minWidth","url","network","bgColor","height","width","AppHeader","header","Header","props","Context","createContext","ContextColorFilter","ImgGrid","state","useContext","imageList","console","log","images","resources","filter","cImg","mainColor","useState","Array","length","fill","imagesShownArray","setImageShownArray","className","map","image","index","partialVisibility","onChange","isVisible","currentImagesShownArray","imageVisibleChange","GridGalleryCard","imageUrl","imageName","name","show","actions","onClick","e","target","offsetParent","children","src","id","alt","replace","type","payload","handleClick","FilterColor","Dropdown","onSelect","event","colorToFilter","Toggle","variant","size","Menu","Item","href","Preview","imagePfP","setImagePfP","openseaLink","opensea","fileReader","FileReader","onload","result","readAsDataURL","files","Button","Math","floor","random","Background","Roadmap","start","AppPage","PageContent","App","exact","useGlobalState","rndInt","list","setState","action","useGlobalStateColorFilter","Index","store","storeColorFilter","Provider","ReactDOM","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.5d80de86.chunk.js","sourcesContent":["import React from 'react';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport 'styled-components'\r\nimport styled from 'styled-components'\r\nimport { SocialIcon } from 'react-social-icons';\r\nimport {\r\n  Route,\r\n  Link  \r\n} from \"react-router-dom\";\r\nimport \"./MenuItems.css\"\r\n\r\nconst DivMenuItems = styled.div`\r\n  position:relative;  \r\n  left: 50%;\r\n  transform: translate(-50%, 0);\r\n  display: flex; \r\n  \r\n`;  \r\n\r\n\r\n\r\nexport default function MenuItems() {\r\n  return (\r\n    <DivMenuItems>\r\n      <Route \r\n        path=\"/\"\r\n        render={(history) => (\r\n          <Tabs value={history.location.pathname.includes('/trade') ? false : history.location.pathname } aria-label=\"\" TabIndicatorProps={{style: {backgroundColor: \"#70D9BA\"}}}>\r\n            <Tab label=\"Gallery\" value={\"/\"} component={Link} to={\"/\"}/>\r\n            <Tab label=\"Story\" value={\"/Story\"} component={Link} to={\"/Story\"}/>\r\n            <Tab label=\"Vision\" value={\"/Roadmap\"} component={Link} to={\"/Roadmap\"}/> \r\n            <Tab style={{ minWidth: 10 }} label= {<SocialIcon url=\"https://discord.gg/RhZZfgube6\" network=\"discord\" bgColor=\"#ffffff\" style={{ height: 35, width: 35 }}/>} value={\"\"} />\r\n            <Tab style={{ minWidth: 10 }} label={<SocialIcon url=\"https://twitter.com/888whales_nft\" network=\"twitter\" bgColor=\"#ffffff\" style={{ height: 35, width: 35 }}/>} value={\"\"} />\r\n          </Tabs>\r\n        )} \r\n      />\r\n\r\n    </DivMenuItems>\r\n  );\r\n}","import React from 'react'\r\nimport styled from 'styled-components';\r\nimport MenuItems from './MenuItems'\r\n\r\nconst AppHeader = styled.header`\r\n    background-color:  #141534;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    color: white;\r\n    position: sticky;\r\n    top: 0px;\r\n    z-index: 100;\r\n`;\r\n\r\nexport default function Header(props) {\r\n    return(\r\n        <AppHeader>\r\n            <MenuItems/>\r\n        </AppHeader>\r\n    );\r\n}","import {createContext} from 'react';\r\n\r\nconst Context = createContext({});\r\n\r\nexport default Context;","import {createContext} from 'react';\r\n\r\nconst ContextColorFilter = createContext({});\r\n\r\nexport default ContextColorFilter;","import images from \"./api-mock.json\"\r\nimport React, {useState}  from 'react';\r\nimport {useContext} from 'react';\r\nimport VisibilitySensor from \"react-visibility-sensor\";\r\nimport Context from '../../store/context';\r\nimport \"./ImgGrid.css\";\r\nimport ContextColorFilter from '../../store/contextColorFilter';\r\n\r\n\r\nexport default function ImgGrid() {\r\n    const {state} = useContext(ContextColorFilter);\r\n\r\n    var imageList = []\r\n    console.log(state.value)\r\n    if (state.value === \"all\") {\r\n        imageList = images.resources ;\r\n      } else {\r\n        imageList = images.resources.filter(cImg => cImg.mainColor === state.value); \r\n      }\r\n    \r\n\r\n    const [imagesShownArray, setImageShownArray] = useState(\r\n        Array(imageList.length).fill(false)\r\n    );\r\n\r\n    const imageVisibleChange = (index, isVisible) => {\r\n        if (isVisible) {\r\n            setImageShownArray((currentImagesShownArray) => {\r\n                currentImagesShownArray[index] = true;\r\n                return[...currentImagesShownArray];\r\n            });\r\n        }\r\n    };\r\n\r\n    return(\r\n    <div className='image-grid'>\r\n        {imageList &&\r\n         imageList.map((image, index) => (\r\n            <VisibilitySensor \r\n                key={index}\r\n                partialVisibility={true}\r\n                onChange={(isVisible) => imageVisibleChange(index, isVisible)}\r\n            >\r\n                <GridGalleryCard \r\n                    imageUrl={image.url} \r\n                    imageName={image.name} \r\n                    show={(imagesShownArray[index])}\r\n                />\r\n            </VisibilitySensor>\r\n        ))}\r\n    </div>)\r\n}\r\n\r\n//Attention GridGalleryCard handleClick highly depending on div structure in return \r\n// main issue is that img is in background and click on image cannot be captured directly\r\nfunction GridGalleryCard({imageUrl, imageName, show}){\r\n    const {state, actions} = useContext(Context);\r\n\r\n    const handleClick = (e) => {\r\n        console.log(e);\r\n        const url = e.target.offsetParent.offsetParent.children[1].src;\r\n        const alt = e.target.offsetParent.offsetParent.children[1].alt;\r\n        const id = alt.replace(\"888Whale #\",\"\")\r\n        actions({type:'setState', payload:{...state, value:url, id:id}})\r\n    };\r\n\r\n    return(\r\n        <div className={`${show ? \"GridCardShown\" : \"GridCardHidden\"}`}\r\n        onClick={(e) => handleClick(e)}>\r\n\r\n            <div className='OverlayParent'>\r\n                <div className='ImgBackground'></div>\r\n                <div className='ImgText'>\r\n                    {imageName}\r\n                </div>\r\n            </div>\r\n            <img \r\n                src={imageUrl} \r\n                alt={imageName}>\r\n            </img>\r\n        </div>)\r\n}","import React from 'react';\r\nimport {useContext} from 'react'\r\nimport ContextColorFilter from '../../store/contextColorFilter';\r\nimport Dropdown from 'react-bootstrap/Dropdown';\r\nimport 'bootstrap/dist/css/bootstrap.min.css'\r\nimport \"./FilterColor.css\";\r\n\r\n\r\nexport default function FilterColor() {\r\n    const {state, actions} = useContext(ContextColorFilter);\r\n\r\n    const handleSelect = event => {\r\n        console.log(event);\r\n        console.log(state.value)\r\n        const colorToFilter = event.replace(\"#/\",\"\");\r\n        actions({type:'setState', payload:{...state, value:colorToFilter}})\r\n        };\r\n\r\n    return(\r\n        <div>\r\n        <Dropdown onSelect={handleSelect}>\r\n            <Dropdown.Toggle variant=\"dark\" id=\"dropdown-basic\" size=\"sm\" >\r\n                Filter By Color\r\n            </Dropdown.Toggle>\r\n\r\n            <Dropdown.Menu>\r\n                <Dropdown.Item href=\"#/all\"><img src=\"images/filtercolor/all.png\" alt=\"all\"/>all</Dropdown.Item>\r\n                <Dropdown.Item href=\"#/beige\"><img src=\"images/filtercolor/beige.png\" alt=\"beige\"/>beige</Dropdown.Item>\r\n                <Dropdown.Item href=\"#/black\"><img src=\"images/filtercolor/black.png\" alt=\"black\"/>black</Dropdown.Item>\r\n                <Dropdown.Item href=\"#/blue\"><img src=\"images/filtercolor/blue.png\" alt=\"blue\"/>blue</Dropdown.Item> \r\n                <Dropdown.Item href=\"#/gold\"><img src=\"images/filtercolor/gold.png\" alt=\"gold\"/>gold</Dropdown.Item>\r\n                <Dropdown.Item href=\"#/green\"><img src=\"images/filtercolor/green.png\" alt=\"green\"/>green</Dropdown.Item>\r\n                <Dropdown.Item href=\"#/grey\"><img src=\"images/filtercolor/grey.png\" alt=\"grey\"/>grey</Dropdown.Item>   \r\n                <Dropdown.Item href=\"#/multi-color\"><img src=\"images/filtercolor/multi_color.png\" alt=\"multi_color\"/>multi-color</Dropdown.Item>\r\n                <Dropdown.Item href=\"#/red\"><img src=\"images/filtercolor/red.png\" alt=\"red\"/>red</Dropdown.Item>\r\n                <Dropdown.Item href=\"#/rose\"><img src=\"images/filtercolor/rose.png\" alt=\"rose\"/>rose</Dropdown.Item> \r\n                <Dropdown.Item href=\"#/white\"><img src=\"images/filtercolor/white.png\" alt=\"white\"/>white</Dropdown.Item>\r\n                <Dropdown.Item href=\"#/yellow\"><img src=\"images/filtercolor/yellow.png\" alt=\"yellow\"/>yellow</Dropdown.Item>                  \r\n            </Dropdown.Menu>\r\n        </Dropdown>\r\n        </div>\r\n        )\r\n}","import React, {useState} from 'react';\r\nimport {useContext} from 'react'\r\nimport images from \"./api-mock.json\"\r\nimport Context from '../../store/context';\r\nimport FilterColor from './FilterColor';\r\n\r\nimport \"./Preview.css\"\r\n\r\nimport Button from 'react-bootstrap/Button';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\n\r\nexport default function Preview() {\r\n    const {state, actions} = useContext(Context);\r\n    const [imageList] = useState(images.resources);\r\n    const [imagePfP, setImagePfP] = useState(\"images/pfp.png\");\r\n\r\n    const viewRandom = event => {\r\n        const id = Math.floor(Math.random() * 888) + 1;\r\n        const url = \"images/\"+id+\".png\";\r\n        actions({type:'setState', payload:{...state, value:url, id:id}})\r\n    }\r\n\r\n    const fileSelectedHandler = event => {\r\n        const fileReader = new FileReader();\r\n        fileReader.onload = () => {\r\n            setImagePfP(fileReader.result);\r\n          };\r\n        fileReader.readAsDataURL(event.target.files[0]);\r\n    }\r\n\r\n    /* assume index is whale number -1*/\r\n    const openseaLink = imageList[state.id-1].opensea;\r\n\r\n    return(\r\n        <div className=\"DivPreview\">\r\n            <div>\r\n                <div className=\"BannerPreview\">\r\n                    <img src={state.value} alt=\"all\"></img>\r\n                </div>\r\n                <div className=\"DivPfp\">\r\n                    <img src={imagePfP} alt=\"pfp\"></img>\r\n                    <input type=\"file\" onChange={fileSelectedHandler}/>\r\n                </div>\r\n            </div>\r\n\r\n            <div className=\"Opensea\">\r\n                <Button onClick={viewRandom} variant=\"dark\" size=\"sm\">View Random</Button>{' '}\r\n                <div className=\"DivFilterColor\"><FilterColor/></div>\r\n                <Button href={openseaLink} variant=\"dark\" size=\"sm\">View On OpenSea</Button>{' '}\r\n            </div>\r\n        </div>)\r\n\r\n}\r\n/*{state.value}  found = array.find(function (element)*/\r\n\r\n","\r\nimport \"./background.css\"\r\n\r\nexport default function Background() {\r\n\r\n    return(\r\n    <div className=\"divBackground\">\r\n        <h1>888Whales — Launch of the first Twitter banner focused NFT collection</h1>\r\n        <img src = \"images/background_img1.png\" alt=\"background_img1\"/> \r\n\r\n        Ascended from mathematical waves, 888 Whales arrived in <a href=\"https://opensea.io/collection/888whales\">open sea</a>.\r\n        888Whales is a unique NFT collection of beautiful whales, created by a random generative algorithm and mined by the human eye.\r\n        888Whales is the first NFT project that targets the Twitter banner space to complement your Twitter profile.\r\n        \r\n        <h2>Background</h2>\r\n        The 888Whales collection was inspired by <a href=\"https://tylerxhobbs.com/fidenza\">Fidenza’s</a> \r\n        idea to use mathematical algorithms to generate beautiful art and a drawing of a team member’s son which was showing colorful waves in different amplitudes and wavelengths.\r\n        The original idea was to generate randomly colored waves, but during the screening of the first output images, we started spotting whales. \r\n        The idea for 888Whales was born and the search for whales began.\r\n        \r\n        <img src = \"images/background_img2.png\" alt=\"background_img2\"/> \r\n        <div className=\"imgLegend\">Left: Fidenza #313 by artist Tyler Hobbs. Image: Art Blocks — Right: Drawing by a 2-year-old kid</div>\r\n\r\n        <h2>Whale mining</h2>\r\n        In cryptocurrencies, mining is the process of finding a number that, when passed into a mathematical function, produces an output number that satisfies given target criteria. \r\n        For instance, in Bitcoin, miners loop through billions of numbers and pass them into a hash function with the goal to produce an output number that is lower than or equal to the given target.\r\n        The search for whales was a comparable process.\r\n         Discovering whales within mathematical wave functions involved generating thousands of output images and visually evaluating them against the given target which was the shape of a whale.\r\n        \r\n        <h2>What makes 888Whales unique?</h2>\r\n        <ul>\r\n        <li>First NFT collection targeting the Twitter banner space</li>\r\n        <li>No pre-sale, no pre-marketing, fair launch</li>\r\n        <li>Rarity is determined by the community and not by a pre-defined score</li>\r\n        <li>Generation is based on randomized mathematical wave algorithm</li>\r\n        <li>Whales are simply cool!</li>\r\n        </ul>\r\n\r\n        <h2>Why 888?</h2>\r\n        The number pattern 888 commonly means financial abundance and material wealth, representing the nature of a crypto whale.\r\n        \r\n        <h2>NFT Sales process</h2>\r\n        At the beginning of the sale, 10 randomly selected whales will be listed on <a href=\"https://opensea.io/collection/888whales\">opensea</a> for ETH 0.0888 each. \r\n        New whales will be listed after the first are sold out. \r\n        The listing time, the number and the price of new whales will be announced in advance in our <a href=\"https://discord.gg/rfH7Dtu3by\">discord</a> channel. \r\n        The listing price for new whales will be based on the historical median traded price, but at least ETH 0.0888 (this is to avoid increasing the sell pressure in a scenario where the median price falls below the initial price).\r\n        \r\n        <h2>Storage and image quality</h2>\r\n        Each whale will be stored on IPFS before listing. This removes the reliance on centralized storage services and ensures permanent availability of the image. \r\n        The PNG image files are 11'625 x 3'850px in size, which is proportional to the Twitter banner frame, and has a resolution of 1'000 dpi, which is perfect for printing and/or digital display.\r\n        \r\n        <h2>Outlook</h2>\r\n        Whale holders will have preferential treatment in all future airdrops of the team. If you got excited, join us on discord and help us to steer the journey of the project.\r\n        \r\n        <h2>Links</h2>\r\n        Discord: <a href=\"https://discord.gg/rfH7Dtu3by\">https://discord.gg/rfH7Dtu3by</a> <br/>\r\n        Opensea: <a href=\"https://opensea.io/collection/888whales\">https://opensea.io/collection/888whales</a><br/>\r\n        Twitter: <a href=\"https://twitter.com/888whales_nft\">https://twitter.com/888whales_nft</a><p/>\r\n    </div>)\r\n}\r\n\r\n","import React from \"react\";\r\n\r\nimport \"./roadmap.css\"\r\n\r\nexport default function Roadmap() {\r\n\r\n    return(\r\n    <div className=\"divRoadmap\">\r\n        <h1>888Whales — Vision & Roadmap</h1>\r\n        <img src = \"images/roadmap_img1.png\" alt=\"roadmap_img1\"/> \r\n        The whales journey has just begun. \r\n        Today, we are excited to share our vision and roadmap with our community.\r\n        \r\n        <h2>Vision</h2>\r\n        888Whales goes beyond being used as a status symbol in the Twitter banner. It is the beginning of a decentralized generative art movement where generative art creators and lovers come together to discuss and realize ideas. Whale NFT holders will act as the governers of the decentralized generative art community.\r\n        <p/><b>Benefits for whale NFT holders:</b>\r\n        <ul>\r\n            <li><b>Governance rights:</b> Vote on how to spend the funds in the community wallet (e.g., financing of generative art ideas, development of website, marketing events, etc.)</li>\r\n            <li><b>Pre-buy rights:</b> Get exclusive pre-buy rights for community drops</li>\r\n        </ul>\r\n        <b>Benefits for generative art creators:</b>\r\n        <ul>\r\n            <li><b>Pool of buyers:</b> Get immediate access to generative art enthusiasts</li>\r\n            <li><b>Marketing:</b> Reach a wider audience with the help of the community</li>\r\n            <li><b>Feedback:</b> Discuss ideas and receive direct feedback from the community</li>\r\n            <li><b>Knowledge sharing:</b> Exchange knowledge with other creators</li>\r\n        </ul>\r\n        <h2>Roadmap</h2>\r\n        The roadmap for the 888Whales sale was designed to reward early adopters with giveaways and long-term whale holders with exclusive rights for all future community projects.\r\n        <ul>\r\n        <li>🍀 20%: 2 ETH giveaway to 5 random whale holders (0.4 ETH each)</li>\r\n        <li>🎁 40%: 2 ETH giveaway to 5 random whale holders (0.4 ETH each)</li>\r\n        <li>💵 60%: Launch of community wallet with 3 ETH</li>\r\n        <li>🐋 80%:\r\n            <ol type=\"i\" start=\"1\">\r\n                <li> 2 ETH donation to a whale protection organization,</li>\r\n                <li> lottery for whale watching trip in Iceland</li> \r\n            </ol>\r\n        </li>\r\n        <li>✨ 100%:<ol type=\"i\" start=\"1\">\r\n            <li> Addition of another 6 ETH to community wallet,</li>  \r\n            <li> voting rights for community wallet for all whale holders,</li> \r\n            <li> pre-buy rights for community projects for all whale holders</li>\r\n            </ol>\r\n            </li>\r\n        </ul>\r\n        <h2>Links</h2>\r\n        Discord: <a href=\"https://discord.gg/rfH7Dtu3by\">https://discord.gg/rfH7Dtu3by</a> <br/>\r\n        Opensea: <a href=\"https://opensea.io/collection/888whales\">https://opensea.io/collection/888whales</a><br/>\r\n        Twitter: <a href=\"https://twitter.com/888whales_nft\">https://twitter.com/888whales_nft</a><p/>   \r\n    </div>)\r\n}\r\n<ul>\r\n<li>First NFT collection targeting the Twitter banner space</li>\r\n<li>No pre-sale, no pre-marketing, fair launch</li>\r\n<li>Rarity is determined by the community and not by a pre-defined score</li>\r\n<li>Generation is based on randomized mathematical wave algorithm</li>\r\n<li>Whales are simply cool!</li>\r\n</ul>\r\n","/*npm install react-bootstrap@next bootstrap@5.1.0*/\nimport React from \"react\";\nimport 'styled-components'\nimport styled from 'styled-components'\nimport Header from './components/Header/Header';\nimport \"./App.css\"\n\nimport ImgGrid from './components/gallary/ImgGrid';\nimport Preview from './components/gallary/Preview';\n\nimport Background from './components/background/background';\nimport Roadmap from './components/roadmap/roadmap';\nimport {\nBrowserRouter as Router,\nSwitch,\nRoute,\nRedirect,\n} from \"react-router-dom\";\n\n\nconst AppPage = styled.div`\n  text-align: center;\n  background-color: #dcdcdc;\n`;\n\n\nconst PageContent = styled.div`\n  max-width: 1020px;\n  position: relative;\n  left: 50%;\n  background-color: white;\n  transform: translate(-50%, 0);\n  -moz-box-shadow: 0 0 10px #c8c8c8;\n  -webkit-box-shadow: 0 0 10px #c8c8c8;\n  box-shadow: 0 0 10px #c8c8c8;\n  padding-bottom: 50px\n`;\n\nconst App = () => {\n  return (\n    <Router>\n      <AppPage>\n      <Header/>\n      <PageContent>\n        <Switch>\n          <Route exact path=\"/\">\n            <Preview/>\n            <ImgGrid/>\n          </Route>\n          <Route path=\"/Story\">\n            <Background/>\n          </Route>\n          <Route path=\"/Roadmap\">\n            <Roadmap/>\n          </Route>\n          <Route>\n            <Preview/>\n            <ImgGrid/>\n            <Redirect to =\"/\" />\n          </Route>\n        </Switch>\n      </PageContent>\n      </AppPage>\n    </Router>\n  );\n\n}\n\nexport default App;\n","import { useState } from \"react\";\r\n\r\nconst useGlobalState =() => {\r\n\r\n    const rndInt = Math.floor(Math.random() * 888) + 1;\r\n    console.log(rndInt);\r\n    const [state, setState] = useState({value: \"images/\"+rndInt+\".png\", id:rndInt, list: []})\r\n\r\n    const actions = (action) => {\r\n       const  {type, payload} = action;\r\n       switch (type) {\r\n           case 'setState':\r\n               return setState(payload);\r\n            default:\r\n               return state;\r\n       }\r\n    }\r\n    return {state, actions}\r\n}\r\n\r\nexport default useGlobalState","import { useState } from \"react\";\r\n\r\nconst useGlobalStateColorFilter =() => {\r\n    const [state, setState] = useState({value: \"all\"})\r\n\r\n    const actions = (action) => {\r\n       const  {type, payload} = action;\r\n       switch (type) {\r\n           case 'setState':\r\n               return setState(payload);\r\n            default:\r\n               return state;\r\n       }\r\n    }\r\n    return {state, actions}\r\n}\r\n\r\nexport default useGlobalStateColorFilter","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\n\nimport useGlobalState from './store/useGlobalState'\nimport Context from './store/context'\n\nimport useGlobalStateColorFilter from './store/useGlobalStateColorFilter'\nimport ContextColorFilter from './store/contextColorFilter'\n\nconst Index = () => {\n  const store = useGlobalState();\n  const storeColorFilter = useGlobalStateColorFilter();\n  return(\n    <Context.Provider value={store}>\n      <ContextColorFilter.Provider value={storeColorFilter}>\n        <App/>\n      </ContextColorFilter.Provider>\n    </Context.Provider>\n\n  );\n}\n\nReactDOM.render(\n  <React.StrictMode>\n    <Index />\n  </React.StrictMode>,\n  document.getElementById('root')\n);"],"sourceRoot":""}