Merge pull request #190 from lightninglabs/disable-fund-account

pool+accounts: display warning if node has no channels

Author: guggero

app/src/__tests__/components/pool/AccountSection.spec.tsx

@@ -28,6 +28,7 @@ describe('AccountSection', () => {
 
   beforeEach(async () => {
     store = createStore();
+    await store.channelStore.fetchChannels();
     await store.nodeStore.fetchBalances();
     await store.accountStore.fetchAccounts();
     await store.orderStore.fetchOrders();
@@ -37,6 +38,19 @@ describe('AccountSection', () => {
     return renderWithProviders(<AccountSection />, store);
   };
 
+  it('should display channel notice', () => {
+    // remove all accounts to display the FundNewAccountForm
+    runInAction(() => {
+      store.accountStore.accounts.clear();
+      store.accountStore.activeTraderKey = '';
+      store.channelStore.channels.clear();
+    });
+    const { getByText } = render();
+
+    expect(getByText('Welcome to Pool')).toBeInTheDocument();
+    expect(getByText(/Your node must already have open channels/)).toBeInTheDocument();
+  });
+
   it('should validate fund new account form', () => {
     // remove all accounts to display the FundNewAccountForm
     runInAction(() => {

app/src/components/pool/account/NoAccount.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { Button, UserPlus } from 'components/base';
+import { AlertTriangle, Button, UserPlus } from 'components/base';
 import LoaderLines from 'components/common/LoaderLines';
 import { styled } from 'components/theme';
 
@@ -16,19 +16,34 @@ const Styled = {
   Content: styled.div`
     font-size: ${props => props.theme.sizes.xs};
     text-align: center;
-
-    > div {
-      margin: 20px;
-    }
   `,
   UserIcon: styled(UserPlus)`
     width: 64px;
     height: 64px;
   `,
   Title: styled.div`
+    margin: 20px;
     font-size: ${props => props.theme.sizes.s};
     font-weight: bold;
   `,
+  Message: styled.div`
+    margin: 20px;
+  `,
+  ChannelNotice: styled.div`
+    display: flex;
+    margin: 20px 0;
+    color: ${props => props.theme.colors.gold};
+
+    > svg {
+      width: 70px;
+      height: 66px;
+    }
+
+    > span {
+      margin-left: 5px;
+      text-align: left;
+    }
+  `,
   Actions: styled.div`
     margin: 30px auto;
   `,
@@ -38,7 +53,7 @@ const NoAccount: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.pool.account.NoAccount');
   const { accountSectionView, accountStore } = useStore();
 
-  const { Loading, Content, UserIcon, Title, Actions } = Styled;
+  const { Loading, Content, UserIcon, Title, Message, ChannelNotice, Actions } = Styled;
   if (!accountStore.loaded) {
     return (
       <Loading>
@@ -53,9 +68,21 @@ const NoAccount: React.FC = () => {
           <UserIcon />
         </div>
         <Title>{l('welcome')}</Title>
-        <div>{l('message')}</div>
+        {!accountSectionView.hasChannels ? (
+          <ChannelNotice>
+            <AlertTriangle size="large" />
+            <span>{l('channelNotice')}</span>
+          </ChannelNotice>
+        ) : (
+          <Message>{l('message')}</Message>
+        )}
         <Actions>
-          <Button primary ghost onClick={accountSectionView.showFundNew}>
+          <Button
+            primary
+            ghost
+            disabled={!accountSectionView.hasChannels}
+            onClick={accountSectionView.showFundNew}
+          >
             {l('createAccount')}
           </Button>
         </Actions>

app/src/i18n/locales/en-US.json

@@ -151,6 +151,7 @@
   "cmps.pool.account.FundAccountForm.newBalance": "New Account Balance",
   "cmps.pool.account.NoAccount.welcome": "Welcome to Pool",
   "cmps.pool.account.NoAccount.message": "To begin buying and selling channels, you will need to deposit funds into a non-custodial account. You will be able to withdraw at any time.",
+  "cmps.pool.account.NoAccount.channelNotice": "Your node must already have open channels before you can fund your Pool account.",
   "cmps.pool.account.NoAccount.createAccount": "Open an Account",
   "cmps.pool.batches.BatchRowHeader.batchId": "Batch ID",
   "cmps.pool.batches.BatchRowHeader.txId": "Tx ID",

app/src/store/views/accountSectionView.ts

@@ -49,6 +49,11 @@ export default class AccountSectionView {
     return this.section;
   }
 
+  /** indicates if the LND node has any open channels */
+  get hasChannels() {
+    return this._store.channelStore.channels.size > 0;
+  }
+
   //
   // Actions
   //