Page MenuHomePhabricator

[Cashtab] Route to onboarding if not wallet present
AbandonedPublic

Authored by kieran709 on May 26 2022, 23:22.

Details

Reviewers
bytesofman
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 Diffcashtab-tests
Build 38209: arc lint + arc unit

Event Timeline

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
kieran709 edited the summary of this revision. (Show Details)

Responded to review feedback + updated snapshots

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

Responding to review feedback

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.

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

bytesofman requested changes to this revision.Jun 2 2022, 17:04

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
bytesofman requested changes to this revision.Jun 3 2022, 21:36
  • 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