From da7fe35a602c9f196f2bf28a722885865c4cf029 Mon Sep 17 00:00:00 2001
From: Isaac Visintainer <isaac.visintainer@gmail.com>
Date: Fri, 2 Apr 2021 13:50:51 -0700
Subject: [PATCH] temp commit: beginning balance and transactions page

---
 .../src/js/components/lib/balance.js          | 95 +++++++++++++++++++
 .../src/js/components/lib/header.js           | 51 ++++++++++
 .../src/js/components/lib/transactions.js     | 35 +++++++
 pkg/btc-wallet/src/js/components/root.js      |  8 +-
 4 files changed, 184 insertions(+), 5 deletions(-)
 create mode 100644 pkg/btc-wallet/src/js/components/lib/balance.js
 create mode 100644 pkg/btc-wallet/src/js/components/lib/header.js
 create mode 100644 pkg/btc-wallet/src/js/components/lib/transactions.js

diff --git a/pkg/btc-wallet/src/js/components/lib/balance.js b/pkg/btc-wallet/src/js/components/lib/balance.js
new file mode 100644
index 0000000000..c0b975b178
--- /dev/null
+++ b/pkg/btc-wallet/src/js/components/lib/balance.js
@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import {
+  Box,
+  Icon,
+  Row,
+  Text,
+  Button,
+  Col,
+} from '@tlon/indigo-react';
+
+function currencyFormat(sats, conversion, denomination) {
+  let val;
+  let text;
+  switch (denomination) {
+    case "USD":
+    case "CAD":
+      val = sats * 0.00000001 * conversion[denomination]
+      text = '$' + val.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
+      break;
+    case "BTC":
+      val = sats * 0.00000001;
+      text =  'BTC ' + val;
+      break;
+    default:
+      break;
+  }
+  return text;
+}
+
+export default class Balance extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      conversion: {
+        USD: 50000,
+        CAD: 70000,
+        BTC: 1,
+      },
+      denomination: "CAD",
+    }
+  }
+
+
+  render() {
+    const sats = this.props.state.wallet.balance || 0;
+    const value = currencyFormat(sats, this.state.conversion, this.state.denomination);
+
+    return (
+      <Col
+        height="400px"
+        width='100%'
+        backgroundColor="white"
+        borderRadius="32px"
+        mb={5}
+        p={5}
+      >
+        <Row justifyContent="space-between">
+          <Text color="orange" fontSize={1}>Balance</Text>
+          <Text color="lighterGray" fontSize="14px">bc1qxy...hx0wlh</Text>
+          <Row>
+            <Icon icon="ChevronDouble" color="orange" pt="2px"/>
+            <Text color="orange" fontSize={1}>{this.state.denomination}</Text>
+          </Row>
+        </Row>
+        <Col justifyContent="center" alignItems="center" mt="100px" mb="100px">
+          <Text fontSize="52px" color="orange">{value}</Text>
+          <Text fontSize={1} color="orange">{sats} sats</Text>
+        </Col>
+        <Row flexDirection="row-reverse">
+          <Button children="Send"
+            fontSize={1}
+            fontWeight="bold"
+            color="lighterGray"
+            backgroundColor="veryLightGray"
+            borderColor="none"
+            borderRadius="24px"
+            py="24px"
+            px="24px"
+          />
+          <Button children="Copy Address" mr={3}
+            fontSize={1}
+            fontWeight="bold"
+            color="orange"
+            backgroundColor="midOrange"
+            borderColor="none"
+            borderRadius="24px"
+            py="24px"
+            px="24px"
+          />
+        </Row>
+      </Col>
+    );
+  }
+}
diff --git a/pkg/btc-wallet/src/js/components/lib/header.js b/pkg/btc-wallet/src/js/components/lib/header.js
new file mode 100644
index 0000000000..5a12f0ac1b
--- /dev/null
+++ b/pkg/btc-wallet/src/js/components/lib/header.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import {
+  Box,
+  Icon,
+  Row,
+  Text,
+} from '@tlon/indigo-react';
+
+export default class Header extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+
+  render() {
+    return (
+      <Row
+        height={8}
+        width='100%'
+        justifyContent="space-between"
+        alignItems="center"
+        pt={5}
+        pb={5}
+      >
+        <Row alignItems="center" justifyContent="center">
+          <Box backgroundColor="orange"
+            borderRadius={4} mr="12px"
+            width={5}
+            height={5}
+            p={2}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Icon icon="NullIcon" color="white"/>
+          </Box>
+          <Text fontSize={2} fontWeight="bold" color="orange">
+            Bitcoin
+          </Text>
+        </Row>
+        <Box backgroundColor="white"
+          borderRadius={4}
+          width={5}
+          height={5}
+          p={2}
+        >
+          <Icon icon="Gear" color="gray" />
+        </Box>
+      </Row>
+    );
+  }
+}
diff --git a/pkg/btc-wallet/src/js/components/lib/transactions.js b/pkg/btc-wallet/src/js/components/lib/transactions.js
new file mode 100644
index 0000000000..b27f1e9e23
--- /dev/null
+++ b/pkg/btc-wallet/src/js/components/lib/transactions.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import {
+  Box,
+  Icon,
+  Row,
+  Text,
+  Button,
+  Col,
+} from '@tlon/indigo-react';
+
+
+export default class Transactions extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+
+  render() {
+    return (
+      <Col
+        height="100px"
+        width='100%'
+        backgroundColor="white"
+        borderRadius="32px"
+        flexGrow="1"
+        mb={5}
+        p={5}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Text color="gray" fontSize={2} fontWeight="bold">No Transactions Yet</Text>
+      </Col>
+    );
+  }
+}
diff --git a/pkg/btc-wallet/src/js/components/root.js b/pkg/btc-wallet/src/js/components/root.js
index f7c86885be..c6312f0bc6 100644
--- a/pkg/btc-wallet/src/js/components/root.js
+++ b/pkg/btc-wallet/src/js/components/root.js
@@ -9,9 +9,9 @@ import light from './themes/light';
 import dark from './themes/dark';
 import { Text, Box } from '@tlon/indigo-react';
 import StartupModal from './lib/startupModal.js';
-//import Header from './lib/header.js'
-//import Balance from './lib/balance.js'
-//import Transactions from './lib/transactions.js'
+import Header from './lib/header.js'
+import Balance from './lib/balance.js'
+import Transactions from './lib/transactions.js'
 
 
 export class Root extends Component {
@@ -48,11 +48,9 @@ export class Root extends Component {
            height='100%'
            width='400px'
           >
-        { /*
             <Header />
             <Balance state={this.state}/>
             <Transactions state={this.state}/>
-            */ }
           </Box>
         </Box>
         </ThemeProvider>