Creates components

Author: javascript-pro

react-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitcoin-hash",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "dependencies": {
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",

react-app/src/BitcoinHash/BitcoinHash.tsx

@@ -16,17 +16,15 @@ import {
   Font,
   MuiTheme,
   WrapRedux,
-  LeftColLinks,
+  Addresses,
+  Transactions,
 } from "./"
 console.log(pJSON.name, pJSON.version)
 
 export default function BitcoinHash() {
   const output: any = null
   const title: string = "Bitcoin Hash"
-  const description: string = "Retrieve and display address and transaction information from the BTC blockchain"
-  const body: string|null = null
   const avatar: string = "/svg/logo.svg"
-  const image: string|null = null // "/jpg/opengraph.jpg"
 
   return (<>
             <WrapRedux>
@@ -41,54 +39,32 @@ export default function BitcoinHash() {
                                       e.preventDefault()
                                       window.open(`/`, "_self")
                                   }}>
-                                    <Avatar src={avatar} alt={description}/>
+                                    <Avatar src={avatar} alt={title}/>
                                   </IconButton></Tooltip>}
                           title={<Font variant="description">
                                   {title}
-                                </Font>}
-                          subheader={<Font>
-                                      {description}
-                                    </Font>}          
+                                </Font>}      
                         />
                           <Grid container>
 
-                            <Grid item xs={12} sm={4}>
+                            <Grid item xs={12} sm={6}>
                               <Box sx={{}}>
-                                <LeftColLinks />
+                                <Addresses />
                               </Box>
                             </Grid>
 
-
-                            <Grid item xs={12} sm={8}>
-                              
-                              {output ? <pre>{JSON.stringify(output, null, 2)}</pre> : null}
-
-                              <Grid container>  
-                                {image ? <Grid item xs={12}>
-                                  <CardMedia 
-                                    component={"img"}
-                                    src={image} 
-                                    height={175}
-                                    alt={`${title} ${description}`}
-                                  />
-                                </Grid> : null }
-                                {body ? <>
-                                  <Grid item xs={12}>
-                                    <CardContent>
-                                      <Font>
-                                          {body}
-                                      </Font>
-                                    </CardContent>
-                                  </Grid>
-                                </> : null }
-                              </Grid>
+                            <Grid item xs={12} sm={6}>
+                              <Box sx={{}}>
+                                <Transactions />
+                              </Box>
                             </Grid>
-                            
+
                           </Grid>                        
                         </Box>
                     </Grid>
                   </Grid>
                 </Container>
+                {output ? <pre>{JSON.stringify(output, null, 2)}</pre> : null}
               </MuiTheme>
             </WrapRedux>
           </>)

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

@@ -0,0 +1,26 @@
+import React from "react"
+import {
+  Box,
+  // Card,
+  CardContent,
+} from "@mui/material"
+import {
+  usePwaSelect,
+  selectPWA,
+  Font,
+} from ".."
+
+export default function Address() {
+  const pwa = usePwaSelect(selectPWA)
+  return (<>
+          <Box>
+            <CardContent>
+              <Font variant="description">
+                Single Address
+              </Font>
+            </CardContent>
+          </Box>
+        </>)
+}
+
+

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

@@ -0,0 +1,25 @@
+import React from "react"
+import {
+  Box,
+  // Card,
+  // CardContent,
+  // CardHeader,
+} from "@mui/material"
+import {
+  usePwaSelect,
+  selectPWA,
+  // Font,
+  // Address,
+  Search,
+} from ".."
+
+export default function Addresses() {
+  const pwa = usePwaSelect(selectPWA)
+  return (<>
+          <Box>
+            <Search 
+              type="addresses"
+            />
+          </Box>
+        </>)
+}

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

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import InputBase from '@mui/material/InputBase';
+import {SearchShape} from '../types';
+
+import {
+  Icon,
+} from "../"
+
+const SearchBox = styled('div')(({ theme }) => ({
+  position: 'relative',
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: alpha(theme.palette.primary.main, 0.15),
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.primary.main, 0.25),
+  },
+  marginRight: theme.spacing(2),
+  marginLeft: 0,
+  width: '100%',
+  [theme.breakpoints.up('sm')]: {
+    marginLeft: theme.spacing(3),
+    width: 'auto',
+  },
+}));
+
+const SearchIconWrapper = styled('div')(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+  color: 'inherit',
+  '& .MuiInputBase-input': {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+      width: '20ch',
+    },
+  },
+}));
+
+export default function Search(props: SearchShape) {
+  const {
+    type,
+  } = props
+  
+  return (<>
+            <SearchBox>
+              <SearchIconWrapper>
+                <Icon icon="search" color="primary" />
+              </SearchIconWrapper>
+              <StyledInputBase
+                placeholder={`Search ${type}…`}
+                inputProps={{ 'aria-label': 'search' }}
+              />
+            </SearchBox>
+          </>
+  );
+}

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

@@ -0,0 +1,23 @@
+import React from "react"
+import {
+  Card,
+  CardContent,
+} from "@mui/material"
+import {
+  usePwaSelect,
+  selectPWA,
+  Font,
+} from ".."
+
+export default function Transaction() {
+  const pwa = usePwaSelect(selectPWA)
+  return (<>
+          <Card>
+            <CardContent>
+              <Font variant="description">
+               Single Transaction
+              </Font>
+            </CardContent>
+          </Card>
+        </>)
+}

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

@@ -0,0 +1,20 @@
+import React from "react"
+import {
+  Box,
+} from "@mui/material"
+import {
+  usePwaSelect,
+  selectPWA,
+  Search,
+} from "../"
+
+export default function Transactions() {
+  const pwa = usePwaSelect(selectPWA)
+  return (<>
+            <Box>
+              <Search 
+                type="transactions"
+              />
+            </Box>
+          </>)
+}

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

@@ -5,7 +5,11 @@ import {makeTheme} from "./theme/makeTheme"
 import MuiTheme from "./theme/MuiTheme"
 import Icon from "./components/Icon"
 import {Font} from "./components/Font"
-import LeftColLinks from "./components/LeftColLinks"
+import Addresses from "./components/Addresses"
+import Transactions from "./components/Transactions"
+import Search from "./components/Search"
+import Address from "./components/Address"
+import Transaction from "./components/Transaction"
 import WrapRedux from "./redux/WrapRedux"
 import {theme} from "./redux/theme"
 import {selectPWA, setPwaKey} from "./redux/pwaReducer"
@@ -27,9 +31,13 @@ export {
   usePwaDispatch,
   usePwaSelect,
   makeTheme,
+  Search,
+  Transaction,
+  Address,
+  Transactions,
+  Addresses,
   Icon,
   Font,
-  LeftColLinks,
   selectPWA,
   startApp,
   setLocale,

react-app/src/BitcoinHash/index.tsx

@@ -10,8 +10,7 @@ import {
 
 const initialState: PwaReduxShape = {
   started: false,
-  sitemap: true,
-  locale: "en",
+  currency: "EUR",
   theme,
 }