devop: create subnetworks

packages/extension/src/libs/domain-state/index.ts

@@ -21,6 +21,16 @@ class DomainState {
     if (state.selectedNetwork) return state.selectedNetwork;
     return null;
   }
+  async setSelectedSubNetwork(id: string): Promise<void> {
+    const state = await this.getState();
+    state.selectedSubNetworkId = id;
+    await this.setState(state);
+  }
+  async getSelectedSubNetWork(): Promise<string | null> {
+    const state = await this.getState();
+    if (state.selectedSubNetworkId) return state.selectedSubNetworkId;
+    return null;
+  }
   async setSelectedAddress(address: string): Promise<void> {
     const state = await this.getState();
     state.selectedAddress = address;

packages/extension/src/libs/domain-state/types.ts

@@ -3,5 +3,6 @@ export enum StorageKeys {
 }
 export interface IState {
   selectedNetwork?: string;
+  selectedSubNetworkId?: string;
   selectedAddress?: string;
 }

packages/extension/src/providers/kadena/libs/api.ts

@@ -8,13 +8,15 @@ import {
   createClient,
 } from "@kadena/client";
 import { toBase } from "@enkryptcom/utils";
+import DomainState from "@/libs/domain-state";
 
 class API implements ProviderAPIInterface {
   decimals: number;
   node: string;
   networkId: string;
   chainId: string;
   apiHost: string;
+  domainState: DomainState;
   displayAddress: (address: string) => string;
 
   constructor(node: string, options: KadenaNetworkOptions) {
@@ -24,6 +26,7 @@ class API implements ProviderAPIInterface {
     this.chainId = options.kadenaApiOptions.chainId;
     this.apiHost = `${node}/${this.networkId}/chain/${this.chainId}/pact`;
     this.displayAddress = options.displayAddress;
+    this.domainState = new DomainState();
   }
 
   public get api() {
@@ -37,7 +40,7 @@ class API implements ProviderAPIInterface {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   async init(): Promise<void> {}
 
-  async getTransactionStatus(hash: string): Promise<KadenaRawInfo | null> {
+  async getTransactionStatus(): Promise<KadenaRawInfo | null> {
     throw new Error("Method not implemented.");
   }
 

packages/extension/src/providers/kadena/networks/kadena-testnet.ts

@@ -22,6 +22,12 @@ const kadenaOptions: KadenaNetworkOptions = {
     networkId: "testnet04",
     chainId: "1",
   },
+  subNetworks: [
+    {
+      id: "0x0",
+      name: "Chain 0",
+    },
+  ],
   buyLink: "https://faucet.testnet.chainweb.com/",
   activityHandler: wrapActivityHandler(kadenaScanActivity),
   displayAddress: (address: string) => address.replace("0x", "k:"),

packages/extension/src/providers/kadena/networks/kadena.ts

@@ -23,6 +23,20 @@ const kadenaOptions: KadenaNetworkOptions = {
     chainId: "1",
   },
   coingeckoID: "kadena",
+  subNetworks: [
+    {
+      id: "0x0",
+      name: "Chain 0",
+    },
+    {
+      id: "0x1",
+      name: "Chain 1",
+    },
+    {
+      id: "0x2",
+      name: "Chain 2",
+    },
+  ],
   coingeckoPlatform: CoingeckoPlatform.Kadena,
   activityHandler: wrapActivityHandler(kadenaScanActivity),
   displayAddress: (address: string) => address.replace("0x", "k:"),

packages/extension/src/providers/kadena/types/kadena-network.ts

@@ -1,5 +1,9 @@
 import { Activity } from "@/types/activity";
-import { BaseNetwork, BaseNetworkOptions } from "@/types/base-network";
+import {
+  BaseNetwork,
+  BaseNetworkOptions,
+  SubNetworkOptions,
+} from "@/types/base-network";
 import { BaseTokenOptions } from "@/types/base-token";
 import { AssetsType, ProviderName } from "@/types/provider";
 import { CoingeckoPlatform, NetworkNames, SignerType } from "@enkryptcom/types";
@@ -37,6 +41,7 @@ export interface KadenaNetworkOptions {
   coingeckoID?: string;
   coingeckoPlatform?: CoingeckoPlatform;
   isAddress: (address: string) => boolean;
+  subNetworks: SubNetworkOptions[];
   activityHandler: (
     network: BaseNetwork,
     address: string
@@ -74,7 +79,7 @@ export class KadenaNetwork extends BaseNetwork {
     this.activityHandler = options.activityHandler;
   }
 
-  public async getAllTokens(pubkey: string): Promise<KDABaseToken[]> {
+  public async getAllTokens(): Promise<KDABaseToken[]> {
     throw new Error("Method not implemented.");
   }
 
@@ -99,7 +104,7 @@ export class KadenaNetwork extends BaseNetwork {
     });
   }
 
-  public async getAllTokenInfo(pubkey: string): Promise<AssetsType[]> {
+  public async getAllTokenInfo(): Promise<AssetsType[]> {
     throw new Error("Method not implemented.");
   }
 

packages/extension/src/providers/kadena/types/kda-token.ts

@@ -32,10 +32,7 @@ export class KDAToken extends KDABaseToken {
     super(options);
   }
 
-  public async getLatestUserBalance(
-    api: KadenaAPI,
-    pubkey: string
-  ): Promise<string> {
+  public async getLatestUserBalance(): Promise<string> {
     throw new Error("KDA-getLatestUserBalance is not implemented here");
   }
 

packages/extension/src/types/base-network.ts

@@ -8,6 +8,10 @@ import { Activity } from "./activity";
 import { BaseToken } from "./base-token";
 import { BNLike } from "ethereumjs-util";
 
+export interface SubNetworkOptions {
+  id: string;
+  name: string;
+}
 export interface BaseNetworkOptions {
   name: NetworkNames;
   name_long: string;
@@ -27,6 +31,7 @@ export interface BaseNetworkOptions {
   coingeckoPlatform?: CoingeckoPlatform;
   identicon: (address: string) => string;
   basePath: string;
+  subNetworks?: SubNetworkOptions[];
   api: () =>
     | Promise<SubstrateAPI>
     | Promise<EvmAPI>
@@ -54,6 +59,7 @@ export abstract class BaseNetwork {
   public identicon: (address: string) => string;
   public basePath: string;
   public decimals: number;
+  public subNetworks?: SubNetworkOptions[];
   public api: () =>
     | Promise<SubstrateAPI>
     | Promise<EvmAPI>
@@ -82,6 +88,7 @@ export abstract class BaseNetwork {
     this.customTokens = options.customTokens ?? false;
     this.coingeckoPlatform = options.coingeckoPlatform;
     this.currencyNameLong = options.currencyNameLong;
+    this.subNetworks = options.subNetworks;
   }
 
   public abstract getAllTokens(address: string): Promise<BaseToken[]>;

packages/extension/src/ui/action/App.vue

@@ -47,7 +47,7 @@
         :show-deposit="showDepositWindow"
         @update:init="init"
         @address-changed="onSelectedAddressChanged"
-        @chain-changed="onSelectedChainIdChanged"
+        @select:subnetwork="onSelectedSubnetworkChange"
         @toggle:deposit="toggleDepositWindow"
       />
       <router-view v-slot="{ Component }" name="view">
@@ -339,26 +339,28 @@ const setNetwork = async (network: BaseNetwork) => {
     }
   }
 };
-const onSelectedChainIdChanged = async (chainId: string) => {
-  try {
-    accountHeaderData.value.chainId = chainId;
-    const activeAccounts = await getAccountsByNetworkName(
-      currentNetwork.value.name
-    );
-    const thisNetworkName = currentNetwork.value.name;
-    const kadenaAPI = (await currentNetwork.value.api()) as KadenaAPI;
-    const activeBalancePromises = activeAccounts.map(
-      async (acc) => await kadenaAPI.getBalance(acc.address, chainId)
-    );
-    Promise.all(activeBalancePromises).then((balances) => {
-      if (thisNetworkName === currentNetwork.value.name)
-        accountHeaderData.value.activeBalances = balances.map((bal) =>
-          fromBase(bal, currentNetwork.value.decimals)
-        );
-    });
-  } catch (e) {
-    console.error(e);
-  }
+const onSelectedSubnetworkChange = async (id: string) => {
+  console.log(id, "subnet");
+  domainState.setSelectedSubNetwork(id);
+  // try {
+  //   accountHeaderData.value.chainId = chainId;
+  //   const activeAccounts = await getAccountsByNetworkName(
+  //     currentNetwork.value.name
+  //   );
+  //   const thisNetworkName = currentNetwork.value.name;
+  //   const kadenaAPI = (await currentNetwork.value.api()) as KadenaAPI;
+  //   const activeBalancePromises = activeAccounts.map(
+  //     async (acc) => await kadenaAPI.getBalance(acc.address, chainId)
+  //   );
+  //   Promise.all(activeBalancePromises).then((balances) => {
+  //     if (thisNetworkName === currentNetwork.value.name)
+  //       accountHeaderData.value.activeBalances = balances.map((bal) =>
+  //         fromBase(bal, currentNetwork.value.decimals)
+  //       );
+  //   });
+  // } catch (e) {
+  //   console.error(e);
+  // }
 };
 
 const onSelectedAddressChanged = async (newAccount: EnkryptAccount) => {

packages/extension/src/ui/action/components/accounts-header/components/header-accounts.vue

@@ -11,24 +11,21 @@
 
     <div class="account__actions">
       <div
-        v-if="
-          network.name == NetworkNames.Kadena ||
-          network.name == NetworkNames.KadenaTestnet
-        "
+        v-if="network.subNetworks"
         class="account__info"
         :class="{ active: showChains }"
         @click="showChains = !showChains"
       >
         <div class="account__info-name">
-          <p>Chain {{ chainId }}</p>
+          <p>{{ currentSubNetwork.name }}</p>
         </div>
 
-        <chainId-list
-          :chains="chainIds"
+        <subnet-list
+          :sub-nets="network.subNetworks"
+          :selected-id="currentSubNetwork.id"
           :show-chains="showChains"
-          :select-chains="selectChainId"
-          :selected-chain="chainId"
           v-bind="$attrs"
+          @select:subnetwork="setSubNetwork"
         />
         <switch-arrow />
       </div>
@@ -76,7 +73,7 @@ import BtcAccountState from "@/providers/bitcoin/libs/accounts-state";
 import EvmAccountState from "@/providers/ethereum/libs/accounts-state";
 import KadenaAccountState from "@/providers/kadena/libs/accounts-state";
 import SubstrateAccountState from "@/providers/polkadot/libs/accounts-state";
-import { BaseNetwork } from "@/types/base-network";
+import { BaseNetwork, SubNetworkOptions } from "@/types/base-network";
 import Notification from "@action/components/notification/index.vue";
 import Tooltip from "@action/components/tooltip/index.vue";
 import IconCopy from "@action/icons/header/copy_icon.vue";
@@ -85,15 +82,16 @@ import IconExternal from "@action/icons/header/external-icon.vue";
 import IconQr from "@action/icons/header/qr_icon.vue";
 import SwitchArrow from "@action/icons/header/switch_arrow.vue";
 import { PropType, computed, onMounted, ref } from "vue";
-import ChainIdList from "./chainId-list.vue";
-import { chainIds } from "@/providers/kadena/types";
-import { NetworkNames } from "@enkryptcom/types";
+import SubnetList from "./subnet-list.vue";
 
 const isCopied = ref(false);
 const domainState = new DomainState();
 const isConnectedDomain = ref(false);
 const showChains = ref(false);
-const chainId = ref("");
+const currentSubNetwork = ref<SubNetworkOptions>({
+  id: "",
+  name: "",
+});
 const currentDomain = ref("");
 const kadenaAccountState = new KadenaAccountState();
 const allAccountStates = [
@@ -124,7 +122,7 @@ const props = defineProps({
 });
 const emit = defineEmits<{
   (e: "toggle:deposit"): void;
-  (e: "chainChanged", chainId: string): void;
+  (e: "select:subnetwork", id: string): void;
 }>();
 
 const copy = (address: string) => {
@@ -149,22 +147,30 @@ const checkAndSetConnectedDapp = () => {
     });
   });
 };
-const getChainId = async () => {
-  chainId.value = await kadenaAccountState.getChainId();
-};
-const selectChainId = async (chainIdChanged: string) => {
-  await kadenaAccountState.setChainId(chainIdChanged);
-  chainId.value = chainIdChanged;
-  emit("chainChanged", chainIdChanged);
 
+const setSubNetwork = async (id: string) => {
+  const subnet = props.network.subNetworks!.find((net) => net.id === id);
+  if (subnet) currentSubNetwork.value = subnet;
+  emit("select:subnetwork", id);
   setTimeout(() => {
     showChains.value = false;
   }, 100);
 };
+
 onMounted(async () => {
   currentDomain.value = await domainState.getCurrentDomain();
   checkAndSetConnectedDapp();
-  await getChainId();
+  if (props.network.subNetworks) {
+    domainState.getSelectedSubNetWork().then((id) => {
+      if (id) {
+        const subnet = props.network.subNetworks!.find((net) => net.id === id);
+        if (subnet) currentSubNetwork.value = subnet;
+        return;
+      }
+    });
+    currentSubNetwork.value = props.network.subNetworks[0];
+    setSubNetwork(currentSubNetwork.value.id);
+  }
 });
 const disconnectFromDapp = async () => {
   await Promise.all(

packages/extension/src/ui/action/components/accounts-header/components/chainId-list-item.vue → packages/extension/src/ui/action/components/accounts-header/components/subnet-list-item.vue

@@ -1,35 +1,37 @@
 <template>
-  <div class="chains-item" @click="select(chain)">
+  <div class="chains-item" @click="$emit('select:subnetwork', network.id)">
     <div class="chains-item__info">
-      <p class="chains-item__info-name">Chain {{ chain }}</p>
+      <p class="chains-item__info-name">{{ network.name }}</p>
     </div>
     <done-icon v-show="isChecked" class="chains-item__checked"></done-icon>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { PropType, ref } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import DoneIcon from "@action/icons/common/done_icon.vue";
+import { SubNetworkOptions } from "@/types/base-network";
 
 const openEdit = ref(false);
 const dropdown = ref(null);
 const toggle = ref(null);
 
 defineProps({
-  chain: {
-    type: String,
-    default: "",
+  network: {
+    type: Object as PropType<SubNetworkOptions>,
+    default: () => ({
+      id: "",
+      name: "",
+    }),
   },
   isChecked: Boolean,
-  select: {
-    type: Function,
-    default: () => {
-      return {};
-    },
-  },
 });
 
+defineEmits<{
+  (e: "select:subnetwork", id: string): void;
+}>();
+
 onClickOutside(
   dropdown,
   () => {