1.1.6

Author: javascript-pro

react-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitcoin-hash",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "dependencies": {
     "@apollo/client": "^3.7.14",
     "@emotion/react": "^11.11.0",

react-app/src/BitcoinHash/.gitignore

@@ -0,0 +1 @@
+_DEV

react-app/src/BitcoinHash/AppShell.tsx

@@ -1,23 +1,22 @@
 import * as React from 'react'
 import {
-  useTheme,
   styled,
   CssBaseline,
   Box,
   AppBar,
   Toolbar,
-  Paper,
   Fab,
-  LinearProgress,
 } from "@mui/material"
 import {
-  Icon,
-  Font,
-  Search,
-  Notifyer,
   usePwaSelect,
+  usePwaDispatch,
   selectPWA,
-  BitQuery,
+  scrollTop,
+  startApp,
+  ListTransactions,
+  Icon,
+  Notifyer,
+  // updateTransactions,
 } from "./"
 
 const StyledFab = styled(Fab)({
@@ -30,53 +29,35 @@ const StyledFab = styled(Fab)({
 })
 
 export default function AppShell() {
-  
-
-  const theme = useTheme()
-  const titleColor = theme.palette.primary.main
   const pwa = usePwaSelect(selectPWA)
-  const { 
-    searching, 
-  } = pwa
-
-  return (<>
-      <CssBaseline />
-      <Paper square sx={{ pb: '50px', mt: 2 }}>
+  const dispatch = usePwaDispatch()
 
-        {searching ? <LinearProgress color="secondary"/> : 
-        <Box sx={{height: 4}} /> }
+  React.useEffect(() => {
+    const {started} = pwa
+    if (!started){
+      // @ts-ignore
+      dispatch(startApp())
+    }
+  }, [pwa, dispatch])
 
-        <Box sx={{ p: 2, pb: 0, mb:2 }}>
-          <Font variant="title" color={titleColor}>
-            Bitcoin#
-          </Font>
-        </Box>
-        <Search />
-        <BitQuery />
-      </Paper>
-      
-      <AppBar position="fixed" color="primary" sx={{ top: 'auto', bottom: 0 }}>
-        <Toolbar>
-          <StyledFab 
-            color="primary"
-            onClick={(e: React.MouseEvent) => {
-              e.preventDefault()
-              window.open("https://github.com/listingslab/bitcoin-hash", "_blank")
-            }}>
-            <Icon icon="github" />
-          </StyledFab>
-          <Box sx={{ flexGrow: 1 }} />
-          {/* <IconButton 
-            color="inherit" 
-            onClick={(e: React.MouseEvent) => {
-              e.preventDefault()
-              console.log("Search")
-            }}>
-            <Icon icon="menu" />
-          </IconButton> */}
-        </Toolbar>
-      </AppBar>
-      <Notifyer />
-    </>
+  
+  return (<>
+    <CssBaseline />
+    <ListTransactions />
+    <AppBar position="fixed" color="primary" sx={{ top: 'auto', bottom: 0 }}>
+      <Toolbar>
+        <StyledFab 
+          color="primary"
+          onClick={(e: React.MouseEvent) => {
+            e.preventDefault()
+            dispatch(scrollTop())
+          }}>
+          <Icon icon="up" />
+        </StyledFab>
+        <Box sx={{ flexGrow: 1 }} />
+      </Toolbar>
+    </AppBar>
+    <Notifyer />
+  </>
   )
 }

react-app/src/BitcoinHash/components/AccordionTestData.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Box,
+} from "@mui/material"
+import { 
+  Icon,
+  Font,
+} from ".."
+
+export default function AccordionTestData() {
+  const [expanded, setExpanded] = React.useState<string | false>(false)
+
+  const handleChange =
+    (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+      setExpanded(isExpanded ? panel : false)
+    }
+
+  return (
+    <Box sx={{mt:1}}>
+      <Accordion expanded={expanded === 'pimoroni-ad'} onChange={handleChange('pimoroni-ad')}>
+        <AccordionSummary
+          expandIcon={<Icon icon="expand" />}
+          aria-controls="pimorni-content"
+          id="pimorni-header"
+        >
+          <Box sx={{ flexShrink: 1, mr: 2 }}>
+            {/* <Avatar src={"/svg/logo.svg"} /> */}
+          </Box>
+          <Box sx={{ }}>
+            <Font variant="description">
+              Test data
+            </Font>
+          </Box>
+        </AccordionSummary>
+
+        <AccordionDetails>
+          <pre style={{fontSize:10}}>
+            Test transaction# 2892bc7fb0c2efe34f655f659bffb4d694ffc33f824cb0752da5ecb2d2ff39dc
+          </pre>
+          <pre style={{fontSize:10}}>
+            Test address# bc1qgyrmw4ncp2rgkatz8p8uq86pls3xpk6u9kzmc7
+          </pre>
+        
+        </AccordionDetails>
+      </Accordion>
+    </Box>
+  )
+}

react-app/src/BitcoinHash/components/BitQuery.tsx

@@ -119,6 +119,14 @@ export default function Icon(props: any) {
       iconFragment = <HostIcon color={color} />
       break
 
+      case "transaction":
+        iconFragment = <DocIcon color={color} />
+        break
+
+    case "address":
+      iconFragment = <CTAIcon color={color} />
+      break
+
     case "hash":
       iconFragment = <HashIcon color={color} />
       break

react-app/src/BitcoinHash/components/Icon.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import moment from "moment"
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Box,
+  LinearProgress,
+} from "@mui/material"
+import { 
+  Icon,
+  Font,
+  usePwaSelect,
+  // usePwaDispatch,
+  // updateTransactions,
+  selectPWA,
+} from ".."
+
+export default function ListTransactions() {
+  // const dispatch = usePwaDispatch()
+  const [expanded, setExpanded] = React.useState<string | false>("transaction-acc")
+
+  const handleChange =
+    (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+      setExpanded(isExpanded ? panel : false)
+    }
+
+  const pwa = usePwaSelect(selectPWA)
+  const {transactions, searching, lastUpdate} = pwa
+
+  return (
+    <Box sx={{mt:1, mb: "90px"}}>
+      <Accordion expanded={expanded === "transaction-acc"} onChange={handleChange("transaction-acc")}>
+      {searching ? <LinearProgress color="secondary"/> : <Box sx={{height: 4}} /> }
+        <AccordionSummary
+          expandIcon={<Icon icon="expand" />}
+          aria-controls="transactions-content"
+          id="transactions-header"
+        >
+          <Box sx={{ flexShrink: 1, mr: 2 }}>
+            <Icon icon="transaction" />
+          </Box>
+          <Box sx={{ mt:-1 }}>
+            <Font variant="title">
+                Last 50 Blockchain Transactions
+            </Font>
+            <Font variant="small">
+              Updated {moment(lastUpdate).fromNow()}
+            </Font>
+          </Box>
+        </AccordionSummary>
+        <AccordionDetails>
+          <pre style={{fontSize:10}}>
+            {JSON.stringify(transactions, null, 2)}
+          </pre>
+        </AccordionDetails>
+      </Accordion>
+    </Box>
+  )
+}