├── .nojekyll
├── CNAME
├── public
    ├── favicon.ico
    ├── index.html
    └── hicdex.css
├── babel.config.js
├── vue.config.js
├── jsconfig.json
├── src
    ├── components
    │   ├── Nav.vue
    │   ├── charts
    │   │   ├── LineChart.js
    │   │   ├── EarningsContainer.vue
    │   │   ├── EarningsPerObjkt.vue
    │   │   ├── ArtistVsSecondary.vue
    │   │   ├── ActiveUsers.vue
    │   │   ├── Secondary.vue
    │   │   ├── Cumulative.vue
    │   │   └── TradeAvg.vue
    │   ├── Tile.vue
    │   ├── Foot.vue
    │   ├── Timestamp.vue
    │   ├── SwapFilters.vue
    │   ├── BuyersList.vue
    │   ├── HistoryItem.vue
    │   ├── Subjkt.vue
    │   ├── SwapItem.vue
    │   ├── SoldItem.vue
    │   ├── FlipItem.vue
    │   ├── Gallery.vue
    │   └── Objkt.vue
    ├── main.js
    ├── views
    │   ├── Charts.vue
    │   ├── Docs.vue
    │   ├── CreatorGallery.vue
    │   ├── CollectorGallery.vue
    │   ├── PriceHistory.vue
    │   ├── CreatorCollectors.vue
    │   ├── Sold.vue
    │   ├── SwapsOfMyWork.vue
    │   ├── SwapsOfMyCollection.vue
    │   ├── Objkt.vue
    │   ├── Flip.vue
    │   └── Home.vue
    ├── App.vue
    ├── utils.js
    └── router.js
├── .gitignore
├── README.md
├── .eslintrc.js
├── LICENSE
└── package.json


/.nojekyll:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | hicdex.com
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hicdex/hicdex-hen-graphql-samples/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset',
4 |   ],
5 | };
6 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   pages: {
3 |     index: {
4 |       title: 'hicdex',
5 |       entry: 'src/main.js',
6 |     },
7 |   },
8 | };
9 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": [
 3 |     "./src/**/*"
 4 |   ],
 5 |   "compilerOptions": {
 6 |     "baseUrl": ".",
 7 |     "paths": {
 8 |       "public": [
 9 |         "public/*"
10 |       ],
11 |       "@": [
12 |         "src/*"
13 |       ]
14 |     }
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/Nav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
 3 |     <div class="navbar-brand">
 4 |       <router-link to="/" class="navbar-item title is-4">
 5 |         hicdex
 6 |       </router-link>
 7 |     </div>
 8 |   </nav>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/src/components/charts/LineChart.js:
--------------------------------------------------------------------------------
 1 | import { Line, mixins } from 'vue-chartjs';
 2 | 
 3 | const { reactiveProp } = mixins;
 4 | 
 5 | export default {
 6 |   extends: Line,
 7 |   mixins: [reactiveProp],
 8 |   props: ['options'],
 9 |   mounted() {
10 |     this.renderChart(this.chartData, this.options);
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # hicdex-hen-graphql-samples
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/components/Tile.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="tile is-parent">
 3 |     <article class="tile is-child notification">
 4 |       <router-link :to="{ name: routeName }">
 5 |         <p class="title">{{ title }}</p>
 6 |         <div class="content">
 7 |           <slot />
 8 |         </div>
 9 |       </router-link>
10 |     </article>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   props: {
17 |     routeName: String,
18 |     title: String,
19 |   },
20 | };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/components/Foot.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="footer">
 3 |     <div class="content has-text-centered">
 4 |       <p>
 5 |         hicdex (<a href="https://github.com/hicdex"><strong>source</strong></a>)
 6 |         by <a href="https://hicetnunc.art/tz/tz1LKpeN8ZSSFNyTWiBNaE4u4sjaq7J1Vz2z">marchingsquare</a>
 7 |         (<a href="https://twitter.com/marchingsquare">@marchingsquare</a>).
 8 |         <br>
 9 |         Explorer: <a href="https://api.hicdex.com/graphiql">api.hicdex.com/graphiql</a>
10 |         <br>
11 |         <router-link :to="{ name: 'docs' }">Docs</router-link> / Endpoint: <a href="https://api.hicdex.com/v1/graphql">api.hicdex.com/v1/graphql</a>
12 |       </p>
13 |     </div>
14 |   </footer>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html class="has-navbar-fixed-top" lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css">
10 |   </head>
11 |   <body>
12 |     <noscript>
13 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 |     </noscript>
15 |     <div id="app"></div>
16 |     <!-- built files will be auto injected -->
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/src/components/Timestamp.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span class="is-family-monospace">
 3 |     <template v-if="Array.isArray(timestamp)">
 4 |       <span v-for="(ts, i) in timestamp" :key="ts">
 5 |         {{ (new Date(ts).toLocaleDateString()).replace(/(20\d{2})/, formatYear)}} {{ new Date(ts).toLocaleTimeString() }}
 6 |         <template v-if="i < timestamp.length">
 7 |           <br>
 8 |         </template>
 9 |       </span>
10 |     </template>
11 |     <template v-else>
12 |       {{ (new Date(timestamp).toLocaleDateString()).replace(/(20\d{2})/, formatYear)}} {{ new Date(timestamp).toLocaleTimeString() }}
13 |     </template>
14 |   </span>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   props: ['timestamp'],
20 |   methods: {
21 |     formatYear(y) {
22 |       return parseInt(y, 10) - 2000;
23 |     },
24 |   },
25 | };
26 | </script>
27 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |     browser: true,
 6 |     es6: true,
 7 |   },
 8 |   extends: [
 9 |     'eslint:recommended',
10 |     'plugin:vue/essential',
11 |     '@vue/airbnb',
12 |   ],
13 |   globals: {},
14 |   rules: {
15 |     'no-console': 'off',
16 |     'no-debugger': 'warn',
17 |     'prefer-template': 'off',
18 |     'no-param-reassign': 'off',
19 |     'no-nested-ternary': 'off',
20 |     'template-curly-spacing': 'off',
21 |     indent: 'off',
22 |     'max-len': 'off',
23 |     'class-methods-use-this': 'off',
24 |     'no-underscore-dangle': 'off',
25 |     'prefer-destructuring': 'off',
26 |     'consistent-return': 'off',
27 |     'object-curly-newline': 'off',
28 |     'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
29 |     'import/no-cycle': 'off',
30 |   },
31 |   parserOptions: {
32 |     parser: 'babel-eslint',
33 |   },
34 | };
35 | 


--------------------------------------------------------------------------------
/src/components/SwapFilters.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <span>{{ swaps }} items </span>
 4 |     <zi-tabs @label-selected="filterResults">
 5 |       <zi-tabs-item v-for="(item, index) in filters" :label="item.label" :value="item.value" :key="item.value + index">
 6 |         <zi-note>
 7 |           {{ `${item.label} content` }}
 8 |         </zi-note>
 9 |       </zi-tabs-item>
10 |     </zi-tabs>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 |   export default {
16 |     props: ['type', 'swaps', 'filterResults', 'filterType'],
17 |     data() {
18 |       return {
19 |         filters: [
20 |           { label: 'All', value: 'all' },
21 |           { label: 'For Sale', value: 'active' },
22 |           { label: 'Sold', value: 'finished' },
23 |           { label: 'Canceled', value: 'canceled' },
24 |           { label: 'Query', value: 'query' },
25 |         ],
26 |       };
27 |     },
28 |   };
29 | </script>
30 | 


--------------------------------------------------------------------------------
/src/components/BuyersList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-if="!address">
 4 |       Enter a wallet address above
 5 |     </div>
 6 |     <p v-else-if="!trades.length"></p>
 7 | 
 8 |     <b-table
 9 |       v-else
10 |       :data="trades">
11 |       <b-table-column field="buyer.purchases_aggregate.aggregate.count" label="pieces bought" sortable numeric v-slot="props">
12 |         {{ props.row.buyer.purchases_aggregate.aggregate.count }}
13 |       </b-table-column>
14 |       <b-table-column field="buyer.address" label="buyer" sortable v-slot="props">
15 |         <a :href="link(props.row.buyer.address)">
16 |           {{ link(props.row.buyer.address) }}
17 |         </a>
18 |       </b-table-column>
19 |     </b-table>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 |   export default {
25 |     props: ['trades', 'address'],
26 |     mounted() {},
27 |     methods: {
28 |       link(addr) {
29 |         return `https://hicetnunc.art/tz/${addr}`;
30 |       },
31 |     },
32 |   };
33 | 
34 | </script>
35 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import GeistUI from '@geist-ui/vue';
 3 | import Buefy from 'buefy';
 4 | import VueApollo from 'vue-apollo';
 5 | 
 6 | import ApolloClient from 'apollo-client';
 7 | import { InMemoryCache } from 'apollo-cache-inmemory';
 8 | import { WebSocketLink } from 'apollo-link-ws';
 9 | 
10 | import App from './App.vue';
11 | import router from './router';
12 | 
13 | import 'buefy/dist/buefy.css';
14 | import '../public/hicdex.css';
15 | 
16 | Vue.use(VueApollo);
17 | 
18 | Vue.use(Buefy);
19 | Vue.use(GeistUI);
20 | 
21 | Vue.config.productionTip = false;
22 | 
23 | const link = new WebSocketLink({
24 |   uri: 'wss://api.hicdex.com/v1/graphql',
25 |   options: {
26 |     reconnect: true,
27 |     timeout: 30000,
28 |   },
29 | });
30 | 
31 | const client = new ApolloClient({
32 |   link,
33 |   cache: new InMemoryCache({
34 |     addTypename: true,
35 |   }),
36 | });
37 | 
38 | const apolloProvider = new VueApollo({
39 |   defaultClient: client,
40 | });
41 | 
42 | new Vue({
43 |   router,
44 |   apolloProvider,
45 |   render: (h) => h(App),
46 | }).$mount('#app');
47 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2021
 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/views/Charts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="block">
 4 |       <cumulative />
 5 |     </div>
 6 | 
 7 |     <div class="block">
 8 |       <active-users />
 9 |       <p class="content mt-4">
10 |         <em>A wallet is considered active if it either minted, swapped, or bought an objkt on that day.</em>
11 |       </p>
12 |     </div>
13 | 
14 |     <div class="block">
15 |       <trade-avg />
16 |     </div>
17 | 
18 |     <div class="block">
19 |       <earnings-container />
20 |     </div>
21 | 
22 |     <div class="content has-text-centered">
23 |       <p>
24 |         Big thanks to <strong><a href="https://twitter.com/__orderandchaos" target="_blank">__orderandchaos</a></strong>
25 |         (<a href="https://hicetnunc.art/tz/tz1VgpmwW66LCbskjudK54Zp96vKn2cHjpGN" target="_blank">HEN</a>)
26 |         for helping with these charts!
27 |       </p>
28 |     </div>
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 | import Cumulative from '../components/charts/Cumulative.vue';
34 | import ActiveUsers from '../components/charts/ActiveUsers.vue';
35 | import TradeAvg from '../components/charts/TradeAvg.vue';
36 | import EarningsContainer from '../components/charts/EarningsContainer.vue';
37 | 
38 | export default {
39 |   components: {
40 |     ActiveUsers,
41 |     Cumulative,
42 |     TradeAvg,
43 |     EarningsContainer,
44 |   },
45 | };
46 | </script>
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hicdex-hen-graphql-samples",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "deploy": "npm run build && cp dist/index.html dist/404.html && cp CNAME .nojekyll dist/ && gh-pages -t -d dist"
10 |   },
11 |   "dependencies": {
12 |     "@geist-ui/vue": "^3.0.0",
13 |     "@taquito/beacon-wallet": "^9.1.0",
14 |     "@taquito/taquito": "^9.1.0",
15 |     "apollo-cache-inmemory": "1.6.6",
16 |     "apollo-client": "2.6.10",
17 |     "apollo-link-http": "1.5.17",
18 |     "apollo-link-ws": "1.0.20",
19 |     "buefy": "^0.9.7",
20 |     "chart.js": "^2.9.4",
21 |     "core-js": "^3.6.5",
22 |     "graphql": "14.5.8",
23 |     "graphql-tag": "^2.10.1",
24 |     "subscriptions-transport-ws": "0.9.16",
25 |     "vue": "^2.6.11",
26 |     "vue-apollo": "^3.0.7",
27 |     "vue-chartjs": "^3.5.1",
28 |     "vue-router": "^3.5.1"
29 |   },
30 |   "devDependencies": {
31 |     "@vue/cli-plugin-babel": "~4.5.0",
32 |     "@vue/cli-plugin-eslint": "~4.5.0",
33 |     "@vue/cli-service": "~4.5.0",
34 |     "@vue/eslint-config-airbnb": "^5.3.0",
35 |     "babel-eslint": "^10.1.0",
36 |     "eslint": "^6.7.2",
37 |     "eslint-plugin-vue": "^6.2.2",
38 |     "gh-pages": "^3.1.0",
39 |     "vue-template-compiler": "^2.6.11"
40 |   },
41 |   "browserslist": [
42 |     "> 1%",
43 |     "last 2 versions",
44 |     "not dead"
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/src/components/HistoryItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-if="!objkt">
 4 |       Enter an OBJKT id above
 5 |     </div>
 6 |     <p v-else-if="!trades.length"></p>
 7 | 
 8 |     <b-table
 9 |       v-else
10 |       :data="trades">
11 |       <b-table-column field="swap.price" label="price" sortable numeric v-slot="props">
12 |         {{ (props.row.swap.price / 1000000).toFixed(2) }}
13 |       </b-table-column>
14 |       <b-table-column field="timestamp" label="timestamp" sortable v-slot="props">
15 |         {{ props.row.timestamp }}
16 |       </b-table-column>
17 |       <b-table-column field="seller.address" label="seller" sortable v-slot="props">
18 |         <a
19 |           :href="link(props.row.seller.address)"
20 |           :class="{'secondary-sale': props.row.seller.address !== props.row.token.creator.address, 'primary-sale': props.row.seller.address === props.row.token.creator.address}">
21 |           {{ link(props.row.seller.address) }}
22 |         </a>
23 |       </b-table-column>
24 |       <b-table-column field="buyer.address" label="buyer" sortable v-slot="props">
25 |         <a :href="link(props.row.buyer.address)">
26 |           {{ link(props.row.buyer.address) }}
27 |         </a>
28 |       </b-table-column>
29 |     </b-table>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 |   export default {
35 |     props: ['trades', 'objkt'],
36 |     mounted() {},
37 |     methods: {
38 |       link(addr) {
39 |         return `https://hicetnunc.art/tz/${addr}`;
40 |       },
41 |     },
42 |   };
43 | 
44 | </script>
45 | 


--------------------------------------------------------------------------------
/src/components/Subjkt.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a v-if="obj" :href="link(obj.address)" target="_blank">
 3 |     <template v-if="isEscrow(obj)">
 4 |       Contract: <span class="is-italic">{{ escrow[obj.address] }}</span>
 5 |       <span class="has-text-weight-light ml-1">{{ obj.address }}</span>
 6 |     </template>
 7 |     <template v-else-if="name(obj)">
 8 |       <span>{{ name(obj) }}</span>
 9 |       <span class="has-text-weight-light ml-1">{{ obj.address }}</span>
10 |     </template>
11 |     <template v-else>
12 |       <span class="has-text-weight-light">{{ obj.address }}</span>
13 |     </template>
14 |   </a>
15 | </template>
16 | 
17 | <script>
18 | const escrow = {
19 |   KT1Hkg5qeNhfwpKW4fXvq7HGZB9z2EnmCCA9: 'HEN swap v1',
20 |   KT1HbQepzV1nVGg8QVznG7z4RcHseD5kwqBn: 'HEN swap v2',
21 |   KT1Wvk8fon9SgNEPQKewoSL2ziGGuCQebqZc: 'objkt.com english',
22 |   KT1XjcRq5MLAzMKQ3UHsrue2SeU2NbxUrzmU: 'objkt.com english v2',
23 |   KT1ET45vnyEFMLS9wX1dYHEs9aCN3twDEiQw: 'objkt.com dutch',
24 |   KT1W8PqJsZcpcAgDQH9SKQSZKvjVbpjUk8Sc: 'objkt.com dutch v2',
25 |   KT1QJ71jypKGgyTNtXjkCAYJZNhCKWiHuT2r: 'objkt.com dutch v3',
26 |   KT1FvqJwEDWb1Gwc55Jd1jjTHRVWbYKUUpyq: 'objkt.com marketplace',
27 | };
28 | 
29 | export default {
30 |   props: ['obj'],
31 |   data() {
32 |     return {
33 |       escrow,
34 |     };
35 |   },
36 |   methods: {
37 |     link(addr) {
38 |       return `https://hicetnunc.art/tz/${addr}`;
39 |     },
40 |     name(obj) {
41 |       if (obj.name) {
42 |         return obj.name;
43 |       }
44 |       return '';
45 |     },
46 |     isEscrow(obj) {
47 |       return obj.address in escrow;
48 |     },
49 |   },
50 | };
51 | </script>
52 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <a
 4 |       aria-label="View source on GitHub"
 5 |       href="https://github.com/hicdex/hicdex-hen-graphql-samples"
 6 |       class="github-corner">
 7 |       <svg viewBox="0 0 250 250" style="fill:#151513; color:#fff; border: 0;" aria-hidden="true">
 8 |         <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
 9 |         <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
10 |         <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
11 |       </svg>
12 |     </a>
13 | 
14 |     <Nav />
15 | 
16 |     <router-view class="container root-container" />
17 | 
18 |     <foot />
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | import Foot from './components/Foot.vue';
24 | import Nav from './components/Nav.vue';
25 | 
26 | export default {
27 |   name: 'App',
28 |   components: {
29 |     Foot,
30 |     Nav,
31 |   },
32 | };
33 | </script>
34 | 


--------------------------------------------------------------------------------
/src/components/charts/EarningsContainer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="dates.length">
 3 |     <artist-vs-secondary :x="dates" :y="[artistEarningsDS, secondarySalesVolumesDS]" />
 4 |     <earnings-per-objkt :x="dates" :y="[artistEarningsPerTradeDS]" />
 5 |     <secondary :x="dates" :y="[secondarySalesVolumesDS, artistRoyaltiesEarningDS, tradesDS]" />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import ArtistVsSecondary from './ArtistVsSecondary.vue';
11 | import EarningsPerObjkt from './EarningsPerObjkt.vue';
12 | import Secondary from './Secondary.vue';
13 | 
14 | export default {
15 |   components: { EarningsPerObjkt, Secondary, ArtistVsSecondary },
16 |   async mounted() {
17 |     const json = [
18 |       'cache/earnings.json',
19 |     ].map((file) => fetch(`https://api.hicdex.com/${file}`).then((res) => res.json()));
20 |     const data = await Promise.all(json);
21 | 
22 |     this.dates = data[0].map(({ date }) => date);
23 |     this.artistEarningsDS = data[0].map(({ artist_earnings: artistEarnings }) => artistEarnings);
24 |     this.artistRoyaltiesEarningDS = data[0].map(({ artist_royalties_earning: artistRoyaltiesEarning }) => artistRoyaltiesEarning);
25 |     this.secondarySalesVolumesDS = data[0].map(({ secondary_sales_volumes: secondarySalesVolumes }) => secondarySalesVolumes);
26 |     this.artistEarningsPerTradeDS = data[0].map(({ artist_earnings_per_trade: artistEarningsPerTrade }) => artistEarningsPerTrade);
27 |     this.tradesDS = data[0].map(({ trades }) => trades);
28 |   },
29 |   data() {
30 |     return {
31 |       dates: [],
32 |       artistEarningsDS: [],
33 |       artistRoyaltiesEarningDS: [],
34 |       secondarySalesVolumesDS: [],
35 |       artistEarningsPerTradeDS: [],
36 |       tradesDS: [],
37 |     };
38 |   },
39 | };
40 | </script>
41 | 


--------------------------------------------------------------------------------
/src/components/charts/EarningsPerObjkt.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <line-chart :chart-data="series" :options="options" :styles="chartStyles"/>
 3 | </template>
 4 | 
 5 | <script>
 6 | import LineChart from './LineChart';
 7 | // https://www.chartjs.org/docs/2.9.4/
 8 | 
 9 | export default {
10 |   props: ['x', 'y'],
11 |   components: {
12 |     LineChart,
13 |   },
14 |   data() {
15 |     const datasets = [
16 |       {
17 |         type: 'line',
18 |         label: 'artist earnings',
19 |         data: this.y[0],
20 |         borderColor: '#0078b0',
21 |         fill: false,
22 |         yAxisID: 'left-y-axis',
23 |       },
24 |     ];
25 | 
26 |     const options = {
27 |       title: {
28 |         display: true,
29 |         text: 'Artist Earnings Average per Objkt',
30 |         fontSize: 30,
31 |       },
32 |       responsive: true,
33 |       maintainAspectRatio: false,
34 |       scales: {
35 |         xAxes: [{
36 |           offset: true,
37 |           stacked: true,
38 |         }],
39 |         yAxes: [
40 |           {
41 |             id: 'left-y-axis',
42 |             position: 'left',
43 |             type: 'linear',
44 |             ticks: { suggestedMin: 0 },
45 |             scaleLabel: {
46 |               display: true,
47 |               labelString: 'xtz',
48 |             },
49 |           }],
50 |       },
51 |       elements: {
52 |         point: {
53 |           radius: 2,
54 |           hitRadius: 4,
55 |         },
56 |       },
57 |     };
58 | 
59 |     return {
60 |       options,
61 |       series: {
62 |         labels: this.x,
63 |         datasets,
64 |       },
65 |       height: 440,
66 |     };
67 |   },
68 |   computed: {
69 |     chartStyles() {
70 |       return {
71 |         height: `${this.height}px`,
72 |         position: 'relative',
73 |       };
74 |     },
75 |   },
76 | };
77 | </script>
78 | 


--------------------------------------------------------------------------------
/public/hicdex.css:
--------------------------------------------------------------------------------
  1 | .navbar {
  2 |   width: 100px;
  3 | }
  4 | 
  5 | .footer {
  6 |   margin-top: 2em;
  7 |   padding: 2rem 1.5rem 2rem;
  8 | }
  9 | 
 10 | .root-container {
 11 |   min-height: calc(100vh - 216px);
 12 |   padding-top: 10px;
 13 | }
 14 | 
 15 | 
 16 | code:after, code:before {
 17 |   content: "";
 18 | }
 19 | 
 20 | table tr td {
 21 |   font-size: 1rem;
 22 |   font-size: 0.9rem;
 23 |   font-weight: 700;
 24 | }
 25 | pre {
 26 |   font-size: 1rem;
 27 | }
 28 | 
 29 | .table-row {
 30 |   background: #f3f3f3;
 31 | }
 32 | 
 33 | a.primary-sale {
 34 |   font-weight: 300;
 35 | }
 36 | 
 37 | article.tile a {
 38 |   text-decoration: none !important;
 39 | }
 40 | 
 41 | .github-corner {
 42 |   height: 100px;
 43 |   display: block;
 44 |   position: absolute;
 45 |   top: 0px;
 46 |   right: 0px;
 47 |   overflow: hidden;
 48 |   z-index: 2;
 49 | }
 50 | 
 51 | .github-corner svg {
 52 |   height: 100px;
 53 |   width: 100px;
 54 | }
 55 | 
 56 | .github-corner:hover .octo-arm {
 57 |   animation: octocat-wave 560ms ease-in-out;
 58 | }
 59 | 
 60 | @media screen and (max-width: 800px) {
 61 |   .github-corner svg {
 62 |     height: 90px;
 63 |     width: 90px;
 64 |   }
 65 | 
 66 |   .github-corner:hover .octo-arm {
 67 |     animation: none;
 68 |   }
 69 | 
 70 |   .github-corner .octo-arm {
 71 |     animation: octocat-wave 560ms ease-in-out;
 72 |   }
 73 | }
 74 | 
 75 | @media screen and (max-width: 400px) {
 76 |   .github-corner svg {
 77 |     height: 70px;
 78 |     width: 70px;
 79 |   }
 80 | }
 81 | 
 82 | @keyframes octocat-wave {
 83 |   0%, 100% {
 84 |     transform: rotate(0);
 85 |   }
 86 | 
 87 |   20%, 60% {
 88 |     transform: rotate(-25deg);
 89 |   }
 90 | 
 91 |   40%, 80% {
 92 |     transform: rotate(10deg);
 93 |   }
 94 | }
 95 | 
 96 | .text-post-field {
 97 |   padding-bottom: calc(0.5em - 1px);
 98 |   padding-left: 1em;
 99 |   padding-right: 1em;
100 |   padding-top: calc(0.5em - 1px);
101 | }
102 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | export function graphqlTemplate(query, params) {
 2 |   const type = query.definitions[0].selectionSet.selections[0].name.value;
 3 |   return `
 4 | const query = \`${query.loc.source.body}\`;
 5 | 
 6 | async function fetchGraphQL(operationsDoc, operationName, variables) {
 7 |   const result = await fetch(
 8 |     "https://api.hicdex.com/v1/graphql",
 9 |     {
10 |       method: "POST",
11 |       body: JSON.stringify({
12 |         query: operationsDoc,
13 |         variables: variables,
14 |         operationName: operationName
15 |       })
16 |     }
17 |   );
18 | 
19 |   return await result.json();
20 | }
21 | 
22 | async function doFetch() {
23 |   const { errors, data } = await fetchGraphQL(query, "${query.definitions[0].name.value}", ${JSON.stringify(params, null, 0)});
24 |   if (errors) {
25 |     console.error(errors);
26 |   }
27 |   const result = data.${type}
28 |   console.log({ result })
29 |   return result
30 | }
31 | `;
32 | }
33 | 
34 | function isTezosDomain(address) {
35 |   return /\.tez$/.test(address);
36 | }
37 | 
38 | async function resolveTezosDomain(domain) {
39 |   try {
40 |     const result = await fetch('https://api.tezos.domains/graphql', {
41 |       headers: {
42 |         'content-type': 'application/json',
43 |       },
44 |       method: 'POST',
45 |       mode: 'cors',
46 |       credentials: 'omit',
47 |       body: JSON.stringify({
48 |         query: 'query resolveDomain($domain: String!) {\n  domain(name: $domain) {\n    address\n  }\n}\n',
49 |         variables: { domain },
50 |         operationName: 'resolveDomain',
51 |       }),
52 |     });
53 | 
54 |     const response = await result.json();
55 |     return response?.data?.domain?.address || '';
56 |   } catch (err) {
57 |     return '';
58 |   }
59 | }
60 | 
61 | export async function getAddress(addressOrDomain) {
62 |   if (isTezosDomain(addressOrDomain)) {
63 |     const address = await resolveTezosDomain(addressOrDomain);
64 |     if (address) {
65 |       return address;
66 |     }
67 |   }
68 | 
69 |   return addressOrDomain;
70 | }
71 | 


--------------------------------------------------------------------------------
/src/components/charts/ArtistVsSecondary.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <line-chart :chart-data="series" :options="options" :styles="chartStyles"/>
 3 | </template>
 4 | 
 5 | <script>
 6 | import LineChart from './LineChart';
 7 | // https://www.chartjs.org/docs/2.9.4/
 8 | 
 9 | export default {
10 |   props: ['x', 'y'],
11 |   components: {
12 |     LineChart,
13 |   },
14 |   data() {
15 |     const datasets = [
16 |       {
17 |         type: 'line',
18 |         label: 'artist earnings',
19 |         data: this.y[0],
20 |         borderColor: '#0078b0',
21 |         fill: false,
22 |         yAxisID: 'secondary-volume-axis',
23 |       },
24 |       {
25 |         type: 'line',
26 |         label: 'secondary sales earnings',
27 |         data: this.y[1],
28 |         borderColor: '#b37400',
29 |         fill: false,
30 |         yAxisID: 'secondary-volume-axis',
31 |       },
32 |     ];
33 | 
34 |     const options = {
35 |       title: {
36 |         display: true,
37 |         text: 'Artist (primary+royalties) vs Secondary volumes',
38 |         fontSize: 30,
39 |       },
40 |       responsive: true,
41 |       maintainAspectRatio: false,
42 |       scales: {
43 |         xAxes: [{
44 |           offset: true,
45 |           stacked: true,
46 |         }],
47 |         yAxes: [
48 |           {
49 |             id: 'secondary-volume-axis',
50 |             position: 'left',
51 |             type: 'linear',
52 |             ticks: { suggestedMin: 0 },
53 |             scaleLabel: {
54 |               display: true,
55 |               labelString: 'xtz',
56 |             },
57 |           }],
58 |       },
59 |       elements: {
60 |         point: {
61 |           radius: 2,
62 |           hitRadius: 4,
63 |         },
64 |       },
65 |     };
66 | 
67 |     return {
68 |       options,
69 |       series: {
70 |         labels: this.x,
71 |         datasets,
72 |       },
73 |       height: 440,
74 |     };
75 |   },
76 |   computed: {
77 |     chartStyles() {
78 |       return {
79 |         height: `${this.height}px`,
80 |         position: 'relative',
81 |       };
82 |     },
83 |   },
84 | };
85 | </script>
86 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | import Docs from '@/views/Docs.vue';
 4 | import Sold from '@/views/Sold.vue';
 5 | import Flip from '@/views/Flip.vue';
 6 | import Objkt from '@/views/Objkt.vue';
 7 | import Charts from '@/views/Charts.vue';
 8 | import Home from '@/views/Home.vue';
 9 | import SwapsOfMyWork from '@/views/SwapsOfMyWork.vue';
10 | import SwapsOfMyCollection from '@/views/SwapsOfMyCollection.vue';
11 | import CreatorGallery from '@/views/CreatorGallery.vue';
12 | import CollectorGallery from '@/views/CollectorGallery.vue';
13 | import PriceHistory from '@/views/PriceHistory.vue';
14 | import CreatorCollectors from '@/views/CreatorCollectors.vue';
15 | 
16 | Vue.use(Router);
17 | 
18 | const router = new Router({
19 |   mode: 'history',
20 |   base: process.env.BASE_URL,
21 |   routes: [
22 |     {
23 |       path: '/',
24 |       name: 'home',
25 |       component: Home,
26 |     },
27 |     {
28 |       path: '/my-art-on-secondary-market',
29 |       name: 'my-art-on-secondary-market',
30 |       component: SwapsOfMyWork,
31 |     },
32 |     {
33 |       path: '/my-secondary-market-sales',
34 |       name: 'my-secondary-market-sales',
35 |       component: SwapsOfMyCollection,
36 |     },
37 |     {
38 |       path: '/creator-gallery',
39 |       name: 'creator-gallery',
40 |       component: CreatorGallery,
41 |     },
42 |     {
43 |       path: '/collector-gallery',
44 |       name: 'collector-gallery',
45 |       component: CollectorGallery,
46 |     },
47 |     {
48 |       path: '/price-history',
49 |       name: 'price-history',
50 |       component: PriceHistory,
51 |     },
52 |     {
53 |       path: '/creator-collectors',
54 |       name: 'creator-collectors',
55 |       component: CreatorCollectors,
56 |     },
57 |     {
58 |       path: '/sold',
59 |       name: 'sold',
60 |       component: Sold,
61 |     },
62 |     {
63 |       path: '/flip',
64 |       name: 'flip',
65 |       component: Flip,
66 |     },
67 |     {
68 |       path: '/objkt',
69 |       name: 'objkt',
70 |       component: Objkt,
71 |     },
72 |     {
73 |       path: '/docs',
74 |       name: 'docs',
75 |       component: Docs,
76 |     },
77 |     {
78 |       path: '/charts',
79 |       name: 'charts',
80 |       component: Charts,
81 |     },
82 |   ],
83 | });
84 | 
85 | export default router;
86 | 


--------------------------------------------------------------------------------
/src/views/Docs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 class="title is-spaced">Schema</h1>
 4 | 
 5 |     <p class="content">
 6 |       The main entities of the schema are listed below.
 7 |       <br>
 8 |       Rely on introspection / <a href="https://api.hicdex.com/graphiql">graphiql</a> to discover what fields and relations are available.
 9 |     </p>
10 | 
11 |     <h2 class="subtitle"><code>hic_et_nunc_token</code></h2>
12 |     <p class="content">
13 |       The OBJKTs table.
14 |     </p>
15 | 
16 |     <h2 class="subtitle"><code>hic_et_nunc_holder</code></h2>
17 |     <p class="content">
18 |       Wallets / HEN users.
19 |     </p>
20 | 
21 |     <h2 class="subtitle"><code>hic_et_nunc_swap</code></h2>
22 |     <p class="content">
23 |       Swaps are OBJKTs put up for sale.
24 |       A swap has an amount and a price.
25 |       Putting 10 editions objkt #123 for sale at 1 xtz means a swap with
26 |       <code>amount=10</code>, <code>price=1000000</code>.
27 |       <br>
28 |       <code>status</code> can have one of three values describing the lifecycle of a swap:
29 |       <ul>
30 |         <li>
31 |           <code>0</code>, active swap, something can be bought from this swap,
32 |         </li>
33 |         <li>
34 |           <code>1</code>, finished swap, everything from this swap has been sold,
35 |         </li>
36 |         <li>
37 |           <code>2</code>, canceled swap, the swap has been canceled, parts of it might have been sold but not all of it, otherwise it would be <code>1</code> (finished).
38 |         </li>
39 |       </ul>
40 |     </p>
41 | 
42 |     <h2 class="subtitle"><code>hic_et_nunc_tag</code></h2>
43 |     <p class="content">
44 |       OBJKT tags
45 |     </p>
46 | 
47 |     <h2 class="subtitle"><code>hic_et_nunc_token_holder</code></h2>
48 |     <p class="content">
49 |       Which wallet (see <code>hic_et_nunc_holder</code>) own what
50 |     </p>
51 | 
52 |     <h2 class="subtitle"><code>hic_et_nunc_token_tag</code></h2>
53 |     <p class="content">
54 |       OBJKT &lt;-> tag relationship
55 |     </p>
56 | 
57 |     <h2 class="subtitle"><code>hic_et_nunc_trade</code></h2>
58 |     <p class="content">
59 |       A trade represents an OBJKT being sold.
60 |       <br>
61 |       It has a relationship to the <code>buyer</code>, the <code>seller</code>, the <code>token</code> being sold/bought, the <code>swap</code> being acted upon.
62 |     </p>
63 | 
64 |   </div>
65 | </template>
66 | 
67 | <script>
68 | export default {
69 |   components: {},
70 | };
71 | </script>
72 | 


--------------------------------------------------------------------------------
/src/components/SwapItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-if="!address">
 4 |       Enter a wallet address above
 5 |     </div>
 6 |     <p v-else-if="!swaps.length"></p>
 7 | 
 8 |     <b-table
 9 |       v-else
10 |       :data="swaps">
11 |       <b-table-column field="price" label="price" sortable numeric v-slot="props">
12 |         {{ (props.row.price / 1000000).toFixed(2) }}
13 |       </b-table-column>
14 |       <b-table-column field="status" label="status" sortable v-slot="props">
15 |         {{ statusText(props.row.status) }}
16 |       </b-table-column>
17 |       <b-table-column label="ID" field="token.id" numeric sortable v-slot="props">
18 |           {{ props.row.token.id }}
19 |       </b-table-column>
20 |       <b-table-column label="OBJKT" field="token" sortable v-slot="props">
21 |         <a :href="link(props.row.token.id)">
22 |           {{ link(props.row.token.id) }}
23 |         </a>
24 |       </b-table-column>
25 |       <b-table-column label="title" field="title" v-slot="props">
26 |         <b-tooltip multilined type="is-dark" v-if="(props.row.token.mime.startsWith('image/') && !props.row.token.mime.includes('svg')) || props.row.token.display_uri">
27 |           {{ props.row.token.title }}
28 |           <template v-slot:content>
29 |             <b-image
30 |               :src="img(props.row.token.display_uri || props.row.token.artifact_uri)"
31 |               :alt="props.row.token.title"
32 |             ></b-image>
33 |           </template>
34 |         </b-tooltip>
35 |         <span v-else>
36 |           {{ props.row.token.title }}
37 |         </span>
38 |       </b-table-column>
39 |       <b-table-column field="token.mime" label="mime" sortable v-slot="props">
40 |           {{ props.row.token.mime }}
41 |       </b-table-column>
42 |     </b-table>
43 |   </div>
44 | </template>
45 | 
46 | <script>
47 |   export default {
48 |     props: ['swaps', 'address'],
49 |     mounted() {},
50 |     methods: {
51 |       link(id) {
52 |         return `https://hicetnunc.art/objkt/${id}`;
53 |       },
54 |       statusText(statusId) {
55 |         const statuses = {
56 |           0: 'For Sale',
57 |           1: 'Sold',
58 |           2: 'Canceled',
59 |         };
60 |         return statuses[statusId];
61 |       },
62 |       img(ipfsUrl) {
63 |         const matched = ipfsUrl.match(/ipfs:\/\/(.*)/);
64 |         if (matched) {
65 |           return `https://cloudflare-ipfs.com/ipfs/${matched[1]}`;
66 |         }
67 |         return '';
68 |       },
69 |     },
70 |   };
71 | 
72 | </script>
73 | 


--------------------------------------------------------------------------------
/src/components/SoldItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-if="!address">
 4 |       Enter a wallet address above
 5 |     </div>
 6 |     <p v-else-if="!trades.length"></p>
 7 | 
 8 |     <b-table
 9 |       v-else
10 |       :data="trades">
11 |       <b-table-column field="timestamp" label="date" sortable v-slot="props">
12 |         {{ new Date(props.row.timestamp).toLocaleDateString() }} {{ new Date(props.row.timestamp).toLocaleTimeString() }}
13 |       </b-table-column>
14 |       <b-table-column field="swap.price" label="price" sortable numeric v-slot="props">
15 |         {{ ((props.row.amount * props.row.swap.price) / 1000000).toFixed(2) }}
16 |       </b-table-column>
17 |       <b-table-column label="OBJKT" field="token.id" sortable v-slot="props">
18 |         <a :href="link(props.row.token.id)">
19 |           {{ props.row.token.id }}
20 |         </a>
21 |       </b-table-column>
22 |       <b-table-column label="title" field="token.title" sortable v-slot="props">
23 |         <b-tooltip multilined type="is-dark" v-if="(props.row.token.mime.startsWith('image/') && !props.row.token.mime.includes('svg')) || props.row.token.display_uri">
24 |           {{ props.row.token.title }}
25 |           <template v-slot:content>
26 |             <b-image
27 |               :src="img(props.row.token.display_uri || props.row.token.artifact_uri)"
28 |               :alt="props.row.token.title"
29 |             ></b-image>
30 |           </template>
31 |         </b-tooltip>
32 |         <span v-else>
33 |           {{ props.row.token.title }}
34 |         </span>
35 |       </b-table-column>
36 |       <b-table-column label="Buyer" field="buyer.address" sortable v-slot="props">
37 |         <a :href="addrLink(props.row.buyer.address)">
38 |           {{ props.row.buyer.address }}
39 |         </a>
40 |       </b-table-column>
41 |     </b-table>
42 |   </div>
43 | </template>
44 | 
45 | <script>
46 |   export default {
47 |     props: ['trades', 'address'],
48 |     mounted() {},
49 |     methods: {
50 |       link(id) {
51 |         return `https://hicetnunc.art/objkt/${id}`;
52 |       },
53 |       addrLink(id) {
54 |         return `https://hicetnunc.art/tz/${id}`;
55 |       },
56 |       statusText(statusId) {
57 |         const statuses = {
58 |           0: 'For Sale',
59 |           1: 'Sold',
60 |           2: 'Canceled',
61 |         };
62 |         return statuses[statusId];
63 |       },
64 |       img(ipfsUrl) {
65 |         const matched = ipfsUrl.match(/ipfs:\/\/(.*)/);
66 |         if (matched) {
67 |           return `https://cloudflare-ipfs.com/ipfs/${matched[1]}`;
68 |         }
69 |         return '';
70 |       },
71 |     },
72 |   };
73 | 
74 | </script>
75 | 


--------------------------------------------------------------------------------
/src/components/charts/ActiveUsers.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <line-chart :chart-data="series" :options="options" :styles="chartStyles"/>
  3 | </template>
  4 | 
  5 | <script>
  6 | import LineChart from './LineChart';
  7 | // https://www.chartjs.org/docs/2.9.4/
  8 | 
  9 | export default {
 10 |   components: {
 11 |     LineChart,
 12 |   },
 13 |   async mounted() {
 14 |     const labels = [
 15 |       'Active Wallets',
 16 |       'Minted objkts',
 17 |     ];
 18 |     const colors = [
 19 |       { line: '#0078b0' },
 20 |       { bar: '#ffcc33' },
 21 |     ];
 22 |     const json = [
 23 |       'cache/active.json',
 24 |       'cache/objkt_cumul.json',
 25 |     ].map((file) => fetch(`https://api.hicdex.com/${file}`).then((res) => res.json()));
 26 |     const data = await Promise.all(json);
 27 |     const dates = data[0].map(({ date }) => date);
 28 | 
 29 |     const datasets = [];
 30 |     data.forEach((obj, i) => {
 31 |       if (i === 0) {
 32 |         datasets.push({
 33 |           type: 'line',
 34 |           label: labels[i],
 35 |           data: obj.map(({ count }) => count),
 36 |           backgroundColor: colors[i].line,
 37 |           fill: false,
 38 |           yAxisID: 'left-y-axis',
 39 |         });
 40 |       } else {
 41 |         datasets.push({
 42 |           type: 'bar',
 43 |           label: labels[i],
 44 |           data: obj.map(({ count }) => count),
 45 |           backgroundColor: colors[i].bar,
 46 |           fill: false,
 47 |           yAxisID: 'left-y-axis',
 48 |         });
 49 |       }
 50 |     });
 51 | 
 52 |     this.options = {
 53 |       title: {
 54 |         display: true,
 55 |         text: 'Daily unique active addresses',
 56 |         fontSize: 30,
 57 |       },
 58 |       responsive: true,
 59 |       maintainAspectRatio: false,
 60 |       scales: {
 61 |         xAxes: [{
 62 |           offset: true,
 63 |           stacked: true,
 64 |         }],
 65 |         yAxes: [
 66 |           {
 67 |             id: 'left-y-axis',
 68 |             position: 'left',
 69 |             type: 'linear',
 70 |             // scaleLabel: {
 71 |             //   display: true,
 72 |             //   labelString: '#active wallets',
 73 |             // },
 74 |           }],
 75 |       },
 76 |       elements: {
 77 |         point: {
 78 |           radius: 2,
 79 |           hitRadius: 4,
 80 |         },
 81 |       },
 82 |     };
 83 | 
 84 |     this.series = {
 85 |       labels: dates,
 86 |       datasets,
 87 |     };
 88 |   },
 89 |   data() {
 90 |     return {
 91 |       options: {},
 92 |       series: {},
 93 |       height: 440,
 94 |     };
 95 |   },
 96 |   computed: {
 97 |     chartStyles() {
 98 |       return {
 99 |         height: `${this.height}px`,
100 |         position: 'relative',
101 |       };
102 |     },
103 |   },
104 | };
105 | </script>
106 | 


--------------------------------------------------------------------------------
/src/components/charts/Secondary.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <line-chart :chart-data="series" :options="options" :styles="chartStyles"/>
  3 | </template>
  4 | 
  5 | <script>
  6 | import LineChart from './LineChart';
  7 | // https://www.chartjs.org/docs/2.9.4/
  8 | 
  9 | export default {
 10 |   props: ['x', 'y'],
 11 |   components: {
 12 |     LineChart,
 13 |   },
 14 |   data() {
 15 |     const datasets = [
 16 |       {
 17 |         type: 'line',
 18 |         label: 'secondary sales',
 19 |         data: this.y[0],
 20 |         borderColor: '#0078b0',
 21 |         fill: false,
 22 |         yAxisID: 'secondary-volume-axis',
 23 |       },
 24 |       {
 25 |         type: 'line',
 26 |         label: 'royalties',
 27 |         data: this.y[1],
 28 |         borderColor: '#b37400',
 29 |         fill: false,
 30 |         yAxisID: 'royalties-axis',
 31 |       },
 32 |       {
 33 |         type: 'bar',
 34 |         label: 'sales',
 35 |         data: this.y[2],
 36 |         backgroundColor: '#ffa600',
 37 |         fill: false,
 38 |         yAxisID: 'trades-axis',
 39 |       },
 40 |     ];
 41 | 
 42 |     const options = {
 43 |       title: {
 44 |         display: true,
 45 |         text: 'Secondary Market',
 46 |         fontSize: 30,
 47 |       },
 48 |       responsive: true,
 49 |       maintainAspectRatio: false,
 50 |       scales: {
 51 |         xAxes: [{
 52 |           offset: true,
 53 |           stacked: true,
 54 |         }],
 55 |         yAxes: [
 56 |           {
 57 |             id: 'secondary-volume-axis',
 58 |             position: 'left',
 59 |             type: 'linear',
 60 |             ticks: { suggestedMin: 0 },
 61 |             scaleLabel: {
 62 |               display: true,
 63 |               labelString: 'xtz (secondary volume)',
 64 |             },
 65 |           }, {
 66 |             id: 'royalties-axis',
 67 |             position: 'right',
 68 |             type: 'linear',
 69 |             stacked: true,
 70 |             scaleLabel: {
 71 |               display: true,
 72 |               labelString: 'xtz (royalties)',
 73 |             },
 74 |             gridLines: {
 75 |               display: false,
 76 |             },
 77 |           }, {
 78 |             id: 'trades-axis',
 79 |             position: 'right',
 80 |             type: 'linear',
 81 |             display: false,
 82 |             ticks: { suggestedMin: 0 },
 83 |             scaleLabel: {
 84 |               display: true,
 85 |               labelString: '#trades',
 86 |             },
 87 |           }],
 88 |       },
 89 |       elements: {
 90 |         point: {
 91 |           radius: 2,
 92 |           hitRadius: 4,
 93 |         },
 94 |       },
 95 |     };
 96 | 
 97 |     return {
 98 |       options,
 99 |       series: {
100 |         labels: this.x,
101 |         datasets,
102 |       },
103 |       height: 440,
104 |     };
105 |   },
106 |   computed: {
107 |     chartStyles() {
108 |       return {
109 |         height: `${this.height}px`,
110 |         position: 'relative',
111 |       };
112 |     },
113 |   },
114 | };
115 | </script>
116 | 


--------------------------------------------------------------------------------
/src/components/charts/Cumulative.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <line-chart :chart-data="series" :options="options" :styles="chartStyles"/>
  3 | </template>
  4 | 
  5 | <script>
  6 | import LineChart from './LineChart';
  7 | // https://www.chartjs.org/docs/2.9.4/
  8 | 
  9 | export default {
 10 |   components: {
 11 |     LineChart,
 12 |   },
 13 |   async mounted() {
 14 |     const labels = [
 15 |       'Objkts',
 16 |       'Sales',
 17 |     ];
 18 |     const colors = [
 19 |       { line: '#003f5c', bar: '#0078b0' },
 20 |       { line: '#b37400', bar: '#ffa600' },
 21 |     ];
 22 |     const json = [
 23 |       'cache/objkt_cumul.json',
 24 |       'cache/trade_cumul.json',
 25 |     ].map((file) => fetch(`https://api.hicdex.com/${file}`).then((res) => res.json()));
 26 |     const data = await Promise.all(json);
 27 |     const dates = data[0].map(({ date }) => date);
 28 | 
 29 |     const datasets = [];
 30 |     data.forEach((obj, i) => {
 31 |       datasets.push({
 32 |         type: 'line',
 33 |         label: `${labels[i]} (sum)`,
 34 |         data: obj.map(({ sum }) => sum),
 35 |         borderColor: colors[i].line,
 36 |         fill: false,
 37 |         yAxisID: 'left-y-axis',
 38 |       });
 39 |     });
 40 |     data.forEach((obj, i) => {
 41 |       datasets.push({
 42 |         type: 'bar',
 43 |         label: labels[i],
 44 |         data: obj.map(({ count }) => count),
 45 |         backgroundColor: colors[i].bar,
 46 |         fill: true,
 47 |         yAxisID: 'right-y-axis',
 48 |       });
 49 |     });
 50 | 
 51 |     this.options = {
 52 |       title: {
 53 |         display: true,
 54 |         text: 'Sales & Objkts over time',
 55 |         fontSize: 30,
 56 |       },
 57 |       responsive: true,
 58 |       maintainAspectRatio: false,
 59 |       scales: {
 60 |         xAxes: [{
 61 |           offset: true,
 62 |         }],
 63 |         yAxes: [
 64 |           {
 65 |             id: 'left-y-axis',
 66 |             position: 'left',
 67 |             type: 'linear',
 68 |             scaleLabel: {
 69 |               display: true,
 70 |               labelString: 'sum (lines)',
 71 |             },
 72 |           }, {
 73 |             id: 'right-y-axis',
 74 |             position: 'right',
 75 |             type: 'linear',
 76 |             scaleLabel: {
 77 |               display: true,
 78 |               labelString: 'daily (bars)',
 79 |             },
 80 |             gridLines: {
 81 |               display: false,
 82 |             },
 83 |           }],
 84 |       },
 85 |       elements: {
 86 |         point: {
 87 |           radius: 2,
 88 |           hitRadius: 4,
 89 |         },
 90 |       },
 91 |     };
 92 | 
 93 |     this.series = {
 94 |       labels: dates,
 95 |       datasets,
 96 |     };
 97 |   },
 98 |   data() {
 99 |     return {
100 |       options: {},
101 |       series: {},
102 |       height: 440,
103 |     };
104 |   },
105 |   computed: {
106 |     chartStyles() {
107 |       return {
108 |         height: `${this.height}px`,
109 |         position: 'relative',
110 |       };
111 |     },
112 |   },
113 | };
114 | </script>
115 | 


--------------------------------------------------------------------------------
/src/views/CreatorGallery.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <b-loading :is-full-page="true" v-model="$apollo.queries.hic_et_nunc_token.loading" :can-cancel="false"></b-loading>
  4 | 
  5 |     <div v-if="error">{{ error }}</div>
  6 |     <b-field>
  7 |       <b-input placeholder="tz… or alice.tez" v-model="addressInput" autofocus></b-input>
  8 |     </b-field>
  9 |     <b-tabs v-model="filterStatus">
 10 |       <template v-for="filter in filters">
 11 |         <b-tab-item
 12 |           :key="filter.value"
 13 |           :value="filter.value"
 14 |           :label="filter.label">
 15 |         </b-tab-item>
 16 |       </template>
 17 |     </b-tabs>
 18 |     <Gallery v-if="filterStatus !== 'query'" :objkts="hic_et_nunc_token.map(x => ({token: x}))" :address="address" />
 19 |     <div v-else>
 20 |       <pre><code>{{ graphqlTemplate(query, {address}) }}</code></pre>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | import gql from 'graphql-tag';
 27 | import Gallery from '../components/Gallery.vue';
 28 | import { getAddress, graphqlTemplate } from '../utils';
 29 | 
 30 | export const QUERY = gql`
 31 |   query creatorGallery($address: String!) {
 32 |     hic_et_nunc_token(where: {creator: {address: {_eq: $address}}, supply: {_gt: 0}}, order_by: {id: desc}) {
 33 |       id
 34 |       artifact_uri
 35 |       display_uri
 36 |       thumbnail_uri
 37 |       timestamp
 38 |       mime
 39 |       title
 40 |       description
 41 |       supply
 42 |       token_tags {
 43 |         tag {
 44 |           tag
 45 |         }
 46 |       }
 47 |       swaps(where: {status: {_eq: "0"}}, order_by: {price: asc}) {
 48 |         amount
 49 |         amount_left
 50 |         creator_id
 51 |         price
 52 |       }
 53 |     }
 54 |   }
 55 | `;
 56 | 
 57 | export default {
 58 |   components: {
 59 |     Gallery,
 60 |   },
 61 |   mounted() {
 62 |     if (this.$route.query.address) {
 63 |       this.address = this.$route.query.address;
 64 |       this.addressInput = this.address;
 65 |     }
 66 |   },
 67 |   data() {
 68 |     return {
 69 |       addressInput: '',
 70 |       address: '',
 71 |       hic_et_nunc_token: [],
 72 |       error: null,
 73 |       filterStatus: '',
 74 |       filters: [
 75 |         { label: 'All', value: 'all' },
 76 |         { label: 'Query', value: 'query' },
 77 |       ],
 78 |       query: QUERY,
 79 |     };
 80 |   },
 81 |   watch: {
 82 |     addressInput(newVal) {
 83 |        getAddress(newVal).then((address) => {
 84 |          if (address.length === 36 && this.address !== address) {
 85 |           this.$router.push({ name: 'creator-gallery', query: { address } });
 86 |          }
 87 |          this.address = address;
 88 |        });
 89 |     },
 90 |   },
 91 |   methods: {
 92 |     graphqlTemplate,
 93 |   },
 94 |   apollo: {
 95 |     hic_et_nunc_token: {
 96 |       query: QUERY,
 97 |       variables() {
 98 |         return {
 99 |           address: this.address,
100 |         };
101 |       },
102 |       error(error) {
103 |         this.error = JSON.stringify(error.message);
104 |       },
105 |       skip() {
106 |         return this.address.length !== 36;
107 |       },
108 |     },
109 |   },
110 | };
111 | </script>
112 | 


--------------------------------------------------------------------------------
/src/components/charts/TradeAvg.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <line-chart :chart-data="series" :options="options" :styles="chartStyles"/>
  3 | </template>
  4 | 
  5 | <script>
  6 | import LineChart from './LineChart';
  7 | // https://www.chartjs.org/docs/2.9.4/
  8 | 
  9 | export default {
 10 |   components: {
 11 |     LineChart,
 12 |   },
 13 |   async mounted() {
 14 |     const labels = [
 15 |       '≤ 0.01 xtz',
 16 |       '> 0.01, < 10 xtz',
 17 |       '≥ 10 xtz',
 18 |     ];
 19 |     const colors = [
 20 |       { line: '#cc9900', bar: '#ffcc33' },
 21 |       { line: '#ff2676', bar: '#ff8ab5' },
 22 |       { line: '#0062ff', bar: '#66a1ff' },
 23 |     ];
 24 |     const json = [
 25 |       'cache/avg_a.json',
 26 |       'cache/avg_b.json',
 27 |       'cache/avg_c.json',
 28 |     ].map((file) => fetch(`https://api.hicdex.com/${file}`).then((res) => res.json()));
 29 |     const data = await Promise.all(json);
 30 |     const dates = [...Array(24)].map((_, i) => `${i} GMT`);
 31 | 
 32 |     const datasets = [];
 33 |     data.forEach((obj, i) => {
 34 |       datasets.push({
 35 |         type: 'line',
 36 |         label: `price ${labels[i]}`,
 37 |         data: obj.map(({ price }) => price),
 38 |         borderColor: colors[i].line,
 39 |         fill: false,
 40 |         yAxisID: 'left-y-axis',
 41 |       });
 42 |     });
 43 |     data.forEach((obj, i) => {
 44 |       datasets.push({
 45 |         type: 'bar',
 46 |         label: `sales priced ${labels[i]}`,
 47 |         data: obj.map(({ trades }) => trades),
 48 |         backgroundColor: colors[i].bar,
 49 |         fill: true,
 50 |         yAxisID: 'right-y-axis',
 51 |       });
 52 |     });
 53 | 
 54 |     this.options = {
 55 |       title: {
 56 |         display: true,
 57 |         text: 'Sales by price range by hour of the day (GMT)',
 58 |         fontSize: 30,
 59 |       },
 60 |       responsive: true,
 61 |       maintainAspectRatio: false,
 62 |       scales: {
 63 |         xAxes: [{
 64 |           offset: true,
 65 |           stacked: true,
 66 |         }],
 67 |         yAxes: [
 68 |           {
 69 |             id: 'left-y-axis',
 70 |             position: 'left',
 71 |             type: 'linear',
 72 |             ticks: { suggestedMin: 0 },
 73 |             scaleLabel: {
 74 |               display: true,
 75 |               labelString: 'average price',
 76 |             },
 77 |           }, {
 78 |             id: 'right-y-axis',
 79 |             position: 'right',
 80 |             type: 'linear',
 81 |             stacked: true,
 82 |             scaleLabel: {
 83 |               display: true,
 84 |               labelString: '#sales',
 85 |             },
 86 |             gridLines: {
 87 |               display: false,
 88 |             },
 89 |           }],
 90 |       },
 91 |       elements: {
 92 |         point: {
 93 |           radius: 2,
 94 |           hitRadius: 4,
 95 |         },
 96 |       },
 97 |     };
 98 | 
 99 |     this.series = {
100 |       labels: dates,
101 |       datasets,
102 |     };
103 |   },
104 |   data() {
105 |     return {
106 |       options: {},
107 |       series: {},
108 |       height: 440,
109 |     };
110 |   },
111 |   computed: {
112 |     chartStyles() {
113 |       return {
114 |         height: `${this.height}px`,
115 |         position: 'relative',
116 |       };
117 |     },
118 |   },
119 | };
120 | </script>
121 | 


--------------------------------------------------------------------------------
/src/views/CollectorGallery.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <b-loading :is-full-page="true" v-model="$apollo.queries.hic_et_nunc_token_holder.loading" :can-cancel="false"></b-loading>
  4 | 
  5 |     <div v-if="error">{{ error }}</div>
  6 |     <b-field>
  7 |       <b-input placeholder="tz… or alice.tez" v-model="addressInput" autofocus></b-input>
  8 |     </b-field>
  9 |     <b-tabs v-model="filterStatus">
 10 |       <template v-for="filter in filters">
 11 |         <b-tab-item
 12 |           :key="filter.value"
 13 |           :value="filter.value"
 14 |           :label="filter.label">
 15 |         </b-tab-item>
 16 |       </template>
 17 |     </b-tabs>
 18 |     <Gallery v-if="filterStatus !== 'query'" :objkts="hic_et_nunc_token_holder" :address="address" />
 19 |     <div v-else>
 20 |       <pre><code>{{ graphqlTemplate(query, {address}) }}</code></pre>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | import gql from 'graphql-tag';
 27 | import Gallery from '../components/Gallery.vue';
 28 | import { getAddress, graphqlTemplate } from '../utils';
 29 | 
 30 | export const QUERY = gql`
 31 |   query collectorGallery($address: String!) {
 32 |     hic_et_nunc_token_holder(where: {holder_id: {_eq: $address}, quantity: {_gt: "0"}, token: {supply: {_gt: "0"}}}, order_by: {id: desc}) {
 33 |       token {
 34 |         id
 35 |         artifact_uri
 36 |         display_uri
 37 |         thumbnail_uri
 38 |         timestamp
 39 |         mime
 40 |         title
 41 |         description
 42 |         supply
 43 |         token_tags {
 44 |           tag {
 45 |             tag
 46 |           }
 47 |         }
 48 |         creator {
 49 |           address
 50 |         }
 51 |         swaps(where: {status: {_eq: "0"}}, order_by: {price: asc}) {
 52 |           amount
 53 |           amount_left
 54 |           creator_id
 55 |           price
 56 |         }
 57 |       }
 58 |     }
 59 |   }
 60 | `;
 61 | 
 62 | export default {
 63 |   components: {
 64 |     Gallery,
 65 |   },
 66 |   mounted() {
 67 |     if (this.$route.query.address) {
 68 |       this.address = this.$route.query.address;
 69 |       this.addressInput = this.address;
 70 |     }
 71 |   },
 72 |   data() {
 73 |     return {
 74 |       addressInput: '',
 75 |       address: '',
 76 |       hic_et_nunc_token_holder: [],
 77 |       error: null,
 78 |       filterStatus: '',
 79 |       filters: [
 80 |         { label: 'All', value: 'all' },
 81 |         { label: 'Query', value: 'query' },
 82 |       ],
 83 |       query: QUERY,
 84 |     };
 85 |   },
 86 |   watch: {
 87 |     addressInput(newVal) {
 88 |        getAddress(newVal).then((address) => {
 89 |          if (address.length === 36 && this.address !== address) {
 90 |           this.$router.push({ name: 'collector-gallery', query: { address } });
 91 |          }
 92 |          this.address = address;
 93 |        });
 94 |     },
 95 |   },
 96 |   methods: {
 97 |     graphqlTemplate,
 98 |   },
 99 |   apollo: {
100 |     hic_et_nunc_token_holder: {
101 |       query: QUERY,
102 |       variables() {
103 |         return {
104 |           address: this.address,
105 |         };
106 |       },
107 |       error(error) {
108 |         this.error = JSON.stringify(error.message);
109 |       },
110 |       skip() {
111 |         return this.address.length !== 36;
112 |       },
113 |     },
114 |   },
115 | };
116 | </script>
117 | 


--------------------------------------------------------------------------------
/src/views/PriceHistory.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <b-loading :is-full-page="true" v-model="$apollo.queries.hic_et_nunc_trade.loading" :can-cancel="false"></b-loading>
  4 | 
  5 |     <div v-if="error">{{ error }}</div>
  6 |     <b-field>
  7 |       <b-input placeholder="1234" v-model="objkt" autofocus></b-input>
  8 |     </b-field>
  9 |     <b-tabs v-model="filterStatus">
 10 |       <template v-for="filter in filters">
 11 |         <b-tab-item
 12 |           :key="filter.value"
 13 |           :value="filter.value"
 14 |           :label="filter.label">
 15 |         </b-tab-item>
 16 |       </template>
 17 |     </b-tabs>
 18 |     <HistoryItem :trades="filteredTrades" :objkt="objkt" />
 19 |     <div v-show="objkt && filterStatus === 'query'">
 20 |       <pre><code>{{ graphqlTemplate(query, {token: objkt}) }}</code></pre>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | import gql from 'graphql-tag';
 27 | import HistoryItem from '../components/HistoryItem.vue';
 28 | import { graphqlTemplate } from '../utils';
 29 | 
 30 | export const QUERY = gql`
 31 |   query PriceHistory($token: bigint = "") {
 32 |     hic_et_nunc_trade(where: {token_id: {_eq: $token}}, order_by: {swap: {price: desc}}) {
 33 |       timestamp
 34 |       seller {
 35 |         address
 36 |       }
 37 |       buyer {
 38 |         address
 39 |       }
 40 |       swap {
 41 |         price
 42 |       }
 43 |       token {
 44 |         creator {
 45 |           address
 46 |         }
 47 |       }
 48 |     }
 49 |   }
 50 | `;
 51 | export default {
 52 |   components: {
 53 |     HistoryItem,
 54 |   },
 55 |   mounted() {
 56 |     if (this.$route.query.objkt) {
 57 |       this.objkt = this.$route.query.objkt;
 58 |     }
 59 |   },
 60 |   data() {
 61 |     return {
 62 |       objkt: undefined,
 63 |       filterStatus: 'all',
 64 |       hic_et_nunc_trade: [],
 65 |       error: null,
 66 |       filters: [
 67 |         { label: 'All', value: 'all' },
 68 |         { label: 'Price > 0.01', value: 'not_free' },
 69 |         { label: 'Query', value: 'query' },
 70 |       ],
 71 |       query: QUERY,
 72 |     };
 73 |   },
 74 |   watch: {
 75 |     objkt(newVal) {
 76 |       if (newVal !== this.$route.query.objkt) {
 77 |         this.$router.push({ name: 'price-history', query: { objkt: newVal } });
 78 |       }
 79 |     },
 80 |   },
 81 |   computed: {
 82 |     filteredTrades() {
 83 |       if (this.filterStatus === 'query') {
 84 |         return [];
 85 |       }
 86 |       if (this.filterStatus === 'not_free') {
 87 |         return this.hic_et_nunc_trade.filter((trade) => trade.swap.price > 0.01);
 88 |       }
 89 |       return this.hic_et_nunc_trade;
 90 |     },
 91 |   },
 92 |   methods: {
 93 |     graphqlTemplate,
 94 |     filterResults(type) {
 95 |       if (type.value === 'query') {
 96 |         this.filterStatus = 'query';
 97 |       } else if (type.value === 'not_free') {
 98 |         this.filterStatus = 'not_free';
 99 |       } else {
100 |         this.filterStatus = 'all';
101 |       }
102 |     },
103 |   },
104 |   apollo: {
105 |     hic_et_nunc_trade: {
106 |       query: QUERY,
107 |       variables() {
108 |         return {
109 |           token: this.objkt,
110 |         };
111 |       },
112 |       error(error) {
113 |         this.error = JSON.stringify(error.message);
114 |       },
115 |       skip() {
116 |         return !this.objkt;
117 |       },
118 |     },
119 |   },
120 | };
121 | </script>
122 | 


--------------------------------------------------------------------------------
/src/components/FlipItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-if="!address">
 4 |       Enter a wallet address above
 5 |     </div>
 6 |     <p v-else-if="!items.length"></p>
 7 | 
 8 |     <b-table
 9 |       v-else
10 |       :data="items">
11 |       <b-table-column field="quantity" label="editions you own" sortable numeric v-slot="props">
12 |         {{ props.row.quantity }}
13 |       </b-table-column>
14 |       <b-table-column field="buy.swap.price" label="price you paid" sortable numeric v-slot="props">
15 |         {{ (props.row.buy.swap.price / 1000000).toFixed(2) }}
16 |       </b-table-column>
17 |       <b-table-column field="highest_trade.swap.price" label="highest 2nd market price" sortable numeric v-slot="props">
18 |         {{ (props.row.highest_trade.swap.price / 1000000).toFixed(2) }}
19 |       </b-table-column>
20 |       <b-table-column field="latest_trade.swap.price" label="most recent 2nd market price" sortable numeric v-slot="props">
21 |         {{ (props.row.latest_trade.swap.price / 1000000).toFixed(2) }}
22 |       </b-table-column>
23 |       <b-table-column field="diff" label="change" numeric v-slot="props">
24 |         {{ props.row.diff }}%
25 |       </b-table-column>
26 |       <b-table-column field="current_swaps.count" label="currently for sale" numeric v-slot="props">
27 |         {{ props.row.current_swaps.count }} editions
28 |         <br>
29 |         <span v-show="props.row.current_swaps.count">
30 |           (median price: {{ (props.row.current_swaps.price_med / 1000000).toFixed(2) }}
31 |         </span>
32 |       </b-table-column>
33 |       <b-table-column label="OBJKT" field="token" sortable v-slot="props">
34 |         <b-tooltip multilined type="is-dark" v-if="(props.row.token.mime.startsWith('image/') && !props.row.token.mime.includes('svg')) || props.row.token.display_uri">
35 |           <a :href="link(props.row.token.id)"> {{ props.row.token.id }} </a>
36 |           <template v-slot:content>
37 |             <b-image
38 |               :src="img(props.row.token.display_uri || props.row.token.artifact_uri)"
39 |               :alt="props.row.token.title"
40 |             ></b-image>
41 |           </template>
42 |         </b-tooltip>
43 |         <span v-else>
44 |           <a :href="link(props.row.token.id)"> {{ props.row.token.id }} </a>
45 |         </span>
46 |       </b-table-column>
47 |       <b-table-column label="title / author" field="title" v-slot="props">
48 |         {{ props.row.token.title }}<br>
49 |         <p class="is-size-7">
50 |           by
51 |           <span v-show="props.row.token.creator.name">{{ props.row.token.creator.name }}</span>
52 |           <span v-show="!props.row.token.creator.name">{{ props.row.token.creator_id }}</span>
53 |         </p>
54 |       </b-table-column>
55 |     </b-table>
56 |   </div>
57 | </template>
58 | 
59 | <script>
60 |   export default {
61 |     props: ['items', 'address'],
62 |     mounted() {},
63 |     methods: {
64 |       link(id) {
65 |         return `https://hicetnunc.art/objkt/${id}`;
66 |       },
67 |       statusText(statusId) {
68 |         const statuses = {
69 |           0: 'For Sale',
70 |           1: 'Sold',
71 |           2: 'Canceled',
72 |         };
73 |         return statuses[statusId];
74 |       },
75 |       img(ipfsUrl) {
76 |         const matched = ipfsUrl.match(/ipfs:\/\/(.*)/);
77 |         if (matched) {
78 |           return `https://cloudflare-ipfs.com/ipfs/${matched[1]}`;
79 |         }
80 |         return '';
81 |       },
82 |     },
83 |   };
84 | 
85 | </script>
86 | 


--------------------------------------------------------------------------------
/src/views/CreatorCollectors.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <b-loading :is-full-page="true" v-model="$apollo.queries.hic_et_nunc_trade.loading" :can-cancel="false"></b-loading>
  4 | 
  5 |     <div v-if="error">{{ error }}</div>
  6 |     <b-field>
  7 |       <b-input placeholder="tz… or alice.tez" v-model="addressInput" autofocus></b-input>
  8 |     </b-field>
  9 |     <b-tabs v-model="filterStatus">
 10 |       <template v-for="filter in filters">
 11 |         <b-tab-item
 12 |           :key="filter.value"
 13 |           :value="filter.value"
 14 |           :label="filter.label">
 15 |         </b-tab-item>
 16 |       </template>
 17 |     </b-tabs>
 18 |     <BuyersList v-if="filterStatus === 'all'" :trades="trades" :address="address" />
 19 |     <div v-show="addressInput && filterStatus === 'query'">
 20 |       <pre><code>{{ graphqlTemplate(query, {address}) }}</code></pre>
 21 |     </div>
 22 |     <div v-if="filterStatus === 'csv'">
 23 |       <pre><code v-html="csv"></code></pre>
 24 |     </div>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script>
 29 | import gql from 'graphql-tag';
 30 | import BuyersList from '../components/BuyersList.vue';
 31 | import { getAddress, graphqlTemplate } from '../utils';
 32 | 
 33 | export const QUERY = gql`
 34 |   query OBJKTBuyers($address: String = "") {
 35 |     hic_et_nunc_trade(where: {seller: {address: {_eq: $address}}, token: {creator: {address: {_eq: $address}}}}, distinct_on: buyer_id) {
 36 |       buyer {
 37 |         address
 38 |         purchases_aggregate(where: {seller: {address: {_eq: $address}}}) {
 39 |           aggregate {
 40 |             count
 41 |           }
 42 |         }
 43 |       }
 44 |     }
 45 |   }
 46 | `;
 47 | export default {
 48 |   components: {
 49 |     BuyersList,
 50 |   },
 51 |   mounted() {
 52 |     if (this.$route.query.address) {
 53 |       this.address = this.$route.query.address;
 54 |       this.addressInput = this.address;
 55 |     }
 56 |   },
 57 |   data() {
 58 |     return {
 59 |       addressInput: '',
 60 |       address: '',
 61 |       hic_et_nunc_trade: [],
 62 |       trades: [],
 63 |       csv: '',
 64 |       error: null,
 65 |       filterStatus: 'all',
 66 |       filters: [
 67 |         { label: 'All', value: 'all' },
 68 |         { label: 'CSV', value: 'csv' },
 69 |         { label: 'Query', value: 'query' },
 70 |       ],
 71 |       query: QUERY,
 72 |     };
 73 |   },
 74 |   watch: {
 75 |     addressInput(newVal) {
 76 |        getAddress(newVal).then((address) => {
 77 |          if (address.length === 36 && this.address !== address) {
 78 |           this.$router.push({ name: 'creator-collectors', query: { address } });
 79 |          }
 80 |          this.address = address;
 81 |        });
 82 |     },
 83 |     hic_et_nunc_trade(newVal) {
 84 |       this.trades = [...newVal].sort((a, b) => b.buyer.purchases_aggregate.aggregate.count - a.buyer.purchases_aggregate.aggregate.count);
 85 |       this.csv = this.trades.map((obj) => [
 86 |           obj.buyer.purchases_aggregate.aggregate.count,
 87 |           obj.buyer.address,
 88 |         ].join(',')).join('\n');
 89 |     },
 90 |   },
 91 |   methods: {
 92 |     graphqlTemplate,
 93 |   },
 94 |   apollo: {
 95 |     hic_et_nunc_trade: {
 96 |       query: QUERY,
 97 |       variables() {
 98 |         return {
 99 |           address: this.address,
100 |         };
101 |       },
102 |       error(error) {
103 |         this.error = JSON.stringify(error.message);
104 |       },
105 |       skip() {
106 |         return this.address.length !== 36;
107 |       },
108 |     },
109 |   },
110 | };
111 | </script>
112 | 


--------------------------------------------------------------------------------
/src/views/Sold.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <b-loading :is-full-page="true" v-model="$apollo.queries.hic_et_nunc_trade.loading" :can-cancel="false"></b-loading>
  4 | 
  5 |     <div v-if="error">{{ error }}</div>
  6 |     <b-field>
  7 |       <b-input placeholder="tz… or alice.tez" v-model="addressInput" autofocus></b-input>
  8 |     </b-field>
  9 |     <b-tabs v-model="filterStatus">
 10 |       <template v-for="filter in filters">
 11 |         <b-tab-item
 12 |           :key="filter.value"
 13 |           :value="filter.value"
 14 |           :label="filter.label">
 15 |         </b-tab-item>
 16 |       </template>
 17 |     </b-tabs>
 18 |     <SoldItem :trades="filteredTrades" :address="address" />
 19 |     <div v-show="addressInput && filterStatus === 'query'">
 20 |       <pre><code>{{ graphqlTemplate(query, {address}) }}</code></pre>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | import gql from 'graphql-tag';
 27 | import SoldItem from '../components/SoldItem.vue';
 28 | import { getAddress, graphqlTemplate } from '../utils';
 29 | 
 30 | export const QUERY = gql`
 31 |   query Sales($address: String!) {
 32 |     hic_et_nunc_trade(where: {_or: [{seller: {address: {_eq: $address}}}, {token: {creator: {address: {_eq: $address}}}}]}, order_by: {timestamp: desc}) {
 33 |       timestamp
 34 |       token {
 35 |         id
 36 |         artifact_uri
 37 |         display_uri
 38 |         mime
 39 |         title
 40 |         creator {
 41 |           address
 42 |         }
 43 |       }
 44 |       buyer {
 45 |         address
 46 |       }
 47 |       amount
 48 |       swap {
 49 |         price
 50 |       }
 51 |     }
 52 |   }
 53 | `;
 54 | export default {
 55 |   components: {
 56 |     SoldItem,
 57 |   },
 58 |   mounted() {
 59 |     if (this.$route.query.address) {
 60 |       this.address = this.$route.query.address;
 61 |       this.addressInput = this.address;
 62 |     }
 63 |   },
 64 |   data() {
 65 |     return {
 66 |       addressInput: '',
 67 |       address: '',
 68 |       filterStatus: 'all',
 69 |       hic_et_nunc_trade: [],
 70 |       error: null,
 71 |       filters: [
 72 |         { label: 'All', value: 'all' },
 73 |         { label: 'Primary Sales', value: 'primary' },
 74 |         { label: 'Secondary Sales', value: 'secondary' },
 75 |         { label: 'Query', value: 'query' },
 76 |       ],
 77 |       query: QUERY,
 78 |     };
 79 |   },
 80 |   watch: {
 81 |     addressInput(newVal) {
 82 |        getAddress(newVal).then((address) => {
 83 |          if (address.length === 36 && this.address !== address) {
 84 |           this.$router.push({ name: 'sold', query: { address } });
 85 |          }
 86 |          this.address = address;
 87 |        });
 88 |     },
 89 |   },
 90 |   computed: {
 91 |     filteredTrades() {
 92 |       if (this.filterStatus === 'query') {
 93 |         return [];
 94 |       }
 95 |       if (this.filterStatus === 'primary') {
 96 |         return this.hic_et_nunc_trade.filter((trade) => trade.token.creator.address === this.address);
 97 |       }
 98 |       if (this.filterStatus === 'secondary') {
 99 |         return this.hic_et_nunc_trade.filter((trade) => trade.token.creator.address !== this.address);
100 |       }
101 |       return this.hic_et_nunc_trade;
102 |     },
103 |   },
104 |   methods: {
105 |     graphqlTemplate,
106 |   },
107 |   apollo: {
108 |     hic_et_nunc_trade: {
109 |       query: QUERY,
110 |       variables() {
111 |         return {
112 |           address: this.address,
113 |         };
114 |       },
115 |       error(error) {
116 |         this.error = JSON.stringify(error.message);
117 |       },
118 |       skip() {
119 |         return this.address.length !== 36;
120 |       },
121 |     },
122 |   },
123 | };
124 | </script>
125 | 


--------------------------------------------------------------------------------
/src/views/SwapsOfMyWork.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <b-loading :is-full-page="true" v-model="$apollo.queries.hic_et_nunc_swap.loading" :can-cancel="false"></b-loading>
  4 | 
  5 |     <div v-if="error">{{ error }}</div>
  6 |     <b-field>
  7 |       <b-input placeholder="tz… or alice.tez" v-model="addressInput" autofocus></b-input>
  8 |     </b-field>
  9 |     <b-tabs v-model="filterStatus">
 10 |       <template v-for="filter in filters">
 11 |         <b-tab-item
 12 |           :key="filter.value"
 13 |           :value="filter.value"
 14 |           :label="filter.label">
 15 |         </b-tab-item>
 16 |       </template>
 17 |     </b-tabs>
 18 |     <SwapItem :swaps="filteredSwaps" :address="address" />
 19 |     <div v-show="addressInput && filterStatus === 'query'">
 20 |       <pre><code>{{ graphqlTemplate(query, {address}) }}</code></pre>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | import gql from 'graphql-tag';
 27 | import SwapItem from '../components/SwapItem.vue';
 28 | import { getAddress, graphqlTemplate } from '../utils';
 29 | 
 30 | export const QUERY = gql`
 31 |   query meOnSecondaryMarket($address: String!) {
 32 |     hic_et_nunc_swap(
 33 |       where: {
 34 |         token: {
 35 |           creator: {address: {_eq: $address}},
 36 |           swaps: {creator: {address: {_neq: $address}}}
 37 |         },
 38 |         status: {_in: [0, 1]}
 39 |       },
 40 |       order_by: {token_id: desc}
 41 |     ) {
 42 |       price
 43 |       status
 44 |       token {
 45 |         title
 46 |         mime
 47 |         description
 48 |         id
 49 |         artifact_uri
 50 |         display_uri
 51 |       }
 52 |     }
 53 |   }
 54 | `;
 55 | export default {
 56 |   components: {
 57 |     SwapItem,
 58 |   },
 59 |   mounted() {
 60 |     if (this.$route.query.address) {
 61 |       this.address = this.$route.query.address;
 62 |       this.addressInput = this.address;
 63 |     }
 64 |   },
 65 |   data() {
 66 |     return {
 67 |       addressInput: '',
 68 |       address: '',
 69 |       filterStatus: 'all',
 70 |       hic_et_nunc_swap: [],
 71 |       error: null,
 72 |       filters: [
 73 |         { label: 'All', value: 'all' },
 74 |         { label: 'For Sale', value: 'active' },
 75 |         { label: 'Sold', value: 'finished' },
 76 |         { label: 'Query', value: 'query' },
 77 |       ],
 78 |       query: QUERY,
 79 |     };
 80 |   },
 81 |   watch: {
 82 |     addressInput(newVal) {
 83 |        getAddress(newVal).then((address) => {
 84 |          if (address.length === 36 && this.address !== address) {
 85 |           this.$router.push({ name: 'my-art-on-secondary-market', query: { address } });
 86 |          }
 87 |          this.address = address;
 88 |        });
 89 |     },
 90 |   },
 91 |   computed: {
 92 |     filteredSwaps() {
 93 |       if (this.filterStatus === 'query') {
 94 |         return [];
 95 |       }
 96 |       if (this.filterStatus === 'active') {
 97 |         return this.hic_et_nunc_swap.filter((swap) => swap.status === 0);
 98 |       }
 99 |       if (this.filterStatus === 'finished') {
100 |         return this.hic_et_nunc_swap.filter((swap) => swap.status === 1);
101 |       }
102 |       if (this.filterStatus === 'canceled') {
103 |         return this.hic_et_nunc_swap.filter((swap) => swap.status === 2);
104 |       }
105 |       return this.hic_et_nunc_swap;
106 |     },
107 |   },
108 |   methods: {
109 |     graphqlTemplate,
110 |   },
111 |   apollo: {
112 |     hic_et_nunc_swap: {
113 |       query: QUERY,
114 |       variables() {
115 |         return {
116 |           address: this.address,
117 |         };
118 |       },
119 |       error(error) {
120 |         this.error = JSON.stringify(error.message);
121 |       },
122 |       skip() {
123 |         return this.address.length !== 36;
124 |       },
125 |     },
126 |   },
127 | };
128 | </script>
129 | 


--------------------------------------------------------------------------------
/src/views/SwapsOfMyCollection.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <b-loading :is-full-page="true" v-model="$apollo.queries.hic_et_nunc_swap.loading" :can-cancel="false"></b-loading>
  4 | 
  5 |     <div v-if="error">{{ error }}</div>
  6 |     <b-field>
  7 |       <b-input placeholder="tz… or alice.tez" v-model="addressInput" autofocus></b-input>
  8 |     </b-field>
  9 |     <b-tabs v-model="filterStatus">
 10 |       <template v-for="filter in filters">
 11 |         <b-tab-item
 12 |           :key="filter.value"
 13 |           :value="filter.value"
 14 |           :label="filter.label">
 15 |         </b-tab-item>
 16 |       </template>
 17 |     </b-tabs>
 18 |     <SwapItem :swaps="filteredSwaps" :address="address" />
 19 |     <div v-show="addressInput && filterStatus === 'query'">
 20 |       <pre><code>{{ graphqlTemplate(query, {address}) }}</code></pre>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | import gql from 'graphql-tag';
 27 | import SwapItem from '../components/SwapItem.vue';
 28 | import { getAddress, graphqlTemplate } from '../utils';
 29 | 
 30 | export const QUERY = gql`
 31 |   query mySecondaryMarketSales($address: String!) {
 32 |     hic_et_nunc_swap(
 33 |       where: {
 34 |         token: {creator: {address: {_neq: $address}}},
 35 |         status: {_in: [0, 1, 2]},
 36 |         creator: {address: {_eq: $address}}
 37 |       },
 38 |       order_by: {token_id: desc}
 39 |     ) {
 40 |       price
 41 |       status
 42 |       token {
 43 |         title
 44 |         mime
 45 |         description
 46 |         id
 47 |         artifact_uri
 48 |         display_uri
 49 |       }
 50 |     }
 51 |   }
 52 | `;
 53 | export default {
 54 |   components: {
 55 |     SwapItem,
 56 |   },
 57 |   mounted() {
 58 |     if (this.$route.query.address) {
 59 |       this.address = this.$route.query.address;
 60 |       this.addressInput = this.address;
 61 |     }
 62 |   },
 63 |   data() {
 64 |     return {
 65 |       addressInput: '',
 66 |       address: '',
 67 |       filterStatus: 'all',
 68 |       hic_et_nunc_swap: [],
 69 |       error: null,
 70 |       filters: [
 71 |         { label: 'All', value: 'all' },
 72 |         { label: 'For Sale', value: 'active' },
 73 |         { label: 'Sold', value: 'finished' },
 74 |         { label: 'Canceled', value: 'canceled' },
 75 |         { label: 'Query', value: 'query' },
 76 |       ],
 77 |       query: QUERY,
 78 |     };
 79 |   },
 80 |   watch: {
 81 |     addressInput(newVal) {
 82 |        getAddress(newVal).then((address) => {
 83 |          if (address.length === 36 && this.address !== address) {
 84 |           this.$router.push({ name: 'my-secondary-market-sales', query: { address } });
 85 |          }
 86 |          this.address = address;
 87 |        });
 88 |     },
 89 |   },
 90 |   computed: {
 91 |     filteredSwaps() {
 92 |       if (this.filterStatus === 'query') {
 93 |         return [];
 94 |       }
 95 |       if (this.filterStatus === 'active') {
 96 |         return this.hic_et_nunc_swap.filter((swap) => swap.status === 0);
 97 |       }
 98 |       if (this.filterStatus === 'finished') {
 99 |         return this.hic_et_nunc_swap.filter((swap) => swap.status === 1);
100 |       }
101 |       if (this.filterStatus === 'canceled') {
102 |         return this.hic_et_nunc_swap.filter((swap) => swap.status === 2);
103 |       }
104 |       return this.hic_et_nunc_swap;
105 |     },
106 |   },
107 |   methods: {
108 |     graphqlTemplate,
109 |   },
110 |   apollo: {
111 |     hic_et_nunc_swap: {
112 |       query: QUERY,
113 |       variables() {
114 |         return {
115 |           address: this.address,
116 |         };
117 |       },
118 |       error(error) {
119 |         this.error = JSON.stringify(error.message);
120 |       },
121 |       skip() {
122 |         return this.address.length !== 36;
123 |       },
124 |     },
125 |   },
126 | };
127 | </script>
128 | 


--------------------------------------------------------------------------------
/src/components/Gallery.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <zi-note v-if="!address">
  4 |       Enter a wallet address above
  5 |     </zi-note>
  6 |     <p v-else-if="!objkts.length"></p>
  7 |     <div
  8 |       v-else
  9 |       :data="objkts"
 10 |       hover>
 11 |       <div v-for="(objkts, index) in group" :key="index" class="tile is-ancestor">
 12 |         <div class="tile is-parent is-4" v-for="objkt in objkts" :key="objkt.id">
 13 |           <article class="tile is-child card">
 14 |             <footer class="card-footer has-text-centered">
 15 |               <p class="card-footer-item">
 16 |                 {{ primarySaleStatus(objkt.swaps) }}
 17 |                 primary
 18 |                 <br>
 19 |                 {{ primaryPrice(objkt.swaps) }}
 20 |               </p>
 21 |               <p class="card-footer-item">
 22 |                 {{ secondarySaleStatus(objkt.swaps) }}
 23 |                 secondary
 24 |                 <br>
 25 |                 {{ secondaryPrice(objkt.swaps) }}
 26 |               </p>
 27 |               <p class="card-footer-item">
 28 |                 {{ objkt.supply }}
 29 |                 edition{{ objkt.supply === 1 ? '' : 's' }}
 30 |                 <br>
 31 |               </p>
 32 |             </footer>
 33 |             <header class="card-header">
 34 |               <p class="card-header-title">
 35 |                 {{ objkt.title }}
 36 |               </p>
 37 |             </header>
 38 |             <div class="card-image">
 39 |               <a :href="link(objkt.id)">
 40 |                 <figure class="image" v-if="objkt.mime.startsWith('image/') || objkt.display_uri">
 41 |                   <img lazy :src="img(objkt)" :alt="objkt.title">
 42 |                 </figure>
 43 |                 <figure class="image" v-else>
 44 |                   <code>no thumbnail</code>
 45 |                 </figure>
 46 |               </a>
 47 |             </div>
 48 |             <div class="card-content">
 49 |               <div class="content">
 50 |                 <blockquote style="overflow: auto; white-space: break-spaces; text-overflow: ellipsis;">{{ objkt.description }}</blockquote>
 51 | 
 52 |                 <code>{{ objkt.mime }}</code>
 53 |                 <code>
 54 |                   <time :datetime="objkt.timestamp">{{ new Date(objkt.timestamp).toLocaleDateString() }} {{ new Date(objkt.timestamp).toLocaleTimeString() }}</time>
 55 |                 </code>
 56 | 
 57 |                 <b-field class="tags">
 58 |                   <b-tag rounded v-for="{tag} in objkt.token_tags" :key="tag.tag">
 59 |                     {{ tag.tag }}
 60 |                   </b-tag>
 61 |                 </b-field>
 62 |               </div>
 63 |             </div>
 64 |           </article>
 65 |         </div>
 66 |       </div>
 67 |     </div>
 68 |   </div>
 69 | </template>
 70 | 
 71 | <style scoped>
 72 | .gallery-card p {
 73 |   overflow: hidden;
 74 |   white-space: nowrap;
 75 |   text-overflow: ellipsis;
 76 | }
 77 | </style>
 78 | <script>
 79 |   export default {
 80 |     props: ['objkts', 'address'],
 81 |     mounted() {},
 82 |     computed: {
 83 |       group() {
 84 |         const groups = [];
 85 |         for (let i = 0; i < this.objkts.length; i += 3) {
 86 |           groups.push(this.objkts.slice(i, i + 3).map(({ token }) => token));
 87 |         }
 88 |         return groups;
 89 |       },
 90 |     },
 91 |     methods: {
 92 |       link(id) {
 93 |         return `https://hicetnunc.art/objkt/${id}`;
 94 |       },
 95 |       img(objkt) {
 96 |         let ipfsUrl = objkt.display_uri || objkt.artifact_uri;
 97 |         if (objkt.mime === 'image/png') {
 98 |           ipfsUrl = objkt.artifact_uri;
 99 |         }
100 | 
101 |         const matched = ipfsUrl.match(/ipfs:\/\/(.*)/);
102 |         if (matched) {
103 |           return `https://cloudflare-ipfs.com/ipfs/${matched[1]}`;
104 |         }
105 |         return '';
106 |       },
107 |       primarySaleStatus(swaps) {
108 |         const primary = swaps.filter(({ creator_id: creator }) => creator === this.address);
109 |         const primaryCount = primary.reduce((sum, { amount_left: left }) => sum + left, 0);
110 |         if (!primaryCount) {
111 |           return '0';
112 |         }
113 |         return primaryCount;
114 |       },
115 |       primaryPrice(swaps) {
116 |         const primary = swaps.filter(({ creator_id: creator }) => creator === this.address);
117 |         if (!primary.length) {
118 |           return '';
119 |         }
120 |         return `${(primary[0].price / 1e6).toFixed(2)} xtz`;
121 |       },
122 |       secondarySaleStatus(swaps) {
123 |         const secondary = swaps.filter(({ creator_id: creator }) => creator !== this.address);
124 |         const secondaryCount = secondary.reduce((sum, { amount_left: left }) => sum + left, 0);
125 |         if (!secondaryCount) {
126 |           return '0';
127 |         }
128 |         return secondaryCount;
129 |       },
130 |       secondaryPrice(swaps) {
131 |         const secondary = swaps.filter(({ creator_id: creator }) => creator !== this.address);
132 |         if (!secondary.length) {
133 |           return '';
134 |         }
135 |         return `${(secondary[0].price / 1e6).toFixed(2)} xtz`;
136 |       },
137 |     },
138 |   };
139 | 
140 | </script>
141 | 


--------------------------------------------------------------------------------
/src/views/Objkt.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <b-loading :is-full-page="true" v-model="$apollo.queries.hic_et_nunc_token_by_pk.loading" :can-cancel="false"></b-loading>
  4 | 
  5 |     <div v-if="error">{{ error }}</div>
  6 |     <b-field>
  7 |       <b-input placeholder="1234" v-model="objkt" autofocus></b-input>
  8 |     </b-field>
  9 | 
 10 |     <b-tabs v-model="filterStatus">
 11 |       <template v-for="filter in filters">
 12 |         <b-tab-item
 13 |           v-if="objkt || filter.label !== 'Query'"
 14 |           :key="filter.value"
 15 |           :value="filter.value"
 16 |           :label="filter.label">
 17 |         </b-tab-item>
 18 |       </template>
 19 |     </b-tabs>
 20 | 
 21 |     <div v-if="!objkt">Enter an OBJKT id above</div>
 22 |     <Objkt v-show="objkt && filterStatus !== 'query'"
 23 |       :objkt="hen"
 24 |       :ask="ask"
 25 |       :english="english"
 26 |       :dutch="dutch" />
 27 | 
 28 |     <div v-show="objkt && filterStatus === 'query'">
 29 |       <pre><code>{{ graphqlTemplate(query, {id: objkt}) }}</code></pre>
 30 |     </div>
 31 |   </div>
 32 | </template>
 33 | 
 34 | <script>
 35 | import gql from 'graphql-tag';
 36 | import Objkt from '../components/Objkt.vue';
 37 | import { graphqlTemplate } from '../utils';
 38 | 
 39 | export const QUERY_HEN = gql`
 40 |   query Objkt($id: bigint!) {
 41 |     hic_et_nunc_token_by_pk(id: $id) {
 42 |       artifact_uri
 43 |       creator {
 44 |         address
 45 |         name
 46 |       }
 47 |       description
 48 |       display_uri
 49 |       id
 50 |       level
 51 |       mime
 52 |       royalties
 53 |       supply
 54 |       thumbnail_uri
 55 |       metadata
 56 |       timestamp
 57 |       title
 58 |       token_tags(order_by: {id: asc}) {
 59 |         tag {
 60 |           tag
 61 |         }
 62 |       }
 63 |       swaps(order_by: {id: asc}) {
 64 |         price
 65 |         timestamp
 66 |         status
 67 |         amount
 68 |         amount_left
 69 |         creator {
 70 |           address
 71 |           name
 72 |         }
 73 |       }
 74 |       trades(order_by: {timestamp: asc}) {
 75 |         amount
 76 |         buyer {
 77 |           address
 78 |           name
 79 |         }
 80 |         seller {
 81 |           address
 82 |           name
 83 |         }
 84 |         swap {
 85 |           price
 86 |         }
 87 |         timestamp
 88 |       }
 89 |       token_holders(where: {quantity: {_gt: "0"}}, order_by: {id: asc}) {
 90 |         quantity
 91 |         holder {
 92 |           address
 93 |           name
 94 |         }
 95 |       }
 96 |       hdao_balance
 97 |       extra
 98 |     }
 99 |   }
100 | `;
101 | export const QUERY_ENG = gql`
102 |   query Objkt($id: bigint!) {
103 |     english: hic_et_nunc_english_auction(where: {objkt_id: {_eq: $id}}, order_by: {id: asc}) {
104 |       id
105 |       price_increment
106 |       reserve
107 |       royalties
108 |       status
109 |       timestamp
110 |       start_time
111 |       end_time
112 |       creator {
113 |         address
114 |         name
115 |       }
116 |       artist {
117 |         address
118 |         name
119 |       }
120 |       bids(order_by: {id: asc}) {
121 |         id
122 |         amount
123 |         timestamp
124 |         bidder {
125 |           address
126 |           name
127 |         }
128 |       }
129 |     }
130 |   }
131 | `;
132 | 
133 | export const QUERY_DUT = gql`
134 |   query Objkt($id: bigint!) {
135 |     dutch: hic_et_nunc_dutch_auction(where: {objkt_id: {_eq: $id}}, order_by: {id: asc}) {
136 |       id
137 |       royalties
138 |       status
139 |       timestamp
140 |       start_time
141 |       end_time
142 |       start_price
143 |       buy_price
144 |       creator {
145 |         address
146 |         name
147 |       }
148 |       artist {
149 |         address
150 |         name
151 |       }
152 |       buyer {
153 |         address
154 |         name
155 |       }
156 |     }
157 |   }
158 | `;
159 | 
160 | export const QUERY_ASK = gql`
161 |   query Objkt($id: bigint!) {
162 |     ask: hic_et_nunc_ask(where: {objkt_id: {_eq: $id}}, order_by: {id: asc}) {
163 |       amount
164 |       amount_left
165 |       price
166 |       royalties
167 |       status
168 |       timestamp
169 |       artist {
170 |         address
171 |         name
172 |       }
173 |       creator {
174 |         address
175 |         name
176 |       }
177 |       fulfilled(order_by: {id: asc}) {
178 |         amount
179 |         timestamp
180 |         buyer {
181 |           address
182 |           name
183 |         }
184 |       }
185 |     }
186 |   }
187 | `;
188 | 
189 | export default {
190 |   components: {
191 |     Objkt,
192 |   },
193 |   mounted() {
194 |     if (this.$route.query.objkt) {
195 |       this.objkt = this.$route.query.objkt;
196 |     }
197 |   },
198 |   data() {
199 |     return {
200 |       objkt: undefined,
201 |       filterStatus: 'all',
202 |       hic_et_nunc_token_by_pk: {},
203 |       dutch: [],
204 |       error: null,
205 |       filters: [
206 |         { label: 'Objkt', value: 'all' },
207 |         { label: 'Query', value: 'query' },
208 |       ],
209 |       query: QUERY_HEN,
210 |     };
211 |   },
212 |   watch: {
213 |     objkt(newVal) {
214 |       if (newVal !== this.$route.query.objkt) {
215 |         this.$router.push({ name: 'objkt', query: { objkt: newVal } });
216 |       }
217 |     },
218 |   },
219 |   computed: {
220 |     hen() {
221 |       if (this.filterStatus === 'query') {
222 |         return [];
223 |       }
224 |       return this.hic_et_nunc_token_by_pk;
225 |     },
226 |   },
227 |   methods: {
228 |     graphqlTemplate,
229 |     filterResults(type) {
230 |       if (type.value === 'query') {
231 |         this.filterStatus = 'query';
232 |       } else {
233 |         this.filterStatus = 'all';
234 |       }
235 |     },
236 |   },
237 |   apollo: {
238 |     hic_et_nunc_token_by_pk: {
239 |       query: QUERY_HEN,
240 |       variables() {
241 |         return {
242 |           id: this.objkt,
243 |         };
244 |       },
245 |       error(error) {
246 |         this.error = JSON.stringify(error.message);
247 |       },
248 |       skip() {
249 |         return !this.objkt;
250 |       },
251 |     },
252 |     english: {
253 |       query: QUERY_ENG,
254 |       variables() {
255 |         return {
256 |           id: this.objkt,
257 |         };
258 |       },
259 |       error(error) {
260 |         this.error = JSON.stringify(error.message);
261 |       },
262 |       skip() {
263 |         return !this.objkt;
264 |       },
265 |     },
266 |     dutch: {
267 |       query: QUERY_DUT,
268 |       variables() {
269 |         return {
270 |           id: this.objkt,
271 |         };
272 |       },
273 |       error(error) {
274 |         this.error = JSON.stringify(error.message);
275 |       },
276 |       skip() {
277 |         return !this.objkt;
278 |       },
279 |     },
280 |     ask: {
281 |       query: QUERY_ASK,
282 |       variables() {
283 |         return {
284 |           id: this.objkt,
285 |         };
286 |       },
287 |       error(error) {
288 |         this.error = JSON.stringify(error.message);
289 |       },
290 |       skip() {
291 |         return !this.objkt;
292 |       },
293 |     },
294 |   },
295 | };
296 | </script>
297 | 


--------------------------------------------------------------------------------
/src/views/Flip.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <b-loading :is-full-page="true" v-model="$apollo.queries.hic_et_nunc_token_holder.loading" :can-cancel="false"></b-loading>
  4 |     <b-loading :is-full-page="true" v-model="loading" :can-cancel="false"></b-loading>
  5 | 
  6 |     <div v-if="error">{{ error }}</div>
  7 |     <b-field>
  8 |       <b-input placeholder="tz… or alice.tez" v-model="addressInput" autofocus></b-input>
  9 |     </b-field>
 10 |     <FlipItem :items="items" :address="address" />
 11 |     <div v-show="addressInput && filterStatus === 'query'">
 12 |       <pre><code>{{ graphqlTemplate(query, {address}) }}</code></pre>
 13 |     </div>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script>
 18 | import gql from 'graphql-tag';
 19 | import FlipItem from '../components/FlipItem.vue';
 20 | import { getAddress, graphqlTemplate } from '../utils';
 21 | 
 22 | const median = (arr) => {
 23 |   const mid = Math.floor(arr.length / 2);
 24 |     const nums = [...arr].sort((a, b) => a - b);
 25 |   return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
 26 | };
 27 | 
 28 | export const QUERY = gql`
 29 |   query FlipOpportunities($address: String!) {
 30 |     hic_et_nunc_token_holder(where: {holder_id: {_eq: $address}, quantity: {_gt: "0"}, token: {supply: {_gt: "0"}}}, order_by: {id: desc}) {
 31 |       quantity
 32 |       token {
 33 |         id
 34 |         title
 35 |         mime
 36 |         artifact_uri
 37 |         display_uri
 38 |         supply
 39 |         creator_id
 40 |         creator {
 41 |           name
 42 |         }
 43 |         swaps(where: {status: {_eq: "0"}}) {
 44 |           amount_left
 45 |           price
 46 |         }
 47 |       }
 48 |     }
 49 |   }
 50 | `;
 51 | 
 52 | const TRADE_QUERY = gql`
 53 |   query Trades($seller_id: String!, $token_id: bigint!) {
 54 |     hic_et_nunc_trade(where: {seller_id: {_neq: $seller_id}, token_id: {_eq: $token_id}}, order_by: {id: desc}) {
 55 |       swap {
 56 |         price
 57 |       }
 58 |       timestamp
 59 |     }
 60 |   }
 61 | `;
 62 | 
 63 | const BUYS_QUERY = gql`
 64 |   query MyBuys($token_ids: [bigint!] = "", $buyer_id: String = "") {
 65 |     hic_et_nunc_trade(where: {token_id: {_in: $token_ids}, buyer_id: {_eq: $buyer_id}}) {
 66 |       swap {
 67 |         price
 68 |       }
 69 |       token_id
 70 |     }
 71 |   }
 72 | `;
 73 | 
 74 | export default {
 75 |   components: {
 76 |     FlipItem,
 77 |   },
 78 |   mounted() {
 79 |     if (this.$route.query.address) {
 80 |       this.address = this.$route.query.address;
 81 |       this.addressInput = this.address;
 82 |     }
 83 |   },
 84 |   data() {
 85 |     return {
 86 |       loading: false,
 87 |       addressInput: '',
 88 |       address: '',
 89 |       filterStatus: 'all',
 90 |       hic_et_nunc_token_holder: [],
 91 |       items: [],
 92 |       error: null,
 93 |       filters: [
 94 |         { label: 'All', value: 'all' },
 95 |         { label: 'For Sale', value: 'active' },
 96 |         { label: 'Sold', value: 'finished' },
 97 |         { label: 'Query', value: 'query' },
 98 |       ],
 99 |       query: QUERY,
100 |     };
101 |   },
102 |   watch: {
103 |     addressInput(newVal) {
104 |        getAddress(newVal).then((address) => {
105 |          if (address.length === 36 && this.address !== address) {
106 |           this.$router.push({ name: 'flip', query: { address } });
107 |          }
108 |          this.address = address;
109 |        });
110 |     },
111 |     async hic_et_nunc_token_holder(data) {
112 |       this.loading = true;
113 |       const trades = await Promise.all(data.map(({ token: { id, creator_id: creatorId } }) => this.trades(id, creatorId)));
114 |       // console.log({ objktIds: data.map(({ token: { id } }) => id) });
115 |       const buys = await this.buys(data.map(({ token: { id } }) => id));
116 |       // console.log(buys);
117 |       for (let i = 0; i < data.length; i += 1) {
118 |         data[i].current_swaps = {};
119 |         const prices = data[i].token.swaps.map(({ price }) => price);
120 |         data[i].current_swaps.count = data[i].token.swaps.reduce((sum, { amount_left: amountLeft }) => sum + amountLeft, 0);
121 |         data[i].current_swaps.price_med = median(prices);
122 | 
123 |         data[i].buy = buys.find(({ token_id: tokenId }) => tokenId === data[i].token.id) || { swap: { price: 0 } };
124 |         data[i].latest_trade = trades[i][0];
125 |         if (trades[i]) {
126 |           data[i].highest_trade = trades[i].reduce((highest, current) => {
127 |             if (current.swap.price > highest.swap.price) return current;
128 |             return highest;
129 |           }, { swap: { price: 0 } });
130 |         }
131 |       }
132 | 
133 |       const items = data.filter(({ latest_trade: latestTrade }) => latestTrade?.swap?.price).map((item) => {
134 |         const boughtFor = item.buy.swap.price;
135 |         const soldFor = item.latest_trade.swap.price;
136 |         if (boughtFor) {
137 |           if (boughtFor <= soldFor) {
138 |             item.diff = (soldFor / boughtFor) * 100;
139 |             if (item.diff > 50) {
140 |               item.diff = Math.round(item.diff);
141 |             } else {
142 |               item.diff = Math.round(item.diff, 2);
143 |             }
144 |           } else {
145 |             item.diff = (1 - (soldFor / boughtFor)) * 100;
146 |             if (item.diff > 50) {
147 |               item.diff = Math.round(item.diff);
148 |             } else {
149 |               item.diff = Math.round(item.diff, 2);
150 |             }
151 |             item.diff = -item.diff;
152 |           }
153 |         } else {
154 |           item.diff = '+ ∞';
155 |         }
156 |         return item;
157 |       });
158 | 
159 |       items.sort((a, b) => {
160 |         if (a.diff === '+ ∞') {
161 |           return 1;
162 |         }
163 |         if (b.diff === '+ ∞') {
164 |           return -1;
165 |         }
166 |         return b.diff - a.diff;
167 |       });
168 |       this.items = items;
169 |       this.loading = false;
170 |     },
171 |   },
172 |   methods: {
173 |     graphqlTemplate,
174 |     async trades(objktId, creatorAddr) {
175 |       try {
176 |         const { data } = await this.$apollo.query({
177 |           query: TRADE_QUERY,
178 |           variables: {
179 |             seller_id: creatorAddr,
180 |             token_id: objktId,
181 |           },
182 |         });
183 |         if (data.hic_et_nunc_trade.length) {
184 |           return data.hic_et_nunc_trade;
185 |         }
186 |       } catch (_err) {
187 |         //
188 |       }
189 |       return false;
190 |     },
191 |     async buys(objktIds) {
192 |       try {
193 |         const { data } = await this.$apollo.query({
194 |           query: BUYS_QUERY,
195 |           variables: {
196 |             buyer_id: this.address,
197 |             token_ids: objktIds,
198 |           },
199 |         });
200 |         return data.hic_et_nunc_trade;
201 |       } catch (_err) {
202 |         //
203 |       }
204 |       return [];
205 |     },
206 |   },
207 |   apollo: {
208 |     hic_et_nunc_token_holder: {
209 |       query: QUERY,
210 |       variables() {
211 |         return {
212 |           address: this.address,
213 |         };
214 |       },
215 |       error(error) {
216 |         this.error = JSON.stringify(error.message);
217 |       },
218 |       skip() {
219 |         return this.address.length !== 36;
220 |       },
221 |     },
222 |   },
223 | };
224 | </script>
225 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 | 
  4 |     <div class="tile is-ancestor">
  5 |       <div class="tile is-parent">
  6 |         <article class="tile is-child notification is-info">
  7 |           <div class="content">
  8 |             <h1 class="title is-2">
  9 |               hicdex
 10 |             </h1>
 11 | 
 12 |             <h2 class="subtitle is-4">a blockchain indexer and GraphQL API for hicetnunc</h2>
 13 | 
 14 |             <div class="content">
 15 |               <p>
 16 |                 <a href="https://github.com/hicdex/hicdex" target="_blank">hicdex</a> is a Tezos indexers focused on indexing <a href="https://hicetnunc.xyz" target="_blank">hicetnunc.xyz</a>'s
 17 |                 smart contracts activity. The indexed data is made available by exposing a public <a href="https://www.graphql.com/tutorials/" target="_blank">GraphQL</a> endpoint.
 18 |               </p>
 19 | 
 20 |               <h2 class="subtitle">getting started</h2>
 21 | 
 22 |               <p>
 23 |                 Write queries on the <a href="https://api.hicdex.com/graphiql" style="font-weight: 700">GraphiQL explorer</a>
 24 |                 or use the endpoint <code style="font-weight: 700">https://api.hicdex.com/v1/graphql</code>
 25 |               </p>
 26 | 
 27 |               <h2 class="subtitle">sample projects</h2>
 28 |               <p>
 29 |                 Below are some sample tools built to showcase hicdex and to help you build your own tools based on H=N's data.
 30 |                 Each tool also prints usable JavaScript code that shows how to achieve the same result as the tool.
 31 |               </p>
 32 |             </div>
 33 |           </div>
 34 |         </article>
 35 |       </div>
 36 | 
 37 |       <div class="tile is-vertical is-6">
 38 |         <tile routeName="objkt" title="OBJKT by ID">
 39 |           <p>
 40 |             Audit a single objkt.
 41 |           </p>
 42 |         </tile>
 43 | 
 44 |         <tile routeName="price-history" title="OBJKT price history">
 45 |           <p>
 46 |             Explore the price history of an OBJKT.
 47 |           </p>
 48 |         </tile>
 49 | 
 50 |         <tile routeName="charts" title="HEN Statistics">
 51 |           <p>
 52 |             Some charts showing what's happening on HEN over time.
 53 |           </p>
 54 |         </tile>
 55 | 
 56 |       </div>
 57 |     </div>
 58 | 
 59 |     <div class="tile is-ancestor">
 60 |       <div class="tile is-vertical is-6">
 61 | 
 62 |         <tile routeName="sold" title="your latest sales">
 63 |           <p>
 64 |             What you sold and when, primary and secondary.
 65 |           </p>
 66 |         </tile>
 67 | 
 68 |         <tile routeName="my-secondary-market-sales" title="your sales on the secondary market">
 69 |           <p>
 70 |             What you have bought and are either trying to sell on the secondary market
 71 |             or have sold on the secondary market.
 72 |           </p>
 73 |         </tile>
 74 | 
 75 |         <tile routeName="creator-gallery" title="your creations">
 76 |           <p>
 77 |             All your artworks in a single call. Some artists might want to display their creations on their website.
 78 |           </p>
 79 |         </tile>
 80 | 
 81 |         <tile routeName="collector-gallery" title="your collection">
 82 |           <p>
 83 |             Why not show your collection on your website, build a nice exhibition as if you were an actuall gallery (hint: you are.)
 84 |           </p>
 85 |         </tile>
 86 | 
 87 |         <!--<tile routeName="flip" title="flip opportunities">
 88 |           <p>
 89 |             What in your collection would be the worth putting on the secondary market?
 90 |           </p>
 91 |         </tile>-->
 92 | 
 93 |       </div>
 94 | 
 95 |       <div class="tile is-vertical is-6">
 96 | 
 97 |         <div class="tile is-parent">
 98 |           <article class="tile is-child is-warning notification">
 99 |             <p class="title">help hicdex</p>
100 |             <div class="content">
101 |               <p>
102 |                 If you value this tool, please support my effort and the time I spend developing it and maintaining it.
103 |               </p>
104 | 
105 |               <div class="field has-addons">
106 |                 <div class="control">
107 |                   <a class="button" @click="donate" :disabled="disableDonation">
108 |                     Donate
109 |                   </a>
110 |                 </div>
111 |                 <div class="control has-icons-right">
112 |                   <input class="input" type="number" placeholder="amount" v-model="donation">
113 |                   <span class="icon is-right">
114 |                     xtz
115 |                   </span>
116 |                 </div>
117 |                 <p class="control text-post-field">
118 |                   to hicdex.tez
119 |                 </p>
120 |               </div>
121 | 
122 |               <p>
123 |                 You can also
124 |                 <a style="text-decoration: underline !important;" href="https://hicetnunc.art/tz/tz1LKpeN8ZSSFNyTWiBNaE4u4sjaq7J1Vz2z" target="_blank">
125 |                 buy some generative art</a>,
126 |                 although my artistic output dropped dramatically with all the time dedicated to hicdex.
127 |               </p>
128 | 
129 |               <p class="notification">
130 |                 <a :href="list[n].url" target="_blank">
131 |                   {{ list[n].url }}
132 |                 </a> (by <a :href="twitterLink(list[n].twitter)">@{{ list[n].twitter }}</a>)
133 |                 <br>
134 |                 <em>
135 |                   {{ list[n].description }}
136 |                 </em>
137 |                 <br>
138 |                 <progress class="progress is-warning is-small" :value="((n/list.length * 100) + 3) % 100" max="100"></progress>
139 |               </p>
140 |             </div>
141 |           </article>
142 |         </div>
143 | 
144 |         <tile routeName="my-art-on-secondary-market" title="your OBJKTS on the secondary market">
145 |           <p>
146 |             Which artworks of yours are either on sale on the secondary market
147 |             or have been sold on the secondary market.
148 |           </p>
149 |         </tile>
150 | 
151 |         <tile routeName="creator-collectors" title="who collected your work">
152 |           <p>
153 |             A list of your biggest fans: everyone who bought one of your piece on the primary market and how many they bought total.
154 |           </p>
155 |         </tile>
156 | 
157 |       </div>
158 | 
159 |     </div>
160 | 
161 |   </div>
162 | </template>
163 | 
164 | <script>
165 | import { TezosToolkit } from '@taquito/taquito';
166 | import { BeaconWallet } from '@taquito/beacon-wallet';
167 | import Tile from '../components/Tile.vue';
168 | 
169 | const Tezos = new TezosToolkit('https://mainnet.smartpy.io/');
170 | const options = { name: 'hicdex' };
171 | const wallet = new BeaconWallet(options);
172 | 
173 | Tezos.setWalletProvider(wallet);
174 | 
175 | const list = [
176 |   {
177 |     url: 'https://hicetnunc.xyz',
178 |     twitter: 'hicetnunc2000',
179 |     description: 'is powered by hicdex',
180 |   },
181 |   {
182 |     url: 'https://oncyber.io',
183 |     twitter: 'oncyber_io',
184 |     description: 'uses hicdex to create 3D art galleries',
185 |   },
186 |   {
187 |     url: 'https://hic.af',
188 |     twitter: 'gwendall',
189 |     description: 'relies on hicdex',
190 |   },
191 |   {
192 |     url: 'https://www.henext.xyz',
193 |     twitter: 'HenextXyz',
194 |     description: 'relies on hicdex',
195 |   },
196 |   {
197 |     url: 'https://www.bunnyknights.com',
198 |     twitter: 'BunnyKnights',
199 |     description: 'has a gallery powered by hicdex',
200 |   },
201 |   {
202 |     url: 'https://glry.xyz/value',
203 |     twitter: 'glryxyz',
204 |     description: 'uses hicdex to compute your collection appraisal',
205 |   },
206 |   {
207 |     url: 'https://hennycomb.glitch.me',
208 |     twitter: 'secondcass',
209 |     description: 'relies on hicdex to show you the newest mints of your favorite artists',
210 |   },
211 |   {
212 |     url: 'https://hen.radio',
213 |     twitter: '__orderandchaos',
214 |     description: 'is powered by hicdex',
215 |   },
216 |   {
217 |     url: 'https://hic.art',
218 |     twitter: '1x1_NFT',
219 |     description: 'relies on hicdex',
220 |   },
221 |   {
222 |     url: 'https://www.tezospirates.xyz/',
223 |     twitter: 'Flygohr',
224 |     description: 'is powered by hicdex',
225 |   },
226 | ];
227 | 
228 | export default {
229 |   components: {
230 |     Tile,
231 |   },
232 |   data() {
233 |     return {
234 |       donation: undefined,
235 |       list,
236 |       n: 0,
237 |       interval: null,
238 |     };
239 |   },
240 |   computed: {
241 |     disableDonation() {
242 |       const parsedDonation = parseFloat(this.donation);
243 |       return Number.isNaN(parsedDonation);
244 |     },
245 |   },
246 |   methods: {
247 |     async donate() {
248 |       if (this.disableDonation) return;
249 | 
250 |       await wallet
251 |         .requestPermissions({ network: { type: 'mainnet' } })
252 |         .then((_) => wallet.getPKH());
253 | 
254 |       Tezos.wallet
255 |         .transfer({ to: 'tz1L4TadX36D5bqmmBQKg1g4CmvjHtk67toL', amount: parseFloat(this.donation) })
256 |         .send()
257 |         .then((op) => {
258 |           console.log(`Hash: ${op.opHash}`);
259 | 
260 |           op.confirmation()
261 |             .then((result) => {
262 |               console.log(result);
263 |               if (result.completed) {
264 |                 console.log('Transaction correctly processed!');
265 |               } else {
266 |                 console.log('An error has occurred');
267 |               }
268 |             })
269 |             .catch((err) => console.log(err));
270 |         });
271 |     },
272 |     twitterLink(nick) {
273 |       return `https://twitter.com/${nick}`;
274 |     },
275 |   },
276 |   mounted() {
277 |     this.interval = setInterval(() => {
278 |       this.n = (this.n + 1) % this.list.length;
279 |     }, 3000);
280 |   },
281 |   beforeDestroy() {
282 |     clearInterval(this.interval);
283 |   },
284 | };
285 | </script>
286 | 


--------------------------------------------------------------------------------
/src/components/Objkt.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <h3 class="subtitle is-4 mt-6">Main Properties</h3>
  4 | 
  5 |     <div class="b-table">
  6 | 
  7 |       <div class="table-wrapper has-mobile-cards">
  8 |         <table class="table">
  9 |           <tbody>
 10 | 
 11 |             <tr>
 12 |               <td class="has-text-right">timestamp</td>
 13 |               <td>
 14 |                 {{ objkt.timestamp }}
 15 |               </td>
 16 |             </tr>
 17 | 
 18 |             <tr>
 19 |               <td class="has-text-right">creator</td>
 20 |               <td>
 21 |                 <subjkt :obj="objkt.creator" />
 22 |               </td>
 23 |             </tr>
 24 | 
 25 |             <tr>
 26 |               <td class="has-text-right">title</td>
 27 |               <td><span>{{ objkt.title }}</span></td>
 28 |             </tr>
 29 | 
 30 |             <tr>
 31 |               <td class="has-text-right">description</td>
 32 |               <td><span>{{ objkt.description }}</span></td>
 33 |             </tr>
 34 | 
 35 |             <tr>
 36 |               <td class="has-text-right">token_tags</td>
 37 |               <td>
 38 |                 <span class="tags">
 39 |                   <span class="tag is-link is-light" v-for="token_tag in objkt.token_tags" :key="token_tag.tag.tag">
 40 |                     {{ token_tag.tag.tag }}
 41 |                   </span>
 42 |                 </span>
 43 |               </td>
 44 |             </tr>
 45 | 
 46 |             <tr>
 47 |               <td class="has-text-right">metadata</td>
 48 |               <td><span>{{ objkt.metadata }}</span></td>
 49 |             </tr>
 50 | 
 51 |             <tr>
 52 |               <td class="has-text-right">supply</td>
 53 |               <td><span>{{ objkt.supply }}</span></td>
 54 |             </tr>
 55 | 
 56 |             <tr>
 57 |               <td class="has-text-right">royalties</td>
 58 |               <td><span>{{ objkt.royalties }}</span></td>
 59 |             </tr>
 60 | 
 61 |             <tr>
 62 |               <td class="has-text-right">mime</td>
 63 |               <td><span>{{ objkt.mime }}</span></td>
 64 |             </tr>
 65 | 
 66 |             <tr>
 67 |               <td class="has-text-right">artifact_uri</td>
 68 |               <td><span>{{ objkt.artifact_uri }}</span></td>
 69 |             </tr>
 70 | 
 71 |             <tr>
 72 |               <td class="has-text-right">thumbnail_uri</td>
 73 |               <td><span>{{ objkt.thumbnail_uri }}</span></td>
 74 |             </tr>
 75 | 
 76 |             <tr>
 77 |               <td class="has-text-right">display_uri</td>
 78 |               <td><span>{{ objkt.display_uri }}</span></td>
 79 |             </tr>
 80 | 
 81 |             <tr>
 82 |               <td class="has-text-right">extra</td>
 83 |               <td><pre><code>{{ JSON.stringify(objkt.extra, null, 2) }}</code></pre></td>
 84 |             </tr>
 85 | 
 86 |             <tr>
 87 |               <td class="has-text-right">hdao_balance</td>
 88 |               <td><span>{{ (objkt.hdao_balance / 1e6).toFixed(5) }}</span></td>
 89 |             </tr>
 90 | 
 91 |           </tbody>
 92 |         </table>
 93 |       </div>
 94 |     </div>
 95 | 
 96 |     <h3 class="subtitle is-4 mt-6">Holders</h3>
 97 |     <div v-if="!objkt.token_holders || !objkt.token_holders.length">No Holders.</div>
 98 |     <b-table v-else :data="objkt.token_holders">
 99 |       <b-table-column field="quantity" label="quantity" numeric sortable v-slot="props">
100 |         {{ props.row.quantity }}
101 |       </b-table-column>
102 |       <b-table-column field="holder.address" label="holder" sortable v-slot="props">
103 |         <subjkt :obj="props.row.holder" />
104 |       </b-table-column>
105 |     </b-table>
106 | 
107 |     <h3 class="subtitle is-3 mt-6"><a :href="henObjkt" target="_blank">hicetnunc</a></h3>
108 | 
109 |     <h3 class="subtitle is-4 mt-3">Swaps</h3>
110 |     <div v-if="!swaps.length">No Swaps.</div>
111 |     <b-table v-else :data="swaps">
112 |       <b-table-column field="timestamp" label="" sortable v-slot="props">
113 |         <timestamp :timestamp="props.row.timestamp" />
114 |       </b-table-column>
115 |       <b-table-column field="creator.address" label="creator" sortable v-slot="props">
116 |         <span v-show="props.row.creator.address === objkt.creator.address">
117 |           <subjkt :obj="props.row.creator" />
118 |         </span>
119 |         <em v-show="props.row.creator.address !== objkt.creator.address">
120 |           <subjkt :obj="props.row.creator" />
121 |         </em>
122 |       </b-table-column>
123 |       <b-table-column field="status" label="status" sortable v-slot="props">
124 |         {{ status[props.row.status] }}
125 |       </b-table-column>
126 |       <b-table-column field="amount" label="amount" numeric sortable v-slot="props">
127 |         {{ props.row.amount }}
128 |       </b-table-column>
129 |       <b-table-column field="sold" label="sold" numeric sortable v-slot="props">
130 |         {{ props.row.sold}}
131 |       </b-table-column>
132 |       <b-table-column field="amount_left" label="left" numeric sortable v-slot="props">
133 |         {{ props.row.amount_left }}
134 |       </b-table-column>
135 |       <b-table-column field="price" label="price" numeric sortable v-slot="props">
136 |         {{ props.row.price / 1e6 }}
137 |       </b-table-column>
138 |     </b-table>
139 | 
140 |     <h3 class="subtitle is-4 mt-6">Trades</h3>
141 |     <div v-if="!objkt.trades || !objkt.trades.length">No Trades.</div>
142 |     <b-table v-else :data="objkt.trades">
143 |       <b-table-column field="timestamp" label="" sortable v-slot="props">
144 |         <timestamp :timestamp="props.row.timestamp" />
145 |       </b-table-column>
146 |       <b-table-column field="seller.address" label="seller" sortable v-slot="props">
147 |         <span v-show="props.row.seller.address === objkt.creator.address">
148 |           <subjkt :obj="props.row.seller" />
149 |         </span>
150 |         <em v-show="props.row.seller.address !== objkt.creator.address">
151 |           <subjkt :obj="props.row.seller" />
152 |         </em>
153 |       </b-table-column>
154 |       <b-table-column field="buyer.address" label="buyer" sortable v-slot="props">
155 |         <subjkt :obj="props.row.buyer" />
156 |       </b-table-column>
157 |       <b-table-column field="amount" label="amount" numeric sortable v-slot="props">
158 |         {{ props.row.amount }}
159 |       </b-table-column>
160 |       <b-table-column field="swap.price" label="price" numeric sortable v-slot="props">
161 |         {{ props.row.swap.price / 1e6 }}
162 |       </b-table-column>
163 |     </b-table>
164 | 
165 |     <h3 class="subtitle is-3 mt-6"><a :href="obidObjkt" target="_blank">objkt.com</a></h3>
166 | 
167 |     <h3 class="subtitle is-4 mt-3">Asks</h3>
168 |     <div v-if="!asks.length">No asks.</div>
169 |     <b-table v-else :data="asks">
170 |       <b-table-column field="timestamp" label="" sortable v-slot="props">
171 |         <timestamp :timestamp="props.row.timestamp" />
172 |       </b-table-column>
173 |       <b-table-column field="creator.address" label="creator" sortable v-slot="props">
174 |         <span v-show="props.row.creator.address === objkt.creator.address">
175 |           <subjkt :obj="props.row.creator" />
176 |         </span>
177 |         <em v-show="props.row.creator.address !== objkt.creator.address">
178 |           <subjkt :obj="props.row.creator" />
179 |         </em>
180 |       </b-table-column>
181 |       <b-table-column field="status" label="status" sortable v-slot="props">
182 |         {{ props.row.status }}
183 |       </b-table-column>
184 |       <b-table-column field="amount" label="amount" numeric sortable v-slot="props">
185 |         {{ props.row.amount }}
186 |       </b-table-column>
187 |       <b-table-column field="sold" label="sold" numeric sortable v-slot="props">
188 |         {{ props.row.sold}}
189 |       </b-table-column>
190 |       <b-table-column field="amount_left" label="left" numeric sortable v-slot="props">
191 |         {{ props.row.amount_left }}
192 |       </b-table-column>
193 |       <b-table-column field="price" label="price" numeric sortable v-slot="props">
194 |         {{ props.row.price / 1e6 }}
195 |       </b-table-column>
196 |     </b-table>
197 | 
198 |     <h3 class="subtitle is-4 mt-6">Fulfilled Asks</h3>
199 |     <div v-if="!fulfilledAsks.length">No Fulfilled Asks</div>
200 |     <b-table v-else :data="fulfilledAsks">
201 |       <b-table-column field="timestamp" label="" sortable v-slot="props">
202 |         <timestamp :timestamp="props.row.timestamp" />
203 |       </b-table-column>
204 |       <b-table-column field="seller.address" label="seller" sortable v-slot="props">
205 |         <span v-show="props.row.seller.address === objkt.creator.address">
206 |           <subjkt :obj="props.row.seller" />
207 |         </span>
208 |         <em v-show="props.row.seller.address !== objkt.creator.address">
209 |           <subjkt :obj="props.row.seller" />
210 |         </em>
211 |       </b-table-column>
212 |       <b-table-column field="buyer.address" label="buyer" sortable v-slot="props">
213 |         <subjkt :obj="props.row.buyer" />
214 |       </b-table-column>
215 |       <b-table-column field="amount" label="amount" numeric sortable v-slot="props">
216 |         {{ props.row.amount }}
217 |       </b-table-column>
218 |       <b-table-column field="price" label="price" numeric sortable v-slot="props">
219 |         {{ props.row.price / 1e6 }}
220 |       </b-table-column>
221 |     </b-table>
222 | 
223 |     <h3 class="subtitle is-4 mt-6">English Auctions</h3>
224 |     <div v-if="!englishs.length">No English Auctions</div>
225 |     <div v-else>
226 |       <b-table
227 |         :data="englishs"
228 |         detailed
229 |         detail-key="id"
230 |         detail-transition="fade"
231 |         :show-detail-icon="true">
232 |         <b-table-column field="start_time" label="start/end time" sortable v-slot="props">
233 |           <timestamp :timestamp="[props.row.start_time, props.row.end_time]" />
234 |         </b-table-column>
235 |         <b-table-column field="creator.address" label="auction creator" sortable v-slot="props">
236 |           <span v-show="props.row.creator.address === props.row.artist.address">
237 |             <subjkt :obj="props.row.creator" />
238 |           </span>
239 |           <em v-show="props.row.creator.address !== props.row.artist.address">
240 |             <subjkt :obj="props.row.creator" />
241 |           </em>
242 |         </b-table-column>
243 |         <b-table-column field="status" label="status" sortable v-slot="props">
244 |           {{ props.row.status }}
245 |         </b-table-column>
246 |         <b-table-column field="reserve" label="reserve" sortable numeric v-slot="props">
247 |           {{ props.row.reserve / 1e6 }}
248 |         </b-table-column>
249 |         <b-table-column field="price_increment" label="price_increment" sortable numeric v-slot="props">
250 |           {{ props.row.price_increment / 1e6 }}
251 |         </b-table-column>
252 |         <b-table-column field="bids_count" label="bids" sortable numeric v-slot="props">
253 |           <a @click="props.toggleDetails(props.row)">
254 |             {{ props.row.bids_count }}
255 |           </a>
256 |         </b-table-column>
257 | 
258 |         <template #detail="props">
259 |           <b-table :data="props.row.bids">
260 |             <b-table-column field="timestamp" label="bid time" sortable v-slot="bid">
261 |               <timestamp :timestamp="bid.row.timestamp" />
262 |             </b-table-column>
263 |             <b-table-column field="bidder" label="bidder" sortable v-slot="bid">
264 |               <subjkt :obj="bid.row.bidder" />
265 |             </b-table-column>
266 |             <b-table-column field="amount" label="price" numeric sortable v-slot="bid">
267 |               {{ bid.row.amount / 1e6 }}
268 |             </b-table-column>
269 |           </b-table>
270 |         </template>
271 | 
272 |       </b-table>
273 |     </div>
274 | 
275 |     <h3 class="subtitle is-4 mt-6">Dutch Auctions</h3>
276 |     <div v-if="!dutch.length">No Dutch Auctions</div>
277 |     <div v-else>
278 |       <b-table :data="dutch">
279 |         <b-table-column field="start_time" label="start/end time" sortable v-slot="props">
280 |           <timestamp :timestamp="[props.row.start_time, props.row.end_time]" />
281 |         </b-table-column>
282 |         <b-table-column field="creator.address" label="auction creator" sortable v-slot="props">
283 |           <span v-show="props.row.creator.address === props.row.artist.address">
284 |             <subjkt :obj="props.row.creator" />
285 |           </span>
286 |           <em v-show="props.row.creator.address !== props.row.artist.address">
287 |             <subjkt :obj="props.row.creator" />
288 |           </em>
289 |         </b-table-column>
290 |         <b-table-column field="buyer.address" label="buyer" sortable v-slot="props">
291 |           <subjkt :obj="props.row.buyer" />
292 |         </b-table-column>
293 |         <b-table-column field="status" label="status" sortable v-slot="props">
294 |           {{ props.row.status }}
295 |         </b-table-column>
296 |         <b-table-column field="start_price" label="start price" sortable numeric v-slot="props">
297 |           {{ props.row.start_price / 1e6 }}
298 |         </b-table-column>
299 |         <b-table-column field="buy_price" label="buy price" sortable numeric v-slot="props">
300 |           {{ props.row.buy_price / 1e6 }}
301 |         </b-table-column>
302 | 
303 |       </b-table>
304 |     </div>
305 | 
306 |   </div>
307 | </template>
308 | 
309 | <script>
310 | import Timestamp from './Timestamp.vue';
311 | import Subjkt from './Subjkt.vue';
312 | 
313 | export default {
314 |   components: {
315 |     Subjkt,
316 |     Timestamp,
317 |   },
318 |   props: ['objkt', 'ask', 'english', 'dutch'],
319 | 
320 |   mounted() { },
321 |   data() {
322 |     return {
323 |       status: {
324 |         0: 'active',
325 |         1: 'finished',
326 |         2: 'canceled',
327 |       },
328 |     };
329 |   },
330 |   methods: {
331 |     link(addr) {
332 |       return `https://hicetnunc.art/tz/${addr}`;
333 |     },
334 |     img(ipfsUrl) {
335 |       const matched = ipfsUrl.match(/ipfs:\/\/(.*)/);
336 |       if (matched) {
337 |         return `https://cloudflare-ipfs.com/ipfs/${matched[1]}`;
338 |       }
339 |       return '';
340 |     },
341 |   },
342 |   computed: {
343 |     obidObjkt() {
344 |       return `https://objkt.com/o/${this.objkt.id}`;
345 |     },
346 |     henObjkt() {
347 |       return `https://hicetnunc.art/objkt/${this.objkt.id}`;
348 |     },
349 |     properties() {
350 |       return Object.entries(this.objkt)
351 |         .filter(([key, val]) => typeof val !== 'object' || key === 'extra' || key === 'token_tags')
352 |         .filter(([key, _val]) => !key.startsWith('__'))
353 |         .map(([key, val]) => ({ key, val }));
354 |     },
355 |     swaps() {
356 |       if (!this.objkt.swaps) return [];
357 |       return this.objkt.swaps.map((swap) => {
358 |         swap.sold = swap.amount - swap.amount_left;
359 |         return swap;
360 |       });
361 |     },
362 |     asks() {
363 |       if (!this.ask) return [];
364 |       return this.ask.map((ask) => {
365 |         ask.sold = ask.amount - ask.amount_left;
366 |         return ask;
367 |       });
368 |     },
369 |     englishs() {
370 |       if (!this.english) return [];
371 |       return this.english.map((english) => {
372 |         english.bids_count = english.bids.length;
373 |         return english;
374 |       });
375 |     },
376 |     fulfilledAsks() {
377 |       if (!this.ask) return [];
378 |       const trades = [];
379 |       this.asks.forEach((ask) => {
380 |         ask.fulfilled.forEach((fullfilled) => {
381 |           fullfilled.seller = { ...ask.creator };
382 |           fullfilled.price = ask.price;
383 |           trades.push(fullfilled);
384 |         });
385 |       });
386 |       return trades;
387 |     },
388 |   },
389 | };
390 | 
391 | </script>
392 | 


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