Page MenuHomePhabricator

[Cashtab] Change wallet from dropdown menu in header
ClosedPublic

Authored by bytesofman on Mar 21 2024, 20:35.

Details

Reviewers
emack
Group Reviewers
Restricted Project
Commits
rABC793a136d26c3: [Cashtab] Change wallet from dropdown menu in header
Summary

T2871 T3224

It is inconvenient UX to require the user to go to Configure in order to change wallet. Now that wallets are better organized, we can do this with a standardized method from other screens.

Test Plan

npm test

check on test site: https://cashtab-local-dev.netlify.app/#/wallet

change wallets a lot from the dropdown, try on mobile

Diff Detail

Repository
rABC Bitcoin ABC
Branch
cashtab-wallet-select
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 27984
Build 55516: Build Diffcashtab-tests
Build 55515: arc lint + arc unit

Event Timeline

Failed tests logs:

====== CashTab Unit Tests: <Configure /> We can add, delete, rename, contacts from the Configure screen, and add a savedWallet as a contact ======
Error: Found multiple elements with the text: alpha

Here are the matching elements:

Ignored nodes: comments, script, style
<option
  class="sc-etwtAo fJzugH"
  value="alpha"
>
  alpha
</option>

Ignored nodes: comments, script, style
<h3
  class="overflow notranslate"
>
  alpha
</h3>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="ant-spin-nested-loading css-dev-only-do-not-override-1rqnfsa"
    >
      <div
        class="ant-spin-container"
      >
        <div
          class="sc-hgHYgh iyvBLw"
        >
          <div
            class="sc-bEjcJn fIGcdH"
          >
            <div
              class="sc-ePZHVD OwwaU"
            >
              <div
                class="sc-gtfDJT gaVlmd"
              >
                <div
                  class="sc-likbZx hvtQZT"
                >
                  <img
                    alt="cashtab"
                    class="sc-eKZiaR hyLbaL"
                    src="test-file-stub"
                  />
                  <div
                    class="sc-hIVACf jFFKWJ"
                  >
                    Settings
                    <svg
                      height="33px"
                      width="30px"
                    />
                  </div>
                </div>
                <div
                  class="sc-jnlKLf gzkVTu"
                  data-testid="wallet-info-ctn"
                >
                  <div
                    class="sc-fQejPQ fldMdk"
                  >
                    <select
                      class="sc-clNaTc kfDXvo"
                      id="wallets"
                      name="wallets"
                    >
                      <option
                        class="sc-etwtAo fJzugH"
                        value="Transaction Fixtures"
                      >
                        Transaction Fixtures
                      </option>
                      <option
                        class="sc-etwtAo fJzugH"
                        value="alpha"
                      >
                        alpha
                      </option>
                    </select>
                    <div>
                      <svg
                        class="sc-dnqmqq ieUNys"
                      />
                    </div>
                    <div>
                       
                      <button
                        aria-checked="true"
                        class="ant-switch ant-switch-small css-dev-only-do-not-override-1rqnfsa ant-switch-checked"
                        role="switch"
                        type="button"
                      >
                        <div
                          class="ant-switch-handle"
                        />
                        <span
                          class="ant-switch-inner"
                        >
                          <span
                            class="ant-switch-inner-checked"
                          >
                            <svg
                              class="sc-cSHVUG bgwEHu"
                            />
                          </span>
                          <span
                            class="ant-switch-inner-unchecked"
                          >
                            <svg
                              class="sc-kAzzGY fUTkYj"
                            />
                          </span>
                        </span>
                      </button>
                    </div>
                  </div>
                  <div
                    class="sc-jXQZqI jvBRkl"
                    data-testid="balance-xec"
                  >
                    9,513.12
                     
                    XEC
                     
                  </div>
                  <div
                    class="sc-iGPElx UdylC"
                    data-testid="balance-fiat"
                  >
                    $
                    0.29
                     
                    USD
                  </div>
                  <p
                    class="sc-kasBVs hHFKSo"
                    data-testid="ecash-price"
                  >
                    1 
                    XEC
                     = 
                    0.00003000
                     
                    USD
                  </p>
                </div>
              </div>
              <div
                class="sc-bbmXgH iYDljl"
                data-testid="configure-ctn"
              >
                <div
                  class="sc-ipXKqB eokMIH"
                >
                  <h2>
                    <span
                      aria-label="copy"
                      class="anticon anticon-copy sc-bwzfXH gJwWNq"
                      role="img"
                    >
                      <svg
                        aria-hidden="true"
                        data-icon="copy"
                        fill="currentColor"
                        focusable="false"
                        height="1em"
                        viewBox="64 64 896 896"
                        width="1em"
                      >
                        <path
                          d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-1...
    at waitForWrapper (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:163:27)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
    at Object.findByText (/work/cashtab/src/components/Configure/__tests__/Configure.test.js:292:29)
====== CashTab Unit Tests: <Configure /> We can rename the active wallet or a saved wallet, we can add a wallet, we can import a wallet, we can delete a wallet ======
Error: Found multiple elements with the text: alpha

Here are the matching elements:

Ignored nodes: comments, script, style
<option
  class="sc-etwtAo fJzugH"
  value="alpha"
>
  alpha
</option>

Ignored nodes: comments, script, style
<h3
  class="overflow notranslate"
>
  alpha
</h3>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
<body>
  <div
    class="ant-notification ant-notification-topRight css-dev-only-do-not-override-1rqnfsa ant-notification-stack ant-notification-stack-expanded"
    style="right: 0px; top: 24px;"
  >
    <div
      class="ant-notification-notice-wrapper"
      style="transform: translate3d(0, 0, 0);"
    >
      <div
        class="ant-notification-notice ant-notification-notice-error ant-notification-notice-closable"
      >
        <div
          class="ant-notification-notice-content"
        >
          <div
            class="ant-notification-notice-with-icon"
            role="alert"
          >
            <span
              aria-label="close-circle"
              class="anticon anticon-close-circle ant-notification-notice-icon ant-notification-notice-icon-error"
              role="img"
            >
              <svg
                aria-hidden="true"
                data-icon="close-circle"
                fill="currentColor"
                fill-rule="evenodd"
                focusable="false"
                height="1em"
                viewBox="64 64 896 896"
                width="1em"
              >
                <path
                  d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
                />
              </svg>
            </span>
            <div
              class="ant-notification-notice-message"
            >
              Error
            </div>
            <div
              class="ant-notification-notice-description"
            >
              ecash:qqxefwshnmppcsjp0fc6w7rnkdsexc7cagdus7ugd0 already exists in the Contact List
            </div>
          </div>
        </div>
        <a
          class="ant-notification-notice-close"
          tabindex="0"
        >
          <span
            class="ant-notification-notice-close-x"
          >
            <span
              aria-label="close"
              class="anticon anticon-close ant-notification-notice-close-icon"
              role="img"
            >
              <svg
                aria-hidden="true"
                data-icon="close"
                fill="currentColor"
                fill-rule="evenodd"
                focusable="false"
                height="1em"
                viewBox="64 64 896 896"
                width="1em"
              >
                <path
                  d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
                />
              </svg>
            </span>
          </span>
        </a>
      </div>
    </div>
  </div>
  <div>
    <div
      class="ant-spin-nested-loading css-dev-only-do-not-override-1rqnfsa"
    >
      <div
        class="ant-spin-container"
      >
        <div
          class="sc-hgHYgh iyvBLw"
        >
          <div
            class="sc-bEjcJn fIGcdH"
          >
            <div
              class="sc-ePZHVD OwwaU"
            >
              <div
                class="sc-gtfDJT gaVlmd"
              >
                <div
                  class="sc-likbZx hvtQZT"
                >
                  <img
                    alt="cashtab"
                    class="sc-eKZiaR hyLbaL"
                    src="test-file-stub"
                  />
                  <div
                    class="sc-hIVACf jFFKWJ"
                  >
                    Settings
                    <svg
                      height="33px"
                      width="30px"
                    />
                  </div>
                </div>
                <div
                  class="sc-jnlKLf gzkVTu"
                  data-testid="wallet-info-ctn"
                >
                  <div
                    class="sc-fQejPQ fldMdk"
                  >
                    <select
                      class="sc-clNaTc kfDXvo"
                      id="wallets"
                      name="wallets"
                    >
                      <option[...
    at waitForWrapper (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:163:27)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
    at Object.findByText (/work/cashtab/src/components/Configure/__tests__/Configure.test.js:358:29)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at processTimers (node:internal/timers:511:9)

Each failure log is accessible here:
CashTab Unit Tests: <Configure /> We can add, delete, rename, contacts from the Configure screen, and add a savedWallet as a contact
CashTab Unit Tests: <Configure /> We can rename the active wallet or a saved wallet, we can add a wallet, we can import a wallet, we can delete a wallet

Failed tests logs:

====== CashTab Unit Tests: <Configure /> We can add, delete, rename, contacts from the Configure screen, and add a savedWallet as a contact ======
Error: Found multiple elements with the text: alpha

Here are the matching elements:

Ignored nodes: comments, script, style
<option
  class="sc-etwtAo jFWdUM"
  value="alpha"
>
  alpha
</option>

Ignored nodes: comments, script, style
<h3
  class="overflow notranslate"
>
  alpha
</h3>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="ant-spin-nested-loading css-dev-only-do-not-override-1rqnfsa"
    >
      <div
        class="ant-spin-container"
      >
        <div
          class="sc-hgHYgh iyvBLw"
        >
          <div
            class="sc-bEjcJn fIGcdH"
          >
            <div
              class="sc-ePZHVD OwwaU"
            >
              <div
                class="sc-gtfDJT gaVlmd"
              >
                <div
                  class="sc-likbZx hvtQZT"
                >
                  <img
                    alt="cashtab"
                    class="sc-eKZiaR hyLbaL"
                    src="test-file-stub"
                  />
                  <div
                    class="sc-hIVACf jFFKWJ"
                  >
                    Settings
                    <svg
                      height="33px"
                      width="30px"
                    />
                  </div>
                </div>
                <div
                  class="sc-jnlKLf gzkVTu"
                  data-testid="wallet-info-ctn"
                >
                  <div
                    class="sc-fQejPQ gzZRCu"
                  >
                    <select
                      class="sc-clNaTc ePsDgS"
                      id="wallets"
                      name="wallets"
                    >
                      <option
                        class="sc-etwtAo jFWdUM"
                        value="Transaction Fixtures"
                      >
                        Transaction Fixtures
                      </option>
                      <option
                        class="sc-etwtAo jFWdUM"
                        value="alpha"
                      >
                        alpha
                      </option>
                    </select>
                    <div>
                      <svg
                        class="sc-dnqmqq ieUNys"
                        style="margin-top: 8px;"
                      />
                    </div>
                    <button
                      aria-checked="true"
                      class="ant-switch ant-switch-small css-dev-only-do-not-override-1rqnfsa ant-switch-checked"
                      role="switch"
                      type="button"
                    >
                      <div
                        class="ant-switch-handle"
                      />
                      <span
                        class="ant-switch-inner"
                      >
                        <span
                          class="ant-switch-inner-checked"
                        >
                          <svg
                            class="sc-cSHVUG bgwEHu"
                          />
                        </span>
                        <span
                          class="ant-switch-inner-unchecked"
                        >
                          <svg
                            class="sc-kAzzGY fUTkYj"
                          />
                        </span>
                      </span>
                    </button>
                  </div>
                  <div
                    class="sc-jXQZqI jvBRkl"
                    data-testid="balance-xec"
                  >
                    9,513.12
                     
                    XEC
                     
                  </div>
                  <div
                    class="sc-iGPElx UdylC"
                    data-testid="balance-fiat"
                  >
                    $
                    0.29
                     
                    USD
                  </div>
                  <p
                    class="sc-kasBVs hHFKSo"
                    data-testid="ecash-price"
                  >
                    1 
                    XEC
                     = 
                    0.00003000
                     
                    USD
                  </p>
                </div>
              </div>
              <div
                class="sc-bbmXgH iYDljl"
                data-testid="configure-ctn"
              >
                <div
                  class="sc-ipXKqB eokMIH"
                >
                  <h2>
                    <span
                      aria-label="copy"
                      class="anticon anticon-copy sc-bwzfXH gJwWNq"
                      role="img"
                    >
                      <svg
                        aria-hidden="true"
                        data-icon="copy"
                        fill="currentColor"
                        focusable="false"
                        height="1em"
                        viewBox="64 64 896 896"
                        width="1em"
                      >
                        <path
                          d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173...
    at waitForWrapper (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:163:27)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
    at Object.findByText (/work/cashtab/src/components/Configure/__tests__/Configure.test.js:292:29)
====== CashTab Unit Tests: <Configure /> We can rename the active wallet or a saved wallet, we can add a wallet, we can import a wallet, we can delete a wallet ======
Error: Found multiple elements with the text: alpha

Here are the matching elements:

Ignored nodes: comments, script, style
<option
  class="sc-etwtAo jFWdUM"
  value="alpha"
>
  alpha
</option>

Ignored nodes: comments, script, style
<h3
  class="overflow notranslate"
>
  alpha
</h3>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
<body>
  <div
    class="ant-notification ant-notification-topRight css-dev-only-do-not-override-1rqnfsa ant-notification-stack ant-notification-stack-expanded"
    style="right: 0px; top: 24px;"
  >
    <div
      class="ant-notification-notice-wrapper"
      style="transform: translate3d(0, 0, 0);"
    >
      <div
        class="ant-notification-notice ant-notification-notice-error ant-notification-notice-closable"
      >
        <div
          class="ant-notification-notice-content"
        >
          <div
            class="ant-notification-notice-with-icon"
            role="alert"
          >
            <span
              aria-label="close-circle"
              class="anticon anticon-close-circle ant-notification-notice-icon ant-notification-notice-icon-error"
              role="img"
            >
              <svg
                aria-hidden="true"
                data-icon="close-circle"
                fill="currentColor"
                fill-rule="evenodd"
                focusable="false"
                height="1em"
                viewBox="64 64 896 896"
                width="1em"
              >
                <path
                  d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
                />
              </svg>
            </span>
            <div
              class="ant-notification-notice-message"
            >
              Error
            </div>
            <div
              class="ant-notification-notice-description"
            >
              ecash:qqxefwshnmppcsjp0fc6w7rnkdsexc7cagdus7ugd0 already exists in the Contact List
            </div>
          </div>
        </div>
        <a
          class="ant-notification-notice-close"
          tabindex="0"
        >
          <span
            class="ant-notification-notice-close-x"
          >
            <span
              aria-label="close"
              class="anticon anticon-close ant-notification-notice-close-icon"
              role="img"
            >
              <svg
                aria-hidden="true"
                data-icon="close"
                fill="currentColor"
                fill-rule="evenodd"
                focusable="false"
                height="1em"
                viewBox="64 64 896 896"
                width="1em"
              >
                <path
                  d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
                />
              </svg>
            </span>
          </span>
        </a>
      </div>
    </div>
  </div>
  <div>
    <div
      class="ant-spin-nested-loading css-dev-only-do-not-override-1rqnfsa"
    >
      <div
        class="ant-spin-container"
      >
        <div
          class="sc-hgHYgh iyvBLw"
        >
          <div
            class="sc-bEjcJn fIGcdH"
          >
            <div
              class="sc-ePZHVD OwwaU"
            >
              <div
                class="sc-gtfDJT gaVlmd"
              >
                <div
                  class="sc-likbZx hvtQZT"
                >
                  <img
                    alt="cashtab"
                    class="sc-eKZiaR hyLbaL"
                    src="test-file-stub"
                  />
                  <div
                    class="sc-hIVACf jFFKWJ"
                  >
                    Settings
                    <svg
                      height="33px"
                      width="30px"
                    />
                  </div>
                </div>
                <div
                  class="sc-jnlKLf gzkVTu"
                  data-testid="wallet-info-ctn"
                >
                  <div
                    class="sc-fQejPQ gzZRCu"
                  >
                    <select
                      class="sc-clNaTc ePsDgS"
                      id="wallets"
                      name="wallets"
                    >
                      <option[...
    at waitForWrapper (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:163:27)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
    at Object.findByText (/work/cashtab/src/components/Configure/__tests__/Configure.test.js:358:29)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at processTimers (node:internal/timers:511:9)

Each failure log is accessible here:
CashTab Unit Tests: <Configure /> We can add, delete, rename, contacts from the Configure screen, and add a savedWallet as a contact
CashTab Unit Tests: <Configure /> We can rename the active wallet or a saved wallet, we can add a wallet, we can import a wallet, we can delete a wallet

Failed tests logs:

====== CashTab Unit Tests: <Configure /> We can add, delete, rename, contacts from the Configure screen, and add a savedWallet as a contact ======
Error: Found multiple elements with the text: alpha

Here are the matching elements:

Ignored nodes: comments, script, style
<option
  class="sc-etwtAo jFWdUM"
  value="alpha"
>
  alpha
</option>

Ignored nodes: comments, script, style
<h3
  class="overflow notranslate"
>
  alpha
</h3>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="ant-spin-nested-loading css-dev-only-do-not-override-1rqnfsa"
    >
      <div
        class="ant-spin-container"
      >
        <div
          class="sc-hgHYgh iyvBLw"
        >
          <div
            class="sc-bEjcJn fIGcdH"
          >
            <div
              class="sc-ePZHVD OwwaU"
            >
              <div
                class="sc-gtfDJT gaVlmd"
              >
                <div
                  class="sc-likbZx hvtQZT"
                >
                  <img
                    alt="cashtab"
                    class="sc-eKZiaR hyLbaL"
                    src="test-file-stub"
                  />
                  <div
                    class="sc-hIVACf jFFKWJ"
                  >
                    Settings
                    <svg
                      height="33px"
                      width="30px"
                    />
                  </div>
                </div>
                <div
                  class="sc-jnlKLf gzkVTu"
                  data-testid="wallet-info-ctn"
                >
                  <div
                    class="sc-fQejPQ gzZRCu"
                  >
                    <select
                      class="sc-clNaTc jTadrZ"
                      id="wallets"
                      name="wallets"
                    >
                      <option
                        class="sc-etwtAo jFWdUM"
                        value="Transaction Fixtures"
                      >
                        Transaction Fixtures
                      </option>
                      <option
                        class="sc-etwtAo jFWdUM"
                        value="alpha"
                      >
                        alpha
                      </option>
                    </select>
                    <div>
                      <svg
                        class="sc-dnqmqq ieUNys"
                        style="margin-top: 8px;"
                      />
                    </div>
                    <button
                      aria-checked="true"
                      class="ant-switch ant-switch-small css-dev-only-do-not-override-1rqnfsa ant-switch-checked"
                      role="switch"
                      type="button"
                    >
                      <div
                        class="ant-switch-handle"
                      />
                      <span
                        class="ant-switch-inner"
                      >
                        <span
                          class="ant-switch-inner-checked"
                        >
                          <svg
                            class="sc-cSHVUG bgwEHu"
                          />
                        </span>
                        <span
                          class="ant-switch-inner-unchecked"
                        >
                          <svg
                            class="sc-kAzzGY fUTkYj"
                          />
                        </span>
                      </span>
                    </button>
                  </div>
                  <div
                    class="sc-jXQZqI jvBRkl"
                    data-testid="balance-xec"
                  >
                    9,513.12
                     
                    XEC
                     
                  </div>
                  <div
                    class="sc-iGPElx UdylC"
                    data-testid="balance-fiat"
                  >
                    $
                    0.29
                     
                    USD
                  </div>
                  <p
                    class="sc-kasBVs hHFKSo"
                    data-testid="ecash-price"
                  >
                    1 
                    XEC
                     = 
                    0.00003000
                     
                    USD
                  </p>
                </div>
              </div>
              <div
                class="sc-bbmXgH iYDljl"
                data-testid="configure-ctn"
              >
                <div
                  class="sc-ipXKqB eokMIH"
                >
                  <h2>
                    <span
                      aria-label="copy"
                      class="anticon anticon-copy sc-bwzfXH gJwWNq"
                      role="img"
                    >
                      <svg
                        aria-hidden="true"
                        data-icon="copy"
                        fill="currentColor"
                        focusable="false"
                        height="1em"
                        viewBox="64 64 896 896"
                        width="1em"
                      >
                        <path
                          d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173...
    at waitForWrapper (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:163:27)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
    at Object.findByText (/work/cashtab/src/components/Configure/__tests__/Configure.test.js:292:29)
====== CashTab Unit Tests: <Configure /> We can rename the active wallet or a saved wallet, we can add a wallet, we can import a wallet, we can delete a wallet ======
Error: Found multiple elements with the text: alpha

Here are the matching elements:

Ignored nodes: comments, script, style
<option
  class="sc-etwtAo jFWdUM"
  value="alpha"
>
  alpha
</option>

Ignored nodes: comments, script, style
<h3
  class="overflow notranslate"
>
  alpha
</h3>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
<body>
  <div
    class="ant-notification ant-notification-topRight css-dev-only-do-not-override-1rqnfsa ant-notification-stack ant-notification-stack-expanded"
    style="right: 0px; top: 24px;"
  >
    <div
      class="ant-notification-notice-wrapper"
      style="transform: translate3d(0, 0, 0);"
    >
      <div
        class="ant-notification-notice ant-notification-notice-error ant-notification-notice-closable"
      >
        <div
          class="ant-notification-notice-content"
        >
          <div
            class="ant-notification-notice-with-icon"
            role="alert"
          >
            <span
              aria-label="close-circle"
              class="anticon anticon-close-circle ant-notification-notice-icon ant-notification-notice-icon-error"
              role="img"
            >
              <svg
                aria-hidden="true"
                data-icon="close-circle"
                fill="currentColor"
                fill-rule="evenodd"
                focusable="false"
                height="1em"
                viewBox="64 64 896 896"
                width="1em"
              >
                <path
                  d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
                />
              </svg>
            </span>
            <div
              class="ant-notification-notice-message"
            >
              Error
            </div>
            <div
              class="ant-notification-notice-description"
            >
              ecash:qqxefwshnmppcsjp0fc6w7rnkdsexc7cagdus7ugd0 already exists in the Contact List
            </div>
          </div>
        </div>
        <a
          class="ant-notification-notice-close"
          tabindex="0"
        >
          <span
            class="ant-notification-notice-close-x"
          >
            <span
              aria-label="close"
              class="anticon anticon-close ant-notification-notice-close-icon"
              role="img"
            >
              <svg
                aria-hidden="true"
                data-icon="close"
                fill="currentColor"
                fill-rule="evenodd"
                focusable="false"
                height="1em"
                viewBox="64 64 896 896"
                width="1em"
              >
                <path
                  d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
                />
              </svg>
            </span>
          </span>
        </a>
      </div>
    </div>
  </div>
  <div>
    <div
      class="ant-spin-nested-loading css-dev-only-do-not-override-1rqnfsa"
    >
      <div
        class="ant-spin-container"
      >
        <div
          class="sc-hgHYgh iyvBLw"
        >
          <div
            class="sc-bEjcJn fIGcdH"
          >
            <div
              class="sc-ePZHVD OwwaU"
            >
              <div
                class="sc-gtfDJT gaVlmd"
              >
                <div
                  class="sc-likbZx hvtQZT"
                >
                  <img
                    alt="cashtab"
                    class="sc-eKZiaR hyLbaL"
                    src="test-file-stub"
                  />
                  <div
                    class="sc-hIVACf jFFKWJ"
                  >
                    Settings
                    <svg
                      height="33px"
                      width="30px"
                    />
                  </div>
                </div>
                <div
                  class="sc-jnlKLf gzkVTu"
                  data-testid="wallet-info-ctn"
                >
                  <div
                    class="sc-fQejPQ gzZRCu"
                  >
                    <select
                      class="sc-clNaTc jTadrZ"
                      id="wallets"
                      name="wallets"
                    >
                      <option[...
    at waitForWrapper (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:163:27)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
    at Object.findByText (/work/cashtab/src/components/Configure/__tests__/Configure.test.js:358:29)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at processTimers (node:internal/timers:511:9)

Each failure log is accessible here:
CashTab Unit Tests: <Configure /> We can add, delete, rename, contacts from the Configure screen, and add a savedWallet as a contact
CashTab Unit Tests: <Configure /> We can rename the active wallet or a saved wallet, we can add a wallet, we can import a wallet, we can delete a wallet

bytesofman edited the test plan for this revision. (Show Details)
bytesofman added inline comments.
cashtab/src/components/Common/WalletLabel.js
24 ↗(On Diff #46374)

Want a way to make the select box wider when wallet has a longer name, shorter when it has a shorter name. inexact as characters do not all have the same pxl width in non-monospace fonts. Tested over a wide range of wallets. Have a min and max width to even things out.

cashtab/src/components/Configure/__tests__/Configure.test.js
292 ↗(On Diff #46374)

now we see savedWallets in both the saved wallets collapse and the header select menu

cashtab/src/wallet/index.js
204 ↗(On Diff #46374)

We used to do this only on the Configure screen. Now, we want to do basically the same thing from another screen. So, pull out the logic, unit test it, apply it in both places. Ensure Configure integration tests still pass with the new function.

emack requested changes to this revision.Mar 22 2024, 14:09
emack added a subscriber: emack.

Tested all ok but it looks really out of place with the thick border

image.png (200×290 px, 12 KB)

Can you make it look consistent with existing dropdown styles? (arrow on left, non-bolded fonts, white font color...etc)

image.png (55×257 px, 1 KB)

This revision now requires changes to proceed.Mar 22 2024, 14:09

Tested all ok but it looks really out of place with the thick border

image.png (200×290 px, 12 KB)

Can you make it look consistent with existing dropdown styles? (arrow on left, non-bolded fonts, white font color...etc)

image.png (55×257 px, 1 KB)

Improved. Not gonna move the arrow to the other side, though.

Doing a full-custom select menu style would be nice, but imo mobile is the main use case and the user's browser does a better job of mobile select menu (usually a popup) then I will be able to accomplish.

There's a good deal of internet lore about the difficulties in creating custom styled select menus. There is a good library for this, react-select, but imo it is overkill and we do not want to add any libraries unless we need it.

This revision is now accepted and ready to land.Mar 22 2024, 23:49