feat: allow any network to be used in Treasuries

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"

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(

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"

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"
             />

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 !== ''
   );
 });

apps/ui/src/components/PickerToken.vue

@@ -7,15 +7,14 @@ 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;
   loading: boolean;
   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"
           />

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" />

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