├── Procfile
├── .prettierignore
├── src
    ├── react-app-env.d.ts
    ├── App.css
    ├── pages
    │   ├── Token.css
    │   ├── Token.tsx
    │   └── Home.tsx
    ├── setupTests.ts
    ├── components
    │   ├── Loader.tsx
    │   ├── RarityModeContext.tsx
    │   ├── ThemeSwitch.tsx
    │   ├── Sidebar.tsx
    │   ├── Header.tsx
    │   ├── MenuModal.tsx
    │   ├── TraitContext.tsx
    │   └── TraitMenu.tsx
    ├── utils.ts
    ├── index.css
    ├── reportWebVitals.ts
    ├── rarityConfig.ts
    ├── hooks
    │   ├── useTraitData.ts
    │   ├── useMeta.ts
    │   └── useOpenSeaOrders.ts
    ├── index.tsx
    ├── types.ts
    ├── App.tsx
    ├── queries.ts
    └── opensea.svg
├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── .vscode
    └── settings.json
├── craco.config.js
├── .gitignore
├── tailwind.config.js
├── tsconfig.json
├── README.md
├── LICENSE
└── package.json


/Procfile:
--------------------------------------------------------------------------------
1 | web: yarn start


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | public
2 | node_modules


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


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m1koj/rarity-interface/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m1koj/rarity-interface/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m1koj/rarity-interface/HEAD/public/logo512.png


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


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "files.watcherExclude": {
3 |     "**/target": true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .layout {
2 |   width: 100vw;
3 |   min-height: 100vh;
4 |   display: grid;
5 |   grid-template-rows: 4.5rem auto;
6 | }
7 | 


--------------------------------------------------------------------------------
/craco.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   style: {
3 |     postcss: {
4 |       plugins: [require('tailwindcss'), require('autoprefixer')],
5 |     },
6 |   },
7 | }
8 | 


--------------------------------------------------------------------------------
/src/pages/Token.css:
--------------------------------------------------------------------------------
 1 | @media only screen and (min-width: 1024px) {
 2 |   .container {
 3 |     height: calc(100vh - 4.5rem);
 4 |   }
 5 | }
 6 | 
 7 | .container {
 8 |   min-height: calc(100vh - 4.5rem);
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom'
6 | 


--------------------------------------------------------------------------------
/src/components/Loader.tsx:
--------------------------------------------------------------------------------
 1 | const Loader: React.FC = () => {
 2 |   return (
 3 |     <div className="flex justify-center items-center">
 4 |       <div
 5 |         className={`animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-gray-600`}
 6 |       ></div>
 7 |     </div>
 8 |   )
 9 | }
10 | 
11 | export default Loader
12 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | import numbro from 'numbro'
 2 | 
 3 | export const formatURL = (url: string) => {
 4 |   if (url.substring(0, 7) === 'ipfs://')
 5 |     return 'https://ipfs.io/ipfs/' + url.substring(7)
 6 |   else return url
 7 | }
 8 | 
 9 | export const formatNumber = (score: number) =>
10 |   numbro(score).format({
11 |     optionalMantissa: true,
12 |     mantissa: 1,
13 |   })
14 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer utilities {
 6 |   .h-full-content {
 7 |     height: calc(100% - 3rem);
 8 |   }
 9 |   .min-h-full-content {
10 |     minheight: calc(100% - 3rem);
11 |   }
12 |   .grid-rows-content {
13 |     grid-template-rows: 8rem auto;
14 |   }
15 | }
16 | 
17 | .content {
18 |   min-height: calc(100vh - 4.5rem);
19 | }
20 | 


--------------------------------------------------------------------------------
/.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 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
 1 | import { ReportHandler } from 'web-vitals'
 2 | 
 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
 4 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 5 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 6 |       getCLS(onPerfEntry)
 7 |       getFID(onPerfEntry)
 8 |       getFCP(onPerfEntry)
 9 |       getLCP(onPerfEntry)
10 |       getTTFB(onPerfEntry)
11 |     })
12 |   }
13 | }
14 | 
15 | export default reportWebVitals
16 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const colors = require('tailwindcss/colors')
 2 | 
 3 | module.exports = {
 4 |   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
 5 |   darkMode: 'class',
 6 |   theme: {
 7 |     extend: {
 8 |       colors: {
 9 |         sky: colors.sky,
10 |         emerald: colors.emerald,
11 |       },
12 |     },
13 |   },
14 |   variants: {
15 |     extend: {
16 |       scale: ['hover'],
17 |       border: ['hover'],
18 |       cursor: ['hover'],
19 |     },
20 |   },
21 |   plugins: [require('@tailwindcss/forms')],
22 | }
23 | 


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


--------------------------------------------------------------------------------
/src/rarityConfig.ts:
--------------------------------------------------------------------------------
 1 | interface Config {
 2 |   tokenBackgroundColor?: string
 3 |   contractAddress: string
 4 |   headerText?: string
 5 |   headerTextStyle?: React.CSSProperties
 6 |   logoURL?: string
 7 |   logoStyle?: React.CSSProperties
 8 |   listImageKey?: 'image' | 'image_data'
 9 |   mainImageKey?: 'image' | 'image_data' | 'animation_url'
10 |   links?: {
11 |     website?: string
12 |     twitter?: string
13 |     discord?: string
14 |     openSea?: string
15 |     etherscan?: string
16 |   }
17 | }
18 | 
19 | const config: Config = {
20 |   contractAddress: '',
21 | }
22 | 
23 | export default config
24 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/src/hooks/useTraitData.ts:
--------------------------------------------------------------------------------
 1 | import { useQuery } from '@apollo/client'
 2 | import { useMemo } from 'react'
 3 | import { GET_META } from '../queries'
 4 | import { Meta } from '../types'
 5 | 
 6 | const useTraitData = () => {
 7 |   const { data, error } = useQuery<{ meta: Meta }>(GET_META)
 8 | 
 9 |   const attributes = useMemo(() => {
10 |     if (!data) return
11 |     const {
12 |       meta: { traitTypes },
13 |     } = data
14 |     return Object.fromEntries(
15 |       traitTypes.map(({ trait_type, attributes }) => [trait_type, attributes])
16 |     )
17 |   }, [data])
18 | 
19 |   return { attributes }
20 | }
21 | 
22 | export default useTraitData
23 | 


--------------------------------------------------------------------------------
/src/hooks/useMeta.ts:
--------------------------------------------------------------------------------
 1 | import { useQuery } from '@apollo/client'
 2 | import { useMemo } from 'react'
 3 | import { GET_META } from '../queries'
 4 | import { Meta } from '../types'
 5 | 
 6 | const useMeta = () => {
 7 |   const { data } = useQuery<{ meta: Meta }>(GET_META)
 8 | 
 9 |   const datamap = useMemo(() => {
10 |     if (!data) return undefined
11 | 
12 |     return data.meta.traitTypes.reduce(
13 |       (acc, type) => ({
14 |         ...acc,
15 |         [type.trait_type]: type.stats.max,
16 |       }),
17 |       {} as { [traitType: string]: number }
18 |     )
19 |   }, [data])
20 | 
21 |   const getMax = (traitType: string) =>
22 |     datamap ? datamap[traitType] : undefined
23 | 
24 |   return { max: getMax }
25 | }
26 | 
27 | export default useMeta
28 | 


--------------------------------------------------------------------------------
/src/components/RarityModeContext.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext, useState } from 'react'
 2 | 
 3 | interface RarityMode {
 4 |   normalized: boolean
 5 |   toggle: () => void
 6 | }
 7 | 
 8 | export const RarityModeContext = createContext<RarityMode>({
 9 |   normalized: true,
10 |   toggle: () => {},
11 | })
12 | 
13 | interface RarityModeProviderProps {
14 |   children: React.ReactNode
15 | }
16 | 
17 | export const RarityModeProvider: React.FC<RarityModeProviderProps> = ({
18 |   children,
19 | }) => {
20 |   const [normalized, setNormalized] = useState(true)
21 |   const toggle = () => setNormalized((n) => !n)
22 |   return (
23 |     <RarityModeContext.Provider value={{ normalized, toggle }}>
24 |       {children}
25 |     </RarityModeContext.Provider>
26 |   )
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/ThemeSwitch.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | import { Switch } from '@headlessui/react'
 3 | import useDarkMode from 'use-dark-mode'
 4 | 
 5 | function ThemeSwitch() {
 6 |   const { value, toggle } = useDarkMode(true, {
 7 |     classNameDark: 'dark',
 8 |     classNameLight: 'light',
 9 |   })
10 | 
11 |   return (
12 |     <Switch
13 |       checked={value}
14 |       onChange={() => toggle()}
15 |       className={`${
16 |         value ? 'bg-background-dark' : 'bg-background'
17 |       } relative inline-flex items-center h-6 rounded-full w-11`}
18 |     >
19 |       <span
20 |         className={`${
21 |           value ? 'translate-x-6' : 'translate-x-1'
22 |         } inline-block w-4 h-4 transform transition ease-in-out duration-200 bg-background dark:bg-background-dark rounded-full`}
23 |       />
24 |     </Switch>
25 |   )
26 | }
27 | 
28 | export default ThemeSwitch
29 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Rarity interface
 2 | 
 3 | User interface for [rarity-analyser](https://github.com/mikko-o/rarity-analyser) data.
 4 | 
 5 | ### Getting started
 6 | 
 7 | Create an .env.local file and add your rarity-analyser server URL
 8 | 
 9 | ```
10 | REACT_APP_API_URL=http://localhost:4000
11 | ```
12 | 
13 | Start the app with `yarn start`.
14 | 
15 | ### Configuration
16 | 
17 | The app can be configured according to the following structure in `src/rarityConfig.ts`.
18 | 
19 | Setting `contractAddress` is required to get order data from OpenSea.
20 | 
21 | ```typescript
22 | interface Config {
23 |   contractAddress: string
24 |   tokenBackgroundColor?: string
25 |   headerText?: string
26 |   headerTextStyle?: React.CSSProperties
27 |   logoURL?: string
28 |   logoStyle?: React.CSSProperties
29 |   listImageKey?: 'image' | 'image_data'
30 |   mainImageKey?: 'image' | 'image_data' | 'animation_url'
31 |   links?: {
32 |     website?: string
33 |     twitter?: string
34 |     discord?: string
35 |     openSea?: string
36 |     etherscan?: string
37 |   }
38 | }
39 | ```
40 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import './index.css'
 4 | import App from './App'
 5 | import reportWebVitals from './reportWebVitals'
 6 | import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'
 7 | import { SelectedTraitsProvider } from './components/TraitContext'
 8 | import { RarityModeProvider } from './components/RarityModeContext'
 9 | 
10 | const client = new ApolloClient({
11 |   uri: process.env.REACT_APP_API_URL,
12 |   cache: new InMemoryCache(),
13 | })
14 | 
15 | ReactDOM.render(
16 |   <React.StrictMode>
17 |     <ApolloProvider client={client}>
18 |       <RarityModeProvider>
19 |         <SelectedTraitsProvider>
20 |           <App />
21 |         </SelectedTraitsProvider>
22 |       </RarityModeProvider>
23 |     </ApolloProvider>
24 |   </React.StrictMode>,
25 |   document.getElementById('root')
26 | )
27 | 
28 | // If you want to start measuring performance in your app, pass a function
29 | // to log results (for example: reportWebVitals(console.log))
30 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
31 | reportWebVitals()
32 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 mikko-o
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | export interface Token {
 2 |   id: number
 3 |   name: string
 4 |   rarity_score: number
 5 |   rarity_score_normalized: number
 6 |   rank: number
 7 |   rank_normalized: number
 8 |   attributes: Attribute[]
 9 |   image?: string
10 |   image_data?: string
11 |   description?: string
12 |   external_url?: string
13 |   animation_url?: string
14 |   background_color?: string
15 | }
16 | 
17 | export interface Attribute {
18 |   trait_type: string
19 |   value: string
20 |   rarity_score: number
21 |   rarity_score_normalized: number
22 |   percentile: number
23 |   count: number
24 | }
25 | 
26 | export interface Meta {
27 |   numTokens: number
28 |   traitTypes: TraitsMeta[]
29 |   stats: Stats
30 | }
31 | 
32 | export interface TraitsMeta {
33 |   trait_type: string
34 |   attributes: Attribute[]
35 |   stats: Stats
36 |   numValues: number
37 | }
38 | 
39 | interface Stats {
40 |   mean: number
41 |   std: number
42 |   min: number
43 |   max: number
44 | }
45 | 
46 | export interface OpenSeaOrder {
47 |   asset: {
48 |     token_id: 'string'
49 |   }
50 |   base_price: number
51 |   side: number
52 |   payment_token_contract: {
53 |     symbol: string
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 2 | import './App.css'
 3 | import Home from './pages/Home'
 4 | import Token from './pages/Token'
 5 | import Sidebar from './components/Sidebar'
 6 | import Header from './components/Header'
 7 | import MenuModal from './components/MenuModal'
 8 | import { FaGithub } from 'react-icons/fa'
 9 | 
10 | function App() {
11 |   return (
12 |     <div>
13 |       <Router>
14 |         <div className="layout shadow-xl border-gray-400">
15 |           <Header />
16 | 
17 |           <div className="grid w-screen grid-cols-1 lg:grid-cols-5">
18 |             <Sidebar />
19 | 
20 |             <div className="lg:col-span-4 bg-gray-200">
21 |               <Switch>
22 |                 <Route path="/token">
23 |                   <Token />
24 |                 </Route>
25 |                 <Route path="/">
26 |                   <Home />
27 |                 </Route>
28 |               </Switch>
29 |             </div>
30 |           </div>
31 |         </div>
32 |         <MenuModal />
33 |       </Router>
34 |       <footer className="h-12 bg-white flex items-center">
35 |         <a
36 |           href="https://github.com/mikko-o/rarity-analyser"
37 |           className="w-5 h-5 ml-6"
38 |         >
39 |           <FaGithub className="w-full h-full text-gray-500" />
40 |         </a>
41 |       </footer>
42 |     </div>
43 |   )
44 | }
45 | 
46 | export default App
47 | 


--------------------------------------------------------------------------------
/src/components/Sidebar.tsx:
--------------------------------------------------------------------------------
 1 | import { Switch } from '@headlessui/react'
 2 | import TraitMenu from './TraitMenu'
 3 | import { useContext } from 'react'
 4 | import { RarityModeContext } from './RarityModeContext'
 5 | 
 6 | const Sidebar: React.FC = () => {
 7 |   return (
 8 |     <div className="hidden h-full overflow-auto lg:flex flex-col items-center bg-gray-200">
 9 |       <div className="w-5/6">
10 |         <RarityMode />
11 |         <TraitMenu />
12 |       </div>
13 |     </div>
14 |   )
15 | }
16 | 
17 | export default Sidebar
18 | 
19 | export const RarityMode: React.FC = () => {
20 |   const { toggle, normalized } = useContext(RarityModeContext)
21 |   return (
22 |     <div className="flex w-full items-center mt-3 gap-3 justify-between">
23 |       <div className="text-gray-700 text-sm leading-tight">
24 |         Trait normalization
25 |       </div>
26 |       <Switch
27 |         checked={normalized}
28 |         onChange={() => toggle()}
29 |         className={`${normalized ? 'bg-blue-400' : 'bg-gray-400'}
30 |           mr-3 relative inline-flex flex-shrink-0 h-6 w-12 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
31 |       >
32 |         <span
33 |           aria-hidden="true"
34 |           className={`${normalized ? 'translate-x-6' : 'translate-x-0'}
35 |             pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200`}
36 |         />
37 |       </Switch>
38 |     </div>
39 |   )
40 | }
41 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |   <meta name="theme-color" content="#000000" />
 9 |   <meta name="description" content="Rarity data" />
10 |   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11 |   <!--
12 |       manifest.json provides metadata used when your web app is installed on a
13 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
14 |     -->
15 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 |   <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |   <title>Rarity</title>
26 | </head>
27 | 
28 | <body>
29 |   <noscript>You need to enable JavaScript to run this app.</noscript>
30 |   <div id="root"></div>
31 |   <!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 | </body>
42 | 
43 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rarity-interface",
 3 |   "version": "0.1.0",
 4 |   "private": false,
 5 |   "dependencies": {
 6 |     "@apollo/client": "^3.4.11",
 7 |     "@craco/craco": "^6.3.0",
 8 |     "@headlessui/react": "^1.4.1",
 9 |     "@heroicons/react": "^1.0.4",
10 |     "@tailwindcss/forms": "^0.3.3",
11 |     "@testing-library/jest-dom": "^5.11.4",
12 |     "@testing-library/react": "^11.1.0",
13 |     "@testing-library/user-event": "^12.1.10",
14 |     "@types/jest": "^26.0.15",
15 |     "@types/node": "^12.0.0",
16 |     "@types/react": "^17.0.0",
17 |     "@types/react-dom": "^17.0.0",
18 |     "@types/react-paginate": "^7.1.1",
19 |     "@types/react-router-dom": "^5.1.9",
20 |     "graphql": "^15.5.3",
21 |     "numbro": "^2.3.5",
22 |     "prettier": "^2.4.1",
23 |     "query-string": "^7.0.1",
24 |     "react": "^17.0.2",
25 |     "react-dom": "^17.0.2",
26 |     "react-icons": "^4.2.0",
27 |     "react-paginate": "^7.1.3",
28 |     "react-router-dom": "^5.3.0",
29 |     "react-scripts": "4.0.3",
30 |     "react-spring": "^9.2.4",
31 |     "typescript": "^4.1.2",
32 |     "use-dark-mode": "^2.3.1",
33 |     "web-vitals": "^1.0.1"
34 |   },
35 |   "scripts": {
36 |     "start": "craco start",
37 |     "build": "craco build",
38 |     "test": "craco test",
39 |     "eject": "react-scripts eject",
40 |     "format": "yarn prettier --write . --no-semi --single-quote"
41 |   },
42 |   "eslintConfig": {
43 |     "extends": [
44 |       "react-app",
45 |       "react-app/jest"
46 |     ]
47 |   },
48 |   "browserslist": {
49 |     "production": [
50 |       ">0.2%",
51 |       "not dead",
52 |       "not op_mini all"
53 |     ],
54 |     "development": [
55 |       "last 1 chrome version",
56 |       "last 1 firefox version",
57 |       "last 1 safari version"
58 |     ]
59 |   },
60 |   "devDependencies": {
61 |     "autoprefixer": "^9",
62 |     "postcss": "^7",
63 |     "tailwindcss": "npm:@tailwindcss/postcss7-compat"
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/queries.ts:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | export const GET_TOKENS = gql`
 4 |   query getTokens(
 5 |     $first: Int
 6 |     $skip: Int
 7 |     $orderBy: String
 8 |     $orderDirection: String
 9 |     $id: Int
10 |     $traits: [Trait]
11 |   ) {
12 |     tokens(
13 |       first: $first
14 |       skip: $skip
15 |       orderBy: $orderBy
16 |       orderDirection: $orderDirection
17 |       id: $id
18 |       traits: $traits
19 |     ) {
20 |       id
21 |       name
22 |       rarity_score
23 |       rarity_score_normalized
24 |       image
25 |       image_data
26 |       animation_url
27 |       rank
28 |       rank_normalized
29 |       description
30 |       background_color
31 |       attributes {
32 |         trait_type
33 |         value
34 |         rarity_score
35 |         rarity_score_normalized
36 |         percentile
37 |         count
38 |       }
39 |     }
40 |   }
41 | `
42 | 
43 | export const GET_META = gql`
44 |   {
45 |     meta {
46 |       numTokens
47 |       traitTypes {
48 |         trait_type
49 |         attributes {
50 |           trait_type
51 |           rarity_score
52 |           value
53 |           percentile
54 |           count
55 |         }
56 |         stats {
57 |           max
58 |         }
59 |       }
60 |     }
61 |   }
62 | `
63 | 
64 | export const GET_TOKEN = gql`
65 |   query getToken($id: Int) {
66 |     token(id: $id) {
67 |       id
68 |       name
69 |       rarity_score
70 |       rarity_score_normalized
71 |       image
72 |       image_data
73 |       animation_url
74 |       rank
75 |       rank_normalized
76 |       description
77 |       background_color
78 |       attributes {
79 |         trait_type
80 |         value
81 |         rarity_score
82 |         rarity_score_normalized
83 |         percentile
84 |         count
85 |       }
86 |     }
87 |   }
88 | `
89 | 
90 | export const GET_NUM_TOKENS = gql`
91 |   {
92 |     meta {
93 |       numTokens
94 |     }
95 |   }
96 | `
97 | 


--------------------------------------------------------------------------------
/src/components/Header.tsx:
--------------------------------------------------------------------------------
 1 | import config from '../rarityConfig'
 2 | import { FaTwitter, FaDiscord } from 'react-icons/fa'
 3 | import openSea from '../opensea.svg'
 4 | import { Link } from 'react-router-dom'
 5 | 
 6 | const Header: React.FC = () => {
 7 |   return (
 8 |     <header className="flex items-center w-full shadow-2xl justify-between overflow-hidden">
 9 |       <div className="h-full flex items-center">
10 |         <Link to="/">
11 |           <h1 className="text-lg sm:text-xl ml-2 sm:ml-5" style={{ ...config.headerTextStyle }}>
12 |             {config.headerText}
13 |           </h1>
14 |         </Link>
15 | 
16 |         {config.logoURL ? (
17 |           <Link to="/" className="h-full flex-shrink-0">
18 |             <img
19 |               src={config.logoURL}
20 |               alt="logo"
21 |               className="ml-2 sm:ml-5 h-full"
22 |               style={{
23 |                 ...config.logoStyle,
24 |               }}
25 |             />
26 |           </Link>
27 |         ) : null}
28 |       </div>
29 | 
30 |       <div>
31 |         <ProjectLinks />
32 |       </div>
33 |     </header>
34 |   )
35 | }
36 | 
37 | export default Header
38 | 
39 | const ProjectLinks: React.FC = () => {
40 |   if (!config.links) return null
41 |   return (
42 |     <div className="flex items-center gap-2 sm:gap-3 text-sm mr-2 sm:mr-6 text-gray-700">
43 |       {config.links.website ? <a href={config.links.website}>Website</a> : null}
44 |       {config.links.twitter ? (
45 |         <a href={config.links.twitter}>
46 |           <FaTwitter className="h-4 w-4" />
47 |         </a>
48 |       ) : null}
49 |       {config.links.discord ? (
50 |         <a href={config.links.discord}>
51 |           <FaDiscord className="h-4 w-4" />
52 |         </a>
53 |       ) : null}
54 |       {config.links.openSea ? (
55 |         <a href={config.links.openSea}>
56 |           <img className="h-4 w-4" src={openSea} alt="OpenSea logo" />
57 |         </a>
58 |       ) : null}
59 |       {config.links.etherscan ? (
60 |         <a href={config.links.etherscan}>Etherscan</a>
61 |       ) : null}
62 |     </div>
63 |   )
64 | }
65 | 


--------------------------------------------------------------------------------
/src/hooks/useOpenSeaOrders.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react'
 2 | import config from '../rarityConfig'
 3 | import { OpenSeaOrder } from '../types'
 4 | 
 5 | const idsToQuery = (ids: number[]) =>
 6 |   ids.reduce((qs, id) => `${qs}&token_ids=${id}`, '')
 7 | 
 8 | const options = { method: 'GET', headers: { Accept: 'application/json' } }
 9 | 
10 | export const getOpenSeaOrders = (tokenIds: number[]) =>
11 |   fetch(
12 |     `https://api.opensea.io/wyvern/v1/orders?asset_contract_address=${
13 |       config.contractAddress
14 |     }&bundled=false&include_bundled=false&include_invalid=false${idsToQuery(
15 |       tokenIds
16 |     )}&side=1&limit=20&offset=0&order_by=created_date&order_direction=desc`,
17 |     options
18 |   )
19 |     .then((response) => response.json())
20 |     .then((data) => data.orders as OpenSeaOrder[])
21 | 
22 | const useOpenSeaOrders = (tokenIds: number[] | undefined) => {
23 |   const [orders, setOrders] = useState<OpenSeaOrder[]>([])
24 | 
25 |   useEffect(() => {
26 |     if (!tokenIds || tokenIds.length === 0) return
27 |     getOpenSeaOrders(tokenIds)
28 |       .then((data) =>
29 |         data.filter((order) => order.payment_token_contract.symbol !== 'WETH')
30 |       )
31 |       .then(setOrders)
32 |   }, [tokenIds])
33 | 
34 |   return orders.reduce(
35 |     (result, order) => ({ ...result, [Number(order.asset.token_id)]: order }),
36 |     {} as { [id: number]: OpenSeaOrder }
37 |   )
38 | }
39 | 
40 | export default useOpenSeaOrders
41 | 
42 | export const getOpenSeaOrder = (tokenId: number) => {
43 |   return fetch(
44 |     `https://api.opensea.io/wyvern/v1/orders?asset_contract_address=${config.contractAddress}&bundled=false&side=1&include_bundled=false&include_invalid=false&token_id=${tokenId}&limit=20&offset=0&order_by=created_date&order_direction=desc`,
45 |     options
46 |   )
47 |     .then((response) => response.json())
48 |     .then((data) => data.orders as OpenSeaOrder[])
49 |     .then((orders) =>
50 |       orders.filter((x) => x?.payment_token_contract.symbol !== 'WETH')
51 |     )
52 |     .then((orders) => (orders.length > 0 ? orders[0] : null))
53 | }
54 | 
55 | export const useOpenSeaOrder = (tokenId: number | undefined | null) => {
56 |   const [order, setOrder] = useState<OpenSeaOrder | undefined>(undefined)
57 | 
58 |   useEffect(() => {
59 |     if (!tokenId) return
60 |     getOpenSeaOrder(tokenId).then((order) => order && setOrder(order))
61 |   }, [tokenId])
62 | 
63 |   return order
64 | }
65 | 


--------------------------------------------------------------------------------
/src/components/MenuModal.tsx:
--------------------------------------------------------------------------------
 1 | import { Dialog, Transition } from '@headlessui/react'
 2 | import { MenuIcon } from '@heroicons/react/outline'
 3 | import { Fragment, useState } from 'react'
 4 | import { RarityMode } from './Sidebar'
 5 | import TraitMenu from './TraitMenu'
 6 | 
 7 | const MenuModal: React.FC = () => {
 8 |   let [isOpen, setIsOpen] = useState(false)
 9 | 
10 |   function closeModal() {
11 |     setIsOpen(false)
12 |   }
13 | 
14 |   function openModal() {
15 |     setIsOpen(true)
16 |   }
17 | 
18 |   return (
19 |     <div className="bg-purple-600 text-white fixed bottom-5 right-5 rounded-full shadow-xl lg:hidden">
20 |       <button className="grid grid-rows-1" onClick={() => openModal()}>
21 |         <MenuIcon className="h-7 w-7 m-4 row-start-1 col-start-1" />
22 |       </button>
23 | 
24 |       <Transition appear show={isOpen} as={Fragment}>
25 |         <Dialog
26 |           as="div"
27 |           className="fixed inset-0 z-10 overflow-y-auto lg:hidden"
28 |           onClose={closeModal}
29 |         >
30 |           <div className="h-screen px-4 text-center">
31 |             <Transition.Child
32 |               as={Fragment}
33 |               enter="ease-out duration-300"
34 |               enterFrom="opacity-0"
35 |               enterTo="opacity-100"
36 |               leave="ease-in duration-200"
37 |               leaveFrom="opacity-100"
38 |               leaveTo="opacity-0"
39 |             >
40 |               <Dialog.Overlay className="fixed inset-0" />
41 |             </Transition.Child>
42 | 
43 |             {/* This element is to trick the browser into centering the modal contents. */}
44 |             <span
45 |               className="inline-block h-screen align-middle"
46 |               aria-hidden="true"
47 |             >
48 |               &#8203;
49 |             </span>
50 |             <Transition.Child
51 |               as={Fragment}
52 |               enter="ease-out duration-300"
53 |               enterFrom="opacity-0 scale-95"
54 |               enterTo="opacity-100 scale-100"
55 |               leave="ease-in duration-200"
56 |               leaveFrom="opacity-100 scale-100"
57 |               leaveTo="opacity-0 scale-95"
58 |             >
59 |               <div className="inline-block h-5/6 w-5/6 max-w-md p-6 my-8 overflow-auto text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
60 |                 <RarityMode />
61 |                 <TraitMenu />
62 |               </div>
63 |             </Transition.Child>
64 |           </div>
65 |         </Dialog>
66 |       </Transition>
67 |     </div>
68 |   )
69 | }
70 | 
71 | export default MenuModal
72 | 


--------------------------------------------------------------------------------
/src/components/TraitContext.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext, useMemo, useState } from 'react'
 2 | import { Attribute } from '../types'
 3 | 
 4 | interface TraitContextIterface {
 5 |   traits: Attribute[]
 6 |   add: (t: Attribute) => void
 7 |   remove: (t: Attribute) => void
 8 |   clear: () => void
 9 |   isSelected: (traitType: string, value: string | number) => boolean
10 |   queryParams: { trait_type: string; value: string }[] | undefined
11 |   counts: { [traitType: string]: number }
12 |   tokenCount?: number
13 | }
14 | 
15 | const init: TraitContextIterface = {
16 |   traits: [],
17 |   add: (t: Attribute) => {},
18 |   remove: (t: Attribute) => {},
19 |   clear: () => {},
20 |   isSelected: (traitType: string, value: string | number) => false,
21 |   queryParams: undefined,
22 |   counts: {},
23 |   tokenCount: undefined,
24 | }
25 | 
26 | export const TraitContext = createContext<TraitContextIterface>(init)
27 | 
28 | export const SelectedTraitsProvider: React.FC<{ children: React.ReactNode }> =
29 |   ({ children }) => {
30 |     const [traits, setTraits] = useState<{
31 |       [trait_type: string]: { [value: string]: Attribute }
32 |     }>({})
33 |     const add = (trait: Attribute) => {
34 |       const updated = { ...traits[trait.trait_type], [trait.value]: trait }
35 |       setTraits({ ...traits, [trait.trait_type]: updated })
36 |     }
37 |     const remove = (trait: Attribute) => {
38 |       const newTraits = { ...traits }
39 |       delete newTraits[trait.trait_type][trait.value]
40 |       setTraits(newTraits)
41 |     }
42 |     const clear = () => setTraits({})
43 |     const isSelected = (traitType: string, value: string | number) =>
44 |       traitType in traits && value in traits[traitType]
45 | 
46 |     const counts = useMemo(
47 |       () =>
48 |         Object.fromEntries(
49 |           Object.entries(traits).map(([k, v]) => [k, Object.values(v).length])
50 |         ),
51 |       [traits]
52 |     )
53 | 
54 |     const traitArray = useMemo(
55 |       () =>
56 |         Object.values(traits)
57 |           .map((v) => Object.values(v))
58 |           .flat(),
59 |       [traits]
60 |     )
61 | 
62 |     const tokenCount = useMemo(
63 |       () =>
64 |         traitArray.length > 0
65 |           ? Math.max(...traitArray.map((x) => x.count))
66 |           : undefined,
67 |       [traitArray]
68 |     )
69 | 
70 |     return (
71 |       <TraitContext.Provider
72 |         value={{
73 |           traits: traitArray,
74 |           add,
75 |           remove,
76 |           clear,
77 |           isSelected,
78 |           queryParams: traitArray.map(({ trait_type, value }) => ({
79 |             trait_type,
80 |             value: String(value),
81 |           })),
82 |           counts,
83 |           tokenCount,
84 |         }}
85 |       >
86 |         {children}
87 |       </TraitContext.Provider>
88 |     )
89 |   }
90 | 


--------------------------------------------------------------------------------
/src/opensea.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="none" viewBox="0 0 100 100"><path fill="#2081E2" d="M100 50C100 77.6127 77.6127 100 50 100C22.3873 100 0 77.6127 0 50C0 22.3873 22.3873 0 50 0C77.6185 0 100 22.3873 100 50Z"/><path fill="#fff" d="M24.6679 51.6801L24.8836 51.341L37.8906 30.9932C38.0807 30.6953 38.5276 30.7261 38.6714 31.0497C40.8444 35.9196 42.7194 41.9762 41.841 45.7468C41.466 47.2982 40.4386 49.3992 39.2827 51.341C39.1338 51.6236 38.9694 51.901 38.7947 52.1681C38.7125 52.2914 38.5738 52.3633 38.4248 52.3633H25.048C24.6884 52.3633 24.4778 51.9729 24.6679 51.6801Z"/><path fill="#fff" d="M82.6444 55.461V58.6819C82.6444 58.8668 82.5314 59.0312 82.367 59.1031C81.3602 59.5346 77.9132 61.1168 76.48 63.11C72.8224 68.2008 70.0279 75.48 63.7812 75.48H37.721C28.4847 75.48 21 67.9697 21 58.7024V58.4045C21 58.1579 21.2003 57.9576 21.4469 57.9576H35.9745C36.2621 57.9576 36.4727 58.2247 36.4471 58.5072C36.3443 59.4524 36.519 60.4182 36.9659 61.2966C37.8289 63.0484 39.6166 64.1426 41.5481 64.1426H48.74V58.5278H41.6303C41.2656 58.5278 41.0499 58.1065 41.2605 57.8086C41.3375 57.6904 41.4249 57.5672 41.5173 57.4285C42.1903 56.473 43.1509 54.9884 44.1064 53.2983C44.7588 52.1579 45.3906 50.9404 45.8992 49.7178C46.002 49.4969 46.0841 49.2708 46.1663 49.0499C46.305 48.6595 46.4489 48.2948 46.5516 47.9301C46.6544 47.6218 46.7365 47.2982 46.8187 46.9951C47.0602 45.9574 47.1629 44.8581 47.1629 43.7177C47.1629 43.2708 47.1424 42.8033 47.1013 42.3564C47.0807 41.8684 47.0191 41.3803 46.9574 40.8923C46.9163 40.4608 46.8393 40.0344 46.7571 39.5875C46.6544 38.9351 46.5105 38.2879 46.3461 37.6354L46.2896 37.3889C46.1663 36.9419 46.0636 36.5156 45.9198 36.0687C45.5139 34.6662 45.0465 33.2998 44.5533 32.0207C44.3735 31.5121 44.168 31.0241 43.9625 30.5361C43.6595 29.8015 43.3512 29.1337 43.0687 28.5018C42.9249 28.2141 42.8016 27.9521 42.6783 27.685C42.5396 27.3819 42.3958 27.0788 42.2519 26.7912C42.1492 26.5703 42.031 26.3648 41.9488 26.1593L41.0704 24.536C40.9471 24.3151 41.1526 24.0531 41.394 24.1199L46.8907 25.6096H46.9061C46.9163 25.6096 46.9215 25.6148 46.9266 25.6148L47.6509 25.8151L48.4472 26.0412L48.74 26.1233V22.8562C48.74 21.2791 50.0037 20 51.5654 20C52.3462 20 53.0551 20.3185 53.5637 20.8373C54.0722 21.3562 54.3907 22.0651 54.3907 22.8562V27.7056L54.9764 27.8699C55.0226 27.8854 55.0688 27.9059 55.1099 27.9367C55.2538 28.0446 55.4592 28.2038 55.7212 28.3991C55.9267 28.5634 56.1476 28.7638 56.4147 28.9693C56.9438 29.3956 57.5757 29.9453 58.2692 30.5772C58.4541 30.7364 58.6339 30.9008 58.7983 31.0652C59.6922 31.8974 60.6939 32.8734 61.6494 33.9522C61.9165 34.2553 62.1785 34.5635 62.4456 34.8871C62.7127 35.2159 62.9953 35.5395 63.2418 35.8632C63.5655 36.2947 63.9148 36.7416 64.2179 37.2091C64.3617 37.43 64.5261 37.656 64.6648 37.8769C65.0552 38.4676 65.3994 39.079 65.7282 39.6903C65.8669 39.9728 66.0107 40.281 66.134 40.5841C66.4987 41.4009 66.7864 42.2331 66.9713 43.0653C67.0278 43.2451 67.0689 43.4403 67.0895 43.615V43.6561C67.1511 43.9026 67.1717 44.1646 67.1922 44.4317C67.2744 45.2845 67.2333 46.1372 67.0484 46.9951C66.9713 47.3599 66.8686 47.704 66.7453 48.0688C66.622 48.4181 66.4987 48.7828 66.3395 49.127C66.0313 49.841 65.6665 50.5551 65.235 51.2229C65.0963 51.4695 64.9319 51.7315 64.7675 51.9781C64.5877 52.24 64.4028 52.4866 64.2384 52.7281C64.0124 53.0363 63.771 53.3599 63.5244 53.6476C63.3035 53.9507 63.0775 54.2538 62.8309 54.5209C62.4867 54.9267 62.1579 55.312 61.8137 55.6819C61.6083 55.9233 61.3874 56.1699 61.1613 56.3908C60.9405 56.6373 60.7144 56.8582 60.5089 57.0637C60.1648 57.4079 59.8771 57.675 59.6356 57.8959L59.0706 58.4148C58.9884 58.4867 58.8805 58.5278 58.7675 58.5278H54.3907V64.1426H59.8976C61.1305 64.1426 62.3018 63.7059 63.247 62.9045C63.5706 62.622 64.9833 61.3994 66.6528 59.5552C66.7093 59.4935 66.7813 59.4473 66.8635 59.4268L82.0742 55.0295C82.3568 54.9473 82.6444 55.163 82.6444 55.461Z"/></svg>


--------------------------------------------------------------------------------
/src/components/TraitMenu.tsx:
--------------------------------------------------------------------------------
  1 | import { useQuery } from '@apollo/client'
  2 | import { Disclosure, Transition } from '@headlessui/react'
  3 | import { ChevronUpIcon } from '@heroicons/react/solid'
  4 | import { createRef, forwardRef, useContext, useEffect, useMemo } from 'react'
  5 | import { GET_META } from '../queries'
  6 | import { Attribute, Meta, TraitsMeta } from '../types'
  7 | import { TraitContext } from './TraitContext'
  8 | 
  9 | const TraitMenu: React.FC = () => {
 10 |   const { traits, add, remove, clear, counts } = useContext(TraitContext)
 11 |   const { data } = useQuery<{ meta: Meta }>(GET_META)
 12 |   const count = traits.length
 13 |   const refs = useMemo(
 14 |     () => data?.meta.traitTypes.map(() => createRef<any>()),
 15 |     [data?.meta.traitTypes]
 16 |   )
 17 |   // When traits are added, open disclosure if closed
 18 |   useEffect(() => {
 19 |     traits.forEach((trait) => {
 20 |       const ref = refs?.find(
 21 |         (x) => x.current?.outerText.split(' (')[0] === trait.trait_type
 22 |       )
 23 |       if (ref && ref.current?.ariaExpanded === 'false') ref.current.click()
 24 |     })
 25 |   }, [traits, refs])
 26 |   if (!data) return null
 27 |   return (
 28 |     <div className="grid gap-3 w-full py-5">
 29 |       <div className="flex items-center justify-between">
 30 |         <h2 className="text-gray-800 text-lg flex items-center">
 31 |           Traits
 32 |           <span className="text-sm pl-2 font-light">
 33 |             {count ? `(${count})` : ''}
 34 |           </span>
 35 |         </h2>
 36 | 
 37 |         <button
 38 |           className="text-sm gap-2 mr-3 text-gray-700 py-1 px-2 rounded-lg hover:border border-gray-400 hover:scale-105"
 39 |           onClick={() => {
 40 |             clear()
 41 |             refs?.forEach((ref) => {
 42 |               if (!ref.current) return
 43 |               if (ref.current.ariaExpanded === 'true') {
 44 |                 ref.current.click()
 45 |               }
 46 |             })
 47 |           }}
 48 |         >
 49 |           Clear
 50 |         </button>
 51 |       </div>
 52 | 
 53 |       {data.meta.traitTypes.map((trait, i) => (
 54 |         <Item
 55 |           key={trait.trait_type}
 56 |           ref={refs ? refs[i] : undefined}
 57 |           {...{ trait, add, remove }}
 58 |           count={counts[trait.trait_type]}
 59 |         />
 60 |       ))}
 61 |     </div>
 62 |   )
 63 | }
 64 | 
 65 | export default TraitMenu
 66 | 
 67 | interface ItemProps {
 68 |   trait: TraitsMeta
 69 |   add: (t: Attribute) => void
 70 |   remove: (t: Attribute) => void
 71 |   count: number | undefined
 72 | }
 73 | 
 74 | const Item = forwardRef<HTMLButtonElement, ItemProps>(
 75 |   ({ trait, add, remove, count }, ref) => {
 76 |     if (!trait) throw new Error('no trait')
 77 |     return (
 78 |       <div className="w-full text-sm">
 79 |         <Disclosure>
 80 |           {({ open }) => (
 81 |             <>
 82 |               <Disclosure.Button
 83 |                 ref={ref}
 84 |                 className="flex justify-between w-full px-4 py-2 text-sm font-medium text-left text-gray-700 bg-purple-100 rounded-lg hover:bg-purple-200 focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
 85 |               >
 86 |                 <span>
 87 |                   {trait.trait_type}{' '}
 88 |                   <span className="text-xs font-light">
 89 |                     {count ? `(${count})` : ''}
 90 |                   </span>
 91 |                 </span>
 92 |                 <ChevronUpIcon
 93 |                   className={`${
 94 |                     open ? 'transform rotate-180' : ''
 95 |                   } w-5 h-5 text-purple-500`}
 96 |                 />
 97 |               </Disclosure.Button>
 98 |               <Transition
 99 |                 enter="transition duration-100 ease-out"
100 |                 enterFrom="transform scale-95 opacity-0"
101 |                 enterTo="transform scale-100 opacity-100"
102 |                 leave="transition duration-75 ease-out"
103 |                 leaveFrom="transform scale-100 opacity-100"
104 |                 leaveTo="transform scale-95 opacity-0"
105 |               >
106 |                 <Disclosure.Panel className="px-4 pt-4 pb-2 text-sm text-gray-500">
107 |                   <Values attributes={trait.attributes} />
108 |                 </Disclosure.Panel>
109 |               </Transition>
110 |             </>
111 |           )}
112 |         </Disclosure>
113 |       </div>
114 |     )
115 |   }
116 | )
117 | 
118 | interface ValuesProps {
119 |   attributes: Attribute[]
120 | }
121 | 
122 | const Values: React.FC<ValuesProps> = ({ attributes }) => {
123 |   const { add, remove, isSelected } = useContext(TraitContext)
124 |   return (
125 |     <div className="flex flex-col items-start gap-1">
126 |       {attributes.map((attribute) => (
127 |         <button
128 |           key={attribute.value}
129 |           onClick={() => {
130 |             if (!isSelected(attribute.trait_type, attribute.value))
131 |               add(attribute)
132 |             else remove(attribute)
133 |           }}
134 |           className={`${
135 |             isSelected(attribute.trait_type, attribute.value)
136 |               ? 'text-gray-700 font-semibold'
137 |               : ''
138 |           }
139 |             text-left w-full grid grid-cols-6 hover:text-gray-700 hover:font-bold`}
140 |         >
141 |           <div className="col-span-5 pr-1">{attribute.value}</div>
142 |           <div>{attribute.count}</div>
143 |         </button>
144 |       ))}
145 |     </div>
146 |   )
147 | }
148 | 


--------------------------------------------------------------------------------
/src/pages/Token.tsx:
--------------------------------------------------------------------------------
  1 | import { useHistory, useLocation } from 'react-router'
  2 | import queryString from 'query-string'
  3 | import { useSprings, animated } from 'react-spring'
  4 | import { Attribute, Token as TokenInterface } from '../types'
  5 | import './Token.css'
  6 | import { formatNumber, formatURL } from '../utils'
  7 | import { TraitContext } from '../components/TraitContext'
  8 | import { useCallback, useContext, useEffect } from 'react'
  9 | import useMeta from '../hooks/useMeta'
 10 | import { RarityModeContext } from '../components/RarityModeContext'
 11 | import config from '../rarityConfig'
 12 | import { useQuery } from '@apollo/client'
 13 | import { GET_TOKEN } from '../queries'
 14 | import Loader from '../components/Loader'
 15 | import { useOpenSeaOrder } from '../hooks/useOpenSeaOrders'
 16 | 
 17 | const Token: React.FC = () => {
 18 |   const { search } = useLocation<{ token: TokenInterface }>()
 19 |   const history = useHistory()
 20 |   const { id } = queryString.parse(search)
 21 |   const { normalized } = useContext(RarityModeContext)
 22 | 
 23 |   const { data } = useQuery(GET_TOKEN, {
 24 |     variables: {
 25 |       id: Number(id),
 26 |     },
 27 |   })
 28 | 
 29 |   const order = useOpenSeaOrder(Number(id))
 30 | 
 31 |   const token = data?.token
 32 | 
 33 |   if (!id) {
 34 |     history.replace('/')
 35 |     return null
 36 |   }
 37 | 
 38 |   if (!token)
 39 |     return (
 40 |       <div className="w-full flex justify-center pt-10">
 41 |         <Loader />
 42 |       </div>
 43 |     )
 44 | 
 45 |   return (
 46 |     <div className="container bg-gray-200">
 47 |       <div className="h-full w-screen lg:w-auto grid grid-cols-1 lg:grid-cols-2">
 48 |         <div className="w-full h-full flex justify-center items-center">
 49 |           <div
 50 |             style={{ width: 440 }}
 51 |             className="flex flex-col items-center justify-start"
 52 |           >
 53 |             <h1 className="text-4xl font-extralight m-4">{token.name}</h1>
 54 |             <Image token={token} />
 55 |             <p className="m-1 text-gray-800">
 56 |               {token.description}
 57 |             </p>
 58 |           </div>
 59 |         </div>
 60 | 
 61 |         <div className="w-full h-full lg:overflow-auto bg-gray-200 flex justify-center items-center">
 62 |           <div className="lg:h-5/6 my-6 overflow-x-auto lg:overflow-auto p-2 bg-gray-100 shadow rounded">
 63 |             <div className="text-gray-800 text-2xl font-light w-80 lg:w-72 mt-8 mx-2 md:mx-8 px-2 flex justify-between items-center">
 64 |               <div className="">
 65 |                 <div>
 66 |                   Rank: #{normalized ? token?.rank_normalized : token?.rank}
 67 |                 </div>
 68 |               </div>
 69 |               <div className="text-green-800">
 70 |                 +
 71 |                 {formatNumber(
 72 |                   normalized
 73 |                     ? token?.rarity_score_normalized
 74 |                     : token?.rarity_score
 75 |                 )}
 76 |               </div>
 77 |             </div>
 78 | 
 79 |             {order ? (
 80 |               <a
 81 |                 className="text-base mx-2 md:mx-8 px-2 text-blue-700"
 82 |                 href={`https://opensea.io/assets/${config.contractAddress}/${order.asset.token_id}`}
 83 |               >
 84 |                 {order.base_price / 1e18} ETH
 85 |               </a>
 86 |             ) : null}
 87 |             <Attributes attributes={token?.attributes} />
 88 |           </div>
 89 |         </div>
 90 |       </div>
 91 |     </div>
 92 |   )
 93 | }
 94 | 
 95 | export default Token
 96 | 
 97 | interface AttributesProps {
 98 |   attributes?: Attribute[]
 99 | }
100 | 
101 | const Attributes: React.FC<AttributesProps> = ({ attributes }) => {
102 |   const { max } = useMeta()
103 | 
104 |   const percentage = useCallback(
105 |     (attribute: Attribute, normalized: boolean) => {
106 |       const highest = max(attribute.trait_type)
107 |       const score = normalized ? attribute.rarity_score_normalized : attribute.rarity_score
108 |       return highest ? Math.round((score / highest) * 100) : 0
109 |     },
110 |     [max]
111 |   )
112 | 
113 |   const { normalized } = useContext(RarityModeContext)
114 | 
115 |   const [springs, api] = useSprings(
116 |     attributes?.length ?? 0,
117 |     (index) => ({ width: '0%' })
118 |   )
119 | 
120 |   useEffect(() => {
121 |     if (!attributes) return
122 |     api.start(i => ({ width: `${percentage(attributes[i], normalized)}%` }))
123 |   }, [normalized, percentage, attributes, api])
124 | 
125 |   if (!attributes || !max) return null
126 |   return (
127 |     <div className="w-80 max-w-screen lg:w-72 h-auto m-2 md:m-8 px-2 text-sm grid grid-cols-1 gap-8 items-center">
128 |       {attributes.map((attribute, i) => (
129 |         <div
130 |           key={`${attribute.trait_type}-${attribute.value}`}
131 |           className="w-full"
132 |         >
133 |           <div className="flex w-full items-center flex-wrap justify-between pb-2">
134 |             <div className="w-full flex flex-wrap items-center justify-between mb-2">
135 |               <div>
136 |                 <Trait trait={attribute} />
137 |               </div>
138 |               <div className="text-green-700 text-lg text-right">
139 |                 +
140 |                 {formatNumber(
141 |                   normalized
142 |                     ? attribute.rarity_score_normalized
143 |                     : attribute.rarity_score
144 |                 )}
145 |               </div>
146 |             </div>
147 | 
148 |             <div className="w-full h-3 flex justify-start items shadow-xl bg-gray-300 rounded-lg transition-all ease-out delay-100 transform hover:scale-y-110">
149 |               <animated.div
150 |                 style={springs[i]}
151 |                 className="h-full rounded-lg bg-gray-600"
152 |               />
153 |             </div>
154 |           </div>
155 |         </div>
156 |       ))}
157 |     </div>
158 |   )
159 | }
160 | 
161 | interface TraitProps {
162 |   trait: Attribute
163 | }
164 | 
165 | const Trait: React.FC<TraitProps> = ({ trait }) => {
166 |   const { add, remove, isSelected } = useContext(TraitContext)
167 |   const selected = isSelected(trait.trait_type, trait.value)
168 |   return (
169 |     <button
170 |       className={`${selected ? 'ring ring-gray-600' : ''
171 |         } flex whitespace-nowrap rounded-md`}
172 |       onClick={() => (selected ? remove(trait) : add(trait))}
173 |     >
174 |       <div className="bg-purple-300 p-2 rounded-l-md text-gray-800">
175 |         {trait.trait_type}
176 |       </div>
177 |       <div className="bg-purple-200 p-2 text-gray-800">{trait.value}</div>
178 |       <div className="bg-purple-100 p-2 rounded-r-md text-gray-800">
179 |         {trait.count}
180 |       </div>
181 |     </button>
182 |   )
183 | }
184 | 
185 | interface ImageProps {
186 |   token: TokenInterface
187 | }
188 | 
189 | const Image: React.FC<ImageProps> = ({ token }) => {
190 |   if (!token) return null
191 |   const src = token[config.mainImageKey ?? 'image']
192 |   if (token.animation_url && config.mainImageKey === 'animation_url') {
193 |     return (
194 |       <div className="rounded overflow-hidden flex">
195 |         <iframe
196 |           style={{ height: 450, minWidth: 375 }}
197 |           title="animation"
198 |           allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
199 |           allowFullScreen
200 |           frameBorder="0"
201 |           src={formatURL(token.animation_url)}
202 |         />
203 |       </div>
204 |     )
205 |   }
206 |   return (
207 |     <img
208 |       style={{
209 |         width: 450,
210 |         backgroundColor:
211 |           config.tokenBackgroundColor ??
212 |           '#' + token.background_color ??
213 |           'transparent',
214 |       }}
215 |       className="rounded"
216 |       src={formatURL(src ?? '')}
217 |       alt={token.name ?? 'Token #' + token.id}
218 |     />
219 |   )
220 | }
221 | 


--------------------------------------------------------------------------------
/src/pages/Home.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useEffect, useMemo, useState } from 'react'
  2 | import { useHistory } from 'react-router'
  3 | import ReactPaginate from 'react-paginate'
  4 | import queryString, { parse } from 'query-string'
  5 | import { Meta, OpenSeaOrder, Token } from '../types'
  6 | import config from '../rarityConfig'
  7 | import { useQuery } from '@apollo/client'
  8 | import { GET_META, GET_TOKENS } from '../queries'
  9 | import useOpenSeaOrders from '../hooks/useOpenSeaOrders'
 10 | import { formatURL } from '../utils'
 11 | import { TraitContext } from '../components/TraitContext'
 12 | import { RarityModeContext } from '../components/RarityModeContext'
 13 | import Loader from '../components/Loader'
 14 | import {
 15 |   ChevronDoubleLeftIcon,
 16 |   ChevronDoubleRightIcon,
 17 | } from '@heroicons/react/solid'
 18 | 
 19 | const tokensPerPage = 15
 20 | 
 21 | function Home() {
 22 |   const history = useHistory()
 23 |   const { page: pageParam } = parse(history.location.search)
 24 | 
 25 |   const [page, setPage] = useState(pageParam ? Number(pageParam) - 1 : 0)
 26 | 
 27 |   useEffect(() => {
 28 |     history.push(`?${queryString.stringify({ page: page + 1 })}`)
 29 |   }, [page, history])
 30 | 
 31 |   useEffect(() => {
 32 |     window.scrollTo(0, 0)
 33 |   }, [page])
 34 | 
 35 |   const [search, setSearch] = useState('')
 36 | 
 37 |   useEffect(() => {
 38 |     if (search) setPage(0)
 39 |   }, [search])
 40 | 
 41 |   const { queryParams: traitQueryParams, tokenCount } = useContext(TraitContext)
 42 | 
 43 |   useEffect(() => {
 44 |     if (!tokenCount) return
 45 |     const numPages = Math.ceil(tokenCount / tokensPerPage)
 46 |     setPage(page => Math.min(numPages - 1, page))
 47 |   }, [tokenCount])
 48 | 
 49 |   const { normalized } = useContext(RarityModeContext)
 50 | 
 51 |   const { data: tokenData } = useQuery<{ tokens: Token[] }>(GET_TOKENS, {
 52 |     variables: {
 53 |       orderBy: normalized ? 'rarity_score_normalized' : 'rarity_score',
 54 |       first: tokensPerPage,
 55 |       skip: page * tokensPerPage,
 56 |       ...(search ? { id: Number(search) } : {}),
 57 |       ...(traitQueryParams && traitQueryParams.length > 0
 58 |         ? { traits: traitQueryParams }
 59 |         : {}),
 60 |     },
 61 |   })
 62 | 
 63 |   const { data: metadata } = useQuery<{ meta: Meta }>(GET_META)
 64 | 
 65 |   useQuery(GET_META)
 66 | 
 67 |   const tokenIds = useMemo(
 68 |     () => (tokenData ? tokenData.tokens.map((token) => token.id) : undefined),
 69 |     [tokenData]
 70 |   )
 71 |   const orders = useOpenSeaOrders(tokenIds)
 72 | 
 73 |   const pageCount = useMemo(() => {
 74 |     if (search) return 1
 75 |     const numTokens = tokenCount ?? metadata?.meta.numTokens
 76 |     return numTokens ? Math.ceil(numTokens / tokensPerPage) : undefined
 77 |   }, [metadata, search, tokenCount])
 78 | 
 79 |   return (
 80 |     <main className="content flex flex-col items-center mx-4 md:mx-6 lg:mx-8 xl:mx-10">
 81 |       <div className="w-full flex justify-end">
 82 |         <Search search={search} setSearch={setSearch} />
 83 |       </div>
 84 |       <TokenList
 85 |         tokens={tokenData?.tokens}
 86 |         meta={metadata?.meta}
 87 |         orders={orders}
 88 |         page={page}
 89 |         setPage={setPage}
 90 |         pageCount={pageCount}
 91 |       />
 92 |     </main>
 93 |   )
 94 | }
 95 | 
 96 | export default Home
 97 | 
 98 | interface SearchProps {
 99 |   search: string
100 |   setSearch: (s: string) => void
101 | }
102 | 
103 | const Search: React.FC<SearchProps> = ({ search, setSearch }) => {
104 |   return (
105 |     <input
106 |       type="text"
107 |       className="rounded-lg focus:ring-purple-400 text-sm my-3 border-gray-400"
108 |       placeholder="Search by id"
109 |       value={search}
110 |       onChange={(e) => setSearch(e.target.value)}
111 |     />
112 |   )
113 | }
114 | 
115 | interface TokenListProps {
116 |   tokens: Token[] | undefined
117 |   meta: Meta | undefined
118 |   orders: Record<number, OpenSeaOrder>
119 |   page: number
120 |   setPage: (page: number) => void
121 |   pageCount?: number
122 | }
123 | 
124 | const TokenList: React.FC<TokenListProps> = ({
125 |   tokens,
126 |   meta,
127 |   orders,
128 |   page,
129 |   setPage,
130 |   pageCount,
131 | }) => {
132 |   if (!tokens || !meta)
133 |     return (
134 |       <div className="w-full mt-6">
135 |         <Loader />
136 |       </div>
137 |     )
138 |   return (
139 |     <div className="grid min-h-full sm:grid-cols-3 gap-6 content-start sm:gap-4 md:gap-4 lg:gap-10 xl:gap-12 mb-8">
140 |       {tokens.map((token) => (
141 |         <Card key={token.id} token={token} order={orders[token.id]} />
142 |       ))}
143 |       <Pagination
144 |         className="md:col-span-3 flex items-center justify-center gap-3 text-gray-600 text-xl font-light"
145 |         initialPage={page}
146 |         setPage={setPage}
147 |         pageCount={pageCount}
148 |       />
149 |     </div>
150 |   )
151 | }
152 | 
153 | interface PaginationProps {
154 |   initialPage: number
155 |   setPage: (page: number) => void
156 |   pageCount?: number
157 |   className?: string
158 | }
159 | 
160 | const Pagination: React.FC<PaginationProps> = ({
161 |   initialPage,
162 |   setPage,
163 |   pageCount,
164 |   className,
165 | }) => {
166 |   if (!pageCount) return null
167 |   return (
168 |     <ReactPaginate
169 |       pageCount={pageCount}
170 |       pageRangeDisplayed={5}
171 |       marginPagesDisplayed={2}
172 |       initialPage={initialPage}
173 |       previousLabel={
174 |         <ChevronDoubleLeftIcon className="h-6 w-6 text-gray-500" />
175 |       }
176 |       nextLabel={<ChevronDoubleRightIcon className="h-6 w-6 text-gray-500" />}
177 |       onPageChange={(page) => setPage(page.selected)}
178 |       breakClassName=""
179 |       breakLinkClassName="hover:cursor-pointer"
180 |       containerClassName={`${className}`}
181 |       pageClassName=""
182 |       pageLinkClassName="hover:cursor-pointer"
183 |       activeClassName="text-black font-normal"
184 |       previousClassName=""
185 |       nextClassName=""
186 |       previousLinkClassName="hover:cursor-pointer"
187 |       nextLinkClassName="hover:cursor-pointer"
188 |       disabledClassName=""
189 |     />
190 |   )
191 | }
192 | 
193 | interface CardProps {
194 |   token: Token
195 |   order: OpenSeaOrder
196 | }
197 | 
198 | const Card: React.FC<CardProps> = ({ token, order }) => {
199 |   const history = useHistory()
200 |   const { normalized } = useContext(RarityModeContext)
201 |   const {
202 |     name,
203 |     rank,
204 |     rank_normalized,
205 |     id,
206 |     image,
207 |     image_data,
208 |     background_color,
209 |   } = token
210 |   const src = config.listImageKey
211 |     ? token[config.listImageKey]
212 |     : image_data ?? formatURL(image ?? '')
213 |   return (
214 |     <div className="">
215 |       <div
216 |         className="flex rounded-md"
217 |         style={{
218 |           backgroundColor:
219 |             config.tokenBackgroundColor ??
220 |             '#' + background_color ??
221 |             'transparent',
222 |         }}
223 |       >
224 |         <button onClick={() => history.push(`/token?id=${token.id}`)}>
225 |           <a href={`/token?id=${token.id}`}>
226 |             <img
227 |               loading="lazy"
228 |               className="rounded w-full"
229 |               src={src}
230 |               alt={name ?? 'Token #' + id}
231 |               style={{ width: '100%', height: 'auto' }}
232 |             />
233 |           </a>
234 |         </button>
235 |       </div>
236 |       <div className="m-1 text-xl lg:text-lg flex font-gray-700 whitespace-nowrap flex-wrap justify-between tracking-tight">
237 |         {normalized ? rank_normalized : rank}. {name}
238 |         <Order order={order} />
239 |       </div>
240 |     </div>
241 |   )
242 | }
243 | 
244 | interface OrderProps {
245 |   order: OpenSeaOrder | undefined
246 | }
247 | 
248 | const Order: React.FC<OrderProps> = ({ order }) => {
249 |   if (!order) return null
250 |   return (
251 |     <a
252 |       className="text-xl lg:text-base text-blue-700"
253 |       href={`https://opensea.io/assets/${config.contractAddress}/${order.asset.token_id}`}
254 |       rel="noreferrer"
255 |       target="_blank"
256 |     >
257 |       {order.base_price / 1e18} ETH
258 |     </a>
259 |   )
260 | }
261 | 


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