feat: support EIP-6963

apps/ui/package.json

@@ -27,6 +27,7 @@
   "dependencies": {
     "@apollo/client": "^3.9.5",
     "@braintree/sanitize-url": "^6.0.4",
+    "@coinbase/wallet-sdk": "4.0.4",
     "@ensdomains/eth-ens-namehash": "^2.0.15",
     "@ethersproject/abi": "^5.7.0",
     "@ethersproject/abstract-signer": "^5.7.0",
@@ -45,16 +46,19 @@
     "@headlessui-float/vue": "^0.15.0",
     "@headlessui/vue": "^1.7.23",
     "@openzeppelin/merkle-tree": "^1.0.5",
+    "@safe-global/safe-apps-provider": "^0.17.1",
+    "@safe-global/safe-apps-sdk": "^8.0.0",
     "@snapshot-labs/eslint-config-vue": "^0.1.0-beta.18",
     "@snapshot-labs/highlight": "^0.1.0-beta.2",
-    "@snapshot-labs/lock": "^0.2.10",
     "@snapshot-labs/pineapple": "^1.1.0",
     "@snapshot-labs/prettier-config": "^0.1.0-beta.18",
     "@snapshot-labs/snapshot.js": "^0.12.43",
     "@snapshot-labs/sx": "^0.1.0",
     "@tanstack/vue-query": "^5.64.2",
     "@vueuse/core": "^10.4.1",
     "@walletconnect/core": "^2.11.0",
+    "@walletconnect/ethereum-provider": "2.10.6",
+    "@walletconnect/modal": "2.6.2",
     "@walletconnect/types": "^2.11.0",
     "@walletconnect/utils": "^2.11.0",
     "@walletconnect/web3wallet": "^1.10.0",

apps/ui/src/components/App/Topnav.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { getInstance } from '@snapshot-labs/lock/plugins/vue3';
 import { getCacheHash, shorten } from '@/helpers/utils';
+import { Connector } from '@/networks/types';
 
 defineProps<{
   hasAppNav: boolean;
@@ -9,7 +9,6 @@ defineProps<{
 const route = useRoute();
 const router = useRouter();
 const usersStore = useUsersStore();
-const auth = getInstance();
 const uiStore = useUiStore();
 const { modalAccountOpen, modalAccountWithoutDismissOpen, resetAccountModal } =
   useModal();
@@ -56,7 +55,7 @@ const searchConfig = computed(() => {
   return null;
 });
 
-async function handleLogin(connector) {
+async function handleLogin(connector: Connector) {
   resetAccountModal();
   loading.value = true;
   await login(connector);
@@ -133,10 +132,7 @@ onUnmounted(() => {
         class="float-left !px-0 w-[46px] sm:w-auto sm:!px-3 text-center"
         @click="modalAccountOpen = true"
       >
-        <span
-          v-if="auth.isAuthenticated.value"
-          class="sm:flex items-center space-x-2"
-        >
+        <span v-if="web3.account" class="sm:flex items-center space-x-2">
           <UiStamp :id="user.id" :size="18" :cb="cb" />
           <span
             class="hidden sm:block truncate max-w-[120px]"

apps/ui/src/components/Connectors.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { Connector, ConnectorType } from '@/networks/types';
+
+const props = defineProps<{
+  supportedConnectors?: ConnectorType[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'click', connector: Connector): void;
+}>();
+
+const { connectors } = useConnectors();
+
+const availableConnectors = computed(() => {
+  return connectors.value.filter(connector => {
+    return !(
+      (props.supportedConnectors &&
+        !props.supportedConnectors.includes(connector.type)) ||
+      connector.type === 'gnosis'
+    );
+  });
+});
+</script>
+
+<template>
+  <UiButton
+    v-for="connector in availableConnectors"
+    :key="connector.id"
+    class="w-full flex justify-center items-center gap-2"
+    @click="emit('click', connector)"
+  >
+    <img
+      :src="connector.info.icon"
+      height="28"
+      width="28"
+      class="rounded-sm"
+      :alt="connector.info.name"
+    />
+    {{ connector.info.name }}
+  </UiButton>
+</template>

apps/ui/src/components/CreateDeploymentProgress.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { shorten } from '@/helpers/utils';
 import { getNetwork } from '@/networks';
-import { Connector, StrategyConfig } from '@/networks/types';
+import { Connector, ConnectorType, StrategyConfig } from '@/networks/types';
 import { NetworkID, SpaceMetadata, SpaceSettings } from '@/types';
 
 type DeployingDependencyStep = {
@@ -49,14 +49,14 @@ const emit = defineEmits<{
 }>();
 
 const { deployDependency, createSpace } = useActions();
-const { web3, login } = useWeb3();
+const { login, auth } = useWeb3();
 
 const currentStep = ref(0);
 const completed = ref(false);
 const failed = ref(false);
 const connectorModalOpen = ref(false);
-const connectorModalConnectors = ref([] as string[]);
-const connectorCallbackFn: Ref<((value: string | false) => void) | null> =
+const connectorModalConnectors = ref([] as ConnectorType[]);
+const connectorCallbackFn: Ref<((value: Connector | false) => void) | null> =
   ref(null);
 const txIds = ref({});
 const deployedExecutionStrategies = ref([] as StrategyConfig[]);
@@ -101,16 +101,16 @@ const uiSteps = computed(() => {
   >[];
 });
 
-function getConnector(supportedConnectors: string[]) {
+function getConnector(supportedConnectors: ConnectorType[]) {
   connectorModalOpen.value = true;
   connectorModalConnectors.value = supportedConnectors;
 
-  return new Promise<string | false>(resolve => {
+  return new Promise<Connector | false>(resolve => {
     connectorCallbackFn.value = resolve;
   });
 }
 
-function handleConnectorPick(connector: string) {
+function handleConnectorPick(connector: Connector) {
   connectorCallbackFn.value?.(connector);
   connectorModalOpen.value = false;
 }
@@ -134,11 +134,11 @@ async function deployStep(
       ? step.strategy.deployConnectors
       : network.value.managerConnectors;
 
-  if (!supportedConnectors.includes(web3.value.type as Connector)) {
-    const connector = await getConnector(supportedConnectors);
-    if (!connector) throw new Error('No connector selected');
+  if (!auth.value || !supportedConnectors.includes(auth.value.connector.type)) {
+    const selectedConnector = await getConnector(supportedConnectors);
+    if (!selectedConnector) throw new Error('No connector selected');
 
-    await login(connector);
+    await login(selectedConnector);
   }
 
   let result;

apps/ui/src/components/IndicatorVotingPower.vue

@@ -13,7 +13,7 @@ defineEmits<{
   (e: 'fetchVotingPower');
 }>();
 
-const { web3 } = useWeb3();
+const { auth } = useWeb3();
 
 const modalOpen = ref(false);
 
@@ -40,8 +40,10 @@ function handleModalOpen() {
     <UiTooltip title="Your voting power" class="flex truncate">
       <UiButton
         v-if="
-          web3.account &&
-          !(evmNetworks.includes(networkId) && web3.type === 'argentx')
+          auth &&
+          !(
+            evmNetworks.includes(networkId) && auth.connector.type === 'argentx'
+          )
         "
         :loading="loading"
         class="flex flex-row items-center justify-center gap-1 truncate"

apps/ui/src/components/Modal/Account.vue

@@ -1,47 +1,21 @@
 <script setup lang="ts">
-import { getInjected } from '@snapshot-labs/lock/src/utils';
-import connectors, {
-  getConnectorIconUrl,
-  mapConnectorId
-} from '@/helpers/connectors';
 import { getCacheHash } from '@/helpers/utils';
-
-const win = window;
-
-const injected = getInjected();
-if (injected)
-  connectors['injected'] = {
-    ...connectors['injected'],
-    ...injected,
-    id: 'injected',
-    icon: connectors[mapConnectorId(injected.id)]?.icon ?? injected.icon
-  };
+import { Connector } from '@/networks/types';
 
 const props = defineProps<{
   open: boolean;
 }>();
+
 const emit = defineEmits<{
-  (e: 'login', connector: string): void;
+  (e: 'login', connector: Connector): void;
   (e: 'close'): void;
 }>();
 
 const { open } = toRefs(props);
 const { web3, logout } = useWeb3();
 const usersStore = useUsersStore();
-const step: Ref<'connect' | null> = ref(null);
 
-const availableConnectors = computed(() => {
-  return Object.values(connectors).filter(connector => {
-    const hasNoType = !('type' in connector) || !connector.type;
-    const isActive =
-      'type' in connector &&
-      'root' in connector &&
-      connector.type === 'injected' &&
-      win[connector.root];
-
-    return hasNoType || isActive;
-  });
-});
+const step: Ref<'connect' | null> = ref(null);
 
 const user = computed(
   () =>
@@ -66,30 +40,15 @@ watch(open, () => (step.value = null));
 </script>
 
 <template>
-  <UiModal :open="open" @close="$emit('close')">
+  <UiModal :open="open" @close="emit('close')">
     <template #header>
       <h3 v-text="isLoggedOut ? 'Log in' : 'Account'" />
     </template>
     <div class="m-4 flex flex-col gap-2">
-      <template v-if="isLoggedOut">
-        <button
-          v-for="connector in availableConnectors"
-          :key="connector.id"
-          type="button"
-          @click="$emit('login', connector.id)"
-        >
-          <UiButton class="w-full flex justify-center items-center gap-2">
-            <img
-              :src="getConnectorIconUrl(connector.icon)"
-              height="28"
-              width="28"
-              class="rounded-lg"
-              :alt="connector.name"
-            />
-            {{ connector.name }}
-          </UiButton>
-        </button>
-      </template>
+      <Connectors
+        v-if="isLoggedOut"
+        @click="(connector: Connector) => emit('login', connector)"
+      />
       <template v-else>
         <UiButton
           :to="{ name: 'user', params: { user: web3.account } }"

apps/ui/src/components/Modal/Connector.vue

@@ -1,73 +1,28 @@
 <script setup lang="ts">
-import { getInjected } from '@snapshot-labs/lock/src/utils';
-import connectors, {
-  getConnectorIconUrl,
-  mapConnectorId
-} from '@/helpers/connectors';
-
-const win = window;
-
-const injected = getInjected();
-if (injected)
-  connectors['injected'] = {
-    ...connectors['injected'],
-    ...injected,
-    id: 'injected',
-    icon: connectors[mapConnectorId(injected.id)]?.icon ?? injected.icon
-  };
+import { Connector, ConnectorType } from '@/networks/types';
 
 const props = defineProps<{
   open: boolean;
-  supportedConnectors: string[];
+  supportedConnectors: ConnectorType[];
 }>();
 const emit = defineEmits<{
-  (e: 'pick', connector: string): void;
+  (e: 'pick', connector: Connector): void;
   (e: 'close'): void;
 }>();
 
 const { open } = toRefs(props);
-
-const availableConnectors = computed(() => {
-  return Object.values(connectors).filter(connector => {
-    if (!props.supportedConnectors.includes(connector.id)) return false;
-
-    const hasNoType = !('type' in connector) || !connector.type;
-    const isActive =
-      'type' in connector &&
-      'root' in connector &&
-      connector.type === 'injected' &&
-      win[connector.root];
-
-    return hasNoType || isActive;
-  });
-});
 </script>
 
 <template>
   <UiModal :open="open" @close="emit('close')">
     <template #header>
       <h3 v-text="'Log in'" />
     </template>
-    <div>
-      <div class="m-4 space-y-2 flex flex-col">
-        <button
-          v-for="connector in availableConnectors"
-          :key="connector.id"
-          type="button"
-          @click="emit('pick', connector.id)"
-        >
-          <UiButton class="w-full flex justify-center items-center">
-            <img
-              :src="getConnectorIconUrl(connector.icon)"
-              height="28"
-              width="28"
-              class="mr-2 -mt-1"
-              :alt="connector.name"
-            />
-            {{ connector.name }}
-          </UiButton>
-        </button>
-      </div>
+    <div class="m-4 space-y-2 flex flex-col">
+      <Connectors
+        :connectors-type="supportedConnectors"
+        @click="(connector: Connector) => emit('pick', connector)"
+      />
     </div>
   </UiModal>
 </template>

apps/ui/src/composables/useAccount.ts

@@ -1,11 +1,11 @@
 import { getNetwork, offchainNetworks } from '@/networks';
 import { STARKNET_CONNECTORS } from '@/networks/common/constants';
-import { Connector } from '@/networks/types';
 import { NetworkID, Proposal, Vote } from '@/types';
 
 const VOTES_LIMIT = 1000;
 
-const { web3 } = useWeb3();
+const { web3, auth } = useWeb3();
+
 const votes = ref<Record<Proposal['id'], Vote>>({});
 const pendingVotes = ref<Record<string, boolean>>({});
 
@@ -21,16 +21,16 @@ watch(
 
 export function useAccount() {
   async function loadVotes(networkId: NetworkID, spaceIds: string[]) {
-    const account = web3.value.account;
-    if (!account) return;
+    if (!auth.value) return;
 
     // On starknet account, we don't load votes for offchain networks (unsupported)
     if (
-      STARKNET_CONNECTORS.includes(web3.value.type as Connector) &&
+      STARKNET_CONNECTORS.includes(auth.value.connector.type) &&
       offchainNetworks.includes(networkId)
     )
       return;
 
+    const account = auth.value.account;
     const network = getNetwork(networkId);
     const userVotes = await network.api.loadUserVotes(spaceIds, account, {
       limit: VOTES_LIMIT