Update dependency prettier to v3

jest.config.js

@@ -3,6 +3,11 @@ const config = {
   preset: "ts-jest",
   testEnvironment: "jsdom",
   rootDir: "src",
+
+  // see https://github.com/jestjs/jest/issues/14305#issuecomment-1627346697
+  //   since we run prettier on a pre-commit hook anyway, there's no real need for
+  //   jest to invoke automatically when creating inline snapshots.
+  prettierPath: null,
 };
 
 module.exports = config;

package.json

@@ -46,7 +46,7 @@
     "mini-css-extract-plugin": "2.7.6",
     "node-forge": "1.3.1",
     "npm-run-all": "4.1.5",
-    "prettier": "2.8.8",
+    "prettier": "3.0.3",
     "style-loader": "3.3.3",
     "svgo-loader": "4.0.0",
     "ts-jest": "29.1.1",

src/components/DownloadBrave.tsx

@@ -10,7 +10,7 @@ export const DownloadBrave: React.FC = () => {
     <SectionWithLogo
       heading={t("talk_title")}
       subhead={t(
-        "Unlimited private video calls, right in your browser. No app required."
+        "Unlimited private video calls, right in your browser. No app required.",
       )}
     >
       <div

src/components/InCall.tsx

@@ -61,7 +61,7 @@ export const InCall: React.FC<Props> = ({
       const options = jitsiOptions(roomName, divRef.current, jwt, isMobile);
 
       renderConferencePage(jitsiEventHandlers, options, context).then(
-        setJitsiMeet
+        setJitsiMeet,
       );
     }
   }, [

src/components/WelcomeScreen.tsx

@@ -58,7 +58,7 @@ export const WelcomeScreen: React.FC<Props> = ({
       window.open(
         `${accountUrl}/plans/?intent=checkout&product=talk`,
         "_self",
-        "noopener"
+        "noopener",
       );
     }
   };
@@ -78,7 +78,7 @@ export const WelcomeScreen: React.FC<Props> = ({
         <SectionWithLogo
           heading={t("talk_title")}
           subhead={t(
-            "Your iOS device appears to have Lockdown Mode enabled, which prevents Brave Talk from working."
+            "Your iOS device appears to have Lockdown Mode enabled, which prevents Brave Talk from working.",
           )}
         />
       );

src/components/web3/EIP4361.ts

@@ -17,7 +17,7 @@ export interface EIP4361Message {
 
 export const createEIP4361Message = (
   message: EIP4361Message,
-  account: string
+  account: string,
 ): string => {
   let result = `${message.domain} wants you to sign in with your ${account} account:\n${message.address}\n\n`;
 

src/components/web3/ExceptionListPanel.tsx

@@ -68,7 +68,7 @@ export const ExceptionListPanel: React.FC<Props> = ({
 
   const isValidAddress = (
     address: string,
-    accountType: "ETH" | "SOL" | null
+    accountType: "ETH" | "SOL" | null,
   ): boolean => {
     if (accountType === "ETH") {
       // hexadecimal Ethereum address.

src/components/web3/Login.tsx

@@ -40,7 +40,7 @@ export const Login: React.FC<Props> = ({ web3address, onAddressSelected }) => {
                   Help with Brave Wallet
                 </a>
               </div>
-            </Trans>
+            </Trans>,
           );
         });
     }

src/components/web3/NFTDebugPanel.tsx

@@ -29,7 +29,7 @@ export const NFTDebugPanel: React.FC<Props> = ({
   const selectedNftsId = nfts
     .filter((n: NFT, index) => selectedNftIdxs.includes(index))
     .map((n: NFT) =>
-      n.collection ? n.collection.collection_id : "no-collection-id"
+      n.collection ? n.collection.collection_id : "no-collection-id",
     );
   const onToggle = (idx: number) => {
     if (selectedNftIdxs.includes(idx))

src/components/web3/OptionalSettings.tsx

@@ -35,11 +35,11 @@ interface Props {
   setModeratorPoaps?: (moderatorPoaps: POAP[]) => void;
   participantNFTCollections: NFTcollection[];
   setParticipantNFTCollections: (
-    participantNFTCollections: NFTcollection[]
+    participantNFTCollections: NFTcollection[],
   ) => void;
   moderatorNFTCollections: NFTcollection[];
   setModeratorNFTCollections: (
-    moderatorNFTCollections: NFTcollection[]
+    moderatorNFTCollections: NFTcollection[],
   ) => void;
 }
 

src/components/web3/SelectableImageList.tsx

@@ -32,7 +32,7 @@ export const SelectableImageList: React.FC<Props> = ({
   onMouseOverText = showNameAndNetwork,
 }) => {
   const showCheckbox = items.some(
-    (item) => item.collection !== undefined && item.collection.spam_score >= 80
+    (item) => item.collection !== undefined && item.collection.spam_score >= 80,
   );
   const itemsIndexed: [Item, number][] = items.map((item, idx) => [item, idx]);
   const [showSpamItems, setShowSpamItems] = useState(false);

src/components/web3/SolLogin.tsx

@@ -24,7 +24,7 @@ export const SolLogin: React.FC<Props> = ({
 
     try {
       window.phantom?.solana.on("!!! accountChanged", () =>
-        setNotice(undefined)
+        setNotice(undefined),
       );
     } catch {
       console.warn("!!! Phantom Wallet does not exist");
@@ -55,7 +55,7 @@ export const SolLogin: React.FC<Props> = ({
                   Help with Brave Wallet
                 </a>
               </div>
-            </Trans>
+            </Trans>,
           );
         });
     } else {

src/components/web3/api.ts

@@ -102,7 +102,7 @@ export const web3LoginSol = async (): Promise<string> => {
 export const web3NFTs = async (address: string): Promise<NFT[]> => {
   try {
     const getNFTsURL = `${SIMPLEHASH_PROXY_ROOT_URL}/api/v0/nfts/owners?chains=ethereum,solana,polygon&wallet_addresses=${encodeURIComponent(
-      address
+      address,
     )}`;
     console.log(`>>> GET ${getNFTsURL}`);
     const response = await fetchWithTimeout(getNFTsURL, {
@@ -152,7 +152,7 @@ export function splitAddresses(addr: string): string[] {
 }
 
 export const web3NFTcollections = async (
-  address: string
+  address: string,
 ): Promise<NFTcollection[]> => {
   const getNFTs = async (url: string): Promise<NFTcollection[]> => {
     const response = await fetchWithTimeout(url, {
@@ -194,15 +194,15 @@ export const web3NFTcollections = async (
 
         return collections;
       },
-      {}
+      {},
     );
 
     return Object.values(collections);
   };
 
   try {
     const getNFTsByWalletURL = `${SIMPLEHASH_PROXY_ROOT_URL}/api/v0/nfts/owners?chains=ethereum,solana,polygon&wallet_addresses=${encodeURIComponent(
-      address
+      address,
     )}`;
     console.log(`>>> GET ${getNFTsByWalletURL}`);
     return getNFTs(getNFTsByWalletURL);
@@ -226,7 +226,7 @@ const getNonce = async (): Promise<string> => {
 };
 
 export const web3Prove = async (
-  web3Address: string
+  web3Address: string,
 ): Promise<Web3Authentication> => {
   if (!web3Address) {
     throw new Error("not logged into Web3");
@@ -274,7 +274,7 @@ export const web3Prove = async (
 };
 
 export const web3SolProve = async (
-  web3Address: string
+  web3Address: string,
 ): Promise<Web3Authentication> => {
   if (!web3Address) {
     throw new Error("not logged into Web3");
@@ -300,9 +300,8 @@ export const web3SolProve = async (
   const { hexlify } = await import("ethers");
   const hexPayload = hexlify(payloadBytes);
   try {
-    const { publicKey, signature } = await window.braveSolana.signMessage(
-      payloadBytes
-    );
+    const { publicKey, signature } =
+      await window.braveSolana.signMessage(payloadBytes);
     const result = {
       method: "CAIP-122-json",
       proof: {
@@ -313,9 +312,8 @@ export const web3SolProve = async (
     };
     return result;
   } catch {
-    const { publicKey, signature } = await window.phantom.solana.signMessage(
-      payloadBytes
-    );
+    const { publicKey, signature } =
+      await window.phantom.solana.signMessage(payloadBytes);
     const result = {
       method: "CAIP-122-json",
       proof: {
@@ -335,7 +333,7 @@ const poapContractChain = "gnosis";
 export const web3POAPs = async (address: string): Promise<POAP[]> => {
   try {
     const getPOAPsURL = `${SIMPLEHASH_PROXY_ROOT_URL}/api/v0/nfts/owners?chains=${poapContractChain}&wallet_addresses=${encodeURIComponent(
-      address
+      address,
     )}&contract_addresses=${poapContractAddress}`;
     console.log(`>>> GET ${getPOAPsURL}`);
     const response = await fetchWithTimeout(getPOAPsURL, {
@@ -375,7 +373,7 @@ export const web3POAPs = async (address: string): Promise<POAP[]> => {
 export const web3POAPevent = async (eventID: number): Promise<boolean> => {
   try {
     const getPOAPsURL = `${SIMPLEHASH_PROXY_ROOT_URL}/api/v0/nfts/${poapContractChain}/${poapContractAddress}/${encodeURIComponent(
-      eventID
+      eventID,
     )}`;
     console.log(`>>> GET ${getPOAPsURL}`);
     const response = await fetchWithTimeout(getPOAPsURL, {
@@ -403,11 +401,11 @@ export const web3POAPevent = async (eventID: number): Promise<boolean> => {
 };
 
 export const web3NFTcollection = async (
-  collectionID: string
+  collectionID: string,
 ): Promise<boolean> => {
   try {
     const getNFTcollectionsURL = `${SIMPLEHASH_PROXY_ROOT_URL}/api/v0/nfts/collections/ids?collection_ids=${encodeURIComponent(
-      collectionID
+      collectionID,
     )}`;
     console.log(`>>> GET ${getNFTcollectionsURL}`);
     const response = await fetchWithTimeout(getNFTcollectionsURL, {

src/hooks/use-browser-properties.ts

@@ -45,12 +45,12 @@ export function useBrowserProperties(): BrowserProperties {
   // This helps avoid delays / flashes of content on load.
 
   const [browser, setBrowser] = useState<BrowserProperties>(
-    calcBrowserCapabilities()
+    calcBrowserCapabilities(),
   );
 
   useEffect(() => {
     isBrave().then((isBrave: boolean) =>
-      setBrowser((bp) => ({ ...bp, isBrave: isBrave }))
+      setBrowser((bp) => ({ ...bp, isBrave: isBrave })),
     );
   }, []);
 

src/hooks/use-call-setup-status.ts

@@ -42,7 +42,7 @@ const fetchOrCreateJWT = async (
   createP: boolean,
   waitForSubscriptionBeforeCreating: boolean,
   notice: (message: TranslationKeys) => void,
-  web3?: Web3RequestBody
+  web3?: Web3RequestBody,
 ): Promise<JoinConferenceRoomResult> => {
   reportMethod("joinConferenceRoom", { roomName, createP });
 
@@ -98,10 +98,10 @@ interface CallSetup {
 }
 
 export function useCallSetupStatus(
-  waitForSubscriptionBeforeCreating: boolean
+  waitForSubscriptionBeforeCreating: boolean,
 ): CallSetup {
   const [roomName, setRoomName] = useState(() =>
-    calculateInitialRoomNameFromUrl(window.location.pathname)
+    calculateInitialRoomNameFromUrl(window.location.pathname),
   );
 
   // why is this important? Because we don't want to show any
@@ -135,7 +135,7 @@ export function useCallSetupStatus(
       roomName,
       hasInitialRoom,
       waitForSubscriptionBeforeCreating,
-      isWeb3Call
+      isWeb3Call,
     ) {
       if (roomName) {
         try {
@@ -149,7 +149,7 @@ export function useCallSetupStatus(
             false,
             waitForSubscriptionBeforeCreating,
             setNotice,
-            undefined
+            undefined,
           );
 
           if (result.jwt) {
@@ -173,8 +173,8 @@ export function useCallSetupStatus(
                   roomName,
                   false,
                   waitForSubscriptionBeforeCreating,
-                  isWeb3Call
-                )
+                  isWeb3Call,
+                ),
               );
             }
           }

src/hooks/use-subscribed-status.ts

@@ -7,7 +7,7 @@ export function subscriptionCheckWithTimeout(): Promise<boolean> {
   const timeout = new Promise<boolean>((resolve) => {
     timer = setTimeout(() => {
       console.log(
-        "Timeout on checking subscription status, assuming not subscribed"
+        "Timeout on checking subscription status, assuming not subscribed",
       );
       resolve(false);
     }, 10_000);