Page MenuHomePhabricator

[lib][web][landing] Update Wagmi and RainbowKit
ClosedPublic

Authored by ashoat on Feb 12 2023, 7:00 PM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Jun 20, 3:38 PM
Unknown Object (File)
Mon, Jun 17, 3:41 PM
Unknown Object (File)
Fri, Jun 7, 7:17 AM
Unknown Object (File)
Fri, Jun 7, 7:14 AM
Unknown Object (File)
Fri, Jun 7, 6:58 AM
Unknown Object (File)
Fri, Jun 7, 5:46 AM
Unknown Object (File)
Tue, May 28, 5:38 AM
Unknown Object (File)
May 13 2024, 2:56 AM
Subscribers
None

Details

Summary

Now that we're using Webpack 5, we can update Wagmi and RainbowKit. I also update some stuff that we need to do to get these packages to work with Webpack 5:

  1. Specified Node polyfills needed for RainbowKit. Webpack 4 automatically included polyfills, but in Webpack 5 we need to specify them manually. I used this handy Gist to point to what I needed
  2. 5 months back, I thought that we would remove the sideEffects: true flag for node_modules CSS files that we needed to put in place to make RainbowKit work with Webpack 4. In contrast, we actually needed to add this flag to the dev config (it was previously only used in the prod config). The reason why is Tree Shaking: basically since we don't actually import anything from the CSS files, Webpack thinks we're not actually using it, and so it doesn't need to be included. sideEffects: true makes Webpack include those CSS files anyways.

Depends on D6702

Test Plan

Tested SIWE on both native/landing and web

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

landing/package.json
56 ↗(On Diff #22357)

Each RainbowKit version corresponds to a Wagmi version. See RainbowKit migration guide here

landing/siwe.react.js
12–18 ↗(On Diff #22357)

See update in RainbowKit migration guide here

lib/package.json
12 ↗(On Diff #22357)

RainbowKit needs this polyfill, which used to be provided by default in Webpack 4

lib/webpack/shared.cjs
82–84 ↗(On Diff #22357)

RainbowKit needs this polyfill, which used to be provided by default in Webpack 4

90 ↗(On Diff #22357)

RainbowKit needs this polyfill, which used to be provided by default in Webpack 4

global is a special-case where the "polyfill" is built into Webpack 5. See here

201 ↗(On Diff #22357)

See explanation in diff description about sideEffects

web/account/siwe-login-form.react.js
3 ↗(On Diff #22357)

This is declared in the exports config of the @rainbow-me/rainbowkit package.json now, so we can use that to import the styles

web/utils/wagmi-utils.js
3–10 ↗(On Diff #22357)

See update in RainbowKit migration guide here

atul added inline comments.
lib/utils/wagmi-utils.js
11 ↗(On Diff #22357)

good catch updating this comment

This revision is now accepted and ready to land.Feb 12 2023, 7:35 PM