refactor: switch to use yarn v4

[compojoom]

fix: github action crashing

.

fix: failing yarn v4 install due to incorrect 3rd party dependency

fix: remove Keystone pckg causing yarn v4 failure

fix: resolve merge conflict

fix: resolutions

fix: failing tests

What it solves

Resolves #

How this PR fixes it

How to test it

Screenshots

Checklist

• I've tested the branch on mobile 📱
• I've documented how it affects the analytics (if at all) 📊
• I've written a unit/e2e test for it (if applicable) 🧑‍💻

[github-actions]

Branch preview

✅ Deploy successful!

Website:
https://yarn--walletweb.review.5afe.dev/home?safe=eth:0xA77DE01e157f9f57C7c4A326eeE9C4874D0598b6

Storybook:
https://yarn--walletweb.review.5afe.dev/storybook/

[github-actions]

📦 Next.js Bundle Analysis for safe-wallet-web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	1 MB (🟡 +11.78 KB)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Two Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
/transactions	96.88 KB (🟡 +220 B)	1.1 MB
/transactions/history	96.84 KB (🟡 +220 B)	1.1 MB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

[github-actions]

Coverage report

Caution

Test run failed

St.❔	Category	Percentage	Covered / Total
🟡	Statements	73.84% (-0.01% 🔻)	14380/19475
🔴	Branches	51.38% (-0.01% 🔻)	3432/6680
🔴	Functions	56.77%	2041/3595
🟡	Lines	75.36% (-0.01% 🔻)	13040/17303

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / NetworkMultiSelector.tsx	98.36%	76.19% (-4.76% 🔻)	100%	100%
🟢	... / index.tsx	95% (-0.45% 🔻)	85.71%	100%	100%
🟢	... / index.tsx	85.71% (-4.29% 🔻)	100%	50%	100%

Test suite run failed

Failed tests: 3/1707. Failed suites: 2/231.

  ● useCompatibleNetworks › should set everything to available except zkSync and GnosisChain Chiado for 1.4.1 Safes

    expect(received).toEqual(expected) // deep equality

    - Expected  - 1
    + Received  + 1

      Array [
        true,
        true,
        true,
        false,
    -   true,
    +   false,
        false,
      ]

      92 |       expect(result.current).toHaveLength(6)
      93 |       expect(result.current.map((chain) => chain.chainId)).toEqual(['1', '10', '100', '324', '480', '10200'])
    > 94 |       expect(result.current.map((chain) => chain.available)).toEqual([true, true, true, false, true, false])
         |                                                              ^
      95 |     }
      96 |
      97 |     {

      at Object.toEqual (src/features/multichain/hooks/__tests__/useCompatibleNetworks.test.ts:94:62)

  ● useCompatibleNetworks › should mark compatible chains as available

    expect(received).toEqual(expected) // deep equality

    - Expected  - 1
    + Received  + 1

      Array [
        true,
        true,
        true,
        false,
    -   true,
    +   false,
        false,
      ]

      134 |       expect(result.current).toHaveLength(6)
      135 |       expect(result.current.map((chain) => chain.chainId)).toEqual(['1', '10', '100', '324', '480', '10200'])
    > 136 |       expect(result.current.map((chain) => chain.available)).toEqual([true, true, true, false, true, false])
          |                                                              ^
      137 |     }
      138 |
      139 |     // 1.3.0, L2 and canonical

      at Object.toEqual (src/features/multichain/hooks/__tests__/useCompatibleNetworks.test.ts:136:62)

---

  ● NetworkMultiSelector › should be possible to select and deselect networks

    expect(element).toHaveAttribute("aria-disabled", "false") // element.getAttribute("aria-disabled") === "false"

    Expected the element to have attribute:
      aria-disabled="false"
    Received:
      aria-disabled="true"

    Ignored nodes: comments, script, style
    <html>
      <head />
      <body>
        <div>
          <form>
            <div
              aria-owns=":r0:-listbox"
              class="MuiAutocomplete-root Mui-expanded Mui-focused MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-o5oj2-MuiAutocomplete-root"
              name="networks"
            >
              <div
                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-cmpglg-MuiFormControl-root-MuiTextField-root"
              >
                <div
                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-focused MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1rx36jo-MuiInputBase-root-MuiOutlinedInput-root"
                >
                  <div
                    class="MuiButtonBase-root MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorDefault MuiChip-deletable MuiChip-deletableColorDefault MuiChip-outlinedDefault multiChainChip css-13evlqv-MuiButtonBase-root-MuiChip-root"
                    role="button"
                    tabindex="0"
                  >
                    <span
                      class="MuiChip-avatar MuiChip-avatarMedium MuiChip-avatarColorDefault inlineIndicator withLogo onlyLogo"
                      data-testid="chain-logo"
                    >
                      <img
                        alt="Ethereum Logo"
                        height="24"
                        loading="lazy"
                        width="24"
                      />
                    </span>
                    <span
                      class="MuiChip-label MuiChip-labelMedium css-1fh978c-MuiChip-label"
                    >
                      Ethereum
                    </span>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiChip-deleteIcon MuiChip-deleteIconMedium MuiChip-deleteIconColorDefault MuiChip-deleteIconOutlinedColorDefault css-1dhtbeh-MuiSvgIcon-root"
                      data-testid="CancelIcon"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
                      />
                    </svg>
                  </div>
                  <input
                    aria-activedescendant=":r0:-option-0"
                    aria-autocomplete="list"
                    aria-controls=":r0:-listbox"
                    aria-expanded="true"
                    aria-invalid="false"
                    autocapitalize="none"
                    autocomplete="off"
                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1pmlxf8-MuiInputBase-input-MuiOutlinedInput-input"
                    id=":r0:"
                    role="combobox"
                    spellcheck="false"
                    type="text"
                    value=""
                  />
                  <div
                    class="MuiAutocomplete-endAdornment css-1uhhrmm-MuiAutocomplete-endAdornment"
                  >
                    <button
                      aria-label="Clear"
                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator css-hsc0qk-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-clearIndicator"
                      tabindex="-1"
                      title="Clear"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
                        data-testid="CloseIcon"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Close"
                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator MuiAutocomplete-popupIndicatorOpen css-17j1ki-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
                      tabindex="-1"
                      title="Close"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dhtbeh-MuiSvgIcon-root"
                        data-testid="ArrowDropDownIcon"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M7 10l5 5 5-5z"
                        />
                      </svg>
                    </button>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="MuiOutlinedInput-notchedOutline css-1focg1t-MuiOutlinedInput-notchedOutline"
                  >
                    <legend
                      class="css-w4cd9x"
                    >
                      <span
                        class="notranslate"
                      >
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div
          class="MuiPopper-root MuiAutocomplete-popper css-2xrgrn-MuiPopper-root-MuiAutocomplete-popper"
          data-popper-escaped=""
          data-popper-placement="bottom"
          data-popper-reference-hidden=""
          role="presentation"
          style="position: absolute; top: 0px; left: 0px; width: 0px; margin: 0px; transform: translate(0px, 0px);"
        >
          <div
            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAutocomplete-paper css-9c4jum-MuiPaper-root-MuiAutocomplete-paper"
            style="--Paper-shadow: none;"
          >
            <div
              aria-labelledby=":r0:-label"
              class="MuiAutocomplete-listbox css-15s48wj-MuiAutocomplete-listbox"
              id=":r0:-listbox"
              role="listbox"
            >
              <li
                aria-disabled="false"
                aria-selected="true"
                class="MuiAutocomplete-option Mui-focused"
                data-option-index="0"
                id=":r0:-option-0"
                role="option"
                tabindex="-1"
              >
                <span
                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall Mui-checked MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-a4ywlg-MuiButtonBase-root-MuiCheckbox-root"
                  data-testid="network-checkbox"
                >
                  <input
                    class="PrivateSwitchBase-input css-j8yymo"
                    data-indeterminate="false"
                    type="checkbox"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
                    data-testid="CheckBoxIcon"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                    />
                  </svg>
                </span>
                <span
                  class="inlineIndicator withLogo"
                  data-testid="chain-logo"
                >
                  <img
                    alt="Ethereum Logo"
                    height="24"
                    loading="lazy"
                    width="24"
                  />
                  <div
                    class="MuiStack-root css-nen11g-MuiStack-root"
                  >
                    <span
                      class="name"
                    >
                      Ethereum
                    </span>
                  </div>
                </span>
              </li>
              <li
                aria-disabled="false"
                aria-selected="false"
                class="MuiAutocomplete-option"
                data-option-index="1"
                id=":r0:-option-1"
                role="option"
                tabindex="-1"
              >
                <span
                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-a4ywlg-MuiButtonBase-root-MuiCheckbox-root"
                  data-testid="network-checkbox"
                >
                  <input
                    class="PrivateSwitchBase-input css-j8yymo"
                    data-indeterminate="false"
                    type="checkbox"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
                    data-testid="CheckBoxOutlineBlankIcon"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                    />
                  </svg>
                </span>
                <span
                  class="inlineIndicator withLogo"
                  data-testid="chain-logo"
                >
                  <img
                    alt="Optimism Logo"
                    height="24"
                    loading="lazy"
                    width="24"
                  />
                  <div
                    class="MuiStack-root css-nen11g-MuiStack-root"
                  >
                    <span
                      class="name"
                    >
                      Optimism
                    </span>
                  </div>
                </span>
              </li>
              <li
                aria-disabled="false"
                aria-selected="false"
                class="MuiAutocomplete-option"
                data-option-index="2"
                id=":r0:-option-2"
                role="option"
                tabindex="-1"
              >
                <span
                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-a4ywlg-MuiButtonBase-root-MuiCheckbox-root"
                  data-testid="network-checkbox"
                >
                  <input
                    class="PrivateSwitchBase-input css-j8yymo"
                    data-indeterminate="false"
                    type="checkbox"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
                    data-testid="CheckBoxOutlineBlankIcon"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                    />
                  </svg>
                </span>
                <span
                  class="inlineIndicator withLogo"
                  data-testid="chain-logo"
                >
                  <img
                    alt="Gnosis Chain Logo"
                    height="24"
                    loading="lazy"
                    width="24"
                  />
                  <div
                    class="MuiStack-root css-nen11g-MuiStack-root"
                  >
                    <span
                      class="name"
                    >
                      Gnosis Chain
                    </span>
                  </div>
                </span>
              </li>
              <li
                aria-disabled="true"
                aria-selected="false"
                class="MuiAutocomplete-option"
                data-option-index="3"
                id=":r0:-option-3"
                role="option"
                tabindex="-1"
              >
                <span
                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-a4ywlg-MuiButtonBase-root-MuiCheckbox-root"
                  data-testid="network-checkbox"
                >
                  <input
                    class="PrivateSwitchBase-input css-j8yymo"
                    data-indeterminate="false"
                    type="checkbox"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
                    data-testid="CheckBoxOutlineBlankIcon"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                    />
                  </svg>
                </span>
                <span
                  class="inlineIndicator withLogo"
                  data-testid="chain-logo"
                >
                  <img
                    alt="ZkSync Era Logo"
                    height="24"
                    loading="lazy"
                    width="24"
                  />
                  <div
                    class="MuiStack-root css-nen11g-MuiStack-root"
                  >
                    <span
                      class="name"
                    >
                      ZkSync Era
                    </span>
                  </div>
                </span>
              </li>
              <li
                aria-disabled="true"
                aria-selected="false"
                class="MuiAutocomplete-option"
                data-option-index="4"
                id=":r0:-option-4"
                role="option"
                tabindex="-1"
              >
                <span
                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-a4ywlg-MuiButtonBase-root-MuiCheckbox-root"
                  data-testid="network-checkbox"
                >
                  <input
                    class="PrivateSwitchBase-input css-j8yymo"
                    data-indeterminate="false"
                    type="checkbox"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-tqxw8e-MuiSvgIcon-root"
                    data-testid="CheckBoxOutlineBlankIcon"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                    />
                  </svg>
                </span>
                <span
                  class="inlineIndicator withLogo"
                  data-testid="chain-logo"
                >
                  <img
                    alt="Worldchain Logo"
                    height="24"
                    loading="lazy"
                    width="24"
                  />
                  <div
                    class="MuiStack-root css-nen11g-MuiStack-root"
                  >
                    <span
                      class="name"
                    >
                      Worldchain
                    </span>
                  </div>
                </span>
              </li>
            </div>
          </div>
        </div>
      </body>
    </html>

      103 |       expect(allOptions[3]).toHaveAttribute('aria-disabled', 'true')
      104 |       expect(allOptions[3]).toHaveTextContent('ZkSync Era')
    > 105 |       expect(allOptions[4]).toHaveAttribute('aria-disabled', 'false')
          |                             ^
      106 |     })
      107 |
      108 |     // Unselect Ethereum by clicking the x icon => zkSync Era should be enabled again

      at toHaveAttribute (src/components/common/NetworkSelector/__tests__/NetworkMultiSelector.test.tsx:105:29)
      at runWithExpensiveErrorDiagnosticsDisabled (node_modules/@testing-library/dom/dist/config.js:47:12)
      at checkCallback (node_modules/@testing-library/dom/dist/wait-for.js:124:77)
      at checkRealTimersCallback (node_modules/@testing-library/dom/dist/wait-for.js:118:16)
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:520:19)

Report generated by 🧪jest coverage report action from 996080c