Add global formatting for the webapp.

[ultraviolet10]

Adds a global format command that runs prettier's --write on all specified file types.

Uses the following options within the config (prettierrc.json):

• "semi": false: prevents addition of semicolons on save
• "trailingComma": "es5": https://prettier.io/docs/en/options.html#trailing-commas
• "singleQuote": false: uses double quotes for imports/elsewhere.
• "tabWidth": 2: @norswap did you want this as 4?
• "useTabs": true: https://prettier.io/docs/en/options.html#tabs
• "printWidth": 100: increase the number of characters that prettier will try to wrap around, prevents the dependency arrays of useEffect and useCallback hooks from splitting into a column unless absolutely needed (https://prettier.io/docs/en/options.html#print-width).

Also added eslint-config-prettier to be used as a plugin as the recommended mediator between linting and formatting.

[ultraviolet10]

there's another interesting plugin we could use: https://www.npmjs.com/package/eslint-plugin-simple-import-sort

this helps sort imports in different files according to your specs, here's an example one:

"simple-import-sort/imports": [
      "error",
      {
        "groups": [
          // Packages. `react` related packages come first.
          [
            "^react",
            "^next",
            "@metamask|@walletconnect|clsx|@reduxjs|async-mutex|flowbite-react|redux-persist|pubnub|redux",
            "^(ethers|google|lodash|bn.js|styled-components|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)"
          ],
          // Internal packages.
          ["^@?\\w"],
          // Parent imports. Put `..` last.
          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
          // Other relative imports. Put same-folder imports and `.` last.
          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
          // Style imports.
          ["^.+\\.s?css$"],
          // Side effect imports.
          ["^\\u0000"]
        ]
      }

[ultraviolet10]

As well as: https://github.com/tailwindlabs/prettier-plugin-tailwindcss

[norswap]

"tabWidth": 2: @norswap did you want this as 4?

Yes let's go for 4!

"useTabs": true: https://prettier.io/docs/en/options.html#tabs

This is always religious, but I do prefer spaces myself. I guess with prettier it matters less, but it ensures proper display on Github for instance.

Any counter here? Like would you strongly prefer a 2 or 8 spaces local display?

[norswap]

This should be folded into make check in the webapp Makefile (which will cause it be checked by the global Makefile make check and thus covered by the above)

[norswap]

Suggested change

	cd packages/contract && make check
	cd packages/contract && make format

[norswap]

Suggested change

	npx prettier --write "**/*.{js,jsx,ts,tsx,json,css}"
	pnpm prettier --write "**/*.{js,jsx,ts,tsx,json,css}"

[ultraviolet10]

"tabWidth": 2: @norswap did you want this as 4?

Yes let's go for 4!

"useTabs": true: https://prettier.io/docs/en/options.html#tabs

This is always religious, but I do prefer spaces myself. I guess with prettier it matters less, but it ensures proper display on Github for instance.

Any counter here? Like would you strongly prefer a 2 or 8 spaces local display?

No hard preference here, 4 is good!

[norswap]

Approving, but address comments!

[norswap]

already covered by make check above, this file shouldn't be changed basically

(Sorry, I think I recall I said this needed to be updated, but if make check checks the format, it's not needed!)

[norswap]

isn't 150 too much? I like 100 or 120

[norswap]

you can put both of these on different lines (no need for &&)