feat: add eip06963 support

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/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 { ConnectorType, StrategyConfig } from '@/networks/types';
 import { NetworkID, SpaceMetadata, SpaceSettings } from '@/types';
 
 type DeployingDependencyStep = {
@@ -49,13 +49,13 @@ const emit = defineEmits<{
 }>();
 
 const { deployDependency, createSpace } = useActions();
-const { web3, login } = useWeb3();
+const { login } = useWeb3();
 
 const currentStep = ref(0);
 const completed = ref(false);
 const failed = ref(false);
 const connectorModalOpen = ref(false);
-const connectorModalConnectors = ref([] as string[]);
+const connectorModalConnectors = ref([] as ConnectorType[]);
 const connectorCallbackFn: Ref<((value: string | false) => void) | null> =
   ref(null);
 const txIds = ref({});
@@ -101,7 +101,7 @@ const uiSteps = computed(() => {
   >[];
 });
 
-function getConnector(supportedConnectors: string[]) {
+function getConnector(supportedConnectors: ConnectorType[]) {
   connectorModalOpen.value = true;
   connectorModalConnectors.value = supportedConnectors;
 
@@ -110,7 +110,7 @@ function getConnector(supportedConnectors: string[]) {
   });
 }
 
-function handleConnectorPick(connector: string) {
+function handleConnectorPick(connector: Connector) {
   connectorCallbackFn.value?.(connector);
   connectorModalOpen.value = false;
 }
@@ -134,7 +134,7 @@ async function deployStep(
       ? step.strategy.deployConnectors
       : network.value.managerConnectors;
 
-  if (!supportedConnectors.includes(web3.value.type as Connector)) {
+  if (!supportedConnectors.includes(connector.value.type)) {
     const connector = await getConnector(supportedConnectors);
     if (!connector) throw new Error('No connector selected');
 

apps/ui/src/components/IndicatorVotingPower.vue

@@ -13,7 +13,7 @@ defineEmits<{
   (e: 'fetchVotingPower');
 }>();
 
-const { web3 } = useWeb3();
+const { web3, connector } = useWeb3();
 
 const modalOpen = ref(false);
 
@@ -41,7 +41,8 @@ function handleModalOpen() {
       <UiButton
         v-if="
           web3.account &&
-          !(evmNetworks.includes(networkId) && web3.type === 'argentx')
+          connector &&
+          !(evmNetworks.includes(networkId) && 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,22 @@
 <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 { connectors } = useConnectors();
 
-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(
   () =>
@@ -72,23 +47,22 @@ watch(open, () => (step.value = null));
     </template>
     <div class="m-4 flex flex-col gap-2">
       <template v-if="isLoggedOut">
-        <button
-          v-for="connector in availableConnectors"
+        <UiButton
+          v-for="connector in connectors"
           :key="connector.id"
+          class="w-full flex justify-center items-center gap-2"
           type="button"
-          @click="$emit('login', connector.id)"
+          @click="$emit('login', connector)"
         >
-          <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>
+          <img
+            :src="connector.info.icon"
+            height="28"
+            width="28"
+            class="rounded-lg"
+            :alt="connector.info.name"
+          />
+          {{ connector.info.name }}
+        </UiButton>
       </template>
       <template v-else>
         <UiButton

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

@@ -1,45 +1,22 @@
 <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 { connectors } = useConnectors();
 
 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;
-  });
+  return connectors.value.filter(connector =>
+    props.supportedConnectors.includes(connector.type)
+  );
 });
 </script>
 
@@ -54,17 +31,17 @@ const availableConnectors = computed(() => {
           v-for="connector in availableConnectors"
           :key="connector.id"
           type="button"
-          @click="emit('pick', connector.id)"
+          @click="emit('pick', connector)"
         >
           <UiButton class="w-full flex justify-center items-center">
             <img
-              :src="getConnectorIconUrl(connector.icon)"
+              :src="connector.info.icon"
               height="28"
               width="28"
               class="mr-2 -mt-1"
-              :alt="connector.name"
+              :alt="connector.info.name"
             />
-            {{ connector.name }}
+            {{ connector.info.name }}
           </UiButton>
         </button>
       </div>

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, connector } = useWeb3();
+
 const votes = ref<Record<Proposal['id'], Vote>>({});
 const pendingVotes = ref<Record<string, boolean>>({});
 
@@ -22,11 +22,11 @@ watch(
 export function useAccount() {
   async function loadVotes(networkId: NetworkID, spaceIds: string[]) {
     const account = web3.value.account;
-    if (!account) return;
+    if (!account || !connector.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(connector.value.type) &&
       offchainNetworks.includes(networkId)
     )
       return;