Page MenuHomePhabricator

[Cashtab] Remove legacy antd form components from CreateTokenForm
ClosedPublic

Authored by bytesofman on Mar 28 2024, 22:28.

Details

Summary

T2207

Depends on D15783

Remove antd from CreateTokenForm

Thought this would just be a few inputs when I started this diff, but turns out we have some real ancient stuff in here.

  • Replace inputs with new cashtab inputs, and update error state methods to best fit them
  • Replace legacy dragger (and update ancient npm pkg it was using)
  • Simplify upload handling functions and improve error notifications for non-png, non-jpg uploads
  • Allow modal to scroll if content exceeds height (as height can be variable with longer token names)
  • Expand use of standard Cashtab buttons vs weird custom buttons
  • Delete components from EnhancedInputs that are no longer used
Test Plan

npm test

Mess with the token icon creation form

  • try to upload an icon that is not a png or a jpg
  • zoom/rotate an icon
  • change icon after uploading
  • create a token with an icon

Diff Detail

Repository
rABC Bitcoin ABC
Branch
create-token-form-cleanup
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 28142
Build 55829: Build Diffcashtab-tests
Build 55828: arc lint + arc unit

Event Timeline

Failed tests logs:

====== CashTab Unit Tests: <CreateTokenForm /> User can input valid token parameters, generate a token, and view a success notification ======
TestingLibraryElementError: Unable to find an element with the text: OK. 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="ant-spin-nested-loading css-dev-only-do-not-override-1rqnfsa"
    >
      <div
        class="ant-spin-container"
      >
        <div
          class="sc-fyjhYU dwntyv"
        >
          <div
            class="Toastify"
          />
          <div
            class="sc-keVrkP hhzpnt"
          >
            <div
              class="sc-gVLVqr fzyYXz"
            >
              <div
                class="sc-eIHaNI bNRpUo"
              >
                <div
                  class="sc-cBdUnI kSFuPj"
                >
                  <img
                    alt="cashtab"
                    class="sc-exkUMo jxgjXp"
                    src="test-file-stub"
                  />
                </div>
                <div
                  class="sc-bbmXgH fLVOGg"
                  data-testid="wallet-info-ctn"
                >
                  <div
                    class="sc-jrIrqw jvojHN"
                  >
                    <select
                      class="sc-hjRWVT dUYreC"
                      id="wallets"
                      name="wallets"
                    >
                      <option
                        class="sc-iybRtq jkwgJt"
                        value="Transaction Fixtures"
                      >
                        Transaction Fixtures
                      </option>
                    </select>
                    <div
                      class="sc-hMqMXs cAbGIb"
                    >
                      <svg
                        class="sc-htoDjs dHRdfz"
                        style="margin-top: 8px;"
                      />
                    </div>
                    <div
                      class="sc-dUjcNx dlXFJu"
                    >
                      <input
                        checked=""
                        class="sc-emmjRN jsLypx"
                        data-testid="show-hide-balance"
                        id="show-hide-balance"
                        name="show-hide-balance"
                        type="checkbox"
                      />
                      <label
                        class="sc-gHboQg dROkmL"
                        for="show-hide-balance"
                      >
                        <span
                          class="sc-eilVRo fUDPGJ"
                          data-off=""
                          data-on=""
                        />
                        <span
                          class="sc-eerKOB NLONq"
                        />
                      </label>
                    </div>
                  </div>
                  <div
                    class="sc-iQtOjA cUcGEQ"
                    data-testid="balance-xec"
                  >
                    9,513.12
                     
                    XEC
                     
                  </div>
                  <div
                    class="sc-fHxwqH ckNvLc"
                    data-testid="balance-fiat"
                  >
                    $
                    0.29
                     
                    USD
                  </div>
                  <p
                    class="sc-cEvuZC fNPrOh"
                    data-testid="ecash-price"
                  >
                    1 
                    XEC
                     = 
                    0.00003000
                     
                    USD
                  </p>
                </div>
              </div>
              <div
                class="sc-jqCOkK dpFugr"
              >
                <div
                  class="sc-gojNiO bWClNj"
                >
                  <h3>
                    Create a Token
                  </h3>
                  <div
                    class="sc-exAgwC bSGahT"
                  >
                    <div
                      class="sc-cMhqgX hShMJA"
                    >
                      <div
                        class="sc-iuJeZd kzeXth"
                      >
                        <input
                          class="sc-esOvli hTocdE"
                          name="name"
                          placeholder="Enter a name for your token"
                          value="test token"
                        />
                      </div>
                      <div
                        class="sc-iujRgT cELAJT"
                      />
                    </div>
                    <div
                      class="sc-cMhqgX hShMJA"
                    >
                      <div
                        class="sc-iuJeZd kzeXth"
                      >
                        <input
                          class="sc-esOvli hTocdE"
                          name="ticker"
                          placeholder="Enter a ticker for your token"
                          value="TKE"
                        />
                      </div>
                      <div
                        class="sc-iujRgT cELAJT"
                      />
                    </div>
                    <div
                      class="sc-cMhqgX hShMJA"
                    >
                      <div
                        class="sc-iuJeZd jgJRvx"
                      >
                        <input
                          class="sc-esOvli hTocdE"
                          name="decimals"
                          placeholder="Enter number of decimal places"
                          value="02"
                        />
                      </div>
                      <div
                        class="sc-iujRgT cELAJT"
                      >
                        Token decimals must be an integer between 0 and 9
                      </div>
                    </div>
                    <div
                      class="sc-cMhqgX hShMJA"
                    >
                      <div
                        class="sc-iuJeZd kzeXth"
                      >
                        <input
                          class="sc-esOvli hTocdE"
                          name="initialQty"
                          placeholder="Enter the fixed supply of your token"
                          value="600000"
                        />
                      </div>
                      <div
                        class="sc-iujRgT cELAJT"
                      />
                    </div>
                    <div
                      class="sc-cMhqgX hShMJA"
                    >
                      <div
                        class="sc-iuJeZd kzeXth"
                      >
                        <input
                          class="sc-esOvli hTocdE"
                          name="url"
                          placeholder="Enter a website for your token"
                          value="https://www.cashtab.com"
                        />
                      </div>
                      <div
                        class="sc-iujRgT cELAJT"
                      />
                    </div>
                    <label
                      class="sc-uJMKN eXLLEE"
                    >
                      Add Image
                    </label>
                    <span
                      class="ant-upload-wrapper css-dev-only-do-not-override-1rqnfsa"
                    >
                      <div
                        class="css-dev-only-do-not-override-1rqnfsa ant-upload ant-upload-drag"
                        style="background-color: rgb(244, 244, 244);"
                      >
                        <span
                          class="ant-upload ant-upload-btn"
                          role="button"
                          tabindex="0"
                        >
                          <input
                            accept=""
                            style="display: none;"
                            type="file"
                          />
                          <div
                            class="ant-upload-drag-container"
                          >
                             
                            <span
                              aria-label="upload"
                              class="anticon anticon-upload"
                              role="img"
                            >
                              <svg
                                aria-hidden="true"
                                data-icon="upload"
                                fill="currentColor"
                                focusable="false"
                                height="1em"
                                viewBox="64 64 896 896"
                                width="1em"
                              >
                                <path
                                  d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
                                />
                              </svg>
                            </span>
                            <p>
                              Click, or drag file to this area to upload
                            </p>
                            <p
                              style="font-size: 12px;"
                            >
                              Only jpg or png accepted
                            </p>
                          </div>
                        </span>
                      </div>
                      <div
                        class="ant-upload-list ant-upload-list-text"
                      />
                    </span>
                    <button
                      class="sc-hwwEjo sc-kfGgVZ fhzclG"
                      disabled=""
                      style="margin-top: 30px;"
                    >
                      <span
                        aria-label="plus-square"
                        class="anticon anticon-plus-square"
                        role="img"
                      >
                        <svg
                          aria-hidden="true"
                          data-icon="plus-square"
                          fill="currentColor"
                          focusable="false"
                          height="1em"
                          viewBox="64 64 896 896"
                          width="1em"
                        >
                          <path
                            d="M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
                          />
                          <path
                            d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
                          />
                        </svg>
                      </span>
                       Create eToken
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="sc-ugnQR bPafYx"
            >
              <button
                class="sc-iFMziU gzZcUO"
              >
                <svg />
              </button>
              <button
                class="sc-iFMziU gzZcUO"
                data-testid="nav-btn-send"
              >
                <svg
                  class="sc-jKJlTe fTQyTm"
                  style="margin-top: -9px;"
                />
              </button>
              <button
                class="sc-iFMziU gzZcUO"
                data-testid="nav-btn-etokens"
              >
                <span
                  aria-label="appstore-add"
                  class="anticon anticon-appstore-add"
                  role="img"
                  style="font-size: 24px;"
                >
                  <svg
                    aria-hidden="true"
                    data-icon="appstore-add"
                    fill="currentColor"
                    focusable="false"
                    height="1em"
                    viewBox="64 64 896 896"
                    width="1em"
                  >
                    <defs />
                    <path
                      d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zm52 132H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200zM424 712H296V584c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v128H104c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h128v128c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V776h128c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"
                    />
                  </svg>
                </span>
              </button>
              <button
                class="sc-iFMziU gzZcUO"
                data-testid="nav-btn-receive"
              >
                <svg />
              </button>
              <div
                class="sc-eTpRJs fvAZEX"
                data-testid="hamburger"
              >
                <span
                  class="sc-dxZgTM iJHOwC"
                />
                <div
                  class="sc-iomxrj eySEgy"
                  data-testid="hamburger-menu"
                >
                  <button
                    class="sc-dvCyap ICCYV"
                    data-testid="nav-btn-airdrop"
                  >
                     
                    <p>
                      Airdrop
                    </p>
                    <svg
                      height="33px"
                      width="30px"
                    />
                  </button>
                  <button
                    class="sc-dvCyap ICCYV"
                    data-testid="nav-btn-swap"
                  >
                     
                    <p>
                      Swap
                    </p>
                    <span
                      aria-label="swap"
                      class="anticon anticon-swap"
                      role="img"
                      style="font-size: 24px;"
                    >
                      <svg
                        aria-hidden="true"
                        data-icon="swap"
                        fill="currentColor"
                        focusable="false"
                        height="1em"
                        viewBox="64 64 896 896"
                        width="1em"
                      >
                        <path
                          d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="sc-dvCyap ICCYV"
                    data-testid="nav-btn-signverifymsg"
                  >
                    <p>
                      Sign & Verify
                    </p>
                    <svg
                      class="sc-jzJRlG kclOxT"
                    />
                  </button>
                  <button
                    class="sc-dvCyap ICCYV"
                    data-testid="nav-btn-configure"
                  >
                    <p>
                      Settings
                    </p>
                    <svg
                      height="33px"
                      width="30px"
                    />
                  </button>
                </div>
              </div>
            </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/Etokens/__tests__/CreateTokenForm.test.js:134:33)

Each failure log is accessible here:
CashTab Unit Tests: <CreateTokenForm /> User can input valid token parameters, generate a token, and view a success notification

started working on upgraded dragger, finished token icon editing modal and upgraded react easy crop

Failed tests logs:

====== CashTab Unit Tests: <CreateTokenForm /> User can input valid token parameters, generate a token, and view a success notification ======
TestingLibraryElementError: Unable to find an element with the text: OK. 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="ant-spin-nested-loading css-dev-only-do-not-override-1rqnfsa"
    >
      <div
        class="ant-spin-container"
      >
        <div
          class="sc-keVrkP llgaYm"
        >
          <div
            class="Toastify"
          />
          <div
            class="sc-hBbWxd fsROdy"
          >
            <div
              class="sc-dyGzUR faHbNd"
            >
              <div
                class="sc-cBdUnI hOddxM"
              >
                <div
                  class="sc-drKuOJ fngNAx"
                >
                  <img
                    alt="cashtab"
                    class="sc-gRnDUn bXRxzU"
                    src="test-file-stub"
                  />
                </div>
                <div
                  class="sc-bbmXgH fLVOGg"
                  data-testid="wallet-info-ctn"
                >
                  <div
                    class="sc-ugnQR hwVhya"
                  >
                    <select
                      class="sc-eIHaNI iUwBzi"
                      id="wallets"
                      name="wallets"
                    >
                      <option
                        class="sc-eTpRJs huWiiS"
                        value="Transaction Fixtures"
                      >
                        Transaction Fixtures
                      </option>
                    </select>
                    <div
                      class="sc-hMqMXs cAbGIb"
                    >
                      <svg
                        class="sc-htoDjs dHRdfz"
                        style="margin-top: 8px;"
                      />
                    </div>
                    <div
                      class="sc-lkqHmb gshrSm"
                    >
                      <input
                        checked=""
                        class="sc-fYiAbW kIqsvc"
                        data-testid="show-hide-balance"
                        id="show-hide-balance"
                        name="show-hide-balance"
                        type="checkbox"
                      />
                      <label
                        class="sc-eLExRp fFvRzj"
                        for="show-hide-balance"
                      >
                        <span
                          class="sc-cbkKFq cOBioQ"
                          data-off=""
                          data-on=""
                        />
                        <span
                          class="sc-krvtoX hQrTsQ"
                        />
                      </label>
                    </div>
                  </div>
                  <div
                    class="sc-dxZgTM hQASRT"
                    data-testid="balance-xec"
                  >
                    9,513.12
                     
                    XEC
                     
                  </div>
                  <div
                    class="sc-iomxrj heEbIA"
                    data-testid="balance-fiat"
                  >
                    $
                    0.29
                     
                    USD
                  </div>
                  <p
                    class="sc-dvCyap laskFG"
                    data-testid="ecash-price"
                  >
                    1 
                    XEC
                     = 
                    0.00003000
                     
                    USD
                  </p>
                </div>
              </div>
              <div
                class="sc-jqCOkK dpFugr"
              >
                <div
                  class="sc-dymIpo ftpWCD"
                >
                  <h3>
                    Create a Token
                  </h3>
                  <div
                    class="sc-fOKMvo eqLKzv"
                  >
                    <div
                      class="sc-iQNlJl gSDyLy"
                    >
                      <div
                        class="sc-bsbRJL gVlzfi"
                      >
                        <input
                          class="sc-hZSUBg iKddpB"
                          name="name"
                          placeholder="Enter a name for your token"
                          value="test token"
                        />
                      </div>
                      <div
                        class="sc-hORach fnZTRV"
                      />
                    </div>
                    <div
                      class="sc-iQNlJl gSDyLy"
                    >
                      <div
                        class="sc-bsbRJL gVlzfi"
                      >
                        <input
                          class="sc-hZSUBg iKddpB"
                          name="ticker"
                          placeholder="Enter a ticker for your token"
                          value="TKE"
                        />
                      ...
    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/Etokens/__tests__/CreateTokenForm.test.js:134:33)

Each failure log is accessible here:
CashTab Unit Tests: <CreateTokenForm /> User can input valid token parameters, generate a token, and view a success notification

Failed tests logs:

====== CashTab Unit Tests: <CreateTokenForm /> User can input valid token parameters, generate a token, and view a success notification ======
TestingLibraryElementError: Unable to find an element with the text: OK. 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="ant-spin-nested-loading css-dev-only-do-not-override-1rqnfsa"
    >
      <div
        class="ant-spin-container"
      >
        <div
          class="sc-keVrkP llgaYm"
        >
          <div
            class="Toastify"
          />
          <div
            class="sc-hBbWxd fsROdy"
          >
            <div
              class="sc-dyGzUR faHbNd"
            >
              <div
                class="sc-cBdUnI hOddxM"
              >
                <div
                  class="sc-drKuOJ fngNAx"
                >
                  <img
                    alt="cashtab"
                    class="sc-gRnDUn bXRxzU"
                    src="test-file-stub"
                  />
                </div>
                <div
                  class="sc-bbmXgH fLVOGg"
                  data-testid="wallet-info-ctn"
                >
                  <div
                    class="sc-ugnQR hwVhya"
                  >
                    <select
                      class="sc-eIHaNI iUwBzi"
                      id="wallets"
                      name="wallets"
                    >
                      <option
                        class="sc-eTpRJs huWiiS"
                        value="Transaction Fixtures"
                      >
                        Transaction Fixtures
                      </option>
                    </select>
                    <div
                      class="sc-hMqMXs cAbGIb"
                    >
                      <svg
                        class="sc-htoDjs dHRdfz"
                        style="margin-top: 8px;"
                      />
                    </div>
                    <div
                      class="sc-lkqHmb gshrSm"
                    >
                      <input
                        checked=""
                        class="sc-fYiAbW kIqsvc"
                        data-testid="show-hide-balance"
                        id="show-hide-balance"
                        name="show-hide-balance"
                        type="checkbox"
                      />
                      <label
                        class="sc-eLExRp fFvRzj"
                        for="show-hide-balance"
                      >
                        <span
                          class="sc-cbkKFq cOBioQ"
                          data-off=""
                          data-on=""
                        />
                        <span
                          class="sc-krvtoX hQrTsQ"
                        />
                      </label>
                    </div>
                  </div>
                  <div
                    class="sc-dxZgTM hQASRT"
                    data-testid="balance-xec"
                  >
                    9,513.12
                     
                    XEC
                     
                  </div>
                  <div
                    class="sc-iomxrj heEbIA"
                    data-testid="balance-fiat"
                  >
                    $
                    0.29
                     
                    USD
                  </div>
                  <p
                    class="sc-dvCyap laskFG"
                    data-testid="ecash-price"
                  >
                    1 
                    XEC
                     = 
                    0.00003000
                     
                    USD
                  </p>
                </div>
              </div>
              <div
                class="sc-jqCOkK dpFugr"
              >
                <div
                  class="sc-dymIpo ftpWCD"
                >
                  <h3>
                    Create a Token
                  </h3>
                  <div
                    class="sc-fOKMvo eqLKzv"
                  >
                    <div
                      class="sc-iQNlJl gSDyLy"
                    >
                      <div
                        class="sc-bsbRJL gVlzfi"
                      >
                        <input
                          class="sc-hZSUBg iKddpB"
                          name="name"
                          placeholder="Enter a name for your token"
                          value="test token"
                        />
                      </div>
                      <div
                        class="sc-hORach fnZTRV"
                      />
                    </div>
                    <div
                      class="sc-iQNlJl gSDyLy"
                    >
                      <div
                        class="sc-bsbRJL gVlzfi"
                      >
                        <input
                          class="sc-hZSUBg iKddpB"
                          name="ticker"
                          placeholder="Enter a ticker for your token"
                          value="TKE"
                        />
                      ...
    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/Etokens/__tests__/CreateTokenForm.test.js:134:33)

Each failure log is accessible here:
CashTab Unit Tests: <CreateTokenForm /> User can input valid token parameters, generate a token, and view a success notification

remove debug logs, remove unnecessary functions, create larger images, styling improvements

stop using dumb styled component

bytesofman retitled this revision from [Cashtab] Remove antd from CreateTokenForm to [Cashtab] Remove legacy antd form components from CreateTokenForm.Mar 29 2024, 03:35
bytesofman edited the summary of this revision. (Show Details)
bytesofman edited the test plan for this revision. (Show Details)
emack requested changes to this revision.Mar 29 2024, 11:27
emack added a subscriber: emack.

Getting this uncaught exception upon startup. This is after npm ci.

image.png (133×596 px, 22 KB)

This revision now requires changes to proceed.Mar 29 2024, 11:27

Getting this uncaught exception upon startup. This is after npm ci.

image.png (133×596 px, 22 KB)

This looks related to testing this diff after testing the migration diff.

Need to test this in incognito if your localhost:3000 storage has already migrated, this diff is not expected to reverse migrate

in general -- while I think these diffs are good to be reviewed now, I won't be landing them until after D15784 lands

emack requested changes to this revision.Mar 29 2024, 12:57

Testing in incognito solved the issue above, however now when creating a new token with an icon, getting the following:

image.png (548×601 px, 112 KB)

image.png (93×324 px, 8 KB)

The token is created regardless.

Based on my previous reviews of the token server I think this is due to the icon being over 500kb? The test png I used was 2mb. In which case the size error here should be clearer to the user so they can adjust it themselves.

Edit: nvm, tested it with a 114kb png and it's still getting rejected as well with the same message and console logs.

This revision now requires changes to proceed.Mar 29 2024, 12:57

Testing in incognito solved the issue above, however now when creating a new token with an icon, getting the following:

image.png (548×601 px, 112 KB)

image.png (93×324 px, 8 KB)

The token is created regardless.

Based on my previous reviews of the token server I think this is due to the icon being over 500kb? The test png I used was 2mb. In which case the size error here should be clearer to the user so they can adjust it themselves.

Edit: nvm, tested it with a 114kb png and it's still getting rejected as well with the same message and console logs.

is this from localhost:3000 ? could be the whitelist at token server

will check it out

Testing in incognito solved the issue above, however now when creating a new token with an icon, getting the following:

image.png (548×601 px, 112 KB)

image.png (93×324 px, 8 KB)

The token is created regardless.

Based on my previous reviews of the token server I think this is due to the icon being over 500kb? The test png I used was 2mb. In which case the size error here should be clearer to the user so they can adjust it themselves.

Edit: nvm, tested it with a 114kb png and it's still getting rejected as well with the same message and console logs.

is this from localhost:3000 ? could be the whitelist at token server

will check it out

yup, and I'm seeing this for other diffs as well so should be a whitelist issue

bytesofman requested review of this revision.EditedMar 29 2024, 13:12

Testing in incognito solved the issue above, however now when creating a new token with an icon, getting the following:

image.png (548×601 px, 112 KB)

image.png (93×324 px, 8 KB)

The token is created regardless.

Based on my previous reviews of the token server I think this is due to the icon being over 500kb? The test png I used was 2mb. In which case the size error here should be clearer to the user so they can adjust it themselves.

Edit: nvm, tested it with a 114kb png and it's still getting rejected as well with the same message and console logs.

is this from localhost:3000 ? could be the whitelist at token server

will check it out

yup, and I'm seeing this for other diffs as well so should be a whitelist issue

ok yes, confirmed -- this is because localhost:3000 needs to be on the whitelist. I do not want to add it on the prod server ... tho mb I should just do it.

I've tested it locally while running token-server locally and whitelisting localhost:3000 -- can confirm it behaves as expected, i.e. we still upload the token icon. This diff does not impact the behavior of this API post call (other than making the file slightly larger), so not an issue for this review.

We will address larger files on the server side if we need to. NFTs, for example, should support large images.

without whitelisting:

image.png (189×1 px, 39 KB)

whitelisting:

image.png (104×813 px, 16 KB)

and image is uploaded to expected dir at expected sizes

Accepted, assuming the overall UI here will be improved separately.

This revision is now accepted and ready to land.Mar 29 2024, 13:31

Failed tests logs:

====== CashTab Unit Tests: <App /> Migrating (version < 2.9.0): A user with an invalid Cashtab wallet as the active wallet is migrated on startup ======
Error: expect(element).toHaveTextContent()

Expected element to have text content:
  9,513.12 XEC
Received:
  0.00 XEC
    at Object.toHaveTextContent (/work/cashtab/src/components/__tests__/App.test.js:1132:58)

Each failure log is accessible here:
CashTab Unit Tests: <App /> Migrating (version < 2.9.0): A user with an invalid Cashtab wallet as the active wallet is migrated on startup

Failed tests logs:

====== CashTab Unit Tests: <App /> Migrating (version < 2.9.0): A user with an invalid Cashtab wallet as the active wallet is migrated on startup ======
Error: expect(element).toHaveTextContent()

Expected element to have text content:
  9,513.12 XEC
Received:
  0.00 XEC
    at Object.toHaveTextContent (/work/cashtab/src/components/__tests__/App.test.js:1132:58)

Each failure log is accessible here:
CashTab Unit Tests: <App /> Migrating (version < 2.9.0): A user with an invalid Cashtab wallet as the active wallet is migrated on startup

same rebase fix to wait for wallet to load in migration test