fix: close modal after successful broadcast, closes #198

refactor: update from electron-boilerplate

app/components/home/transaction-list/transaction-list-context-menu.ts

@@ -68,9 +68,8 @@ export function createTxListContextMenu({ tx, copy }: TxListContextMenu) {
 
   menuItems.forEach(item => menu.append(new MenuItem(item)));
 
-  menu.popup({
-    window: remote.getCurrentWindow(),
-  });
+  menu.popup({ window: remote.getCurrentWindow() });
+
   menu.once('menu-will-close', () => {
     // `destroy` call untyped
     (menu as any).destroy();

app/environment.ts

@@ -8,7 +8,10 @@ import { ENV } from './constants';
 
 export { ChainID };
 
-export const chain = ENV === 'development' || ENV === 'testing' ? ChainID.Testnet : ChainID.Mainnet;
+// export const chain = ENV === 'development' || ENV === 'testing' ? ChainID.Testnet : ChainID.Mainnet;
+export const chain = ChainID.Testnet;
 
-export const stacksNetwork: StacksNetwork =
-  ENV === 'development' || ENV === 'testing' ? new StacksTestnet() : new StacksMainnet();
+// export const stacksNetwork: StacksNetwork =
+//   ENV === 'development' || ENV === 'testing' ? new StacksTestnet() : new StacksMainnet();
+
+export const stacksNetwork = new StacksTestnet();

app/index.tsx

@@ -3,20 +3,21 @@ import { ThemeProvider, theme } from '@blockstack/ui';
 import { render } from 'react-dom';
 import { AppContainer as ReactHotAppContainer } from 'react-hot-loader';
 
-import Root from './pages/root';
 import { configureStore, history } from './store/configureStore';
 
 const store = configureStore();
 
 const AppContainer = process.env.PLAIN_HMR ? Fragment : ReactHotAppContainer;
 
-document.addEventListener('DOMContentLoaded', () =>
+document.addEventListener('DOMContentLoaded', () => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const Root = require('./pages/root').default;
   render(
     <ThemeProvider theme={theme}>
       <AppContainer>
         <Root store={store} history={history} />
       </AppContainer>
     </ThemeProvider>,
     document.getElementById('root')
-  )
-);
+  );
+});

app/modals/transaction/transaction-modal.tsx

@@ -113,12 +113,19 @@ export const TransactionModal: FC<TxModalProps> = ({ balance, address }) => {
   const closeModalResetForm = () => {
     dispatch(homeActions.closeTxModal());
     setStep(TxModalStep.DescribeTx);
+    setLoading(false);
+    setTx(null);
+    setFee(new BN(0));
+    setAmount(new BigNumber(0));
     form.resetForm();
   };
 
   const broadcastTx = () => {
     if (tx === null) return;
-    dispatch(broadcastStxTransaction({ signedTx: tx, amount }));
+    setLoading(true);
+    dispatch(
+      broadcastStxTransaction({ signedTx: tx, amount, onBroadcastSuccess: closeModalResetForm })
+    );
   };
 
   const txFormStepMap: { [step in TxModalStep]: ModalComponents } = {
@@ -162,7 +169,7 @@ export const TransactionModal: FC<TxModalProps> = ({ balance, address }) => {
           <Button mode="tertiary" onClick={() => setStep(TxModalStep.DescribeTx)} {...buttonStyle}>
             Go back
           </Button>
-          <Button ml="base-tight" {...buttonStyle} onClick={broadcastTx}>
+          <Button ml="base-tight" {...buttonStyle} isLoading={loading} onClick={broadcastTx}>
             Confirm and send
           </Button>
         </TxModalFooter>

app/pages/sign-in/sign-in.tsx

@@ -11,7 +11,8 @@ import { decryptWallet, selectKeysSlice } from '../../store/keys';
 export const SignIn: React.FC = () => {
   const history = useHistory();
   const dispatch = useDispatch();
-  const [password, setPassword] = useState<string | null>(null);
+  // const [password, setPassword] = useState<string | null>(null);
+  const [password, setPassword] = useState<string | null>('71c97e5e6b4b4213822066d5561cdda3');
   const [hasSubmitted, setHasSubmitted] = useState(false);
   const keysState = useSelector(selectKeysSlice);
 

app/store/transaction/transaction.actions.ts

@@ -9,7 +9,6 @@ import { stacksNetwork } from '../../environment';
 import { safelyFormatHexTxid } from '../../utils/safe-handle-txid';
 import { addPendingTransaction } from '../pending-transaction';
 import { Dispatch } from '../index';
-import { homeActions } from '../home/home.reducer';
 
 export const pendingTransactionSuccessful = createAction<Transaction>(
   'transactions/pending-transaction-successful'
@@ -42,20 +41,24 @@ export const broadcastTxFail = createAction('transactions/broadcast-transactions
 interface BroadcastStxTransactionArgs {
   signedTx: StacksTransaction;
   amount: BigNumber;
+  onBroadcastSuccess: () => void;
 }
 
-export function broadcastStxTransaction({ signedTx, amount }: BroadcastStxTransactionArgs) {
+export function broadcastStxTransaction({
+  amount,
+  signedTx,
+  onBroadcastSuccess,
+}: BroadcastStxTransactionArgs) {
   return async (dispatch: Dispatch) => {
     const [error, blockchainResponse] = await safeAwait(
       broadcastTransaction(signedTx, stacksNetwork)
     );
-
     if (error || !blockchainResponse) return null;
     if (typeof blockchainResponse !== 'string') {
       // setError for ui
       return;
     }
-    dispatch(homeActions.closeTxModal());
+    onBroadcastSuccess();
     dispatch(
       addPendingTransaction({
         txId: safelyFormatHexTxid(blockchainResponse),

app/utils/disk-store.ts

@@ -4,8 +4,8 @@ const store = new Store({
   schema: {
     salt: {
       type: 'string',
-      // maxLength: 29,
-      // minLength: 29,
+      minLength: 32,
+      maxLength: 32,
     },
     encryptedMnemonic: {
       type: 'string',

app/utils/explorer.ts

@@ -1,7 +1,7 @@
 import { shell } from 'electron';
 
 export function makeExplorerLink(txId: string) {
-  return `https://testnet-explorer.blockstack.org/txid/${txId}?wallet=true`;
+  return `https://testnet-explorer.blockstack.org/txid/${txId}?w`;
 }
 
 export async function openInExplorer(txid: string) {