Page MenuHomePhabricator

[Cashtab] Deprecate the rest of antd
ClosedPublic

Authored by bytesofman on Wed, Apr 10, 20:51.

Details

Reviewers
emack
Group Reviewers
Restricted Project
Commits
rABC02b9f021a132: [Cashtab] Deprecate the rest of antd
Summary

T2207

Remove last antd stuff

Bundle is now just under 705kb, which is a good improvement (we were over 1mb for awhile). Will keep picking away at it.

Summary

  • All icons are now imported image files
  • We have our own spinner
  • Improve appearance of Wallets and Contacts screens
  • Remove antd-related global styles
  • Add global link style as antd was impacting those
Test Plan

npm test

This diff is live at https://cashtab-local-dev.netlify.app/

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

flex improvements to wallets and contacts, global link styling

Failed tests logs:

====== CashTab Unit Tests: <Contacts /> We can add, delete, rename, contacts from the Configure screen, and add a savedWallet as a contact ======
TestingLibraryElementError: Unable to find an element with the text: qp8...gg6. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="sc-cjHlYL csXHjT"
    >
      <div
        class="Toastify"
      />
      <div
        class="sc-eLdqWK FSffr"
      >
        <div
          class="sc-hgRTRy hfJVJn"
        >
          <div
            class="sc-fEUNkw dUIjTr"
          >
            <div
              class="sc-iIHSe ijsUPF"
            >
              <img
                alt="cashtab"
                class="sc-gldTML dCAkhn"
                src="test-file-stub"
              />
              <div
                class="sc-ccSCjj dEpIbM"
              >
                Contacts
                <svg
                  title="Contact List"
                />
              </div>
            </div>
            <div
              class="sc-kGXeez ffbvlD"
              data-testid="wallet-info-ctn"
            >
              <div
                class="sc-iNhVCk jJzVRM"
              >
                <select
                  class="sc-bfYoXt eolKkN"
                  id="wallets"
                  name="wallets"
                >
                  <option
                    class="sc-gbOuXE fAfAik"
                    value="Transaction Fixtures"
                  >
                    Transaction Fixtures
                  </option>
                  <option
                    class="sc-gbOuXE fAfAik"
                    value="alpha"
                  >
                    alpha
                  </option>
                </select>
                <div
                  class="sc-eAKXzc iCtURi"
                >
                  <div
                    class="sc-jbKcbu dBesSi"
                  >
                    <svg
                      title="copy-paste"
                    />
                  </div>
                  <div
                    class="sc-daURTG cFYicl"
                  >
                    <div
                      class="sc-bXGyLb erYzRo"
                    >
                      <input
                        checked=""
                        class="sc-krvtoX jmGpwv"
                        data-testid="show-hide-balance"
                        id="show-hide-balance"
                        name="show-hide-balance"
                        type="checkbox"
                      />
                      <label
                        class="sc-lkqHmb eIJMVN"
                        for="show-hide-balance"
                      >
                        <span
                          class="sc-eLExRp jHVKVy"
                          data-off=""
                          data-on=""
                        />
                        <span
                          class="sc-cbkKFq cVAbHw"
                        />
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="sc-dRFtgE fzmVpI"
                data-testid="balance-xec"
              >
                9,513.12
                 
                XEC
                 
              </div>
            </div>
          </div>
          <div
            class="sc-iiUIRa fsdRDC"
          >
            <div
              class="sc-gmeYpB cmtFrq"
              data-testid="contacts"
            >
              <div
                class="sc-kZmsYB chwaZE"
              >
                <div
                  class="sc-RcBXQ iBuIJe"
                >
                  <div
                    class="sc-iSDuPN jSstFp"
                  >
                    alpha
                  </div>
                  <div
                    class="sc-fZwumE iOEaHn"
                  >
                    <div
                      class="sc-jbKcbu dBesSi"
                    >
                      <svg
                        title="copy-paste"
                      />
                    </div>
                    <svg
                      class="sc-bxivhb KJENA"
                      data-testid="rename-contact-btn"
                    />
                    <a
                      data-testid="send-to-contact"
                      href="/send"
                    >
                      <svg
                        class="sc-bdVaJa bMgoKo"
                      />
                    </a>
                    <svg
                      class="sc-ifAKCX kwxiiW"
                      data-testid="delete-contact-btn"
                    />
                  </div>
                </div>
                <div
                  class="sc-RcBXQ iBuIJe"
                >
                  <div
                    class="sc-iSDuPN jSstFp"
                  >
                    beta
                  </div>
                  <div
                    class="sc-fZwumE iOEaHn"
                  >
                    <div
                      class="sc-jbKcbu dBesSi"
                    >
                      <svg
                        title="copy-paste"
                      />
                    </div>
                    <svg
                      class="sc-bxivhb KJENA"
                      data-testid="rename-contact-btn"
                    />
                    <a
                      data-testid="send-to-contact"
                      href="/send"
                    >
                      <svg
                        class="sc-bdVaJa bMgoKo"
                      />
                    </a>
                    <svg
                      class="sc-ifAKCX kwxiiW"
                      data-testid="delete-contact-btn"
                    />
                  </div>
                </div>
                <div
                  class="sc-RcBXQ iBuIJe"
                >
                  <div
                    class="sc-iSDuPN jSstFp"
                  >
                    gamma
                  </div>
                  <div
                    class="sc-fZwumE iOEaHn"
                  >
                    <div
                      class="sc-jbKcbu dBesSi"
                    >
                      <svg
                        title="copy-paste"
                      />
                    </div>
                    <svg
                      class="sc-bxivhb KJENA"
                      data-testid="rename-contact-btn"
                    />
                    <a
                      data-testid="send-to-contact"
                      href="/send"
                    >
                      <svg
                        class="sc-bdVaJa bMgoKo"
                      />
                    </a>
                    <svg
                      class="sc-ifAKCX kwxiiW"
                      data-testid="delete-contact-btn"
                    />
                  </div>
                </div>
              </div>
              <div
                class="sc-RcBXQ iBuIJe"
              >
                <button
                  class="sc-bAeIUo sc-GMQeP cOBybS"
                  data-testid="add-contact-btn"
                >
                  Add Contact
                </button>
              </div>
              <div
                class="sc-RcBXQ iBuIJe"
              >
                <button
                  class="sc-bAeIUo sc-cQFLBn dwjKId"
                >
                  Export
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="sc-dRaagA cwnEOv"
        >
          <button
            class="sc-ejGVNB fZkTYA"
          >
            <svg />
          </button>
          <button
            class="sc-ejGVNB fZkTYA"
            data-testid="nav-btn-send"
          >
            <div
              class="sc-VigVT kxwzis"
            >
              <svg
                title="tx-sent"
              />
            </div>
          </button>
          <button
            class="sc-ejGVNB fZkTYA"
            data-testid="nav-btn-etokens"
          >
            <svg
              title="Tokens"
            />
          </button>
          <button
            class="sc-ejGVNB fZkTYA"
            data-testid="nav-btn-receive"
          >
            <svg
              title="tx-received"
            />
          </button>
          <div
            class="sc-dREXXX eNnjJV"
            data-testid="hamburger"
          >
            <span
              class="sc-kcbnda hmkXDf"
            />
            <div
              class="sc-hcmgZB cREmMo"
              data-testid="hamburger-menu"
            >
              <button
                class="sc-dHmInP dItJqX"
                data-testid="nav-btn-backup"
              >
                 
                <p>
                  Wallet Backup
                </p>
                <svg
                  title="wallet"
                />
              </button>
              <button
                class="sc-dHmInP dItJqX"
                data-testid="nav-btn-wallets"
              >
                 
                <p>
                  Wallets
                </p>
                <svg
                  title="wallets"
                />
              </button>
              <button
                class="sc-dHmInP hAVarU"
                data-testid="nav-btn-contacts"
              >
                 
                <p>
                  Contacts
                </p>
                <svg
                  title="Contact List"
                />
              </button>
              <button
                class="sc-dHmInP dItJqX"
                data-testid="nav-btn-airdrop"
              >
                 
                <p>
                  Airdrop
                </p>
                <svg
                  title="tx-airdrop"
                />
              </button>
              <button
                class="sc-dHmInP dItJqX"
                data-testid="nav-btn-swap"
              >
                 
                <p>
                  Swap
                </p>
                <svg
                  title="swap"
                />
              </button>
              <button
                class="sc-dHmInP dItJqX"
                data-testid="nav-btn-signverifymsg"
              >
                <p>
                  Sign & Verify
                </p>
                <svg
                  class="sc-EHOje fmKfyy"
                />
              </button>
              <button
                class="sc-dHmInP dItJqX"
                data-testid="nav-btn-configure"
              >
                <p>
                  Settings
                </p>
                <svg
                  title="settings"
                />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
    at Object.getElementError (/work/cashtab/node_modules/@testing-library/dom/dist/config.js:37:19)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
    at Object.getByText (/work/cashtab/src/components/Contacts/__tests__/index.test.js:128:20)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at processTimers (node:internal/timers:514:7)

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

Failed tests logs:

====== CashTab Unit Tests: <Contacts /> We can add, delete, rename, contacts from the Configure screen, and add a savedWallet as a contact ======
TestingLibraryElementError: Unable to find an element with the text: qp8...gg6. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="sc-cjHlYL csXHjT"
    >
      <div
        class="Toastify"
      />
      <div
        class="sc-eLdqWK FSffr"
      >
        <div
          class="sc-hgRTRy hfJVJn"
        >
          <div
            class="sc-fEUNkw dUIjTr"
          >
            <div
              class="sc-iIHSe ijsUPF"
            >
              <img
                alt="cashtab"
                class="sc-gldTML dCAkhn"
                src="test-file-stub"
              />
              <div
                class="sc-ccSCjj dEpIbM"
              >
                Contacts
                <svg
                  title="Contact List"
                />
              </div>
            </div>
            <div
              class="sc-kGXeez ffbvlD"
              data-testid="wallet-info-ctn"
            >
              <div
                class="sc-iNhVCk jJzVRM"
              >
                <select
                  class="sc-bfYoXt eolKkN"
                  id="wallets"
                  name="wallets"
                >
                  <option
                    class="sc-gbOuXE fAfAik"
                    value="Transaction Fixtures"
                  >
                    Transaction Fixtures
                  </option>
                  <option
                    class="sc-gbOuXE fAfAik"
                    value="alpha"
                  >
                    alpha
                  </option>
                </select>
                <div
                  class="sc-eAKXzc iCtURi"
                >
                  <div
                    class="sc-jbKcbu dBesSi"
                  >
                    <svg
                      title="copy-paste"
                    />
                  </div>
                  <div
                    class="sc-daURTG cFYicl"
                  >
                    <div
                      class="sc-bXGyLb erYzRo"
                    >
                      <input
                        checked=""
                        class="sc-krvtoX jmGpwv"
                        data-testid="show-hide-balance"
                        id="show-hide-balance"
                        name="show-hide-balance"
                        type="checkbox"
                      />
                      <label
                        class="sc-lkqHmb eIJMVN"
                        for="show-hide-balance"
                      >
                        <span
                          class="sc-eLExRp jHVKVy"
                          data-off=""
                          data-on=""
                        />
                        <span
                          class="sc-cbkKFq cVAbHw"
                        />
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="sc-dRFtgE fzmVpI"
                data-testid="balance-xec"
              >
                9,513.12
                 
                XEC
                 
              </div>
            </div>
          </div>
          <div
            class="sc-iiUIRa fsdRDC"
          >
            <div
              class="sc-gmeYpB cmtFrq"
              data-testid="contacts"
            >
              <div
                class="sc-kZmsYB chwaZE"
              >
                <div
                  class="sc-RcBXQ iBuIJe"
                >
                  <div
                    class="sc-iSDuPN jSstFp"
                  >
                    alpha
                  </div>
                  <div
                    class="sc-fZwumE iOEaHn"
                  >
                    <div
                      class="sc-jbKcbu dBesSi"
                    >
                      <svg
                        title="copy-paste"
                      />
                    </div>
                    <svg
                      class="sc-bxivhb KJENA"
                      data-testid="rename-contact-btn"
                    />
                    <a
                      data-testid="send-to-contact"
                      href="/send"
                    >
                      <svg
                        class="sc-bdVaJa bMgoKo"
                      />
                    </a>
                    <svg
                      class="sc-ifAKCX kwxiiW"
                      data-testid="delete-contact-btn"
                    />
                  </div>
                </div>
                <div
                  class="sc-RcBXQ iBuIJe"
                >
                  <div
                    class="sc-iSDuPN jSstFp"
                  >
                    beta
                  </div>
                  <div
                    class="sc-fZwumE iOEaHn"
                  >
                    <div
                      class="sc-jbKcbu dBesSi"
                    >
                      <svg
                        title="copy-paste"
                      />
                    </div>
                    <svg
                      class="sc-bxivhb KJENA"
                      data-testid="rename-contact-btn"
                    />
                    <a
                      data-testid="send-to-contact"
                      href="/send"
                    >
                      <svg
                        class="sc-bdVaJa bMgoKo"
                      />
                    </a>
                    <svg
                      class="sc-ifAKCX kwxiiW"
                      data-testid="delete-contact-btn"
                    />
                  </div>
                </div>
                <div
                  class="sc-RcBXQ iBuIJe"
                >
                  <div
                    class="sc-iSDuPN jSstFp"
                  >
                    gamma
                  </div>
                  <div
                    class="sc-fZwumE iOEaHn"
                  >
                    <div
                      class="sc-jbKcbu dBesSi"
                    >
                      <svg
                        title="copy-paste"
                      />
                    </div>
                    <svg
                      class="sc-bxivhb KJENA"
                      data-testid="rename-contact-btn"
                    />
                    <a
                      data-testid="send-to-contact"
                      href="/send"
                    >
                      <svg
                        class="sc-bdVaJa bMgoKo"
                      />
                    </a>
                    <svg
                      class="sc-ifAKCX kwxiiW"
                      data-testid="delete-contact-btn"
                    />
                  </div>
                </div>
              </div>
              <div
                class="sc-RcBXQ iBuIJe"
              >
                <button
                  class="sc-bAeIUo sc-GMQeP cOBybS"
                  data-testid="add-contact-btn"
                >
                  Add Contact
                </button>
              </div>
              <div
                class="sc-RcBXQ iBuIJe"
              >
                <button
                  class="sc-bAeIUo sc-cQFLBn dwjKId"
                >
                  Export
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="sc-dRaagA cwnEOv"
        >
          <button
            class="sc-ejGVNB fZkTYA"
          >
            <svg />
          </button>
          <button
            class="sc-ejGVNB fZkTYA"
            data-testid="nav-btn-send"
          >
            <div
              class="sc-VigVT kxwzis"
            >
              <svg
                title="tx-sent"
              />
            </div>
          </button>
          <button
            class="sc-ejGVNB fZkTYA"
            data-testid="nav-btn-etokens"
          >
            <svg
              title="Tokens"
            />
          </button>
          <button
            class="sc-ejGVNB fZkTYA"
            data-testid="nav-btn-receive"
          >
            <svg
              title="tx-received"
            />
          </button>
          <div
            class="sc-dREXXX eNnjJV"
            data-testid="hamburger"
          >
            <span
              class="sc-kcbnda hmkXDf"
            />
            <div
              class="sc-hcmgZB cREmMo"
              data-testid="hamburger-menu"
            >
              <button
                class="sc-dHmInP dItJqX"
                data-testid="nav-btn-backup"
              >
                 
                <p>
                  Wallet Backup
                </p>
                <svg
                  title="wallet"
                />
              </button>
              <button
                class="sc-dHmInP dItJqX"
                data-testid="nav-btn-wallets"
              >
                 
                <p>
                  Wallets
                </p>
                <svg
                  title="wallets"
                />
              </button>
              <button
                class="sc-dHmInP hAVarU"
                data-testid="nav-btn-contacts"
              >
                 
                <p>
                  Contacts
                </p>
                <svg
                  title="Contact List"
                />
              </button>
              <button
                class="sc-dHmInP dItJqX"
                data-testid="nav-btn-airdrop"
              >
                 
                <p>
                  Airdrop
                </p>
                <svg
                  title="tx-airdrop"
                />
              </button>
              <button
                class="sc-dHmInP dItJqX"
                data-testid="nav-btn-swap"
              >
                 
                <p>
                  Swap
                </p>
                <svg
                  title="swap"
                />
              </button>
              <button
                class="sc-dHmInP dItJqX"
                data-testid="nav-btn-signverifymsg"
              >
                <p>
                  Sign & Verify
                </p>
                <svg
                  class="sc-EHOje fmKfyy"
                />
              </button>
              <button
                class="sc-dHmInP dItJqX"
                data-testid="nav-btn-configure"
              >
                <p>
                  Settings
                </p>
                <svg
                  title="settings"
                />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
    at Object.getElementError (/work/cashtab/node_modules/@testing-library/dom/dist/config.js:37:19)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
    at Object.getByText (/work/cashtab/src/components/Contacts/__tests__/index.test.js:128:20)

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

rebase, update separator color to match tx history

emack requested changes to this revision.Thu, Apr 11, 00:47
emack added a subscriber: emack.
emack added inline comments.
cashtab/src/components/Airdrop/Airdrop.js
456 ↗(On Diff #47018)

Giant copy icon

image.png (562×554 px, 78 KB)

cashtab/src/components/Alias/Alias.js
570 ↗(On Diff #47018)

You're not replacing this icon? WIthout it, it kind of looks very similar to an empty "Registered Alias" or "Pending Alias" block beneath it. You can just re-use the same avatar icon used for the hamburger menu.

cashtab/src/components/App/App.js
489–515 ↗(On Diff #47018)

Needs a bit of adjustment here

image.png (94×569 px, 8 KB)

cashtab/src/components/Contacts/index.js
343 ↗(On Diff #47018)

Don't think you need the horizonal separators for buttons

image.png (247×565 px, 40 KB)

cashtab/src/components/Send/SendToken.js
732–737 ↗(On Diff #47018)

I know it's a nice looking icon but no need to be this big

image.png (565×543 px, 46 KB)

On a related note, would it be overkill to check the icon dimensions in the integration tests?

cashtab/src/components/Wallets/index.js
394 ↗(On Diff #47018)

Now that saved wallets are rendered across two rows you can expand the balanceSats and add XEC to the end of the balance string.

image.png (342×490 px, 20 KB)

This revision now requires changes to proceed.Thu, Apr 11, 00:47
bytesofman marked 6 inline comments as done.

remove giant icons, show XEC after wallet balance, no separators between buttons, better size and spacing for nav buttons

cashtab/src/components/Alias/Alias.js
570 ↗(On Diff #47018)

This icon was used as part of a button name. imo we either have icons on all the buttons or none of the buttons.

right now, the standard is "none of the buttons."

cashtab/src/components/App/App.js
489–515 ↗(On Diff #47018)

Made the icons a little bigger and added a custom padding for the Send icon, which just happens to not line up well due to its shape and rotation.

cashtab/src/components/Send/SendToken.js
732–737 ↗(On Diff #47018)

would it be overkill to check the icon dimensions in the integration tests?

imo yes. it's a solution but to the wrong problem.

The real problem is that we do not have a standardized size for all icons across Cashtab.

we have gotten rid of antd after this diff, but still more work to do on this front.

  • Icons should have standardized dimensions (or a standard range, e.g. small/medium/large)
  • All colors should be from theme
  • Theme shape and params should actually make sense (when we have this, dark mode is easy)

To get to these changes, though, this diff is a good first step -- pulls us out of lib territory and gives us full control. But, naturally, with more control comes more responsibility.

This revision is now accepted and ready to land.Thu, Apr 11, 03:19
This revision was automatically updated to reflect the committed changes.