fix(Open LN channel): sats bug

Lily-Technologies · Apr 19, 2022 · 68fa34e · 68fa34e
1 parent 3f75855
commit 68fa34e
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 48 deletions.
diff --git a/apps/frontend/src/pages/Lightning/Channels/OpenChannel/OpenChannelForm.tsx b/apps/frontend/src/pages/Lightning/Channels/OpenChannel/OpenChannelForm.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useContext } from 'react';
 import styled from 'styled-components';
 
-import { Input, Select, Spinner } from 'src/components';
+import { Input, Select, Spinner, UnitInput } from 'src/components';
 
 import { LilyOnchainAccount } from '@lily/types';
 import { SetStateBoolean } from 'src/types';
@@ -53,14 +53,12 @@ const OpenChannelForm = ({
       </InputWrapper>
 
       <InputWrapper data-cy='channel-amount'>
-        <Input
+        <UnitInput
           label='Channel amount'
-          type='number'
           inputMode='decimal'
           value={channelAmount}
           onChange={setChannelAmount}
           error={error}
-          inputStaticText='sats'
         />
       </InputWrapper>
 

diff --git a/apps/frontend/src/pages/Lightning/Channels/OpenChannel/OpenChannelSuccess.tsx b/apps/frontend/src/pages/Lightning/Channels/OpenChannel/OpenChannelSuccess.tsx
@@ -15,51 +15,32 @@ interface Props {
 }
 
 const OpenChannelSuccess = ({ currentAccount }: Props) => (
-  <Wrapper>
-    <IconWrapper style={{ color: green500 }}>
+  <div className='flex flex-col items-center bg-white dark:bg-gray-800 pt-12 pb-4'>
+    <div className='text-green-500'>
       <StyledIcon as={CheckCircle} size={100} />
-    </IconWrapper>
-    <SuccessText>New channel opened!</SuccessText>
-    <SuccessSubtext>You just opened a new lightning network channel.</SuccessSubtext>
-    <SuccessSubtext>
+    </div>
+    <div className='mt-3 text-center sm:mt-5'>
+      <h3 className='text-lg leading-6 font-medium text-gray-900 dark:text-gray-100'>
+        New channel opened!
+      </h3>
+      <div className='mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400'>
+        <p>You just opened a new lightning network channel.</p>
+      </div>
+    </div>
+    <div className='mt-8'>
       <ReturnToDashboardButton
         background={green500}
         color={white}
         to={`/lightning/${currentAccount.config.id}`}
       >
         Return to dashboard
       </ReturnToDashboardButton>
-    </SuccessSubtext>
-  </Wrapper>
+    </div>
+  </div>
 );
 
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: ${white};
-  border-radius: 0.875em;
-  padding: 1.5em 0.75em;
-`;
-
-const IconWrapper = styled.div``;
-
-const SuccessText = styled.div`
-  margin-top: 0.5em;
-  font-size: 1.5em;
-  color: ${gray700};
-`;
-
-const SuccessSubtext = styled.div`
-  color: ${gray700};
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-  text-align: center;
-`;
-
 const ReturnToDashboardButton = styled(Link)`
   ${Button}
-  margin-top: 1rem;
 `;
 
 export default requireLightning(OpenChannelSuccess);
diff --git a/apps/frontend/src/pages/Lightning/Channels/OpenChannel/index.tsx b/apps/frontend/src/pages/Lightning/Channels/OpenChannel/index.tsx
@@ -71,7 +71,7 @@ const OpenChannel = ({ setViewOpenChannelForm }: Props) => {
                 fundingAccount,
                 [
                   {
-                    value: satoshisToBitcoins(psbtFund.fundingAmount).toNumber(),
+                    value: Number(psbtFund.fundingAmount),
                     address: psbtFund.fundingAddress
                   }
                 ],

diff --git a/apps/frontend/src/pages/Send/Onchain/AddSignatureFromQrCode/index.tsx b/apps/frontend/src/pages/Send/Onchain/AddSignatureFromQrCode/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from 'react';
+import React, { useContext, useState, Fragment } from 'react';
 import styled from 'styled-components';
 import { Psbt } from 'bitcoinjs-lib';
 
@@ -7,8 +7,10 @@ import DecodePsbtQrCode from './DecodePsbtQrCode';
 import TxUtxoDetails from '../../components/TxUtxoDetails';
 
 import { Button } from 'src/components';
+import { AccountMapContext } from 'src/context';
 
 import { white, gray900, green600 } from 'src/utils/colors';
+import { LilyOnchainAccount } from '@lily/types';
 
 interface Props {
   importSignatureFromFile: (file: string) => void;
@@ -17,6 +19,7 @@ interface Props {
 }
 
 const AddSignatureFromQrCode = ({ importSignatureFromFile, psbt, currentBitcoinPrice }: Props) => {
+  const { currentAccount } = useContext(AccountMapContext);
   const [step, setStep] = useState(0);
 
   let screen: JSX.Element | string = 'Ooops, error';
@@ -25,7 +28,7 @@ const AddSignatureFromQrCode = ({ importSignatureFromFile, psbt, currentBitcoinP
       screen = <PsbtQrCode psbt={psbt} />;
       break;
     case 1:
-      screen = <TxUtxoDetails psbt={psbt} currentBitcoinPrice={currentBitcoinPrice} />;
+      screen = <TxUtxoDetails currentAccount={currentAccount as LilyOnchainAccount} psbt={psbt} />;
       break;
     case 2:
       screen = <DecodePsbtQrCode importSignatureFromFile={importSignatureFromFile} />;

diff --git a/apps/frontend/src/pages/Send/components/TransactionDetails.tsx b/apps/frontend/src/pages/Send/components/TransactionDetails.tsx
@@ -54,6 +54,7 @@ const TransactionDetails = ({
   const { transactions, changeAddresses, unusedChangeAddresses } = currentAccount;
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [modalContent, setModalContent] = useState<JSX.Element | null>(null);
+
   const changeAddressMap = createMap([...changeAddresses, ...unusedChangeAddresses], 'address');
 
   const openInModal = (component: JSX.Element) => {
@@ -135,9 +136,7 @@ const TransactionDetails = ({
       dropdownItems.unshift({
         label: 'View transaction details',
         onClick: () => {
-          openInModal(
-            <TransactionUtxoDetails psbt={finalPsbt} currentBitcoinPrice={currentBitcoinPrice} />
-          );
+          openInModal(<TransactionUtxoDetails currentAccount={currentAccount} psbt={finalPsbt} />);
         }
       });
     }

diff --git a/apps/frontend/src/pages/Send/components/TxUtxoDetails.tsx b/apps/frontend/src/pages/Send/components/TxUtxoDetails.tsx
@@ -1,22 +1,22 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Psbt } from 'bitcoinjs-lib';
 import { Buffer } from 'buffer';
 
 import { Unit, Price } from 'src/components';
 
 import { createUtxoMapFromUtxoArray, getFee } from 'src/utils/send';
 import { cloneBuffer } from 'src/utils/other';
-import { requireOnchain } from 'src/hocs';
+
+import { AccountMapContext } from 'src/context';
 
 import { LilyOnchainAccount, UtxoMap } from '@lily/types';
 
 interface Props {
   currentAccount: LilyOnchainAccount;
   psbt: Psbt;
-  currentBitcoinPrice: number;
 }
 
-const TransactionUtxoDetails = ({ currentAccount, psbt, currentBitcoinPrice }: Props) => {
+const TransactionUtxoDetails = ({ currentAccount, psbt }: Props) => {
   const { availableUtxos, transactions } = currentAccount;
   const _fee = getFee(psbt, transactions);
   let utxosMap: UtxoMap;
@@ -75,4 +75,4 @@ const TransactionUtxoDetails = ({ currentAccount, psbt, currentBitcoinPrice }: P
   );
 };
 
-export default requireOnchain(TransactionUtxoDetails);
+export default TransactionUtxoDetails;