general styles and pages and routes and stuff

package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/icons": "^1.0.3",
+    "@chakra-ui/react": "^1.1.4",
+    "@emotion/react": "^11.1.4",
+    "@emotion/styled": "^11.0.0",
     "@onflow/fcl": "^0.0.67-alpha.43",
     "@onflow/types": "^0.0.4",
     "@onflow/util-actor": "^0.0.2",
@@ -12,6 +16,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "bootstrap": "^4.5.3",
+    "framer-motion": "^3.2.1",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",

src/global/config.js

@@ -0,0 +1,13 @@
+import {config} from "@onflow/fcl"
+
+const CONTRACTS = "0xfcceff21d9532b58"
+
+config()
+  .put("env", "testnet")
+  .put("accessNode.api", "https://access-testnet.onflow.org")
+  .put("challenge.handshake", "https://fcl-discovery.vercel.app/testnet/authn")
+  .put("0xFungibleToken", "0x9a0766d93b6608b7")
+  .put("0xNonFungibleToken", "0x631e88ae7f1d7c20")
+  .put("0xKibble", CONTRACTS)
+  .put("0xKittyItemsMarket", CONTRACTS)
+  .put("0xKittyItems", CONTRACTS)

src/global/providers.comp.js

@@ -1,12 +1,15 @@
 import React from "react"
 import {RecoilRoot} from "recoil"
 import {HashRouter as Router} from "react-router-dom"
+import {ChakraProvider} from "@chakra-ui/react"
 
 export function Providers({children}) {
   return (
     <React.StrictMode>
       <RecoilRoot>
-        <Router>{children}</Router>
+        <ChakraProvider>
+          <Router>{children}</Router>
+        </ChakraProvider>
       </RecoilRoot>
     </React.StrictMode>
   )

src/hooks/use-url-address.hook.js

@@ -0,0 +1,7 @@
+import {withPrefix} from "@onflow/fcl"
+import {useParams} from "react-router-dom"
+
+export function useAddress() {
+  const {address} = useParams()
+  return withPrefix(address)
+}

src/index.js

@@ -1,15 +1,16 @@
+import "./global/config"
 import React from "react"
 import ReactDOM from "react-dom"
 import reportWebVitals from "./reportWebVitals"
 import {Switch, Route} from "react-router-dom"
 
 import {Providers} from "./global/providers.comp"
-import {Config} from "./global/config.comp"
 import {Styles} from "./global/styles.comp"
 
 import {Page as DangerousFood} from "./pages/wip/dangerousfood.page"
 import {Page as Qvvg} from "./pages/wip/qvvg.page"
 import {Page as Root} from "./pages/root.page"
+import {Page as Account} from "./pages/account"
 import {Page as NotFound} from "./pages/not-found.page"
 
 import * as fcl from "@onflow/fcl"
@@ -20,9 +21,9 @@ window.t = t
 
 ReactDOM.render(
   <Providers>
-    <Config />
     <Styles />
     <Switch>
+      <Route exact path="/0x:address" component={Account} />
       <Route exact path="/wip/dangerousfood" component={DangerousFood} />
       <Route exact path="/wip/qvvg" component={Qvvg} />
       <Route exact path="/" component={Root} />

src/pages/account/index.js

@@ -0,0 +1,124 @@
+import {Suspense} from "react"
+import {Base} from "../../parts/base.comp"
+import {IDLE} from "../../global/constants"
+import {useAddress} from "../../hooks/use-url-address.hook"
+import {useCurrentUser} from "../../hooks/use-current-user.hook"
+import {useMarketItems} from "../../hooks/use-market-items.hook"
+import {useAccountItems} from "../../hooks/use-account-items.hook"
+import AuthCluster from "../../parts/auth-cluster.comp"
+import InitCluster from "../../parts/init-cluster.comp"
+import BalanceCluster from "../../parts/balance-cluster.comp"
+import MarketItemsCluster from "../../parts/market-items-cluster.comp"
+import AccountItemsCluster from "../../parts/account-items-cluster.comp"
+import {
+  Box,
+  Flex,
+  Center,
+  Heading,
+  Tag,
+  Text,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+  Spinner,
+} from "@chakra-ui/react"
+
+const STORE_ADDRESS = "0xba1132bc08f82fe2"
+
+export function MarketItemsCount({address}) {
+  const items = useMarketItems(address)
+  if (items.status !== IDLE) return <Spinner size="xs" ml="1" />
+  const l = items?.ids?.length ?? 0
+  return l > 0 ? <Tag ml="1">{l}</Tag> : null
+}
+
+export function AccountItemsCount({address}) {
+  const items = useAccountItems(address)
+  if (items.status !== IDLE) return <Spinner size="xs" ml="1" />
+  const l = items?.ids?.length ?? 0
+  return l > 0 ? <Tag ml="1">{l}</Tag> : null
+}
+
+export function StoreItemsCount() {
+  const items = useAccountItems(STORE_ADDRESS)
+  if (items.status !== IDLE) return <Spinner size="xs" ml="1" />
+  const l = items?.ids?.length ?? 0
+  return l > 0 ? <Tag ml="1">{l}</Tag> : null
+}
+
+export function Page() {
+  const address = useAddress()
+  const [cu] = useCurrentUser()
+  if (address == null) return <div>Not Found</div>
+
+  return (
+    <Base>
+      <Box p="4">
+        <AuthCluster />
+        <Flex mb="4">
+          <Center>
+            <Text mr="4" fontSize="3xl" color="purple.500">
+              Account:
+            </Text>
+          </Center>
+          <Heading>{address}</Heading>
+          {address === cu.addr && (
+            <Center>
+              <Tag ml="4" variant="outline" colorScheme="orange">
+                You
+              </Tag>
+            </Center>
+          )}
+        </Flex>
+        <Flex>
+          <Box>
+            <InitCluster address={address} />
+          </Box>
+          <Box ml="4">
+            <BalanceCluster address={address} />
+          </Box>
+        </Flex>
+        <Tabs>
+          <TabList>
+            <Tab>
+              For Sale{" "}
+              <Suspense fallback={null}>
+                <MarketItemsCount address={address} />
+              </Suspense>
+            </Tab>
+            <Tab>
+              Items
+              <Suspense fallback={null}>
+                <AccountItemsCount address={address} />
+              </Suspense>
+            </Tab>
+            {cu.addr === address && (
+              <Tab>
+                Store
+                <Suspense fallback={null}>
+                  <StoreItemsCount address={address} />
+                </Suspense>
+              </Tab>
+            )}
+          </TabList>
+
+          <TabPanels>
+            <TabPanel>
+              <MarketItemsCluster address={address} />
+            </TabPanel>
+            <TabPanel>
+              <AccountItemsCluster address={address} />
+            </TabPanel>
+            {cu.addr === address && (
+              <TabPanel>
+                <MarketItemsCluster address={STORE_ADDRESS} />
+              </TabPanel>
+            )}
+          </TabPanels>
+        </Tabs>
+      </Box>
+    </Base>
+  )
+}

src/pages/root.page.js

@@ -1,5 +1,29 @@
 import {Base} from "../parts/base.comp"
+import {useCurrentUser} from "../hooks/use-current-user.hook"
+import {Redirect} from "react-router-dom"
+import {Box, Button, Flex, Center, Heading, Spacer} from "@chakra-ui/react"
 
 export function Page() {
-  return <Base>Page: Root</Base>
+  const [user, loggedIn, {signUp, logIn, logOut}] = useCurrentUser()
+
+  if (loggedIn) return <Redirect to={"/" + user.addr} />
+
+  return (
+    <Base>
+      <Box p="4">
+        <Flex>
+          <Center mr="4">
+            <Heading size="md">Kitty Items</Heading>
+          </Center>
+          <Spacer />
+          <Button mr="4" colorScheme="blue" onClick={logIn}>
+            Log In
+          </Button>
+          <Button mr="4" colorScheme="blue" onClick={signUp}>
+            Sign Up
+          </Button>
+        </Flex>
+      </Box>
+    </Base>
+  )
 }

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

@@ -1,49 +1,76 @@
 import {Suspense} from "react"
 import {Loading} from "../parts/loading.comp"
 import {useAccountItem} from "../hooks/use-account-item.hook"
-import {Bar, Label, Button} from "../display/bar.comp"
+// import {useMarketItem} from "../hooks/use-market-item.hook"
+import {useCurrentUser} from "../hooks/use-current-user.hook"
 import {IDLE} from "../global/constants"
+import {Tr, Td, Button, Spinner, Flex, Center, Text} from "@chakra-ui/react"
 
 export function AccountItemCluster({address, id}) {
   const item = useAccountItem(address, id)
+  // const list = useMarketItem(address, id)
+  const [cu] = useCurrentUser()
+
+  const BUSY = item.status !== IDLE
+
   if (address == null) return null
   if (id == null) return null
 
   return (
-    <li>
-      <Bar>
-        <Label strong bad={item.forSale}>
-          Id:
-        </Label>
-        <Label good={!item.forSale} bad={item.forSale}>
-          {item.id}
-        </Label>
-        <Label strong bad={item.forSale}>
-          Type:{" "}
-        </Label>
-        <Label good={!item.forSale} bad={item.forSale}>
-          {item.type}
-        </Label>
-        <Button disabled={item.status !== IDLE} onClick={item.refresh}>
-          Refetch
-        </Button>
-        {item.forSale || (
-          <Button
-            disabled={item.status !== IDLE}
-            onClick={() => item.sell("10.0")}
-          >
-            Put on market for 10.0 Kibble
-          </Button>
-        )}
-        {item.status !== IDLE && <Loading label={item.status} />}
-      </Bar>
-    </li>
+    <Tr>
+      <Td maxW="50px">
+        <Flex>
+          <Text as={item.forSale && "del"}>#{item.id}</Text>
+          {BUSY && (
+            <Center ml="4">
+              <Spinner size="xs" />
+            </Center>
+          )}
+        </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>
+          ) : (
+            <Td isNumeric maxW="50px">
+              <Button size="sm" disabled={true} colorScheme="orange">
+                Unlist (TODO)
+              </Button>
+            </Td>
+          )}
+        </>
+      )}
+    </Tr>
   )
 }
 
 export default function WrappedAccountItemCluster(props) {
   return (
-    <Suspense fallback={<Loading label="Fetching Item" />}>
+    <Suspense
+      fallback={
+        <Tr>
+          #{props.id}
+          <Td>
+            <Spinner size="xs" />
+          </Td>
+          <Td>
+            <Spinner size="xs" />
+          </Td>
+          <Td></Td>
+        </Tr>
+      }
+    >
       <AccountItemCluster {...props} />
     </Suspense>
   )