diff --git a/pkg/btc-wallet/src/App.tsx b/pkg/btc-wallet/src/App.tsx index a47ad3a9d..fb9d0168e 100644 --- a/pkg/btc-wallet/src/App.tsx +++ b/pkg/btc-wallet/src/App.tsx @@ -6,6 +6,7 @@ import { Box, Reset } from '@tlon/indigo-react'; import StartupModal from './components/StartupModal'; import { useSettings } from './hooks/useSettings'; import Body from './components/Body'; +import Header from './components/Header'; const App: React.FC = () => { const { loaded, wallet, provider, scanProgress } = useSettings(); @@ -27,9 +28,8 @@ const App: React.FC = () => { minHeight={loaded && !scanning ? '100%' : 'none'} height={loaded && !scanning ? 'none' : '100%'} style={{ filter: blur ? 'blur(8px)' : 'none' }} - px={[0, 4]} - pb={[0, 4]} > +
diff --git a/pkg/btc-wallet/src/components/Body.tsx b/pkg/btc-wallet/src/components/Body.tsx index 57e3be8c6..0f2bdde38 100644 --- a/pkg/btc-wallet/src/components/Body.tsx +++ b/pkg/btc-wallet/src/components/Body.tsx @@ -4,7 +4,6 @@ import { Switch, Route } from 'react-router-dom'; import Balance from './Balance'; import Transactions from './Transactions/Transactions'; import Warning from './Warning'; -import Header from './Header'; import Settings from './Settings'; import { useSettings } from '../hooks/useSettings'; @@ -25,13 +24,11 @@ const Body: React.FC = () => { -
-
{!warning ? null : } diff --git a/pkg/btc-wallet/src/components/Header.tsx b/pkg/btc-wallet/src/components/Header.tsx index 4e1422b88..ed229cf29 100644 --- a/pkg/btc-wallet/src/components/Header.tsx +++ b/pkg/btc-wallet/src/components/Header.tsx @@ -3,44 +3,29 @@ import { Box, Icon, Row, Text } from '@tlon/indigo-react'; import { Link } from 'react-router-dom'; import { useSettings } from '../hooks/useSettings'; -const Header = ({ settings }: { settings: boolean }) => { +const Header = () => { const { provider } = useSettings(); - let icon = settings ? 'X' : 'Adjust'; - let iconColor = settings ? 'black' : 'orange'; - let iconLink = settings ? '/' : '/settings'; let connection = null; - let badge = null; if (!(provider && provider.connected)) { connection = ( Provider Offline ); - - if (!settings) { - badge = ( - - ); - } } return ( { {connection} - + - {badge} - + + + + + + ); diff --git a/pkg/btc-wallet/src/components/Send/BridgeInvoice.tsx b/pkg/btc-wallet/src/components/Send/BridgeInvoice.tsx index 1753d79be..0186bcc82 100644 --- a/pkg/btc-wallet/src/components/Send/BridgeInvoice.tsx +++ b/pkg/btc-wallet/src/components/Send/BridgeInvoice.tsx @@ -25,10 +25,18 @@ type Props = { }; const BridgeInvoice: React.FC = ({ payee, stopSending, satsAmount }) => { - const { error, currencyRates, fee, broadcastSuccess, denomination, psbt } = - useSettings(); + const { + error, + currencyRates, + fee, + broadcastSuccess, + denomination, + psbt, + history, + } = useSettings(); const [txHex, setTxHex] = useState(''); const [ready, setReady] = useState(false); + const [historyLength, setHistoryLength] = useState(0); const [localError, setLocalError] = useState(''); const [broadcasting, setBroadcasting] = useState(false); const invoiceRef = useRef(); @@ -44,7 +52,17 @@ const BridgeInvoice: React.FC = ({ payee, stopSending, satsAmount }) => { useEffect(() => { window.open('https://bridge.urbit.org/?kind=btc&utx=' + psbt); - }); + }, []); + + useEffect(() => { + if (historyLength === 0) { + setHistoryLength(history.length); + } + if (broadcasting && history.length > historyLength) { + setBroadcasting(false); + stopSending(); + } + }, [history]); const broadCastTx = (hex: string) => { let command = { @@ -65,9 +83,14 @@ const BridgeInvoice: React.FC = ({ payee, stopSending, satsAmount }) => { }; const checkTxHex = (e: React.ChangeEvent) => { - setTxHex(e.target.value); - setReady(txHex.length > 0); - setLocalError(''); + // TODO: validate this hex with something other than length check. + if (e.target.value.length > 0) { + setTxHex(e.target.value); + setReady(true); + setLocalError(''); + } else { + setLocalError('Invalid transaction hex'); + } }; let inputColor = 'black'; diff --git a/pkg/btc-wallet/src/components/Send/ExternalInvoice.tsx b/pkg/btc-wallet/src/components/Send/ExternalInvoice.tsx index 864425c59..e4270579d 100644 --- a/pkg/btc-wallet/src/components/Send/ExternalInvoice.tsx +++ b/pkg/btc-wallet/src/components/Send/ExternalInvoice.tsx @@ -29,10 +29,18 @@ const ExternalInvoice: React.FC = ({ stopSending, satsAmount, }) => { - const { error, currencyRates, fee, broadcastSuccess, denomination, psbt } = - useSettings(); + const { + error, + currencyRates, + fee, + broadcastSuccess, + denomination, + psbt, + history, + } = useSettings(); const [txHex, setTxHex] = useState(''); const [ready, setReady] = useState(false); + const [historyLength, setHistoryLength] = useState(0); const [localError, setLocalError] = useState(''); const [broadcasting, setBroadcasting] = useState(false); const invoiceRef = useRef(); @@ -46,6 +54,16 @@ const ExternalInvoice: React.FC = ({ } }, [error, broadcasting, setBroadcasting]); + useEffect(() => { + if (historyLength === 0) { + setHistoryLength(history.length); + } + if (broadcasting && history.length > historyLength) { + setBroadcasting(false); + stopSending(); + } + }, [history]); + const broadCastTx = (hex: string) => { let command = { 'broadcast-tx': hex, @@ -65,9 +83,14 @@ const ExternalInvoice: React.FC = ({ }; const checkTxHex = (e: React.ChangeEvent) => { - setTxHex(e.target.value); - setReady(txHex.length > 0); - setLocalError(''); + // TODO: validate this hex with something other than length check. + if (e.target.value.length > 0) { + setTxHex(e.target.value); + setReady(true); + setLocalError(''); + } else { + setLocalError('Invalid transaction hex'); + } }; const copyPsbt = () => { diff --git a/pkg/btc-wallet/src/components/Send/Invoice.tsx b/pkg/btc-wallet/src/components/Send/Invoice.tsx index e26ca82c8..ba4675bd7 100644 --- a/pkg/btc-wallet/src/components/Send/Invoice.tsx +++ b/pkg/btc-wallet/src/components/Send/Invoice.tsx @@ -59,9 +59,11 @@ const Invoice: React.FC = ({ stopSending, payee, satsAmount }) => { broadcastSuccess, network, denomination, + history, } = useSettings(); const [masterTicket, setMasterTicket] = useState(''); const [ready, setReady] = useState(false); + const [historyLength, setHistoryLength] = useState(0); const [localError, setLocalError] = useState(error); const [broadcasting, setBroadcasting] = useState(false); @@ -78,6 +80,16 @@ const Invoice: React.FC = ({ stopSending, payee, satsAmount }) => { return api.btcWalletCommand(command); }; + useEffect(() => { + if (historyLength === 0) { + setHistoryLength(history.length); + } + if (broadcasting && history.length > historyLength) { + setBroadcasting(false); + stopSending(); + } + }, [history]); + const sendBitcoin = (ticket: string, psbt: string) => { const newPsbt = bitcoin.Psbt.fromBase64(psbt); setBroadcasting(true); diff --git a/pkg/btc-wallet/src/components/Settings.tsx b/pkg/btc-wallet/src/components/Settings.tsx index 3a376f506..bf2b8a981 100644 --- a/pkg/btc-wallet/src/components/Settings.tsx +++ b/pkg/btc-wallet/src/components/Settings.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import { Row, Text, Button, Col } from '@tlon/indigo-react'; +import { Box, Icon, Row, Text, Button, Col } from '@tlon/indigo-react'; import { useSettings } from '../hooks/useSettings'; import { api } from '../lib/api'; +import { Link } from 'react-router-dom'; const Settings = () => { const { wallet, provider } = useSettings(); @@ -39,10 +40,15 @@ const Settings = () => { borderRadius="48px" backgroundColor="white" > - + XPub Derivation + + + + +