Merge to Main

src/canisters/sybilCanister.ts

@@ -1,6 +1,17 @@
+import { useMemo } from 'react';
+
 import { createActor } from 'OD/createActor';
 import config from 'Constants/config';
+import { useApiKeyStore } from 'Stores/useApiKeyStore';
 
 const sybilCanister = createActor(config.sybil_canister_id, 'sybil');
 
+export const useSybilCanister = () => {
+  const selectedCanister = useApiKeyStore.use.selectedCanister();
+
+  return useMemo(() => {
+    return createActor(selectedCanister, 'sybil');
+  }, [selectedCanister]);
+};
+
 export default sybilCanister;

src/constants/config.ts

@@ -18,8 +18,15 @@ export default {
 
   THE_GRAPH_URL: import.meta.env.VITE_THE_GRAPH_URL,
 
+  sybilCansiters: [
+    'xywyw-qiaaa-aaaad-aaema-cai',
+    'wth3l-tiaaa-aaaap-aa5uq-cai',
+    'tysiw-qaaaa-aaaak-qcikq-cai',
+  ],
+
   pythia_canister_id: isStaging ? 'xmz4o-gqaaa-aaaag-qcjva-cai' : 'ettff-uaaaa-aaaag-abpcq-cai',
   sybil_canister_id: isStaging ? 'tysiw-qaaaa-aaaak-qcikq-cai' : 'wth3l-tiaaa-aaaap-aa5uq-cai',
+  // sybil_canister_id: isStaging ? 'xywyw-qiaaa-aaaad-aaema-cai' : 'wth3l-tiaaa-aaaap-aa5uq-cai',
   apollo_canister_id: isStaging ? 'ndeka-riaaa-aaaak-afmaq-cai' : 'iuq3c-pqaaa-aaaag-qdcva-cai',
 
   weatherSource1Key: import.meta.env.VITE_WEATHER_SOURCE_1_KEY,

src/pages/APIKeys/APIKeys.tsx

@@ -10,8 +10,8 @@ import ROUTES from 'Constants/routes';
 
 import { SybilTopUp } from 'Shared/SybilTopUp';
 import { KeysTable } from './KeysTable';
-import { DomainsTable } from './DomainsTable';
 import { Example } from './Example';
+import { CanisterSelector } from './CanisterSelector';
 
 export const APIKeys = () => {
   const { width } = useWindowDimensions();
@@ -38,6 +38,8 @@ export const APIKeys = () => {
           </div>
 
           <Flex align="center" justify="space-between" gap={8} vertical={isMobile}>
+            <CanisterSelector />
+
             <SybilBalance />
 
             <AuthorizedActions>
@@ -53,10 +55,6 @@ export const APIKeys = () => {
         <div className="my-5">
           <KeysTable />
         </div>
-
-        <div className="my-5">
-          <DomainsTable />
-        </div>
       </div>
     </>
   );

src/pages/APIKeys/CanisterSelector.tsx

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+import { Select, SelectItem } from '@nextui-org/react';
+
+import config from 'Constants/config';
+import { useApiKeyStore } from 'Stores/useApiKeyStore';
+
+const items = config.sybilCansiters.map((canister) => ({
+  key: canister,
+  label: canister,
+}));
+
+export const CanisterSelector = () => {
+  const selectedCanister = useApiKeyStore.use.selectedCanister();
+  const setSelectedCanister = useApiKeyStore.use.updateSelectedCanister();
+
+  const handleSelectionChange = useCallback(
+    (items: any[], handleChange: (arg0: any) => void) => (e: any) => {
+      const item = items.find((item) => item.key == e.target.value);
+
+      handleChange(item.key);
+    },
+    [],
+  );
+
+  return (
+    <Select
+      items={items}
+      label="Sybil canister"
+      className="w-56"
+      selectedKeys={[selectedCanister]}
+      onChange={handleSelectionChange(items, setSelectedCanister)}
+    >
+      {(feed) => <SelectItem key={feed.key}>{feed.label}</SelectItem>}
+    </Select>
+  );
+};

src/pages/APIKeys/Example.tsx

@@ -1,12 +1,12 @@
 import { useState, useCallback, useMemo } from 'react';
 import { Select, SelectItem, Card, CardFooter, Switch, Snippet, Link } from '@nextui-org/react';
 
-import config from 'Constants/config';
+// import config from 'Constants/config';
 import { useApiKeyStore } from 'Stores/useApiKeyStore';
 import { useFetchApiKeys } from 'Services/sybilService';
 
 // https://tysiw-qaaaa-aaaak-qcikq-cai.icp0.io/get_xrc_data_with_proof?id=DOGE/LINK
-const host = `https://${config.sybil_canister_id}.icp0.io/`;
+// const host = `https://${config.sybil_canister_id}.icp0.io/`;
 
 const feeds = [
   {
@@ -38,19 +38,29 @@ const feeds = [
 
 const methods = [
   {
-    key: 'get_xrc_data_with_proof',
-    label: 'get_xrc_data_with_proof',
+    key: 'get_dxr_data_batch',
+    label: 'get_dxr_data_batch',
   },
   {
-    key: 'read_logs_with_proof',
-    label: 'read_logs_with_proof',
-  },
-  {
-    key: 'read_contract_with_proof',
-    label: 'read_contract_with_proof',
+    key: 'get_dxr_data_batch_with_proof',
+    label: 'get_dxr_data_batch_with_proof',
   },
+  // {
+  //   key: 'get_xrc_data_with_proof',
+  //   label: 'get_xrc_data_with_proof',
+  // },
+  // {
+  //   key: 'read_logs_with_proof',
+  //   label: 'read_logs_with_proof',
+  // },
+  // {
+  //   key: 'read_contract_with_proof',
+  //   label: 'read_contract_with_proof',
+  // },
 ];
 
+const getDxrDataBatchExtraFields = ['chain_id', 'pool_addresses[]', 'dex_type'];
+
 const readLogsExtraFields = ['chain_id', 'block_from', 'block_to', 'topics', 'limit', 'addresses'];
 
 const readContractExtraFields = [
@@ -65,9 +75,11 @@ const readContractExtraFields = [
 export const Example = () => {
   const selectedApiKey = useApiKeyStore.use.selectedApiKey();
   const updateSelectedApiKey = useApiKeyStore.use.updateSelectedApiKey();
+  const selectedCanister = useApiKeyStore.use.selectedCanister();
+  const host = `https://${selectedCanister}.icp0.io/`;
   const { data: apiKeys } = useFetchApiKeys();
 
-  const [feed, setFeed] = useState<string>(feeds[0].key);
+  const [feed] = useState<string>(feeds[0].key);
   const [method, setMethod] = useState<string>(methods[0].key);
   const [bytes, setBytes] = useState<boolean>(true);
   const [cacheTtl, setCacheTtl] = useState<boolean>(true);
@@ -89,34 +101,37 @@ export const Example = () => {
     }
   }, [apiKeys, selectedApiKey]);
 
-  const selectedFeed = useMemo(() => [feed], [feed]);
+  // const selectedFeed = useMemo(() => [feed], [feed]);
   const selectedMethod = useMemo(() => [method], [method]);
 
   const codeString = useMemo(() => {
+    console.log({ method, getDxrDataBatchExtraFields });
     if (method === 'get_xrc_data_with_proof') {
       return `${host}${method}?id=${feed}${selectedApiKey ? `&api_key=${selectedApiKey}` : ''}${bytes ? `&bytes=true` : ''}${cacheTtl ? `&cache_ttl=1800` : ''}`;
     } else if (method === 'read_logs_with_proof') {
       return `${host}${method}?${readLogsExtraFields.map((field) => `${field}={}`).join('&')}${selectedApiKey ? `&api_key=${selectedApiKey}` : ''}${bytes ? `&bytes=true` : ''}${cacheTtl ? `&cache_ttl=1800` : ''}`;
     } else if (method === 'read_contract_with_proof') {
       return `${host}${method}?${readContractExtraFields.map((field) => `${field}={}`).join('&')}${selectedApiKey ? `&api_key=${selectedApiKey}` : ''}${bytes ? `&bytes=true` : ''}${cacheTtl ? `&cache_ttl=1800` : ''}`;
+    } else if (method === 'get_dxr_data_batch_with_proof') {
+      return `${host}${method}?${getDxrDataBatchExtraFields.map((field) => `${field}={}`).join('&')}${selectedApiKey ? `&api_key=${selectedApiKey}` : ''}${bytes ? `&bytes=true` : ''}${cacheTtl ? `&cache_ttl=1800` : ''}`;
     }
 
     return '';
-  }, [method, feed, selectedApiKey, bytes, cacheTtl]);
+  }, [host, method, feed, selectedApiKey, bytes, cacheTtl]);
 
   return (
     <Card isFooterBlurred radius="lg" className="border-none">
       <div className="p-4 flex-col">
         <div className="flex gap-4 justify-center">
-          <Select
-            items={feeds}
-            label="Feed Id"
-            className="w-36"
-            selectedKeys={selectedFeed}
-            onChange={handleSelectionChange(feeds, setFeed)}
-          >
-            {(feed) => <SelectItem key={feed.key}>{feed.label}</SelectItem>}
-          </Select>
+          {/*<Select*/}
+          {/*  items={feeds}*/}
+          {/*  label="Feed Id"*/}
+          {/*  className="w-36"*/}
+          {/*  selectedKeys={selectedFeed}*/}
+          {/*  onChange={handleSelectionChange(feeds, setFeed)}*/}
+          {/*>*/}
+          {/*  {(feed) => <SelectItem key={feed.key}>{feed.label}</SelectItem>}*/}
+          {/*</Select>*/}
 
           <Select
             items={methods}
@@ -161,6 +176,12 @@ export const Example = () => {
                 &{field}={'{}'}
               </span>
             ))}
+          {method.includes('get_dxr_data_batch') &&
+            getDxrDataBatchExtraFields.map((field) => (
+              <span key={field}>
+                &{field}={'{}'}
+              </span>
+            ))}
           <span>{selectedApiKey && `&api_key=${selectedApiKey}`}</span>
           <span>{bytes && `&bytes=true`}</span>
           {cacheTtl && <span>&cache_ttl=1800 // 30 minutes</span>}

src/pages/APIKeys/SybilTable.tsx

@@ -1,27 +1,25 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Button, Progress, Tooltip, type TableProps } from '@nextui-org/react';
-import { formatUnits } from 'viem';
+import { Button, type TableProps, Snippet } from '@nextui-org/react';
 
 import { useGlobalState } from 'Providers/GlobalState';
 import { Table, type Column } from 'Components/Table';
 import { DeleteIcon } from 'SVGICons/DeleteIcon';
 import { Modal, useModal } from 'Components/Modal';
-import { type ApiKey, type AllowedDomain, useFetchBaseFee } from 'Services/sybilService';
-import { BALANCE_USD_DECIMALS } from 'Utils/balance';
+import { type ApiKey, useFetchBaseFee } from 'Services/sybilService';
 
 const columns: Column[] = [
   {
     key: 'requestCount',
     label: 'Requests',
   },
-  {
-    key: 'spent',
-    label: 'Spent',
-  },
-  {
-    key: 'limit',
-    label: 'Limit (1d)',
-  },
+  // {
+  //   key: 'spent',
+  //   label: 'Spent',
+  // },
+  // {
+  //   key: 'limit',
+  //   label: 'Limit (1d)',
+  // },
   {
     key: 'actions',
     label: 'Actions',
@@ -62,26 +60,34 @@ export const SybilTable = ({
   const { data: baseFee, isLoading: isFeeLoading } = useFetchBaseFee();
 
   const renderCell = useCallback(
-    (item: ApiKey | AllowedDomain, columnKey: string) => {
+    (item: ApiKey, columnKey: string) => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       const cellValue = item[columnKey];
 
       switch (columnKey) {
-        case 'spent':
-          return item.requestCount && baseFee
-            ? `$${formatUnits(BigInt(item.requestCount) * baseFee, BALANCE_USD_DECIMALS)}`
-            : 0;
-        case 'limit':
+        case 'apiKey':
           return (
-            <Tooltip content={`${item.requestCountToday}/${item.requestLimit}`}>
-              <Progress
-                aria-label="Loading..."
-                value={item.requestCountToday}
-                maxValue={item.requestLimit}
-              />
-            </Tooltip>
+            <div>
+              <Snippet symbol="" className="truncate">
+                {item.apiKey}
+              </Snippet>
+            </div>
           );
+        // case 'spent':
+        //   return item.requestCount && baseFee
+        //     ? `$${formatUnits(BigInt(item.requestCount) * baseFee, BALANCE_USD_DECIMALS)}`
+        //     : 0;
+        // case 'limit':
+        //   return (
+        //     <Tooltip content={`${item.requestCountToday}/${item.requestLimit}`}>
+        //       <Progress
+        //         aria-label="Loading..."
+        //         value={item.requestCountToday}
+        //         maxValue={item.requestLimit}
+        //       />
+        //     </Tooltip>
+        //   );
         case 'actions':
           return (
             <div className="flex items-center text-center">