feat: ksqt to sqt

.env.staging

@@ -1,5 +1,5 @@
 VITE_IPFS_GATEWAY=https://unauthipfs.subquery.network/ipfs/api/v0
-VITE_QUERY_REGISTRY_PROJECT=https://api.subquery.network/sq/subquery/kepler-network-staging
+VITE_QUERY_REGISTRY_PROJECT=https://api.subquery.network/sq/subquery/kepler-testnet__c3Vic
 VITE_SUBSCRIPTION_REGISTRY_PROJECT=wss://api.subquery.network/sq/subquery/kepler-network
 VITE_QUERY_SWAP_EXCHANGE_PROJECT=https://api.subquery.network/sq/subquery/kepler-network-exchange
 VITE_TOP_100_INDEXERS=https://leaderboard-api.subquery.network/graphql
@@ -10,7 +10,7 @@ VITE_STABLE_TOKEN=USDC.e
 VITE_STABLE_TOKEN_ADDRESS=0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174
 VITE_FLEXPLAN_ENABLED=true
 VITE_STUDIO_ENABLED=false
-VITE_NETWORK=kepler
+VITE_NETWORK=testnet
 VITE_GQL_PROXY=https://gql-proxy.subquery.network
 VITE_AUTH_URL=https://kepler-auth.subquery.network
 VITE_NETWORK_DEPLOYMENT_ID=QmWfLyhgwyhwAfbnHQfg4YhJG9Vuj4cuDH5R4oW35t6MYn

.env.testnet

@@ -1,5 +1,5 @@
 VITE_IPFS_GATEWAY=https://unauthipfs.subquery.network/ipfs/api/v0
-VITE_QUERY_REGISTRY_PROJECT=https://api.subquery.network/sq/subquery/kepler-testnet
+VITE_QUERY_REGISTRY_PROJECT=https://api.subquery.network/sq/subquery/kepler-testnet__c3Vic
 VITE_SUBSCRIPTION_REGISTRY_PROJECT=wss://api.subquery.network/sq/subquery/kepler-testnet
 VITE_QUERY_SWAP_EXCHANGE_PROJECT=https://api.subquery.network/sq/subquery/kepler-testnet-exchange
 VITE_TOP_100_INDEXERS=https://leaderboard-api.thechaindata.com/graphql

package.json

@@ -20,8 +20,8 @@
     "@rainbow-me/rainbowkit": "^1.2.0",
     "@sentry/react": "^7.57.0",
     "@subql/apollo-links": "^1.2.5",
-    "@subql/components": "1.0.3-21",
-    "@subql/contract-sdk": "0.16.2",
+    "@subql/components": "1.0.3-24",
+    "@subql/contract-sdk": "0.17.1-1",
     "@subql/network-clients": "^0.3.17",
     "@subql/network-config": "0.3.17-2",
     "@subql/network-query": "0.3.16-19",

src/components/IndexerDetails/Progress.tsx

@@ -3,7 +3,7 @@
 
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { ProgressBar, Typography } from '@subql/components';
+import { SubqlProgress, Typography } from '@subql/components';
 import { indexingProgress } from '@subql/network-clients';
 import { strip } from '@utils';
 
@@ -33,7 +33,7 @@ const Progress: React.FC<{ startBlock?: number; currentBlock: number; targetBloc
 
   return (
     <div className={styles.progress}>
-      <ProgressBar progress={maxProgress} className={styles.progressBar} showInfo={false} />
+      <SubqlProgress percent={maxProgress * 100} className={styles.progressBar} showInfo={false} />
       {blocksBehind > 0 && (
         <div>
           <Typography variant="medium" className={styles.precentage}>

src/components/IndexerProgress/IndexerProgress.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from 'react';
-import { ProgressBar } from '@subql/components';
+import { SubqlProgress } from '@subql/components';
 
 import styles from './IndexerProgress.module.css';
 
@@ -40,7 +40,7 @@ const IndexerProgress: React.FC<Props> = ({ indexerStatus, chainBlockHeight, sta
   return (
     <div className={[styles.container, containerClassName].join(' ')}>
       <span className={styles.status}>{status}</span>
-      <ProgressBar progress={maxProgress} />
+      <SubqlProgress percent={maxProgress * 100} />
     </div>
   );
 };

src/pages/account/index.tsx

@@ -23,7 +23,7 @@ import { AccountHeader } from './AccountHeaders/Header';
 import styles from './Account.module.less';
 
 //TODO: add fragments so can better type this
-function reduceTotal(rewards: any) {
+export function reduceTotal(rewards: any) {
   return formatEther(
     rewards?.reduce(
       (accumulator: any, currentValue: { amount: unknown }) =>
@@ -34,7 +34,7 @@ function reduceTotal(rewards: any) {
   );
 }
 
-const FormatCardLine: React.FC<{ title: string; amount: number | string; linkName: string; link: string }> = ({
+export const FormatCardLine: React.FC<{ title: string; amount: number | string; linkName: string; link: string }> = ({
   title,
   amount,
   linkName,

src/pages/indexer/MyPlans/List/List.tsx

@@ -109,7 +109,7 @@ const List: React.FC<Props> = ({ data, onRefresh, title }) => {
           return 'inactive';
         };
         return (
-          <Tag state={text().includes('inactive') ? 'error' : 'success'} style={{ textTransform: 'uppercase' }}>
+          <Tag color={text().includes('inactive') ? 'error' : 'success'} style={{ textTransform: 'uppercase' }}>
             {text()}
           </Tag>
         );

src/pages/indexer/MyProjects/OwnDeployments/OwnDeployments.tsx

@@ -4,7 +4,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { ProgressBar, Spinner } from '@subql/components';
+import { Spinner, SubqlProgress } from '@subql/components';
 import { TableTitle } from '@subql/components';
 import { getDeploymentStatus } from '@utils/getIndexerStatus';
 import { Table, TableProps, Typography } from 'antd';
@@ -51,7 +51,9 @@ export const OwnDeployments: React.FC<Props> = ({ indexer, emptyList, desc }) =>
               <Typography.Text type="secondary">{indexingProgressErr}</Typography.Text>
             </div>
           );
-        return <ProgressBar progress={truncateToDecimalPlace(indexingProgress, 2)} className={styles.progress} />;
+        return (
+          <SubqlProgress percent={truncateToDecimalPlace(indexingProgress, 2) * 100} className={styles.progress} />
+        );
       },
     },
     {

src/pages/swapksqt/index.module.less

@@ -0,0 +1,39 @@
+.swapksqt {
+  max-width: 1280px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 40px;
+
+  .swapCard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 24px;
+    max-width: 408px;
+    width: 408px;
+    border: 1px solid rgba(223, 227, 232, 0.60);
+    text-align: center;
+
+    .smallCard {
+      border-radius: 8px;
+      border: 1px solid var(--sq-gray300);
+      width: 100%;
+
+      .top {
+        background: var(--sq-gray200);
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .bottom {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}