From 237e14399c4ada1b3cc0db8902b642d4675af462 Mon Sep 17 00:00:00 2001
From: finned-palmer <finned-palmer@togten.com>
Date: Sat, 31 Jul 2021 11:17:08 -0500
Subject: [PATCH] Match edouard's designs

---
 .../src/js/components/lib/externalInvoice.js  | 133 +++++++-----------
 .../src/js/components/lib/feePicker.js        |   2 -
 pkg/btc-wallet/src/js/components/lib/send.js  |  67 +++++----
 .../src/js/components/lib/signer.js           |  43 ++++--
 4 files changed, 125 insertions(+), 120 deletions(-)

diff --git a/pkg/btc-wallet/src/js/components/lib/externalInvoice.js b/pkg/btc-wallet/src/js/components/lib/externalInvoice.js
index 023dbc0370..866f00a731 100644
--- a/pkg/btc-wallet/src/js/components/lib/externalInvoice.js
+++ b/pkg/btc-wallet/src/js/components/lib/externalInvoice.js
@@ -23,9 +23,6 @@ const ExternalInvoice = ({ payee, stopSending, satsAmount }) => {
     useSettings();
   const [txHex, setTxHex] = useState('');
   const [ready, setReady] = useState(false);
-  const [copiedPsbt, setCopiedPsbt] = useState(false);
-  const [downloadedButton, setDownloadedButton] = useState(false);
-  const [copiedButton, setCopiedButton] = useState(false);
   const [localError, setLocalError] = useState('');
   const [broadcasting, setBroadcasting] = useState(false);
   const invoiceRef = useRef();
@@ -65,16 +62,9 @@ const ExternalInvoice = ({ payee, stopSending, satsAmount }) => {
 
   const copyPsbt = () => {
     copyToClipboard(psbt);
-    setCopiedPsbt(true);
-    setCopiedButton(true);
-    setTimeout(() => {
-      setCopiedPsbt(false);
-      setCopiedButton(false);
-    }, 2000);
   };
 
   const downloadPsbtFile = () => {
-    setDownloadedButton(true);
     const blob = new Blob([psbt]);
     const downloadURL = URL.createObjectURL(blob);
     const link = document.createElement('a');
@@ -83,9 +73,6 @@ const ExternalInvoice = ({ payee, stopSending, satsAmount }) => {
     document.body.appendChild(link);
     link.click();
     link.parentNode.removeChild(link);
-    setTimeout(() => {
-      setDownloadedButton(false);
-    }, 1000);
   };
 
   let inputColor = 'black';
@@ -179,80 +166,65 @@ const ExternalInvoice = ({ payee, stopSending, satsAmount }) => {
             </Text>
           </Box>
           <Box mt={3}>
-            <Text
-              mono
-              color="lightGray"
-              fontSize="14px"
-              style={{ overflowWrap: 'anywhere', cursor: 'pointer' }}
-              onClick={() => copyPsbt()}
-            >
-              {copiedPsbt ? 'copied' : psbt}
-            </Text>
-          </Box>
-          <Box mt={3} mb={2}>
-            <Text gray fontSize="14px">
-              Paste the signed transaction from your external wallet:
-            </Text>
-          </Box>
-          <Input
-            value={txHex}
-            fontSize="14px"
-            placeholder="..."
-            autoCapitalize="none"
-            autoCorrect="off"
-            color={inputColor}
-            backgroundColor={inputBg}
-            borderColor={inputBorder}
-            style={{ lineHeight: '4' }}
-            onChange={(e) => checkTxHex(e)}
-          />
-          {localError !== '' && (
-            <Row>
-              <Error error={localError} fontSize="14px" mt={2} />
+            <Row flexDirection="row">
+              <Button
+                borderRadius="24px"
+                border="none"
+                width="24px"
+                height="24px"
+                padding="0px"
+                backgroundColor="veryLightGray"
+                onClick={() => downloadPsbtFile()}
+                mr={2}
+              >
+                <Icon icon="Download" width="12px" />
+              </Button>
+              <Button
+                borderRadius="24px"
+                border="none"
+                width="24px"
+                height="24px"
+                padding="0px"
+                backgroundColor="veryLightGray"
+                onClick={() => copyPsbt()}
+              >
+                <Icon icon="Copy" />
+              </Button>
             </Row>
-          )}
+          </Box>
+          <Row
+            justifyContent="flex-end"
+            alignItems="center"
+            flexDirection="row"
+          >
+            <Text gray bold fontSize="16px" mr={2}>
+              Signed Tx
+            </Text>
+            <Input
+              value={txHex}
+              fontSize="14px"
+              placeholder="7f3..."
+              autoCapitalize="none"
+              autoCorrect="off"
+              color={inputColor}
+              width="70%"
+              backgroundColor={inputBg}
+              borderColor={inputBorder}
+              style={{ lineHeight: '4' }}
+              onChange={(e) => checkTxHex(e)}
+            />
+            {localError !== '' && (
+              <Row>
+                <Error error={localError} fontSize="14px" mt={2} />
+              </Row>
+            )}
+          </Row>
           <Row
             flexDirection="row"
             mt={4}
             alignItems="center"
             justifyContent="center"
           >
-            <Button
-              mr={3}
-              disabled={downloadedButton}
-              fontSize={1}
-              fontWeight="bold"
-              color={downloadedButton ? 'green' : 'orange'}
-              backgroundColor={
-                downloadedButton ? 'veryLightGreen' : 'midOrange'
-              }
-              style={{
-                cursor: downloadedButton ? 'default' : 'pointer',
-              }}
-              borderColor="none"
-              borderRadius="24px"
-              height="48px"
-              onClick={() => downloadPsbtFile()}
-            >
-              {downloadedButton ? 'PSBT Downloading' : 'Download PSBT'}
-            </Button>
-            <Button
-              mr={3}
-              disabled={copiedButton}
-              fontSize={1}
-              fontWeight="bold"
-              color={copiedButton ? 'green' : 'orange'}
-              backgroundColor={copiedButton ? 'veryLightGreen' : 'midOrange'}
-              style={{
-                cursor: copiedButton ? 'default' : 'pointer',
-              }}
-              borderColor="none"
-              borderRadius="24px"
-              height="48px"
-              onClick={() => copyPsbt()}
-            >
-              {copiedButton ? 'PSBT Copied!' : 'Copy PSBT'}
-            </Button>
             <Button
               primary
               mr={3}
@@ -260,6 +232,7 @@ const ExternalInvoice = ({ payee, stopSending, satsAmount }) => {
               borderRadius="24px"
               border="none"
               height="48px"
+              width="100%"
               onClick={() => sendBitcoin(txHex)}
               disabled={!ready || localError || broadcasting}
               color={
diff --git a/pkg/btc-wallet/src/js/components/lib/feePicker.js b/pkg/btc-wallet/src/js/components/lib/feePicker.js
index 7fc5153a23..febbd5d10c 100644
--- a/pkg/btc-wallet/src/js/components/lib/feePicker.js
+++ b/pkg/btc-wallet/src/js/components/lib/feePicker.js
@@ -16,8 +16,6 @@ const FeePicker = ({ feeChoices, feeValue, setFeeValue, feeDismiss }) => {
 
   return (
     <Box
-      // ref={modalRef}
-      // onClick={() => feeDismiss()}
       position="absolute"
       p={4}
       border="1px solid green"
diff --git a/pkg/btc-wallet/src/js/components/lib/send.js b/pkg/btc-wallet/src/js/components/lib/send.js
index f1a6439b05..d7dea1efb9 100644
--- a/pkg/btc-wallet/src/js/components/lib/send.js
+++ b/pkg/btc-wallet/src/js/components/lib/send.js
@@ -59,13 +59,13 @@ const Send = ({ stopSending, value, conversion }) => {
     high: [10, 1],
   });
   const [feeValue, setFeeValue] = useState(feeLevels.mid);
-  const [showModal, setShowModal] = useState(false);
+  const [showFeePicker, setShowFeePicker] = useState(false);
   const [note, setNote] = useState('');
   const [choosingSignMethod, setChoosingSignMethod] = useState(false);
   const [signMethod, setSignMethod] = useState(signMethods.bridge);
 
   const feeDismiss = () => {
-    setShowModal(false);
+    setShowFeePicker(false);
   };
 
   const handleSetSignMethod = (signMethod) => {
@@ -367,23 +367,37 @@ const Send = ({ stopSending, value, conversion }) => {
               <Text gray fontSize={1} fontWeight="600" width="40%">
                 Fee
               </Text>
-              <Row alignItems="center">
-                <Text mr={2} color="lightGray" fontSize="14px">
+              <Row
+                alignItems="center"
+                backgroundColor="blue"
+                borderRadius="24px"
+                paddingX="12px"
+                paddingY="8px"
+              >
+                <Text mr={2} color="white" fontSize="14px">
                   {feeChoices[feeValue][1]} sats/vbyte
                 </Text>
-                <Icon
-                  icon="ChevronSouth"
-                  fontSize="14px"
-                  color="lightGray"
-                  onClick={() => {
-                    if (!showModal) setShowModal(true);
-                  }}
-                  cursor="pointer"
-                />
+                <Button
+                  borderRadius="24px"
+                  height="24px"
+                  width="24px"
+                  border="none"
+                  backgroundColor="rgba(33, 157, 255)"
+                >
+                  <Icon
+                    icon="ChevronSouth"
+                    width="12px"
+                    color="white"
+                    onClick={() => {
+                      if (!showFeePicker) setShowFeePicker(true);
+                    }}
+                    cursor="pointer"
+                  />
+                </Button>
               </Row>
             </Row>
             <Col alignItems="center">
-              {!showModal ? null : (
+              {!showFeePicker ? null : (
                 <FeePicker
                   feeChoices={feeChoices}
                   feeValue={feeValue}
@@ -423,14 +437,12 @@ const Send = ({ stopSending, value, conversion }) => {
               />
             </Row>
           </Col>
-          <Row flexDirection="row-reverse" alignItems="center" mt={4}>
-            <Signer
-              signReady={signReady}
-              choosingSignMethod={choosingSignMethod}
-              signMethod={signMethod}
-              setSignMethod={handleSetSignMethod}
-              initPayment={initPayment}
-            />
+          <Row
+            flexDirection="row"
+            alignItems="center"
+            mt={4}
+            justifyContent="flex-end"
+          >
             {!(signing && !error) ? null : (
               <LoadingSpinner
                 mr={2}
@@ -438,12 +450,19 @@ const Send = ({ stopSending, value, conversion }) => {
                 foreground="orange"
               />
             )}
+            <Signer
+              signReady={signReady}
+              choosingSignMethod={choosingSignMethod}
+              signMethod={signMethod}
+              setSignMethod={handleSetSignMethod}
+              initPayment={initPayment}
+            />
             <Button
+              ml={2}
               width="48px"
               fontSize={1}
               fontWeight="bold"
               borderRadius="24px"
-              mr={2}
               height="48px"
               onClick={() => toggleSignMethod(choosingSignMethod)}
               color={signReady ? 'white' : 'lighterGray'}
@@ -455,7 +474,7 @@ const Send = ({ stopSending, value, conversion }) => {
               style={{ cursor: signReady ? 'pointer' : 'default' }}
             >
               <Icon
-                icon={choosingSignMethod ? 'X' : 'Ellipsis'}
+                icon="ChevronSouth"
                 color={signReady ? 'blue' : 'lighterGray'}
               />
             </Button>
diff --git a/pkg/btc-wallet/src/js/components/lib/signer.js b/pkg/btc-wallet/src/js/components/lib/signer.js
index 098e2da106..06a6dea138 100644
--- a/pkg/btc-wallet/src/js/components/lib/signer.js
+++ b/pkg/btc-wallet/src/js/components/lib/signer.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Box, Button } from '@tlon/indigo-react';
+import { Box, Button, Icon, Row } from '@tlon/indigo-react';
 import { signMethods } from './send';
 
 const signMethodLabels = {
   bridge: 'Sign with Bridge',
   masterTicket: 'Sign with Master Ticket',
-  external: 'Sign Externally',
+  external: 'Sign Externally (PSBT)',
 };
 
 const Signer = ({
@@ -18,18 +18,32 @@ const Signer = ({
   return choosingSignMethod ? (
     <Box borderRadius="24px" backgroundColor="rgba(33, 157, 255, 0.2)">
       {Object.keys(signMethods).map((method) => (
-        <Button
-          key={method}
-          border="none"
-          backgroundColor="transparent"
-          fontWeight="bold"
-          cursor="pointer"
-          color={signMethod === signMethods[method] ? 'blue' : 'lightBlue'}
-          height="48px"
-          onClick={() => setSignMethod(signMethods[method])}
-        >
-          {signMethodLabels[method]}
-        </Button>
+        <Row key={method} flexDirection="row" alignItems="center">
+          <Button
+            border="none"
+            backgroundColor="transparent"
+            fontWeight="bold"
+            cursor="pointer"
+            color={signMethod === signMethods[method] ? 'blue' : 'lightBlue'}
+            height="48px"
+            onClick={() => setSignMethod(signMethods[method])}
+          >
+            {signMethodLabels[method]}
+          </Button>
+          {signMethod === signMethods[method] && (
+            <Button
+              borderRadius="24px"
+              width="24px"
+              height="24px"
+              backgroundColor="blue"
+              border="none"
+              padding="0px"
+              mr="12px"
+            >
+              <Icon width="12px" icon="Checkmark" color="white" />
+            </Button>
+          )}
+        </Row>
       ))}
     </Box>
   ) : (
@@ -38,6 +52,7 @@ const Signer = ({
       fontSize={1}
       fontWeight="bold"
       borderRadius="24px"
+      mr={2}
       height="48px"
       onClick={initPayment}
       color={signReady ? 'white' : 'lighterGray'}