Feat/carl/networks

src/components/modals/SelectNetworkModal.tsx

@@ -26,30 +26,57 @@ export const SelectNetworkModal = (props: SelectNetworkModalProps) => {
     return getThemeColor(network);
   }, [network]);
 
-  const networks = useMemo(() => {
-    const priorityOrder = ['assethub-polkadot', 'assethub-kusama', 'assethub-paseo'];
+  const networksByCategory = useMemo(() => {
+    const categoryOrder = ['polkadot', 'kusama', 'mainnet', 'paseo', 'testnet'];
+    const specialNetworkPrefixes = ['assethub', 'coretime', 'people'];
+
+    const getNetworkTypeOrder = (name: string): number => {
+      const lowerName = name.toLowerCase();
+      for (let i = 0; i < specialNetworkPrefixes.length; i++) {
+        if (lowerName.includes(specialNetworkPrefixes[i])) {
+          return i;
+        }
+      }
+      return specialNetworkPrefixes.length;
+    };
 
-    // eslint-disable-next-line complexity
-    const compareNetworks = (a: NetConfigV2 | undefined, b: NetConfigV2 | undefined): number => {
-      const aIndex = priorityOrder.indexOf(a?.name || '');
-      const bIndex = priorityOrder.indexOf(b?.name || '');
+    const getCategoryIndex = (config: NetConfigV2): number => {
+      const category = config.category || 'mainnet';
+      return categoryOrder.indexOf(category);
+    };
 
-      if (aIndex !== -1 && bIndex !== -1) {
-        return aIndex - bIndex;
-      }
+    const compareByCategory = (a: NetConfigV2, b: NetConfigV2): number => {
+      return getCategoryIndex(a) - getCategoryIndex(b);
+    };
 
-      if (aIndex !== -1) {
-        return -1;
+    const compareByType = (a: NetConfigV2, b: NetConfigV2): number => {
+      return getNetworkTypeOrder(a.name) - getNetworkTypeOrder(b.name);
+    };
+
+    const compareNetworks = (a: NetConfigV2, b: NetConfigV2): number => {
+      const categoryComparison = compareByCategory(a, b);
+      if (categoryComparison !== 0) {
+        return categoryComparison;
       }
 
-      if (bIndex !== -1) {
-        return 1;
+      const typeComparison = compareByType(a, b);
+      if (typeComparison !== 0) {
+        return typeComparison;
       }
 
-      return (a?.name || '').localeCompare(b?.name || '');
+      return a.name.localeCompare(b.name);
     };
 
-    return _.values(chains).sort(compareNetworks);
+    const sortedNetworks = _.values(chains)
+      .filter((item): item is NetConfigV2 => !!item)
+      .sort(compareNetworks);
+
+    const grouped = categoryOrder.reduce((acc, category) => {
+      acc[category] = sortedNetworks.filter((item) => (item.category || 'mainnet') === category);
+      return acc;
+    }, {} as Record<string, NetConfigV2[]>);
+
+    return grouped;
   }, []);
 
   const [customNetworks, setCustomNetworks] = useState<NetConfigV2[]>([]);
@@ -116,7 +143,7 @@ export const SelectNetworkModal = (props: SelectNetworkModalProps) => {
       destroyOnClose
       onCancel={props.onCancel}
       closable={false}
-      width={620}
+      width={760}
       bodyStyle={{
         paddingLeft: '20px',
         paddingRight: '20px',
@@ -126,59 +153,58 @@ export const SelectNetworkModal = (props: SelectNetworkModalProps) => {
       {addCustomNetworkVisible ? (
         <AddCustomNetwork onCancel={() => setAddCustomNetworkVisible(false)} editNetwork={editingNetwork} />
       ) : (
-        <div className="overflow-auto hide-scrollbar" style={{ maxHeight: '500px' }}>
+        <div className="overflow-auto hide-scrollbar" style={{ maxHeight: '1000px' }}>
           <div className="flex items-center justify-between">
             <div className="font-bold" style={{ color: mainColor, fontSize: '16px' }}>
-              {t('mainnet')}
+              {t('network')}
             </div>
 
             <CloseOutlined className="cursor-pointer ml-2" style={{ color: '#666666' }} onClick={props.onCancel} />
           </div>
 
           <div className="mt-2 bg-divider" style={{ height: '1px' }} />
 
-          <div className="flex flex-wrap py-3">
-            {networks
-              .filter((item) => !item?.isTestnet)
-              .filter((item) => !!item)
-              .map((item) => (
-                <div
-                  key={item?.name}
-                  className="bg-gray-200 w-36 h-10 cursor-pointer flex items-center mr-5 mb-3"
-                  onClick={() => selectPresetNetwork(item)}
-                >
-                  <img src={item?.logo || subscanLogo} className="w-5 h-5 mx-3" alt="logo" />
-
-                  <div className="font-bold text-black-800 leading-none" style={{ fontSize: '14px' }}>
-                    {item?.displayName || item?.name}
+          <div className="overflow-auto hide-scrollbar" style={{ maxHeight: '400px' }}>
+            {['polkadot', 'kusama', 'mainnet', 'paseo', 'testnet'].map((category) => {
+              const categoryNetworks = networksByCategory[category] || [];
+              if (categoryNetworks.length === 0) return null;
+
+              const getCategoryLabel = (cat: string) => {
+                const labels: Record<string, string> = {
+                  polkadot: 'Polkadot',
+                  kusama: 'Kusama',
+                  mainnet: 'Mainnet',
+                  paseo: 'Paseo',
+                  testnet: 'Testnet',
+                };
+                return labels[cat] || cat;
+              };
+
+              return (
+                <div key={category}>
+                  <div className="mt-4 font-bold" style={{ color: mainColor, fontSize: '16px' }}>
+                    {getCategoryLabel(category)}
                   </div>
-                </div>
-              ))}
-          </div>
-
-          <div className="mt-1 font-bold" style={{ color: mainColor, fontSize: '16px' }}>
-            {t('testnet')}
-          </div>
-
-          <div className="mt-2 bg-divider" style={{ height: '1px' }} />
-
-          <div className="flex flex-wrap py-3">
-            {networks
-              .filter((item) => item?.isTestnet)
-              .filter((item) => !!item)
-              .map((item) => (
-                <div
-                  key={item?.name}
-                  className="bg-gray-200 w-36 h-10 cursor-pointer flex items-center mr-5 mb-3"
-                  onClick={() => selectPresetNetwork(item)}
-                >
-                  <img src={item?.logo || subscanLogo} className="w-5 h-5 mx-3" alt="logo" />
+                  <div className="mt-2 bg-divider" style={{ height: '1px' }} />
+
+                  <div className="flex flex-wrap py-3">
+                    {categoryNetworks.map((item) => (
+                      <div
+                        key={item.name}
+                        className="bg-gray-200 w-36 h-10 cursor-pointer flex items-center mr-5 mb-3"
+                        onClick={() => selectPresetNetwork(item)}
+                      >
+                        <img src={item.logo || subscanLogo} className="w-5 h-5 mx-3" alt="logo" />
 
-                  <div className="font-bold text-black-800 leading-none" style={{ fontSize: '14px' }}>
-                    {item?.displayName || item?.name}
+                        <div className="font-bold text-black-800 leading-none" style={{ fontSize: '14px' }}>
+                          {item.displayName || item.name}
+                        </div>
+                      </div>
+                    ))}
                   </div>
                 </div>
-              ))}
+              );
+            })}
           </div>
 
           <div className="mt-1 font-bold" style={{ color: mainColor, fontSize: '16px' }}>

src/config/chains/acurast.json

@@ -0,0 +1,12 @@
+{
+  "name": "acurast",
+  "displayName": "Acurast Mainnet",
+  "rpc": "wss://public-rpc.mainnet.acurast.com/",
+  "api": {
+    "subql": ""
+  },
+  "category": "mainnet",
+  "logo": "/image/acurast.png",
+  "explorerHostName": "acurast",
+  "themeColor": "#000000"
+}

src/config/chains/assethub_kusama.json

@@ -6,7 +6,8 @@
     "subql": "",
     "subscan": "https://assethub-kusama.webapi.subscan.io"
   },
-  "logo": "/image/assethub-kusama-button-mobile.png",
+  "category": "kusama",
+  "logo": "/image/assethub-kusama.png",
   "explorerHostName": "assethub-kusama",
   "themeColor": "#000000"
 }

src/config/chains/assethub_paseo.json

@@ -6,7 +6,8 @@
     "subql": "",
     "subscan": "https://assethub-paseo.webapi.subscan.io"
   },
-  "logo": "/image/assethub-paseo-button-mobile.png",
+  "category": "paseo",
+  "logo": "/image/assethub-paseo.png",
   "explorerHostName": "assethub-paseo",
   "themeColor": "#38393F"
 }

src/config/chains/assethub_polkadot.json

@@ -6,7 +6,8 @@
     "subql": "",
     "subscan": "https://assethub-polkadot.webapi.subscan.io"
   },
-  "logo": "/image/assethub-polkadot-button-mobile.png",
+  "category": "polkadot",
+  "logo": "/image/assethub-polkadot.png",
   "explorerHostName": "assethub-polkadot",
   "themeColor": "#E90979"
 }

src/config/chains/astar.json

@@ -0,0 +1,13 @@
+{
+  "name": "astar",
+  "displayName": "Astar",
+  "rpc": "wss://astar-rpc.n.dwellir.com",
+  "api": {
+    "subql": "",
+    "subscan": "https://astar.webapi.subscan.io"
+  },
+  "category": "polkadot",
+  "logo": "/image/astar.png",
+  "explorerHostName": "astar",
+  "themeColor": "#694EA4"
+}

src/config/chains/bifrost.json

@@ -0,0 +1,13 @@
+{
+  "name": "bifrost",
+  "displayName": "Bifrost",
+  "rpc": "wss://hk.p.bifrost-rpc.liebi.com/ws",
+  "api": {
+    "subql": "",
+    "subscan": "https://bifrost.webapi.subscan.io"
+  },
+  "category": "polkadot",
+  "logo": "/image/bifrost.png",
+  "explorerHostName": "bifrost",
+  "themeColor": "#5a25f0"
+}

src/config/chains/coretime_kusama.json

@@ -0,0 +1,13 @@
+{
+  "name": "coretime-kusama",
+  "displayName": "Coretime Kusama",
+  "rpc": "wss://coretime-kusama-rpc.n.dwellir.com",
+  "api": {
+    "subql": "",
+    "subscan": "https://coretime-kusama.webapi.subscan.io"
+  },
+  "category": "kusama",
+  "logo": "/image/coretime-kusama.png",
+  "explorerHostName": "coretime-kusama",
+  "themeColor": "#000000"
+}

src/config/chains/coretime_paseo.json

@@ -0,0 +1,13 @@
+{
+  "name": "coretime-paseo",
+  "displayName": "Coretime Paseo",
+  "rpc": "wss://sys.ibp.network/coretime-paseo",
+  "api": {
+    "subql": "",
+    "subscan": "https://coretime-paseo.webapi.subscan.io"
+  },
+  "category": "paseo",
+  "logo": "/image/coretime-paseo.png",
+  "explorerHostName": "coretime-paseo",
+  "themeColor": "#000000"
+}

src/config/chains/coretime_polkadot.json

@@ -0,0 +1,13 @@
+{
+  "name": "coretime-polkadot",
+  "displayName": "Coretime Polkadot",
+  "rpc": "wss://coretime-polkadot-rpc.n.dwellir.com",
+  "api": {
+    "subql": "",
+    "subscan": "https://coretime-polkadot.webapi.subscan.io"
+  },
+  "category": "polkadot",
+  "logo": "/image/coretime-polkadot.png",
+  "explorerHostName": "coretime-polkadot",
+  "themeColor": "#0F0F0F"
+}

src/config/chains/heiko.json

@@ -5,6 +5,7 @@
   "api": {
     "subql": ""
   },
+  "category": "kusama",
   "logo": "/image/parallel.svg",
   "explorerHostName": "parallel-heiko",
   "themeColor": "#42d5de"

src/config/chains/hydration.json

@@ -0,0 +1,13 @@
+{
+  "name": "hydration",
+  "displayName": "Hydration",
+  "rpc": "wss://hydration-rpc.n.dwellir.com",
+  "api": {
+    "subql": "",
+    "subscan": "https://hydration.webapi.subscan.io"
+  },
+  "category": "polkadot",
+  "logo": "/image/hydration.png",
+  "explorerHostName": "hydration",
+  "themeColor": "#E53E76"
+}

src/config/chains/hyperbridge.json

@@ -0,0 +1,12 @@
+{
+  "name": "hyperbridge",
+  "displayName": "Hyperbridge (Nexus)",
+  "rpc": "wss://nexus.ibp.network",
+  "api": {
+    "subql": ""
+  },
+  "category": "polkadot",
+  "logo": "/image/hyperbridge.png",
+  "explorerHostName": "hyperbridge",
+  "themeColor": "#ED6FF1"
+}