From 4a796b4216d6cdb29e51ffa90d814a7f0d1230c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wiktor=20Tkaczy=C5=84ski?= <wiktor.tkaczynski@gmail.com>
Date: Mon, 25 Nov 2024 08:22:30 +0100
Subject: [PATCH] feat: allow any network to be used in Treasuries (#957)

* feat: allow any network to be used in Treasuries

* fix: remove starknet networks from snapshotJS networks

Regression from https://github.com/snapshot-labs/sx-monorepo/pull/944
---
 apps/ui/src/components/EditorExecution.vue    | 16 +++---
 .../ui/src/components/FormSpaceTreasuries.vue |  9 +---
 apps/ui/src/components/Modal/SendToken.vue    |  6 +--
 apps/ui/src/components/Modal/StakeToken.vue   | 11 ++--
 .../src/components/Modal/TreasuryConfig.vue   | 18 ++-----
 apps/ui/src/components/PickerToken.vue        |  7 ++-
 .../components/ProposalExecutionActions.vue   |  6 +--
 .../src/components/ProposalExecutionsList.vue | 44 +++++++--------
 apps/ui/src/components/SpaceTreasury.vue      | 53 ++++++++-----------
 .../src/components/TransactionsListItem.vue   | 24 +++++----
 .../ui/src/composables/useExecutionActions.ts | 16 ++++--
 .../composables/useOffchainNetworksList.ts    |  5 +-
 apps/ui/src/composables/useTreasuries.ts      | 24 ++++-----
 apps/ui/src/composables/useTreasury.ts        | 25 ++-------
 apps/ui/src/helpers/explorer.ts               | 11 +++-
 apps/ui/src/helpers/utils.test.ts             |  4 +-
 apps/ui/src/helpers/utils.ts                  |  2 +-
 .../src/networks/common/graphqlApi/index.ts   | 51 ++++++++++--------
 apps/ui/src/networks/offchain/api/index.ts    |  8 ---
 apps/ui/src/types.ts                          |  6 +--
 20 files changed, 155 insertions(+), 191 deletions(-)

diff --git a/apps/ui/src/components/EditorExecution.vue b/apps/ui/src/components/EditorExecution.vue
index 8b4f7cf67..e5d29b80b 100644
--- a/apps/ui/src/components/EditorExecution.vue
+++ b/apps/ui/src/components/EditorExecution.vue
@@ -116,7 +116,7 @@ watch(
         class="w-full flex justify-between items-center px-4 py-3"
       >
         <UiBadgeNetwork
-          :id="treasury.networkId"
+          :chain-id="treasury.network"
           class="mr-3 shrink-0 size-fit"
           :class="{
             'opacity-40': disabled
@@ -175,7 +175,7 @@ watch(
           </UiTooltip>
         </div>
       </div>
-      <template v-if="model.length > 0 && treasury && treasury.networkId">
+      <template v-if="model.length > 0 && treasury">
         <UiLabel label="Transactions" class="border-t" />
         <div>
           <Draggable
@@ -184,7 +184,7 @@ watch(
             :item-key="() => undefined"
           >
             <template #item="{ element: tx, index: i }">
-              <TransactionsListItem :tx="tx" :network-id="treasury.networkId">
+              <TransactionsListItem :tx="tx" :chain-id="treasury.network">
                 <template #left>
                   <div
                     v-if="model.length > 1"
@@ -247,18 +247,17 @@ watch(
 
     <teleport to="#modal">
       <ModalSendToken
-        v-if="treasury && treasury.networkId"
+        v-if="treasury"
         :open="modalOpen.sendToken"
         :address="treasury.wallet"
         :network="treasury.network"
-        :network-id="treasury.networkId"
         :extra-contacts="extraContacts"
         :initial-state="modalState.sendToken"
         @close="modalOpen.sendToken = false"
         @add="addTx"
       />
       <ModalSendNft
-        v-if="treasury && treasury.networkId"
+        v-if="treasury"
         :open="modalOpen.sendNft"
         :address="treasury.wallet"
         :network="treasury.network"
@@ -268,17 +267,16 @@ watch(
         @add="addTx"
       />
       <ModalStakeToken
-        v-if="treasury && treasury.networkId"
+        v-if="treasury"
         :open="modalOpen.stakeToken"
         :address="treasury.wallet"
         :network="treasury.network"
-        :network-id="treasury.networkId"
         :initial-state="modalState.stakeToken"
         @close="modalOpen.stakeToken = false"
         @add="addTx"
       />
       <ModalTransaction
-        v-if="treasury && treasury.networkId"
+        v-if="treasury"
         :open="modalOpen.contractCall"
         :network="treasury.network"
         :extra-contacts="extraContacts"
diff --git a/apps/ui/src/components/FormSpaceTreasuries.vue b/apps/ui/src/components/FormSpaceTreasuries.vue
index e2531fcc3..64c98d3d4 100644
--- a/apps/ui/src/components/FormSpaceTreasuries.vue
+++ b/apps/ui/src/components/FormSpaceTreasuries.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import Draggable from 'vuedraggable';
-import { offchainNetworks } from '@/networks';
 import { NetworkID, SpaceMetadataTreasury } from '@/types';
 
 const model = defineModel<SpaceMetadataTreasury[]>({
   required: true
 });
 
-const props = defineProps<{
+defineProps<{
   networkId: NetworkID;
   limit?: number;
 }>();
@@ -28,11 +27,7 @@ function addTreasuryConfig(config: SpaceMetadataTreasury) {
       : model.value;
 
   const getId = (t: SpaceMetadataTreasury) => {
-    const networkIdentifeir = offchainNetworks.includes(props.networkId)
-      ? t.chainId
-      : t.network;
-
-    return `${t.name}-${networkIdentifeir}-${t.address}`;
+    return `${t.name}-${t.chainId}-${t.address}`;
   };
 
   const existingTreasuries = new Map(
diff --git a/apps/ui/src/components/Modal/SendToken.vue b/apps/ui/src/components/Modal/SendToken.vue
index 939520ee3..77c06936f 100644
--- a/apps/ui/src/components/Modal/SendToken.vue
+++ b/apps/ui/src/components/Modal/SendToken.vue
@@ -6,7 +6,7 @@ import { ETH_CONTRACT } from '@/helpers/constants';
 import { createSendTokenTransaction } from '@/helpers/transactions';
 import { clone } from '@/helpers/utils';
 import { getValidator } from '@/helpers/validation';
-import { ChainId, Contact, NetworkID, Transaction } from '@/types';
+import { ChainId, Contact, Transaction } from '@/types';
 
 const DEFAULT_FORM_STATE = {
   to: '',
@@ -26,7 +26,6 @@ const props = defineProps<{
   open: boolean;
   address: string;
   network: ChainId;
-  networkId: NetworkID;
   extraContacts?: Contact[];
   initialState?: any;
 }>();
@@ -257,7 +256,6 @@ watchEffect(async () => {
         :assets="allAssets"
         :address="address"
         :network="network"
-        :network-id="networkId"
         :loading="loading"
         :search-value="searchValue"
         @pick="
@@ -294,7 +292,7 @@ watchEffect(async () => {
           <div class="flex items-center">
             <UiStamp
               v-if="currentToken"
-              :id="`${networkId}:${currentToken.contractAddress}`"
+              :id="`eip155:${network}:${currentToken.contractAddress}`"
               type="token"
               class="mr-2"
               :size="20"
diff --git a/apps/ui/src/components/Modal/StakeToken.vue b/apps/ui/src/components/Modal/StakeToken.vue
index 942a2fd6e..4dd9a68c8 100644
--- a/apps/ui/src/components/Modal/StakeToken.vue
+++ b/apps/ui/src/components/Modal/StakeToken.vue
@@ -4,14 +4,14 @@ import { ETH_CONTRACT } from '@/helpers/constants';
 import { createStakeTokenTransaction } from '@/helpers/transactions';
 import { clone } from '@/helpers/utils';
 import { getValidator } from '@/helpers/validation';
-import { ChainId, NetworkID, Transaction } from '@/types';
+import { ChainId, Transaction } from '@/types';
 
 const STAKING_CONTRACTS = {
-  eth: {
+  1: {
     address: '0xae7ab96520de3a18e5e111b5eaab095312d7fe84',
     referral: '0x01e8CEC73B020AB9f822fD0dee3Aa4da2fe39e38'
   },
-  sep: {
+  11155111: {
     address: '0x3e3FE7dBc6B4C189E7128855dD526361c49b40Af',
     referral: '0x8C28Cf33d9Fd3D0293f963b1cd27e3FF422B425c'
   }
@@ -43,7 +43,6 @@ const props = defineProps<{
   open: boolean;
   address: string;
   network: ChainId;
-  networkId: NetworkID;
   initialState?: any;
 }>();
 
@@ -88,7 +87,7 @@ const token = computed(() => {
   return token;
 });
 
-const stakingContract = computed(() => STAKING_CONTRACTS[props.networkId]);
+const stakingContract = computed(() => STAKING_CONTRACTS[props.network]);
 
 function handleMaxClick() {
   handleAmountUpdate(
@@ -176,7 +175,7 @@ watch(
           />
           <div class="absolute right-3 top-[28px] flex items-center gap-x-2">
             <UiStamp
-              :id="`${networkId}:${stakingContract.address}`"
+              :id="`eip155:${network}:${stakingContract.address}`"
               type="token"
               :size="20"
             />
diff --git a/apps/ui/src/components/Modal/TreasuryConfig.vue b/apps/ui/src/components/Modal/TreasuryConfig.vue
index cdc171563..2c2951c7f 100644
--- a/apps/ui/src/components/Modal/TreasuryConfig.vue
+++ b/apps/ui/src/components/Modal/TreasuryConfig.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { clone } from '@/helpers/utils';
 import { validateForm } from '@/helpers/validation';
-import { offchainNetworks } from '@/networks';
 import { NetworkID, SpaceMetadataTreasury } from '@/types';
 
 const DEFAULT_FORM_STATE = {
   name: '',
   address: '',
-  network: null,
   chainId: null
 };
 
@@ -25,16 +23,12 @@ const showPicker = ref(false);
 const searchValue = ref('');
 const form: Ref<SpaceMetadataTreasury> = ref(clone(DEFAULT_FORM_STATE));
 
-const networkField = computed(() =>
-  offchainNetworks.includes(props.networkId) ? 'chainId' : 'network'
-);
-
 const definition = computed(() => {
   return {
     type: 'object',
     title: 'Space',
     additionalProperties: true,
-    required: ['name', 'network', 'address'],
+    required: ['name', 'chainId', 'address'],
     properties: {
       name: {
         type: 'string',
@@ -43,17 +37,15 @@ const definition = computed(() => {
         maxLength: 32,
         examples: ['Treasury name']
       },
-      [networkField.value]: {
+      chainId: {
         type: ['string', 'number', 'null'],
         format: 'network',
         networkId: props.networkId,
-        networksListKind: offchainNetworks.includes(props.networkId)
-          ? 'full'
-          : 'builtin',
+        networksListKind: 'full',
         title: 'Treasury network',
         nullable: true
       },
-      ...(form.value[networkField.value] !== null
+      ...(form.value.chainId !== null
         ? {
             address: {
               type: 'string',
@@ -75,7 +67,7 @@ const formErrors = computed(() =>
 const formValid = computed(() => {
   return (
     Object.keys(formErrors.value).length === 0 &&
-    form.value[networkField.value] !== null &&
+    form.value.chainId !== null &&
     form.value.address !== ''
   );
 });
diff --git a/apps/ui/src/components/PickerToken.vue b/apps/ui/src/components/PickerToken.vue
index 533d8a7dd..264b753aa 100644
--- a/apps/ui/src/components/PickerToken.vue
+++ b/apps/ui/src/components/PickerToken.vue
@@ -7,7 +7,7 @@ import { ETH_CONTRACT } from '@/helpers/constants';
 import Multicaller from '@/helpers/multicaller';
 import { getProvider } from '@/helpers/provider';
 import { _n, shorten } from '@/helpers/utils';
-import { ChainId, NetworkID } from '@/types';
+import { ChainId } from '@/types';
 
 const props = defineProps<{
   searchValue: string;
@@ -15,7 +15,6 @@ const props = defineProps<{
   assets: Token[];
   address: string;
   network: ChainId;
-  networkId: NetworkID;
 }>();
 
 const emit = defineEmits<{
@@ -143,9 +142,9 @@ watch(
       @click="handlePick(asset)"
     >
       <div class="flex items-center min-w-0 pr-2">
-        <UiBadgeNetwork :id="networkId">
+        <UiBadgeNetwork :chain-id="network">
           <UiStamp
-            :id="`${networkId}:${asset.contractAddress}`"
+            :id="`eip155:${network}:${asset.contractAddress}`"
             type="token"
             :size="32"
           />
diff --git a/apps/ui/src/components/ProposalExecutionActions.vue b/apps/ui/src/components/ProposalExecutionActions.vue
index 075b1bb98..3e211d2b1 100644
--- a/apps/ui/src/components/ProposalExecutionActions.vue
+++ b/apps/ui/src/components/ProposalExecutionActions.vue
@@ -16,7 +16,7 @@ const {
   fetchingDetails,
   message,
   executionTx,
-  executionNetwork,
+  executionTxUrl,
   finalizeProposalSending,
   executeProposalSending,
   executeQueuedProposalSending,
@@ -44,9 +44,7 @@ const network = computed(() => getNetwork(props.proposal.network));
       <a
         class="inline-flex items-center"
         target="_blank"
-        :href="
-          executionNetwork.helpers.getExplorerUrl(executionTx, 'transaction')
-        "
+        :href="executionTxUrl || undefined"
       >
         {{ shorten(executionTx) }}
         <IH-arrow-sm-right class="inline-block ml-1 -rotate-45" />
diff --git a/apps/ui/src/components/ProposalExecutionsList.vue b/apps/ui/src/components/ProposalExecutionsList.vue
index b9dbc1a91..e93ba2ad6 100644
--- a/apps/ui/src/components/ProposalExecutionsList.vue
+++ b/apps/ui/src/components/ProposalExecutionsList.vue
@@ -1,32 +1,22 @@
 <script setup lang="ts">
+import { getGenericExplorerUrl } from '@/helpers/explorer';
 import { buildBatchFile } from '@/helpers/safe/ build';
 import { getExecutionName } from '@/helpers/ui';
-import { sanitizeUrl, shorten, toBigIntOrNumber } from '@/helpers/utils';
-import { getNetwork } from '@/networks';
-import { NetworkID, Proposal, ProposalExecution } from '@/types';
+import { shorten, toBigIntOrNumber } from '@/helpers/utils';
+import { Proposal, ProposalExecution } from '@/types';
 
 defineProps<{
   proposal: Proposal;
   executions: ProposalExecution[];
 }>();
 
-function getTreasuryExplorerUrl(networkId: NetworkID, safeAddress: string) {
-  if (!safeAddress) return null;
-
-  try {
-    const network = getNetwork(networkId);
-
-    const url = network.helpers.getExplorerUrl(safeAddress, 'address');
-    return sanitizeUrl(url);
-  } catch (e) {
-    return null;
-  }
-}
-
 function downloadExecution(execution: ProposalExecution) {
   if (!execution.chainId) return;
 
-  const batchFile = buildBatchFile(execution.chainId, execution.transactions);
+  const batchFile = buildBatchFile(
+    execution.chainId as number,
+    execution.transactions
+  );
 
   const blob = new Blob([JSON.stringify(batchFile)], {
     type: 'application/json'
@@ -42,24 +32,28 @@ function downloadExecution(execution: ProposalExecution) {
 <template>
   <div
     v-for="execution in executions"
-    :key="`${execution.networkId}:${execution.safeAddress}`"
+    :key="`${execution.chainId}:${execution.safeAddress}`"
     class="x-block !border-x rounded-lg mb-3 last:mb-0"
   >
     <a
       :href="
-        getTreasuryExplorerUrl(execution.networkId, execution.safeAddress) ||
-        undefined
+        getGenericExplorerUrl(
+          execution.chainId,
+          execution.safeAddress,
+          'address'
+        ) || undefined
       "
       target="_blank"
       class="flex justify-between items-center px-4 py-3"
       :class="{
-        'pointer-events-none': !getTreasuryExplorerUrl(
-          execution.networkId,
-          execution.safeAddress
+        'pointer-events-none': !getGenericExplorerUrl(
+          execution.chainId,
+          execution.safeAddress,
+          'address'
         )
       }"
     >
-      <UiBadgeNetwork :id="execution.networkId" class="mr-3 shrink-0">
+      <UiBadgeNetwork :chain-id="execution.chainId" class="mr-3 shrink-0">
         <UiStamp
           :id="execution.safeAddress"
           type="avatar"
@@ -99,7 +93,7 @@ function downloadExecution(execution: ProposalExecution) {
     <TransactionsListItem
       v-for="(tx, i) in execution.transactions"
       :key="i"
-      :network-id="execution.networkId"
+      :chain-id="execution.chainId"
       :tx="tx"
     />
     <ProposalExecutionActions
diff --git a/apps/ui/src/components/SpaceTreasury.vue b/apps/ui/src/components/SpaceTreasury.vue
index 60c50af92..442e24650 100644
--- a/apps/ui/src/components/SpaceTreasury.vue
+++ b/apps/ui/src/components/SpaceTreasury.vue
@@ -2,10 +2,19 @@
 import { Token } from '@/helpers/alchemy';
 import { ETH_CONTRACT } from '@/helpers/constants';
 import { _c, _n, sanitizeUrl, shorten } from '@/helpers/utils';
-import { evmNetworks } from '@/networks';
-import { Contact, Space, SpaceMetadataTreasury, Transaction } from '@/types';
+import { enabledNetworks, evmNetworks, getNetwork } from '@/networks';
+import {
+  ChainId,
+  Contact,
+  Space,
+  SpaceMetadataTreasury,
+  Transaction
+} from '@/types';
 
-const ETHEREUM_NETWORKS = ['eth', 'sep'];
+const STAKING_CHAIN_IDS: ChainId[] = [1, 11155111];
+const EVM_CHAIN_IDS: ChainId[] = evmNetworks
+  .filter(network => enabledNetworks.includes(network))
+  .map(network => getNetwork(network).chainId);
 
 const props = defineProps<{
   space: Space;
@@ -33,10 +42,6 @@ const modalOpen = ref({
   walletConnectLink: false
 });
 
-const currentNetworkId = computed(() => {
-  return treasury.value?.networkId ?? null;
-});
-
 const spaceKey = computed(() => `${props.space.network}:${props.space.id}`);
 const executionStrategy = computed(
   () =>
@@ -47,7 +52,6 @@ const executionStrategy = computed(
 const isReadOnly = computed(
   () =>
     executionStrategy.value === null ||
-    !currentNetworkId.value ||
     !treasury.value?.supportsTokens ||
     !treasury.value?.supportsNfts
 );
@@ -90,10 +94,9 @@ const treasuryExplorerUrl = computed(() => {
 const hasStakeableAssets = computed(() => {
   return (
     treasury.value &&
-    treasury.value.networkId &&
     !isReadOnly.value &&
     assets.value.some(asset => asset.contractAddress === ETH_CONTRACT) &&
-    ETHEREUM_NETWORKS.includes(treasury.value.networkId)
+    STAKING_CHAIN_IDS.includes(treasury.value.network)
   );
 });
 
@@ -141,11 +144,7 @@ watchEffect(() => setTitle(`Treasury - ${props.space.name}`));
       <div class="flex-auto" />
 
       <UiTooltip
-        v-if="
-          !isReadOnly &&
-          currentNetworkId &&
-          evmNetworks.includes(currentNetworkId)
-        "
+        v-if="!isReadOnly && EVM_CHAIN_IDS.includes(treasury.network)"
         title="Connect to apps"
       >
         <UiButton
@@ -192,11 +191,7 @@ watchEffect(() => setTitle(`Treasury - ${props.space.name}`));
             'pointer-events-none': !treasuryExplorerUrl
           }"
         >
-          <UiBadgeNetwork
-            :id="treasury.networkId"
-            :chain-id="treasury.network"
-            class="mr-3"
-          >
+          <UiBadgeNetwork :chain-id="treasury.network" class="mr-3">
             <UiStamp
               :id="treasury.wallet"
               type="avatar"
@@ -296,12 +291,9 @@ watchEffect(() => setTitle(`Treasury - ${props.space.name}`));
             class="mx-4 py-3 border-b flex"
           >
             <div class="flex-auto flex items-center min-w-0 space-x-3">
-              <UiBadgeNetwork
-                :id="treasury.networkId"
-                :chain-id="treasury.network"
-              >
+              <UiBadgeNetwork :chain-id="treasury.network">
                 <UiStamp
-                  :id="`${treasury.networkId}:${asset.contractAddress}`"
+                  :id="`eip155:${treasury.network}:${asset.contractAddress}`"
                   type="token"
                   :size="32"
                 />
@@ -409,17 +401,15 @@ watchEffect(() => setTitle(`Treasury - ${props.space.name}`));
     </div>
     <teleport to="#modal">
       <ModalSendToken
-        v-if="!isReadOnly && currentNetworkId && treasury.supportsTokens"
+        v-if="!isReadOnly && treasury.supportsTokens"
         :open="modalOpen.tokens"
         :address="treasury.wallet"
         :network="treasury.network"
-        :network-id="currentNetworkId"
         :extra-contacts="extraContacts"
         @close="modalOpen.tokens = false"
         @add="addTx"
       />
       <ModalSendNft
-        v-if="currentNetworkId"
         :open="modalOpen.nfts"
         :address="treasury.wallet"
         :network="treasury.network"
@@ -428,20 +418,19 @@ watchEffect(() => setTitle(`Treasury - ${props.space.name}`));
         @add="addTx"
       />
       <ModalStakeToken
-        v-if="hasStakeableAssets && currentNetworkId"
+        v-if="hasStakeableAssets"
         :open="modalOpen.stake"
         :address="treasury.wallet"
         :network="treasury.network"
-        :network-id="currentNetworkId"
         @close="modalOpen.stake = false"
         @add="addTx"
       />
       <ModalLinkWalletConnect
-        v-if="executionStrategy && currentNetworkId"
+        v-if="executionStrategy"
         :open="modalOpen.walletConnectLink"
         :address="treasury.wallet"
         :network="treasury.network"
-        :network-id="currentNetworkId"
+        :network-id="space.network"
         :space-key="spaceKey"
         :execution-strategy="executionStrategy"
         @close="modalOpen.walletConnectLink = false"
diff --git a/apps/ui/src/components/TransactionsListItem.vue b/apps/ui/src/components/TransactionsListItem.vue
index bc2abd9c5..d226ceb8b 100644
--- a/apps/ui/src/components/TransactionsListItem.vue
+++ b/apps/ui/src/components/TransactionsListItem.vue
@@ -1,18 +1,14 @@
 <script setup lang="ts">
 import { formatUnits } from '@ethersproject/units';
+import { getGenericExplorerUrl } from '@/helpers/explorer';
 import { getNames } from '@/helpers/stamp';
 import { _n, shorten } from '@/helpers/utils';
-import { getNetwork } from '@/networks';
-import { NetworkID, Transaction } from '@/types';
+import { ChainId, Transaction } from '@/types';
 
-const props = defineProps<{ networkId: NetworkID; tx: Transaction }>();
+const props = defineProps<{ chainId: ChainId; tx: Transaction }>();
 
 const expanded = ref(false);
 
-const network = computed(() => {
-  return getNetwork(props.networkId);
-});
-
 const title = computed(() => {
   if (props.tx._type === 'sendToken') {
     return `Send <b>${_n(formatUnits(props.tx._form.amount, props.tx._form.token.decimals), 'standard', { formatDust: true })}</b> ${
@@ -183,7 +179,9 @@ const parsedTitle = computedAsync(
         <a
           class="inline-flex items-center"
           target="_blank"
-          :href="network.helpers.getExplorerUrl(call.to, 'address')"
+          :href="
+            getGenericExplorerUrl(chainId, call.to, 'address') || undefined
+          "
         >
           {{ shorten(call.to) }}
           <IH-arrow-sm-right class="inline-block ml-1 -rotate-45" />
@@ -194,7 +192,10 @@ const parsedTitle = computedAsync(
         <a
           class="inline-flex items-center"
           target="_blank"
-          :href="network.helpers.getExplorerUrl(interaction.to, 'address')"
+          :href="
+            getGenericExplorerUrl(chainId, interaction.to, 'address') ||
+            undefined
+          "
         >
           {{ shorten(interaction.to) }}
           <IH-arrow-sm-right class="inline-block ml-1 -rotate-45" />
@@ -208,7 +209,10 @@ const parsedTitle = computedAsync(
             v-if="param.type === 'address'"
             class="inline-flex items-center"
             target="_blank"
-            :href="network.helpers.getExplorerUrl(param.value, 'address')"
+            :href="
+              getGenericExplorerUrl(chainId, param.value, 'address') ||
+              undefined
+            "
           >
             {{ shorten(param.value) }}
             <IH-arrow-sm-right class="inline-block ml-1 -rotate-45" />
diff --git a/apps/ui/src/composables/useExecutionActions.ts b/apps/ui/src/composables/useExecutionActions.ts
index 46a89a2af..572e5ac63 100644
--- a/apps/ui/src/composables/useExecutionActions.ts
+++ b/apps/ui/src/composables/useExecutionActions.ts
@@ -4,6 +4,7 @@ import {
   InMemoryCache
 } from '@apollo/client/core';
 import gql from 'graphql-tag';
+import { getGenericExplorerUrl } from '@/helpers/explorer';
 import {
   getModuleAddressForTreasury,
   getOgProposalGql,
@@ -74,6 +75,16 @@ export function useExecutionActions(
     return Math.max(proposal.execution_time * 1000 - currentTimestamp.value, 0);
   });
 
+  const executionTxUrl = computed(() => {
+    if (!executionTx.value) return null;
+
+    return getGenericExplorerUrl(
+      execution.chainId,
+      executionTx.value,
+      'transaction'
+    );
+  });
+
   async function fetchEthRelayerExecutionDetails() {
     if (currentTimestamp.value < proposal.max_end * 1000) {
       message.value =
@@ -121,7 +132,7 @@ export function useExecutionActions(
 
   async function fetchOSnapExecutionDetails() {
     try {
-      if (!execution.chainId) {
+      if (!execution.chainId || typeof execution.chainId !== 'number') {
         throw new Error('Chain ID is required for oSnap execution');
       }
 
@@ -151,7 +162,6 @@ export function useExecutionActions(
           : 'Space is not configured for automatic execution.';
       } else if (data.executionTransactionHash) {
         try {
-          executionNetwork.value = getNetwork(execution.networkId);
           executionTx.value = data.executionTransactionHash;
         } catch (e) {
           message.value =
@@ -230,7 +240,7 @@ export function useExecutionActions(
     fetchingDetails,
     message,
     executionTx,
-    executionNetwork,
+    executionTxUrl,
     finalizeProposalSending,
     executeProposalSending,
     executeQueuedProposalSending,
diff --git a/apps/ui/src/composables/useOffchainNetworksList.ts b/apps/ui/src/composables/useOffchainNetworksList.ts
index f186b283d..96f9ca697 100644
--- a/apps/ui/src/composables/useOffchainNetworksList.ts
+++ b/apps/ui/src/composables/useOffchainNetworksList.ts
@@ -18,7 +18,10 @@ export function useOffchainNetworksList(
   }
 
   const networks = computed(() => {
-    const rawNetworks = Object.values(snapshotJsNetworks);
+    const rawNetworks = Object.values(snapshotJsNetworks).filter(
+      ({ chainId }) => typeof chainId === 'number'
+    );
+
     const usageValue = usage.value;
     if (!usageValue) return rawNetworks;
 
diff --git a/apps/ui/src/composables/useTreasuries.ts b/apps/ui/src/composables/useTreasuries.ts
index bddc781c8..810afd066 100644
--- a/apps/ui/src/composables/useTreasuries.ts
+++ b/apps/ui/src/composables/useTreasuries.ts
@@ -1,5 +1,4 @@
 import { SUPPORTED_CHAIN_IDS as ALCHEMY_SUPPORTED_CHAIN_IDS } from '@/helpers/alchemy';
-import { CHAIN_IDS } from '@/helpers/constants';
 import { SUPPORTED_CHAIN_IDS as OPENSEA_SUPPORTED_CHAIN_IDS } from '@/helpers/opensea';
 import { getIsOsnapEnabled } from '@/helpers/osnap';
 import { compareAddresses } from '@/helpers/utils';
@@ -21,18 +20,18 @@ export function useTreasuries(spaceRef: ComputedRef<InputType> | InputType) {
     if (offchainNetworks.includes(space.network)) {
       oSnapSupportPerTreasury = await Promise.all(
         space.treasuries.map(async treasury => {
-          if (
-            !treasury.network ||
-            !treasury.address ||
-            !CHAIN_IDS[treasury.network]
-          ) {
+          if (!treasury.address || !treasury.chainId) {
             return false;
           }
 
-          return getIsOsnapEnabled(
-            CHAIN_IDS[treasury.network] as number,
-            treasury.address
-          );
+          try {
+            return await getIsOsnapEnabled(
+              treasury.chainId as number,
+              treasury.address
+            );
+          } catch (e) {
+            return false;
+          }
         })
       );
     }
@@ -57,9 +56,8 @@ export function useTreasuries(spaceRef: ComputedRef<InputType> | InputType) {
             strategy.treasury &&
             strategy.treasury_chain &&
             treasury.address &&
-            treasury.network &&
             compareAddresses(strategy.treasury, treasury.address) &&
-            CHAIN_IDS[treasury.network] === strategy.treasury_chain
+            treasury.chainId === strategy.treasury_chain
           );
         });
 
@@ -83,7 +81,6 @@ export function useTreasuries(spaceRef: ComputedRef<InputType> | InputType) {
         // Editor will only show strategies that are:
         // - Supported by the Alchemy API
         // - Supported by the OpenSea API
-        // - Have network
         // in the future we can make it more granular
         if (strategy.treasury.chainId) {
           if (
@@ -105,7 +102,6 @@ export function useTreasuries(spaceRef: ComputedRef<InputType> | InputType) {
 
         return (
           strategy &&
-          strategy.treasury.network &&
           getNetwork(space.network).helpers.isExecutorSupported(strategy.type)
         );
       }) as StrategyWithTreasury[];
diff --git a/apps/ui/src/composables/useTreasury.ts b/apps/ui/src/composables/useTreasury.ts
index a7696bba1..592505680 100644
--- a/apps/ui/src/composables/useTreasury.ts
+++ b/apps/ui/src/composables/useTreasury.ts
@@ -1,48 +1,31 @@
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import { SUPPORTED_CHAIN_IDS as TOKENS_SUPPORTED_CHAIN_IDS } from '@/helpers/alchemy';
-import { CHAIN_IDS } from '@/helpers/constants';
 import { getGenericExplorerUrl } from '@/helpers/explorer';
 import { SUPPORTED_CHAIN_IDS as NFTS_SUPPORTED_CHAIN_IDS } from '@/helpers/opensea';
-import { getNetwork } from '@/networks';
 import { SpaceMetadataTreasury } from '@/types';
 
 export function useTreasury(treasuryData: SpaceMetadataTreasury) {
   const treasury = computed(() => {
     if (!treasuryData) return null;
 
-    const networkId = treasuryData.network;
+    const { chainId, address, name } = treasuryData;
 
-    const chainId =
-      treasuryData.chainId ?? (networkId ? CHAIN_IDS[networkId] : null);
     if (!chainId) return null;
 
     return {
-      networkId,
       network: chainId,
-      wallet: treasuryData.address,
-      name: treasuryData.name,
+      wallet: address,
+      name,
       supportsTokens: TOKENS_SUPPORTED_CHAIN_IDS.includes(chainId as any),
       supportsNfts: NFTS_SUPPORTED_CHAIN_IDS.includes(chainId as any)
     };
   });
 
-  const currentNetwork = computed(() => {
-    if (!treasury.value?.networkId) return null;
-
-    try {
-      return getNetwork(treasury.value.networkId);
-    } catch (e) {
-      return null;
-    }
-  });
-
   function getExplorerUrl(address: string, type: 'address' | 'token') {
     if (!treasury.value) return null;
 
     let url: string | null = null;
-    if (currentNetwork.value) {
-      url = currentNetwork.value.helpers.getExplorerUrl(address, type);
-    } else if (treasury.value.network) {
+    if (treasury.value.network) {
       url = getGenericExplorerUrl(treasury.value.network, address, type);
     }
 
diff --git a/apps/ui/src/helpers/explorer.ts b/apps/ui/src/helpers/explorer.ts
index 61457c28f..da68a07b0 100644
--- a/apps/ui/src/helpers/explorer.ts
+++ b/apps/ui/src/helpers/explorer.ts
@@ -9,10 +9,17 @@ import { ChainId, NetworkID } from '@/types';
 export function getGenericExplorerUrl(
   chainId: ChainId,
   address: string,
-  type: 'address' | 'token'
+  type: 'address' | 'token' | 'transaction'
 ) {
   if (typeof chainId === 'number') {
-    return `${networks[chainId].explorer.url}/${type}/${address}`;
+    let mappedType = 'tx';
+    if (type === 'address') {
+      mappedType = 'address';
+    } else if (type === 'token') {
+      mappedType = 'token';
+    }
+
+    return `${networks[chainId].explorer.url}/${mappedType}/${address}`;
   }
 
   const starknetNetwork = Object.entries(STARKNET_NETWORKS_METADATA).find(
diff --git a/apps/ui/src/helpers/utils.test.ts b/apps/ui/src/helpers/utils.test.ts
index 94eea47b0..126367bd9 100644
--- a/apps/ui/src/helpers/utils.test.ts
+++ b/apps/ui/src/helpers/utils.test.ts
@@ -68,7 +68,7 @@ describe('utils', () => {
         treasuries: [
           {
             name: 'treasury 1',
-            network: 'sep',
+            chainId: 11155111,
             address: '0x000000000000000000000000000000000000dead'
           }
         ],
@@ -106,7 +106,7 @@ describe('utils', () => {
           treasuries: [
             {
               name: 'treasury 1',
-              network: 'sep',
+              chain_id: 11155111,
               address: '0x000000000000000000000000000000000000dead'
             }
           ],
diff --git a/apps/ui/src/helpers/utils.ts b/apps/ui/src/helpers/utils.ts
index eab925ff5..0071df4bb 100644
--- a/apps/ui/src/helpers/utils.ts
+++ b/apps/ui/src/helpers/utils.ts
@@ -444,7 +444,7 @@ export function createErc1155Metadata(
       discord: metadata.discord,
       treasuries: metadata.treasuries.map(treasury => ({
         name: treasury.name,
-        network: treasury.network,
+        chain_id: treasury.chainId,
         address: treasury.address
       })),
       labels: metadata.labels?.map(label => ({
diff --git a/apps/ui/src/networks/common/graphqlApi/index.ts b/apps/ui/src/networks/common/graphqlApi/index.ts
index ea312a219..e9a0bd8cb 100644
--- a/apps/ui/src/networks/common/graphqlApi/index.ts
+++ b/apps/ui/src/networks/common/graphqlApi/index.ts
@@ -6,6 +6,7 @@ import {
 import { CHAIN_IDS } from '@/helpers/constants';
 import { getNames } from '@/helpers/stamp';
 import { clone, compareAddresses } from '@/helpers/utils';
+import { getNetwork } from '@/networks';
 import {
   NetworkApi,
   NetworkConstants,
@@ -20,6 +21,7 @@ import {
   ProposalExecution,
   ProposalState,
   Space,
+  SpaceMetadataTreasury,
   Transaction,
   User,
   UserActivity,
@@ -89,6 +91,25 @@ function formatExecution(execution: string): Transaction[] {
   }
 }
 
+function formatMetadataTreasury(treasury: string): SpaceMetadataTreasury {
+  const { name, network, chain_id, address } = JSON.parse(treasury);
+
+  if (network) {
+    // NOTE: Legacy format
+    return {
+      name,
+      address,
+      chainId: CHAIN_IDS[network]
+    };
+  }
+
+  return {
+    name,
+    address,
+    chainId: chain_id
+  };
+}
+
 function processStrategiesMetadata(
   parsedMetadata: ApiStrategyParsedMetadata[],
   strategiesIndicies?: number[]
@@ -135,15 +156,9 @@ function processExecutions(
     strategy => strategy.address === proposal.execution_strategy
   );
 
-  const treasuries = proposal.space.metadata.treasuries.map(treasury => {
-    const { name, network, address } = JSON.parse(treasury);
-
-    return {
-      name,
-      network,
-      address
-    };
-  });
+  const treasuries = proposal.space.metadata.treasuries.map(treasury =>
+    formatMetadataTreasury(treasury)
+  );
 
   const matchingTreasury = treasuries.find(treasury => {
     if (!match) return null;
@@ -151,7 +166,7 @@ function processExecutions(
     return (
       match.treasury &&
       compareAddresses(treasury.address, match.treasury) &&
-      match.treasury_chain === CHAIN_IDS[treasury.network]
+      match.treasury_chain === treasury.chainId
     );
   });
 
@@ -160,7 +175,8 @@ function processExecutions(
       strategyType: match?.type || '',
       safeAddress: match?.treasury || '',
       safeName: matchingTreasury?.name || 'Unnamed treasury',
-      networkId: matchingTreasury?.network || executionNetworkId,
+      chainId:
+        matchingTreasury?.chainId || getNetwork(executionNetworkId).chainId,
       transactions
     }
   ];
@@ -185,16 +201,9 @@ function formatSpace(
     terms: '',
     voting_power_symbol: space.metadata.voting_power_symbol,
     voting_types: constants.EDITOR_VOTING_TYPES,
-    treasuries: space.metadata.treasuries.map(treasury => {
-      const { name, network, address } = JSON.parse(treasury);
-
-      return {
-        name,
-        network,
-        address,
-        chainId: CHAIN_IDS[network]
-      };
-    }),
+    treasuries: space.metadata.treasuries.map(treasury =>
+      formatMetadataTreasury(treasury)
+    ),
     labels: space.metadata.labels.map(label => {
       const { id, name, description, color } = JSON.parse(label);
       return { id, name, description, color };
diff --git a/apps/ui/src/networks/offchain/api/index.ts b/apps/ui/src/networks/offchain/api/index.ts
index 4d552a072..f7593d2bb 100644
--- a/apps/ui/src/networks/offchain/api/index.ts
+++ b/apps/ui/src/networks/offchain/api/index.ts
@@ -60,13 +60,6 @@ import { DEFAULT_VOTING_DELAY } from '../constants';
 
 const DEFAULT_AUTHENTICATOR = 'OffchainAuthenticator';
 
-const TREASURY_NETWORKS = new Map(
-  Object.entries(CHAIN_IDS).map(([networkId, chainId]) => [
-    chainId,
-    networkId as keyof typeof CHAIN_IDS
-  ])
-);
-
 const DELEGATION_STRATEGIES = [
   'delegation',
   'erc20-balance-of-delegation',
@@ -101,7 +94,6 @@ function formatSpace(
 
     return {
       name: treasury.name,
-      network: TREASURY_NETWORKS.get(chainId) ?? null,
       address: treasury.address,
       chainId
     };
diff --git a/apps/ui/src/types.ts b/apps/ui/src/types.ts
index f87600e73..6f0ca6131 100644
--- a/apps/ui/src/types.ts
+++ b/apps/ui/src/types.ts
@@ -61,9 +61,8 @@ export type SelectedStrategy = {
 
 export type SpaceMetadataTreasury = {
   name: string;
-  network: Exclude<NetworkID, 's' | 's-tn'> | null;
   address: string;
-  chainId?: ChainId | null;
+  chainId: ChainId | null;
 };
 
 export type SpaceMetadataLabel = {
@@ -217,9 +216,8 @@ export type ProposalExecution = {
   strategyType: string;
   safeName: string;
   safeAddress: string;
-  networkId: NetworkID;
   transactions: Transaction[];
-  chainId?: number;
+  chainId: ChainId;
 };
 
 export type Proposal = {