feat: accurate examples for addresses and invoices

.env

@@ -9,3 +9,12 @@ REACT_APP_LITECOIN_NETWORK=litecoinSimnet
 
 REACT_APP_BITCOIN_EXPLORER=https://blockstream.info/testnet/tx
 REACT_APP_LITECOIN_EXPLORER=https://chain.so/tx/LTCTEST
+
+# Sample values
+REACT_APP_LOCKUP_TRANSACTION_HASH=15a1f9f8507733d5302fa695800eef633253166ddc9d0e77be2e84f9e4b03dd5
+
+REACT_APP_BITCOIN_ADDRESS=tb1qqwewac4pwa94cgjswj58sm7rdctu5lzmreezvz
+REACT_APP_LITECOIN_ADDRESS=tltc1qy27dmylaf2qh7dstxfvhur5ew05wz3ak4f6d2c
+
+REACT_APP_BITCOIN_INVOICE=lntb10n1pw9mr2qpp5j8j2nk40dhkrjwaph692nmdpvxln6d6xj2hlj6fjwqqh6eukuxsqdqqcqzys6jx8f3cmpuajye3s38rm285r9mk3qs37598tghuc6xrlst4zgh4hqqy2gkpkf4p0h46mecc3zs30tta4u27nxuppjnqm5cm6wy4qyqqp5rcqsd
+REACT_APP_LITECOIN_INVOICE=lntltc10n1pw9mr29pp5e6zs5283fp385ueux3drp9tvj6luuff59u58ep5595cfqx770gtqdqqcqzjqv5qzwx26p4wmnam033p2l3uhn4yqxuw5jjsr9syw0zuq7jl2m4xpjpdrr0m2zyepv22plfmthk2gkr9r4kl5v9ungw656vsmtrrxzmcq7pqc27

src/components/inputarea/index.js

@@ -4,15 +4,16 @@ import PropTypes from 'prop-types';
 
 const styles = theme => ({
   wrapper: {
+    border: 'none',
     resize: 'none',
+    fontSize: '18px',
+    borderRadius: '3px',
+    padding: '6px 12px',
+    wordBreak: 'break-all',
     width: p => `${p.width}px`,
     height: p => `${p.height}px`,
-    padding: '6px 12px',
     outline: p => (p.error ? '1px solid red' : 'none'),
     backgroundColor: theme.colors.lightGrey,
-    fontSize: '18px',
-    border: 'none',
-    borderRadius: '3px',
   },
 });
 

src/constants/index.js

@@ -1,9 +1,21 @@
 import { Networks } from 'boltz-core';
 
+// API endpoint
 export const boltzApi = process.env.REACT_APP_BOLTZ_API;
 
+// Network configurations
 export const bitcoinNetwork = Networks[process.env.REACT_APP_BITCOIN_NETWORK];
 export const litecoinNetwork = Networks[process.env.REACT_APP_LITECOIN_NETWORK];
 
 export const bitcoinExplorer = process.env.REACT_APP_BITCOIN_EXPLORER;
 export const litecoinExplorer = process.env.REACT_APP_LITECOIN_EXPLORER;
+
+// Sample values
+export const lockupTransactionHash =
+  process.env.REACT_APP_LOCKUP_TRANSACTION_HASH;
+
+export const bitcoinAddress = process.env.REACT_APP_BITCOIN_ADDRESS;
+export const litecoinAddress = process.env.REACT_APP_LITECOIN_ADDRESS;
+
+export const bitcoinInvoice = process.env.REACT_APP_BITCOIN_INVOICE;
+export const litecoinInvoice = process.env.REACT_APP_LITECOIN_INVOICE;

src/scripts/utils.js

@@ -3,6 +3,10 @@ import {
   litecoinNetwork,
   bitcoinExplorer,
   litecoinExplorer,
+  bitcoinAddress,
+  litecoinAddress,
+  bitcoinInvoice,
+  litecoinInvoice,
 } from '../constants';
 
 // Number satohis and litoshis in a whole coin
@@ -71,7 +75,7 @@ export const toSatoshi = coins => {
 };
 
 /**
- * Get the full name of a currency
+ * Get the full name of a symbol
  */
 export const getCurrencyName = symbol => {
   return symbol === 'BTC' ? 'Bitcoin' : 'Litecoin';
@@ -96,8 +100,22 @@ export const getNetwork = symbol => {
 };
 
 /**
- * Get the block explorer URL for a currency
+ * Get the block explorer URL for a symbol
  */
 export const getExplorer = symbol => {
   return symbol === 'BTC' ? bitcoinExplorer : litecoinExplorer;
 };
+
+/**
+ * Get a sample address for a symbol
+ */
+export const getSampleAddress = symbol => {
+  return symbol === 'BTC' ? bitcoinAddress : litecoinAddress;
+};
+
+/**
+ * Get a sample invoice for a symbol
+ */
+export const getSampleInvoice = symbol => {
+  return symbol === 'BTC' ? bitcoinInvoice : litecoinInvoice;
+};

src/views/refund/steps/uploadRefundFile.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import injectSheet from 'react-jss';
 import PropTypes from 'prop-types';
+import { FaCheckCircle } from 'react-icons/fa';
 import View from '../../../components/view';
 import InputArea from '../../../components/inputarea';
 import DropZone from '../../../components/dropzone';
 import FileUpload from '../../../components/fileupload';
-import { FaCheckCircle } from 'react-icons/fa';
+import { lockupTransactionHash } from '../../../constants';
 
 const UploadRefundFileStyles = theme => ({
   wrapper: {
@@ -50,14 +51,12 @@ const StyledUploadRefundFile = ({
         <FileUpload text={'Select file'} onFileRead={setRefundFile} />
       </DropZone>
     )}
-    <p className={classes.info}>Paste Lockup Transaction Hash</p>
+    <p className={classes.info}>Paste the lockup transaction hash</p>
     <InputArea
       height={50}
       width={500}
       onChange={setTransactionHash}
-      placeholder={
-        '0e3e2357e806b6cdb1f70b54c3a3a17b6714ee1f0e68bebb44a74b1efd512098'
-      }
+      placeholder={`EG: ${lockupTransactionHash}`}
     />
   </View>
 );

src/views/reverse/steps/inputAddress.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
 import View from '../../../components/view';
 import InputArea from '../../../components/inputarea';
-import { getCurrencyName } from '../../../scripts/utils';
+import { getCurrencyName, getSampleAddress } from '../../../scripts/utils';
 
 const inputAddressStyles = () => ({
   wrapper: {
@@ -32,8 +32,8 @@ class StyledInputAddress extends React.Component {
   };
 
   render() {
-    const { classes, swapInfo } = this.props;
     const { error } = this.state;
+    const { classes, swapInfo } = this.props;
 
     return (
       <View className={classes.wrapper}>
@@ -43,9 +43,9 @@ class StyledInputAddress extends React.Component {
         <InputArea
           width={600}
           height={150}
-          onChange={this.onChange}
           error={error}
-          placeholder={'EG: bc1qvclmsfvjsjpz3mavtpnjk5xrpc7gupe03nz8pa'}
+          onChange={this.onChange}
+          placeholder={`EG: ${getSampleAddress(swapInfo.quote)}`}
         />
       </View>
     );

src/views/swap/steps/inputInvoice.js

@@ -4,7 +4,7 @@ import injectSheet from 'react-jss';
 import { FaBolt } from 'react-icons/fa';
 import View from '../../../components/view';
 import InputArea from '../../../components/inputarea';
-import { getCurrencyName } from '../../../scripts/utils';
+import { getCurrencyName, getSampleInvoice } from '../../../scripts/utils';
 
 const InputInvoiceStyles = () => ({
   wrapper: {
@@ -51,15 +51,19 @@ class StyledInputInvoice extends React.Component {
     const valid = input.slice(0, 2);
 
     if (valid === 'ln') {
-      this.setState({ error: false }, () => this.props.onChange(input, false));
+      this.setState({ value: input, error: false }, () =>
+        this.props.onChange(input, false)
+      );
     } else {
-      this.setState({ error: true }, () => this.props.onChange(input, true));
+      this.setState({ value: input, error: true }, () =>
+        this.props.onChange(input, true)
+      );
     }
   };
 
   render() {
-    const { classes, swapInfo } = this.props;
     const { error } = this.state;
+    const { classes, swapInfo } = this.props;
 
     return (
       <View className={classes.wrapper}>
@@ -71,17 +75,13 @@ class StyledInputInvoice extends React.Component {
           </b>
         </p>
         <InputArea
-          autoFocus={true}
           width={600}
           height={150}
-          onChange={this.onChange}
           error={error}
+          autoFocus={true}
           value={this.state.value}
-          placeholder={
-            'Paste your invoice here: lntb20n1pwqhmchpp5v9tsdn62ptl47z8wvzj7xakw09wmj5yax05pv5z2alhpqgdmedlsd' +
-            'qqcqzys2wuh6vnuu8f6c94mx7wlduh8kge8ftuarg23nnkpuhgdjpw96hdj2qem2mcztny8vxng6gdc5xsfh2' +
-            'z6rf2rt42hc3k5udm2jcynjyspr262hk'
-          }
+          onChange={this.onChange}
+          placeholder={`EG: ${getSampleInvoice(swapInfo.quote)}`}
         />
       </View>
     );