switch to ssr mode

components/modal/web3/Web3Modal.vue

@@ -93,7 +93,7 @@ export default defineComponent({
 
       close()
     }
-    const isMetamask = computed(() => window.ethereum && window.ethereum.isMetaMask)
+    const isMetamask = computed(() => process.server ? false : window.ethereum && window.ethereum.isMetaMask)
 
     const wallets = computed(() => Object.keys(SUPPORTED_WALLETS).map((key) => {
       const wallet = SUPPORTED_WALLETS[key]

composables/useCookies.ts

@@ -0,0 +1,25 @@
+import { useContext } from "@nuxtjs/composition-api";
+import Cookies from "universal-cookie";
+
+export function useCookies() {
+  const { ssrContext } = useContext();
+  
+  const cookies = new Cookies(
+    ssrContext ? ssrContext.req.headers.cookie : null
+  );
+
+  function get(key: string) {
+    return cookies.get(key);
+  }
+
+  function set(key: string, value: any) {
+    return cookies.set(key, value, {
+      path: "/"
+    });
+  }
+
+  return {
+    get,
+    set
+  };
+}

composables/useDSA.ts

@@ -25,8 +25,6 @@ export function useDSA() {
 
 
   watch(active, () => {
-    console.log("here");
-    
     if (library.value) {
       dsa.value = new DSA(library.value, chainId.value);
     }
@@ -52,8 +50,6 @@ export function useDSA() {
     if (dsa.value) {
       refreshAccounts()
     }
-    //@ts-ignore
-    window.dsa = dsa.value;
   });
 
   watch(

composables/useEagerConnect.ts

@@ -9,7 +9,7 @@ export function useEagerConnect() {
   const tried = ref(false);
 
   watchEffect(() => {
-    if (triedToConnectToSafe.value && !active.value) {
+    if (triedToConnectToSafe.value && !active.value && !tried.value) {
       injected.isAuthorized().then((isAuthorized: boolean) => {
         if (isAuthorized) {
           activate(injected, undefined, true).catch(() => {

composables/useNetwork.ts

@@ -1,11 +1,11 @@
-import { computed, onMounted, ref, watch } from "@nuxtjs/composition-api";
-import { useLocalStorage } from "vue-composable";
+import { computed, watchEffect, ref, watch } from "@nuxtjs/composition-api";
 
 import MainnetSVG from "~/assets/icons/mainnet.svg?inline";
 import PolygonSVG from "~/assets/icons/polygon.svg?inline";
 import { useModal } from "./useModal";
 import { useNotification } from "./useNotification";
 import { useWeb3 } from "@instadapp/vue-web3";
+import { useCookies } from "./useCookies";
 
 export enum Network {
   Mainnet = "mainnet",
@@ -26,6 +26,7 @@ export function useNetwork() {
   const { showWarning } = useNotification();
   const { account, chainId } = useWeb3();
   const { showNetworksMismatchDialog } = useModal();
+  const { get: getCookie, set: setCookie } = useCookies();
 
   const networkMismatch = computed(
     () => chainId.value != activeNetwork.value?.chainId
@@ -107,16 +108,21 @@ export function useNetwork() {
   }
 
   watch(activeNetworkId, () => {
-    localStorage.setItem("network", activeNetworkId.value);
+    setCookie("network", activeNetworkId.value);
   });
 
-  onMounted(() => {
+  watchEffect(() => {
     if (activeNetworkId.value) {
       return;
     }
-    //@ts-ignore
-    activeNetworkId.value = localStorage.getItem("network") || "mainnet";
 
+    const savedNetwork = getCookie("network");
+
+    if ((Object.values(Network) as any[]).includes(savedNetwork)) {
+      activeNetworkId.value = savedNetwork as Network;
+    } else {
+      activeNetworkId.value = Network.Mainnet;
+    }
     // refreshWeb3()
   });
 

composables/useStrategy.ts

@@ -143,12 +143,6 @@ export function useStrategy(defineStrategy: DefineStrategy) {
     { immediate: true }
   );
 
-  // testing
-  onMounted(() => {
-    //@ts-ignore
-    window.strategy = strategy;
-  });
-
   return {
     strategy,
     components,

nuxt.config.js

@@ -1,7 +1,5 @@
 export default {
-  // Target: https://go.nuxtjs.dev/config-target
-  target: 'static',
-
+  ssr: !process.env.VERCEL,
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
     title: 'Assembly',

package.json

@@ -33,6 +33,7 @@
     "qrcode": "^1.4.4",
     "slugify": "^1.6.0",
     "tiny-emitter": "^2.1.0",
+    "universal-cookie": "^4.0.4",
     "v-click-outside": "^3.1.2",
     "v-tooltip": "^2.1.3",
     "vue-clipboard2": "^0.3.1",

yarn.lock

@@ -1912,6 +1912,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/cookie@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
+  integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==
+
 "@types/etag@1.8.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@types/etag/-/etag-1.8.0.tgz#37f0b1f3ea46da7ae319bbedb607e375b4c99f7e"
@@ -4746,6 +4751,11 @@ cookie@^0.3.1:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
   integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=
 
+cookie@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
+  integrity sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
+
 cookiejar@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.2.tgz#dd8a235530752f988f9a0844f3fc589e3111125c"
@@ -12580,6 +12590,14 @@ unique-slug@^2.0.0:
   dependencies:
     imurmurhash "^0.1.4"
 
+universal-cookie@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-4.0.4.tgz#06e8b3625bf9af049569ef97109b4bb226ad798d"
+  integrity sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==
+  dependencies:
+    "@types/cookie" "^0.3.3"
+    cookie "^0.4.0"
+
 universalify@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"