support listing for FLOW token

src/flow/fetch-market-item.script.js

@@ -90,15 +90,32 @@ export async function fetchMarketItem(address, key) {
       import SampleMarket from 0xSampleMarket
 
       pub struct Item {
+        pub let itemTokenAddress: Address
+        pub let itemTokenName: String
         pub let id: UInt64
         pub let isCompleted: Bool
         pub let price: UFix64
+        pub let paymentTokenAddress: Address
+        pub let paymentTokenName: String
         pub let owner: Address
 
-        init(id: UInt64, isCompleted: Bool, price: UFix64, owner: Address) {
+        init(
+          itemTokenAddress: Address,
+          itemTokenName: String,
+          id: UInt64,
+          isCompleted: Bool,
+          price: UFix64,
+          paymentTokenAddress: Address,
+          paymentTokenName: String,
+          owner: Address
+        ) {
+          self.itemTokenAddress = itemTokenAddress
+          self.itemTokenName = itemTokenName
           self.id = id
           self.isCompleted = isCompleted
           self.price = price
+          self.paymentTokenAddress = paymentTokenAddress
+          self.paymentTokenName = paymentTokenName
           self.owner = owner
         }
       }
@@ -113,7 +130,16 @@ export async function fetchMarketItem(address, key) {
             saleItemTokenName: itemTokenName,
             saleItemID: id
           )
-          return Item(id: id, isCompleted: item.saleCompleted, price: item.salePrice, owner: address)
+          return Item(
+            itemTokenAddress: itemTokenAddress,
+            itemTokenName: itemTokenName,
+            id: id,
+            isCompleted: item.saleCompleted,
+            price: item.salePrice,
+            paymentTokenAddress: item.salePaymentTokenAddress,
+            paymentTokenName: item.salePaymentTokenName,
+            owner: address
+          )
         } else {
           return nil
         }

src/global/config.js

@@ -1,6 +1,5 @@
 import {config} from "@onflow/fcl"
 import {
-  CONTRACTS,
   FLOW_TOKEN_ADDRESS,
   FUNGIBLE_TOKEN_ADDRESS,
   NON_FUNGIBLE_TOKEN_ADDRESS,

src/global/constants.js

@@ -14,18 +14,20 @@ export const IDLE_DELAY = 1000
 // export const CONTRACTS = "0xf8d6e0586b0a20c7"
 // export const FLOW_TOKEN_ADDRESS = "0x0ae53cb6e3f42a79"
 // export const FUNGIBLE_TOKEN_ADDRESS = "0xee82856bf20e2aa6"
+// export const NON_FUNGIBLE_TOKEN_ADDRESS = "0x631e88ae7f1d7c20"
 //
 // Testnet
 export const CONTRACTS = "0xfc40912427c789d2"
 export const FLOW_TOKEN_ADDRESS = "0x7e60df042a9c0868"
 export const FUNGIBLE_TOKEN_ADDRESS = "0x9a0766d93b6608b7"
+export const NON_FUNGIBLE_TOKEN_ADDRESS = "0x631e88ae7f1d7c20"
 //
-export const NON_FUNGIBLE_TOKEN_ADDRESS = CONTRACTS
 export const KIBBLE_ADDRESS = CONTRACTS
 export const KITTY_ITEMS_ADDRESS = CONTRACTS
 export const SAMPLE_MARKET_ADDRESS = CONTRACTS
 
 export const KIBBLE_NAME = "Kibble"
+export const FLOW_TOKEN_NAME = "FlowToken"
 export const KITTY_ITEMS_NAME = "KittyItems"
 
 // TODO: APIから一覧取得するよう変更

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

@@ -43,16 +43,18 @@ export function useAccountItem(address, key) {
     status,
     forSale: marketItems.has(itemId),
     owned: sansPrefix(cu.addr) === sansPrefix(address),
-    async sell(price) {
-      // TODO: FT の種類を選べるようにする
-      await createSaleOffer(
+    itemTokenName: marketItems.itemTokenName,
+    paymentTokenName: marketItems.paymentTokenName,
+    test: JSON.stringify(marketItems),
+    async sell(price, paymentTokenAddress, paymentTokenName) {
+      const txStatus = await createSaleOffer(
         {
           itemTokenAddress,
           itemTokenName,
           itemId,
-          paymentTokenAddress: KIBBLE_ADDRESS,
-          paymentTokenName: KIBBLE_NAME,
-          price: price
+          paymentTokenAddress,
+          paymentTokenName,
+          price
         },
         {
           onStart() {
@@ -67,6 +69,7 @@ export function useAccountItem(address, key) {
           },
         }
       )
+      console.log('txStatus', txStatus);
     },
     async refresh() {
       setStatus(PROCESSING)

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

@@ -3,7 +3,7 @@ import {Loading} from "../parts/loading.comp"
 import {useAccountItem} from "../hooks/use-account-item.hook"
 // import {useMarketItem} from "../hooks/use-market-item.hook"
 import {useCurrentUser} from "../hooks/use-current-user.hook"
-import {IDLE, KITTY_ITEMS_ADDRESS, KITTY_ITEMS_NAME} from "../global/constants"
+import {IDLE, KITTY_ITEMS_ADDRESS, KITTY_ITEMS_NAME, KIBBLE_ADDRESS, KIBBLE_NAME, FLOW_TOKEN_ADDRESS, FLOW_TOKEN_NAME} from "../global/constants"
 import {Tr, Td, Button, Spinner, Flex, Center, Text} from "@chakra-ui/react"
 
 export function AccountItemCluster({address, id}) {
@@ -21,7 +21,8 @@ export function AccountItemCluster({address, id}) {
 
   return (
     <Tr>
-      <Td maxW="50px">
+      <Td>{KITTY_ITEMS_NAME}</Td>
+      <Td>
         <Flex>
           <Text as={item.forSale && "del"}>#{item.id}</Text>
           {BUSY && (
@@ -31,19 +32,29 @@ export function AccountItemCluster({address, id}) {
           )}
         </Flex>
       </Td>
-      <Td>{item.type}</Td>
       {cu.addr === address && (
         <>
           {!item.forSale ? (
-            <Td isNumeric maxW="50px">
-              <Button
-                colorScheme="blue"
-                size="sm"
-                disabled={BUSY}
-                onClick={() => item.sell("10.0")}
-              >
-                List for 10 KIBBLE
-              </Button>
+            <Td isNumeric size="sm">
+              <Flex justify="flex-end">
+                <Button
+                  colorScheme="blue"
+                  size="sm"
+                  disabled={BUSY}
+                  onClick={() => item.sell("10.0", KIBBLE_ADDRESS, KIBBLE_NAME)}
+                >
+                  List for 10 KIBBLE
+                </Button>
+                <Button
+                  ml="5"
+                  colorScheme="blue"
+                  size="sm"
+                  disabled={BUSY}
+                  onClick={() => item.sell("0.001", FLOW_TOKEN_ADDRESS, FLOW_TOKEN_NAME)}
+                >
+                  List for 0.001 FLOW
+                </Button>
+              </Flex>
             </Td>
           ) : (
             <Td isNumeric maxW="50px">

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

@@ -22,8 +22,8 @@ export function AccountItemsCluster({address}) {
       <Table size="sm">
         <Thead>
           <Tr>
+            <Th>Item Token Name</Th>
             <Th>Id</Th>
-            <Th>Type</Th>
             {cu.addr === address && <Th />}
           </Tr>
         </Thead>

src/parts/init-cluster.comp.js

@@ -50,7 +50,7 @@ export function InitCluster({address}) {
               <Td>{fmtBool(init.KittyItems)}</Td>
             </Tr>
             <Tr>
-              <Td>Kitty Items Market</Td>
+              <Td>Sample Market</Td>
               <Td>{fmtBool(init.SampleMarket)}</Td>
             </Tr>
           </Tbody>

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

@@ -3,7 +3,7 @@ import {useMarketItem} from "../hooks/use-market-item.hook"
 import {useAccountItem} from "../hooks/use-account-item.hook"
 import {useCurrentUser} from "../hooks/use-current-user.hook"
 import {IDLE} from "../global/constants"
-import {fmtKibbles} from "../util/fmt-kibbles"
+import {fmtPrice} from "../util/fmt-price"
 import {Tr, Td, Button, Spinner, Flex, Center, Text} from "@chakra-ui/react"
 
 export function MarketItemCluster({address, id}) {
@@ -18,7 +18,8 @@ export function MarketItemCluster({address, id}) {
 
   return (
     <Tr>
-      <Td maxW="50px">
+      <Td>{list.itemTokenName}</Td>
+      <Td>
         <Flex>
           <Text>#{item.id}</Text>
           {BUSY && (
@@ -28,12 +29,11 @@ export function MarketItemCluster({address, id}) {
           )}
         </Flex>
       </Td>
-      <Td>{item.type}</Td>
-      <Td isNumeric>{fmtKibbles(list.price, true)}</Td>
+      <Td isNumeric>{fmtPrice(list.price, list.paymentTokenName === 'Kibble' ? 'KIBBLE' : 'FLOW')}</Td>
       {loggedIn && (
         <>
           {item.owned ? (
-            <Td isNumeric maxW="20px">
+            <Td isNumeric maxW="50px">
               <Button
                 colorScheme="orange"
                 size="sm"

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

@@ -21,8 +21,8 @@ export function MarketItemsCluster({address}) {
       <Table size="sm">
         <Thead>
           <Tr>
+            <Th>Item Token Name</Th>
             <Th>Id</Th>
-            <Th>Type</Th>
             <Th isNumeric>Price</Th>
             {cu.addr === address ? <Th /> : null}
           </Tr>

src/util/fmt-price.js

@@ -0,0 +1,9 @@
+export function fmtPrice(balance, tokenName = '') {
+  if (balance == null) return null
+  return [
+    String(balance).replace(/0+$/, "").replace(/\.$/, ""),
+    tokenName,
+  ]
+    .filter(Boolean)
+    .join(" ")
+}