Details

Reviewers

Group Reviewers

Restricted Project

Summary

Related to T2090. Users should not be able to navigate to a component other than OnBoarding.js before creating a wallet. Logic has been added to routes which could previously be accessed before importing/creating a wallet, making it so the user can only see the OnBoarding component.

Some of the routes already redirect to OnBoarding if no wallet is present, so no changes have been made to the following routes:
/receive
/send-token/:tokenId

Test Plan

cd web/cashtab && npm start
navigate to localhost:3000 in a private browser
enter the following Routes:
/tokens
/airdrop
/configure
/send

Observe that if there is no wallet present, these routes will bring the user to the OnBoarding component.

Diff Detail

Repository

rABC Bitcoin ABC

Branch

route-to-onboarding-if-no-wallet

Lint

Lint Passed

Unit

No Test Coverage

Build Status

Buildable 19231
Build 38210: Build Diff	cashtab-tests
Build 38209: arc lint + arc unit

Event Timeline

kieran709 created this revision.May 26 2022, 23:22

Herald added a reviewer: Restricted Project. · View Herald TranscriptMay 26 2022, 23:22

kieran709 requested review of this revision.May 26 2022, 23:22

kieran709 planned changes to this revision.May 26 2022, 23:22

Harbormaster completed remote builds in B19161: Diff 33702.May 26 2022, 23:25

kieran709 requested review of this revision.May 27 2022, 18:27

kieran709 edited the summary of this revision. (Show Details)

While this approach is effective, I think the best way forward is to tackle this from App.js.

Put the conditional rendering inside the <Route> components in App.js
Remove the conditional rendering from Home.js
Also apply to extension/App.js

This revision now requires changes to proceed.May 27 2022, 22:29

Responded to review feedback + updated snapshots

Harbormaster completed remote builds in B19206: Diff 33756.May 31 2022, 19:47

bytesofman requested changes to this revision.May 31 2022, 21:58

bytesofman added inline comments.

web/cashtab/extension/src/components/App.js
275 ↗	(On Diff #33756)	For pages that are not `/wallet`, we want to instead redirect the user to that page. So, replace `<OnBoarding/>` with `<Redirect to="/wallet" />` for these routes. That way the user will still get the `OnBoard.js` screen, but will also be at the right route.
web/cashtab/src/components/Configure/Configure.js
1189 ↗	(On Diff #33756)	Why was it necessary to modify Configure.js?
web/cashtab/src/components/Home/Home.js
236 ↗	(On Diff #33756)	Should be able to refactor this further so that `loading` is handled from `App.js`, as with other screens like `Send`. Should only need one component in Home.js (vs what we have now, with both `Home` and `WalletInfo`

This revision now requires changes to proceed.May 31 2022, 21:58

kieran709 planned changes to this revision.Jun 1 2022, 19:13

Responding to review feedback

kieran709 planned changes to this revision.Jun 1 2022, 19:14

Harbormaster completed remote builds in B19225: Diff 33777.Jun 1 2022, 19:16

bytesofman requested changes to this revision.Jun 1 2022, 23:44

bytesofman added inline comments.

web/cashtab/extension/src/components/App.js
277 ↗	(On Diff #33777)	The `wallet ?` should be inside the `<Route>` tags, same as you have for the `/wallet` route except a `Redirect` component instead of `Onboarding`

Responding to review feedback.

updated snapshots

Harbormaster completed remote builds in B19231: Diff 33785.Jun 2 2022, 13:41

Harbormaster completed remote builds in B19232: Diff 33786.Jun 2 2022, 13:44

Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Failed tests logs:

====== CashTab Unit Tests:  Wallet without BCH balance ======
Error: expect(received).toMatchSnapshot()

Snapshot name: `Wallet without BCH balance 1`

- Snapshot  - 10
+ Received  + 10

@@ -1,43 +1,43 @@
  Array [
    <div
-     className="sc-hzDkRC gNbvZH"
+     className="sc-dVhcbM brpysj"
    >
      <h4
-       className="sc-cHGsZl jINCQt"
+       className="sc-ksYbfQ fwolRo"
      >
        MigrationTestAlpha
      </h4>
      <div
-       className="sc-fBuWsC gFiHLB"
+       className="sc-fAjcbJ cmsHYG"
      >
        0
         
        XEC
      </div>
    </div>,
    <div
-     className="sc-Rmtcm fuvBvM"
+     className="sc-fBuWsC jTHIvX"
    >
      <div
-       className="sc-TOsTZ gdSjQS"
+       className="sc-hmzhuo keMYNP"
      >
        <button
-         className="sc-kgAjT bjUlla"
+         className="sc-frDJqD dvoSs"
          onClick={[Function]}
        >
          Transactions
        </button>
        <button
-         className="sc-kgAjT dXxbhd"
+         className="sc-frDJqD hAXDWa"
          onClick={[Function]}
        >
          eTokens
        </button>
      </div>
      <div
-       className="sc-cJSrbW jWaSzk"
+       className="sc-kvZOFW dlkEwj"
      >
        <div />
        <span
          aria-label="party emoji"
          role="img"
@@ -60,14 +60,14 @@
         
        XEC
         to send to others
      </div>
      <div
-       className="sc-cJSrbW gTYoTH"
+       className="sc-kvZOFW ueEEv"
      >
        <a
-         className="sc-kvZOFW kHNSOX"
+         className="sc-jqCOkK bCWWQD"
          href="/tokens"
          onClick={[Function]}
        >
          Create eToken
        </a>
    at Object.<anonymous> (/work/web/cashtab/src/components/Home/__tests__/Home.test.js:26:18)
    at Promise.then.completed (/work/web/cashtab/node_modules/jest-circus/build/utils.js:391:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/web/cashtab/node_modules/jest-circus/build/utils.js:316:10)
    at _callCircusTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:218:40)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at _runTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:155:3)
    at _runTestsForDescribeBlock (/work/web/cashtab/node_modules/jest-circus/build/run.js:66:9)
    at run (/work/web/cashtab/node_modules/jest-circus/build/run.js:25:3)
    at runAndTransformResultsToJestFormat (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
    at jestAdapter (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
    at runTestInternal (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:389:16)
    at runTest (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:475:34)
    at Object.worker (/work/web/cashtab/node_modules/jest-runner/build/testWorker.js:133:12)
====== CashTab Unit Tests:  Wallet with BCH balances ======
Error: expect(received).toMatchSnapshot()

Snapshot name: `Wallet with BCH balances 1`

- Snapshot  - 10
+ Received  + 10

@@ -1,43 +1,43 @@
  Array [
    <div
-     className="sc-hzDkRC gNbvZH"
+     className="sc-dVhcbM brpysj"
    >
      <h4
-       className="sc-cHGsZl jINCQt"
+       className="sc-ksYbfQ fwolRo"
      >
        MigrationTestAlpha
      </h4>
      <div
-       className="sc-fBuWsC gFiHLB"
+       className="sc-fAjcbJ cmsHYG"
      >
        0
         
        XEC
      </div>
    </div>,
    <div
-     className="sc-Rmtcm fuvBvM"
+     className="sc-fBuWsC jTHIvX"
    >
      <div
-       className="sc-TOsTZ gdSjQS"
+       className="sc-hmzhuo keMYNP"
      >
        <button
-         className="sc-kgAjT bjUlla"
+         className="sc-frDJqD dvoSs"
          onClick={[Function]}
        >
          Transactions
        </button>
        <button
-         className="sc-kgAjT dXxbhd"
+         className="sc-frDJqD hAXDWa"
          onClick={[Function]}
        >
          eTokens
        </button>
      </div>
      <div
-       className="sc-cJSrbW jWaSzk"
+       className="sc-kvZOFW dlkEwj"
      >
        <div />
        <span
          aria-label="party emoji"
          role="img"
@@ -60,14 +60,14 @@
         
        XEC
         to send to others
      </div>
      <div
-       className="sc-cJSrbW gTYoTH"
+       className="sc-kvZOFW ueEEv"
      >
        <a
-         className="sc-kvZOFW kHNSOX"
+         className="sc-jqCOkK bCWWQD"
          href="/tokens"
          onClick={[Function]}
        >
          Create eToken
        </a>
    at Object.<anonymous> (/work/web/cashtab/src/components/Home/__tests__/Home.test.js:40:18)
    at Promise.then.completed (/work/web/cashtab/node_modules/jest-circus/build/utils.js:391:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/web/cashtab/node_modules/jest-circus/build/utils.js:316:10)
    at _callCircusTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:218:40)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at _runTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:155:3)
    at _runTestsForDescribeBlock (/work/web/cashtab/node_modules/jest-circus/build/run.js:66:9)
    at run (/work/web/cashtab/node_modules/jest-circus/build/run.js:25:3)
    at runAndTransformResultsToJestFormat (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
    at jestAdapter (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
    at runTestInternal (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:389:16)
    at runTest (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:475:34)
    at Object.worker (/work/web/cashtab/node_modules/jest-runner/build/testWorker.js:133:12)
====== CashTab Unit Tests:  Wallet with BCH balances and tokens ======
Error: expect(received).toMatchSnapshot()

Snapshot name: `Wallet with BCH balances and tokens 1`

- Snapshot  - 10
+ Received  + 10

@@ -1,43 +1,43 @@
  Array [
    <div
-     className="sc-hzDkRC gNbvZH"
+     className="sc-dVhcbM brpysj"
    >
      <h4
-       className="sc-cHGsZl jINCQt"
+       className="sc-ksYbfQ fwolRo"
      >
        MigrationTestAlpha
      </h4>
      <div
-       className="sc-fBuWsC gFiHLB"
+       className="sc-fAjcbJ cmsHYG"
      >
        0
         
        XEC
      </div>
    </div>,
    <div
-     className="sc-Rmtcm fuvBvM"
+     className="sc-fBuWsC jTHIvX"
    >
      <div
-       className="sc-TOsTZ gdSjQS"
+       className="sc-hmzhuo keMYNP"
      >
        <button
-         className="sc-kgAjT bjUlla"
+         className="sc-frDJqD dvoSs"
          onClick={[Function]}
        >
          Transactions
        </button>
        <button
-         className="sc-kgAjT dXxbhd"
+         className="sc-frDJqD hAXDWa"
          onClick={[Function]}
        >
          eTokens
        </button>
      </div>
      <div
-       className="sc-cJSrbW jWaSzk"
+       className="sc-kvZOFW dlkEwj"
      >
        <div />
        <span
          aria-label="party emoji"
          role="img"
@@ -60,14 +60,14 @@
         
        XEC
         to send to others
      </div>
      <div
-       className="sc-cJSrbW gTYoTH"
+       className="sc-kvZOFW ueEEv"
      >
        <a
-         className="sc-kvZOFW kHNSOX"
+         className="sc-jqCOkK bCWWQD"
          href="/tokens"
          onClick={[Function]}
        >
          Create eToken
        </a>
    at Object.<anonymous> (/work/web/cashtab/src/components/Home/__tests__/Home.test.js:54:18)
    at Promise.then.completed (/work/web/cashtab/node_modules/jest-circus/build/utils.js:391:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/web/cashtab/node_modules/jest-circus/build/utils.js:316:10)
    at _callCircusTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:218:40)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at _runTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:155:3)
    at _runTestsForDescribeBlock (/work/web/cashtab/node_modules/jest-circus/build/run.js:66:9)
    at run (/work/web/cashtab/node_modules/jest-circus/build/run.js:25:3)
    at runAndTransformResultsToJestFormat (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
    at jestAdapter (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
    at runTestInternal (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:389:16)
    at runTest (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:475:34)
    at Object.worker (/work/web/cashtab/node_modules/jest-runner/build/testWorker.js:133:12)
====== CashTab Unit Tests:  Wallet with BCH balances and tokens and state field ======
Error: expect(received).toMatchSnapshot()

Snapshot name: `Wallet with BCH balances and tokens and state field 1`

- Snapshot  - 13
+ Received  + 13

@@ -1,43 +1,43 @@
  Array [
    <div
-     className="sc-hzDkRC gNbvZH"
+     className="sc-dVhcbM brpysj"
    >
      <h4
-       className="sc-cHGsZl jINCQt"
+       className="sc-ksYbfQ fwolRo"
      >
        MigrationTestAlpha
      </h4>
      <div
-       className="sc-fBuWsC gFiHLB"
+       className="sc-fAjcbJ cmsHYG"
      >
        0.06
         
        XEC
      </div>
    </div>,
    <div
-     className="sc-Rmtcm fuvBvM"
+     className="sc-fBuWsC jTHIvX"
    >
      <div
-       className="sc-TOsTZ gdSjQS"
+       className="sc-hmzhuo keMYNP"
      >
        <button
-         className="sc-kgAjT bjUlla"
+         className="sc-frDJqD dvoSs"
          onClick={[Function]}
        >
          Transactions
        </button>
        <button
-         className="sc-kgAjT dXxbhd"
+         className="sc-frDJqD hAXDWa"
          onClick={[Function]}
        >
          eTokens
        </button>
      </div>
      <div
-       className="sc-cJSrbW jWaSzk"
+       className="sc-kvZOFW dlkEwj"
      >
        <div />
        <span
          aria-label="party emoji"
          role="img"
@@ -60,14 +60,14 @@
         
        XEC
         to send to others
      </div>
      <div
-       className="sc-cJSrbW gTYoTH"
+       className="sc-kvZOFW ueEEv"
      >
        <a
-         className="sc-kvZOFW kHNSOX"
+         className="sc-jqCOkK bCWWQD"
          href="/tokens"
          onClick={[Function]}
        >
          Create eToken
        </a>
@@ -75,17 +75,17 @@
          <a
            href="/send-token/bd1acc4c986de57af8d6d2a64aecad8c30ee80f37ae9d066d758923732ddc9ba"
            onClick={[Function]}
          >
            <div
-             className="sc-fjdhpX diqDJu"
+             className="sc-cSHVUG bDBPfD"
            >
              <div
-               className="sc-jTzLTM ktwbHO"
+               className="sc-jzJRlG kisVNa"
              >
                <div
-                 className="sc-VigVT gWYsTb"
+                 className="sc-fjdhpX irfiDO"
                />
                <h4>
                  TBS
                </h4>
              </div>
    at Object.<anonymous> (/work/web/cashtab/src/components/Home/__tests__/Home.test.js:70:18)
    at Promise.then.completed (/work/web/cashtab/node_modules/jest-circus/build/utils.js:391:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/web/cashtab/node_modules/jest-circus/build/utils.js:316:10)
    at _callCircusTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:218:40)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at _runTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:155:3)
    at _runTestsForDescribeBlock (/work/web/cashtab/node_modules/jest-circus/build/run.js:66:9)
    at run (/work/web/cashtab/node_modules/jest-circus/build/run.js:25:3)
    at runAndTransformResultsToJestFormat (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
    at jestAdapter (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
    at runTestInternal (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:389:16)
    at runTest (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:475:34)
    at Object.worker (/work/web/cashtab/node_modules/jest-runner/build/testWorker.js:133:12)
====== CashTab Unit Tests:  Without wallet defined ======
Error: expect(received).toMatchSnapshot()

Snapshot name: `Without wallet defined 1`

- Snapshot  - 9
+ Received  + 9

@@ -1,38 +1,38 @@
  Array [
    <div
-     className="sc-hzDkRC gNbvZH"
+     className="sc-dVhcbM brpysj"
    >
      <div
-       className="sc-fBuWsC gFiHLB"
+       className="sc-fAjcbJ cmsHYG"
      >
        0
         
        XEC
      </div>
    </div>,
    <div
-     className="sc-Rmtcm fuvBvM"
+     className="sc-fBuWsC jTHIvX"
    >
      <div
-       className="sc-TOsTZ gdSjQS"
+       className="sc-hmzhuo keMYNP"
      >
        <button
-         className="sc-kgAjT bjUlla"
+         className="sc-frDJqD dvoSs"
          onClick={[Function]}
        >
          Transactions
        </button>
        <button
-         className="sc-kgAjT dXxbhd"
+         className="sc-frDJqD hAXDWa"
          onClick={[Function]}
        >
          eTokens
        </button>
      </div>
      <div
-       className="sc-cJSrbW jWaSzk"
+       className="sc-kvZOFW dlkEwj"
      >
        <div />
        <span
          aria-label="party emoji"
          role="img"
@@ -55,14 +55,14 @@
         
        XEC
         to send to others
      </div>
      <div
-       className="sc-cJSrbW gTYoTH"
+       className="sc-kvZOFW ueEEv"
      >
        <a
-         className="sc-kvZOFW kHNSOX"
+         className="sc-jqCOkK bCWWQD"
          href="/tokens"
          onClick={[Function]}
        >
          Create eToken
        </a>
    at Object.<anonymous> (/work/web/cashtab/src/components/Home/__tests__/Home.test.js:88:18)
    at Promise.then.completed (/work/web/cashtab/node_modules/jest-circus/build/utils.js:391:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/work/web/cashtab/node_modules/jest-circus/build/utils.js:316:10)
    at _callCircusTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:218:40)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at _runTest (/work/web/cashtab/node_modules/jest-circus/build/run.js:155:3)
    at _runTestsForDescribeBlock (/work/web/cashtab/node_modules/jest-circus/build/run.js:66:9)
    at run (/work/web/cashtab/node_modules/jest-circus/build/run.js:25:3)
    at runAndTransformResultsToJestFormat (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
    at jestAdapter (/work/web/cashtab/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
    at runTestInternal (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:389:16)
    at runTest (/work/web/cashtab/node_modules/jest-runner/build/runTest.js:475:34)
    at Object.worker (/work/web/cashtab/node_modules/jest-runner/build/testWorker.js:133:12)

Each failure log is accessible here:
CashTab Unit Tests: Wallet without BCH balance
CashTab Unit Tests: Wallet with BCH balances
CashTab Unit Tests: Wallet with BCH balances and tokens
CashTab Unit Tests: Wallet with BCH balances and tokens and state field
CashTab Unit Tests: Without wallet defined

Update snapshots + look into adding husky to automate snapshot updating on git commit per T2439

This revision now requires changes to proceed.Jun 2 2022, 17:04

updated snapshots

Harbormaster completed remote builds in B19247: Diff 33807.Jun 3 2022, 13:23

Apply the App.js changes equally to App.js and extension/App.js
Airdrop.js should be unchanged / not in this diff
Tokens.js should be unchanged / not in this diff
Send.js should be unchanged / not in this diff
Configure.js should be unchanged / not in this diff

This revision now requires changes to proceed.Jun 3 2022, 21:36

kieran709 abandoned this revision.Jun 6 2022, 16:11

[Cashtab] Route to onboarding if not wallet present
AbandonedPublic
Actions

Details

Diff Detail

Event Timeline

Revision Contents
Changeset List

Diff 33785

web/cashtab/extension/src/components/App.js

web/cashtab/src/components/Airdrop/Airdrop.js

web/cashtab/src/components/App.js

web/cashtab/src/components/Configure/Configure.js

web/cashtab/src/components/Home/Home.js

web/cashtab/src/components/Home/tests/snapshots/Home.test.js.snap

web/cashtab/src/components/Send/Send.js

web/cashtab/src/components/Tokens/Tokens.js

[Cashtab] Route to onboarding if not wallet presentAbandonedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 33785

web/cashtab/extension/src/components/App.js

web/cashtab/src/components/Airdrop/Airdrop.js

web/cashtab/src/components/App.js

web/cashtab/src/components/Configure/Configure.js

web/cashtab/src/components/Home/Home.js

web/cashtab/src/components/Home/__tests__/__snapshots__/Home.test.js.snap

web/cashtab/src/components/Send/Send.js

web/cashtab/src/components/Tokens/Tokens.js

[Cashtab] Route to onboarding if not wallet present
AbandonedPublic
Actions

Revision Contents
Changeset List

web/cashtab/src/components/Home/tests/snapshots/Home.test.js.snap