change to use api for market item list

.firebase/hosting.YnVpbGQ.cache

@@ -1,26 +1,26 @@
-asset-manifest.json,1611931035085,60aa295e9509b6664920470962f504fa2bc9f5db5fc1ad6506e02cca7b9d9fe2
-index.html,1611931035084,a43d3a2154c670a91010539702b46e8feeacbeb0e072c8af17de817e98655f83
-favicon.ico,1611931003035,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
-robots.txt,1611931003037,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-logo192.png,1611931003036,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
-manifest.json,1611931003036,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
-logo512.png,1611931003036,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
-Items/hat04.svg,1611931003033,fb5cfffbb92580acc1c1d10eff4a1254822c5cdf2d4906e46e5cea00ed3af732
-Items/hat01.svg,1611931003032,0455a6fbdd3af06de8ea856e602c6620017e22ccbed5f5f05df72b32fddc13a4
-Items/hat02.svg,1611931003033,ec6f801224ca242692d65dc8546f8cb2ff5783e724d6a804043e00cfb9a5c66e
-Items/hat03.svg,1611931003033,e7fe8bb3bb5c7c38e76d0c6a3c9ef35c9ee4b0e735041db59c71dc03b8d07b92
-Items/sunglasses02.svg,1611931003034,ef72d0587d728565f7a6400fcffd62e1fb71b9f31f5fa0f0767ab36bf173f830
-Items/sunglasses01.svg,1611931003034,ef1973b05265c0b08c5845d45ecd8e5b276d6ec4fc5875eb65c478939447e132
-static/js/2.6daa6a45.chunk.js.LICENSE.txt,1611931035093,e8e151dbfecc49f9beea358db00c489a24e708675ab12c6a17d8be9ce282fb2b
-static/js/3.b944810f.chunk.js,1611931035093,c318ae13c7df3425b80d9fd90f9ddb2ff0ae7ce33d7f9c377aead4123141a81d
-static/js/3.b944810f.chunk.js.map,1611931035094,d939f2f45f12d146849931afdcdc119e08a909bf73ae4f827837f7479dc55655
-Items/sunglasses04.svg,1611931003035,0e3a32cc8344b981950087af9d6ae551cbfae15bfa5160e09308c00f7df390db
-static/js/runtime-main.6012d67e.js,1611931035085,2ccf2274f9b24993830d1f0667a9f209e75b9e275279460c50f721ace3c238c3
-Items/sunglasses03.svg,1611931003034,76937c1858ded3e3e026118beb683c4b6cc1e78b9cec8c63edd11b98f271d11c
-static/js/main.f392dfbe.chunk.js,1611931035094,0e10ba64d2b7ba394a088fabf7af288fcf72500f9975b816a2c9fcc5cd36c69f
-static/js/runtime-main.6012d67e.js.map,1611931035095,56e647136fb9940ab48471bb3342ba68f52e636b5a0a0741ef172790aa96ce89
-static/css/2.1a02f21c.chunk.css,1611931035095,cfad28b796b78540d1ba24f6bb0a47d98519a0bd4c61aa108564c20d2d33b325
-static/js/main.f392dfbe.chunk.js.map,1611931035095,e74048d8abb1eab73de0a80104030a52b4c80a68a65b36a5cb394ae6718097df
-static/css/2.1a02f21c.chunk.css.map,1611931035095,674124252cf3eaf99f750f7877484a54de1f990c7afaaf6dbe5ac75224ae6147
-static/js/2.6daa6a45.chunk.js,1611931035094,e092547fc4963bf574907a6c8b2866cda74d18364d34657959aeaf638b930e99
-static/js/2.6daa6a45.chunk.js.map,1611931035094,0e3f34facb220cfde15767290be38be66fdfbd3f8f36575c4c706a588a587b6f
+asset-manifest.json,1612141806750,22a7c2ab3e830cc61440e2987ccb795091fb19c96d2346482b0f0a18e6020414
+index.html,1612141806750,ee9eabcdcd7a72e5e3ec8ee9d4e7dd093276752a68b6ab5d4245341c8e5adfe4
+logo192.png,1612141790533,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
+favicon.ico,1612141790532,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
+robots.txt,1612141790535,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+manifest.json,1612141790534,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
+logo512.png,1612141790533,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
+Items/hat01.svg,1612141790525,0455a6fbdd3af06de8ea856e602c6620017e22ccbed5f5f05df72b32fddc13a4
+Items/hat02.svg,1612141790527,ec6f801224ca242692d65dc8546f8cb2ff5783e724d6a804043e00cfb9a5c66e
+Items/hat04.svg,1612141790529,fb5cfffbb92580acc1c1d10eff4a1254822c5cdf2d4906e46e5cea00ed3af732
+Items/hat03.svg,1612141790528,e7fe8bb3bb5c7c38e76d0c6a3c9ef35c9ee4b0e735041db59c71dc03b8d07b92
+Items/sunglasses02.svg,1612141790530,ef72d0587d728565f7a6400fcffd62e1fb71b9f31f5fa0f0767ab36bf173f830
+Items/sunglasses01.svg,1612141790529,ef1973b05265c0b08c5845d45ecd8e5b276d6ec4fc5875eb65c478939447e132
+static/js/2.6daa6a45.chunk.js.LICENSE.txt,1612141806760,e8e151dbfecc49f9beea358db00c489a24e708675ab12c6a17d8be9ce282fb2b
+static/js/3.b944810f.chunk.js,1612141806760,c318ae13c7df3425b80d9fd90f9ddb2ff0ae7ce33d7f9c377aead4123141a81d
+static/js/3.b944810f.chunk.js.map,1612141806760,d939f2f45f12d146849931afdcdc119e08a909bf73ae4f827837f7479dc55655
+Items/sunglasses03.svg,1612141790531,76937c1858ded3e3e026118beb683c4b6cc1e78b9cec8c63edd11b98f271d11c
+Items/sunglasses04.svg,1612141790531,0e3a32cc8344b981950087af9d6ae551cbfae15bfa5160e09308c00f7df390db
+static/js/main.f58c4b7c.chunk.js,1612141806759,7ebeafac634e069a8549384999996a3e5121574c12ca872d36869e67ba8c3984
+static/js/runtime-main.6012d67e.js.map,1612141806760,56e647136fb9940ab48471bb3342ba68f52e636b5a0a0741ef172790aa96ce89
+static/js/runtime-main.6012d67e.js,1612141806760,2ccf2274f9b24993830d1f0667a9f209e75b9e275279460c50f721ace3c238c3
+static/css/2.1a02f21c.chunk.css,1612141806760,cfad28b796b78540d1ba24f6bb0a47d98519a0bd4c61aa108564c20d2d33b325
+static/js/main.f58c4b7c.chunk.js.map,1612141806760,979643b6c27e698d8a1d3b3f383658e482f094c2363fa54012b71fb4245e9f89
+static/css/2.1a02f21c.chunk.css.map,1612141806760,674124252cf3eaf99f750f7877484a54de1f990c7afaaf6dbe5ac75224ae6147
+static/js/2.6daa6a45.chunk.js,1612141806753,e092547fc4963bf574907a6c8b2866cda74d18364d34657959aeaf638b930e99
+static/js/2.6daa6a45.chunk.js.map,1612141806761,0e3f34facb220cfde15767290be38be66fdfbd3f8f36575c4c706a588a587b6f

src/global/constants.js

@@ -30,6 +30,4 @@ export const KIBBLE_NAME = "Kibble"
 export const FLOW_TOKEN_NAME = "FlowToken"
 export const KITTY_ITEMS_NAME = "KittyItems"
 
-// TODO: APIから一覧取得するよう変更
-// export const STORE_ADDRESS = "0xf3fcd2c1a78f5eee"
-export const STORE_ADDRESS = "0xfc40912427c789d2"
+export const STORE_ADDRESS = "dummy"

src/hooks/use-account-items.hook.js

@@ -2,6 +2,7 @@ import {atomFamily, selectorFamily, useRecoilState} from "recoil"
 import {fetchAccountItems} from "../flow/fetch-account-items.script"
 import {mintKittyItem} from "../flow/mint-kitty-item.tx"
 import {IDLE, PROCESSING} from "../global/constants"
+import {fetchMarketItems} from "../flow/fetch-market-items.script"
 
 export const $state = atomFamily({
   key: "account-items::state",

src/hooks/use-market-items.hook.js

@@ -1,36 +1,49 @@
-import {atomFamily, selectorFamily, useRecoilState} from "recoil"
-import {fetchMarketItems} from "../flow/fetch-market-items.script"
-import {IDLE, PROCESSING} from "../global/constants"
+import {atomFamily, selectorFamily, useRecoilState} from 'recoil'
+import {IDLE, PROCESSING} from '../global/constants'
+
+const fetchMarketItems1 = async () => {
+  const res = await fetch(
+    'https://flow-demo-eehahoagfa-uc.a.run.app/V1/market/latest?limit=30&offset=0',
+    {method: 'GET', headers: {'Content-Type': 'application/json'}}
+  )
+  const {latestSaleOffers} = await res.json()
+  return latestSaleOffers
+    .filter(s => !!s.collectionAddress)
+    .map(s => {
+      return {
+        collectionAddress: s.collectionAddress,
+        key: `${s.tokenAddress}.${s.tokenName}.${s.tokenId}`,
+      }
+    })
+}
 
 export const $state = atomFamily({
-  key: "market-items::state",
+  key: 'market-items::state',
   default: selectorFamily({
-    key: "market-items::default",
-    get: address => async () => fetchMarketItems(address),
+    key: 'market-items::default',
+    get: address => fetchMarketItems1,
   }),
 })
 
 export const $status = atomFamily({
-  key: "market-items::status",
+  key: 'market-items::status',
   default: IDLE,
 })
 
-export function useMarketItems(address) {
+export function useMarketItems (address) {
   const [items, setItems] = useRecoilState($state(address))
   const [status, setStatus] = useRecoilState($status(address))
 
-  const asSet = new Set(items)
-
   return {
-    ids: items,
+    items,
     status,
-    async refresh() {
+    async refresh () {
       setStatus(PROCESSING)
-      await fetchMarketItems(address).then(setItems)
+      await fetchMarketItems1(address).then(setItems)
       setStatus(IDLE)
     },
-    has(id) {
-      return asSet.has(id) // TODO:
+    has (key) {
+      return items.some(item => item.key === key)
     },
   }
 }

src/parts/market-item-cluster.comp.js

@@ -6,15 +6,15 @@ import {IDLE} from "../global/constants"
 import {fmtPrice} from "../util/fmt-price"
 import {Tr, Td, Button, Spinner, Flex, Center, Text} from "@chakra-ui/react"
 
-export function MarketItemCluster({address, id}) {
-  const item = useAccountItem(address, id)
-  const list = useMarketItem(address, id)
+export function MarketItemCluster({address, itemKey}) {
+  const item = useAccountItem(address, itemKey)
+  const list = useMarketItem(address, itemKey)
   const [, loggedIn] = useCurrentUser()
 
   const BUSY = item.status !== IDLE || list.status !== IDLE
 
   if (address == null) return null
-  if (id == null) return null
+  if (itemKey == null) return null
 
   return (
     <Tr>
@@ -68,7 +68,7 @@ export default function WrappedMarketItemCluster(props) {
         <Tr>
           <Td maxW="50px">
             <Flex>
-              <Text>#{props.id}</Text>
+              <Text>#{props.itemKey}</Text>
               <Center ml="4">
                 <Spinner size="xs" />
               </Center>

src/parts/market-items-cluster.comp.js

@@ -9,7 +9,7 @@ export function MarketItemsCluster({address}) {
   const [cu] = useCurrentUser()
   if (address == null) return null
 
-  if (items.ids.length <= 0)
+  if (items.items.length <= 0)
     return (
       <Box borderWidth="1px" borderRadius="lg" p="4">
         <Text>No Items Listed For Sale</Text>
@@ -28,8 +28,8 @@ export function MarketItemsCluster({address}) {
           </Tr>
         </Thead>
         <Tbody>
-          {items.ids.map(id => (
-            <Item key={id} id={id} address={address} />
+          {items.items.map(item => (
+            <Item key={item.key} itemKey={item.key} address={item.collectionAddress} />
           ))}
         </Tbody>
       </Table>