Fix modal styles not loading correctly (#2)

* Fix modal styles not loading correctly

* Show mainnets on start instead of testnets

* Change message to be signed

* Remove wallet connect version from index page

advanced/dapps/react-dapp-v2/src/contexts/JsonRpcContext.tsx

@@ -279,7 +279,7 @@ export function JsonRpcContextProvider({
     testSignPersonalMessage: _createJsonRpcRequestHandler(
       async (chainId: string, address: string) => {
         // test message
-        const message = `My email is john@doe.com - ${Date.now()}`;
+        const message = `Hi from Urbit`;
 
         // encode message (hex)
         const hexMsg = encoding.utf8ToHex(message, true);

advanced/dapps/react-dapp-v2/src/helpers/utilities.ts

@@ -200,7 +200,7 @@ export const fromWad = (wad: BigNumberish, decimals = 18): string => {
 };
 
 export const LOCALSTORAGE_KEY_TESTNET = "TESTNET";
-export const INITIAL_STATE_TESTNET_DEFAULT = true;
+export const INITIAL_STATE_TESTNET_DEFAULT = false;
 
 export function setLocaleStorageTestnetFlag(value: boolean): void {
   if (typeof window !== "undefined") {

advanced/dapps/react-dapp-v2/src/pages/_document.tsx

@@ -0,0 +1,32 @@
+import Document from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+// Reference: https://dev.to/rsanchezp/next-js-and-styled-components-style-loading-issue-3i68
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: any) {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App: any) => (props: any) =>
+            sheet.collectStyles(<App {...props} />),
+        })
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      }
+    } finally {
+      sheet.seal()
+    }
+  }
+}

advanced/dapps/react-dapp-v2/src/pages/index.tsx

@@ -470,7 +470,6 @@ const Home: NextPage = () => {
     return !accounts.length && !Object.keys(balances).length ? (
       <SLanding center>
         <Banner />
-        <h6>{`Using v${version || "2.0.0-beta"}`}</h6>
         <SButtonContainer>
           <h6>Select chains:</h6>
           <SToggleContainer>