new API

.env.development

@@ -1 +1 @@
-REACT_APP_METATAG_CSP=default-src 'self' http://localhost:3000 https://kit-free.fontawesome.com https://*.cexplorer.io https://fonts.gstatic.com/s/rubik/; object-src 'none'; style-src 'unsafe-inline' https://fonts.googleapis.com/ https://kit-free.fontawesome.com/; script-src 'self'; connect-src https://*.cexplorer.io ws:
+REACT_APP_METATAG_CSP=default-src 'self' http://localhost:3000 https://kit-free.fontawesome.com https://*.cexplorer.io https://fonts.gstatic.com/s/rubik/; object-src 'none'; style-src 'unsafe-inline' https://fonts.googleapis.com/ https://kit-free.fontawesome.com/; script-src 'self'; connect-src https://*.emurgornd.com https://zero.yoroiwallet.com ws:

.env.production

@@ -1,2 +1,2 @@
-REACT_APP_METATAG_CSP=default-src 'self' https://kit-free.fontawesome.com https://*.cexplorer.io https://fonts.gstatic.com/s/rubik/; object-src 'none'; style-src 'unsafe-inline' https://fonts.googleapis.com/ https://kit-free.fontawesome.com/; script-src 'self'; connect-src https://*.cexplorer.io
+REACT_APP_METATAG_CSP=default-src 'self' https://kit-free.fontawesome.com https://*.cexplorer.io https://fonts.gstatic.com/s/rubik/; object-src 'none'; style-src 'unsafe-inline' https://fonts.googleapis.com/ https://kit-free.fontawesome.com/; script-src 'self'; connect-src https://*.emurgornd.com https://zero.yoroiwallet.com
 INLINE_RUNTIME_CHUNK=false 

src/API/api.js

@@ -2,15 +2,15 @@
 
 import axios from 'axios';
 import seedrandom from 'seedrandom';
-import { BACKEND_URL } from '../manifestEnvs';
+import { BACKEND_URL_FOR_PREPROD, BACKEND_URL_FOR_MAINNET } from '../manifestEnvs';
 
-const backendUrl: string = BACKEND_URL;
+const SATURATION = 76293289283071;
 
 const BIAS_POOL_IDS = [
   'dbda39c8d064ff9801e376f8350efafe67c07e9e9244dd613aee5125', // EMURA
-  // '359d3f8e355c873b0b5cae1e18eb12e44dcfc2ad212706d93ac314ab', // EMURB
   '8efb053977341471256685b1069d67f4aca7166bc3f94e27ebad217f', // EMUR7
-  '0ef7aa564933ce75b695cdad66be4a39b43a22726de7c58908e0e033', // EMUR8
+  // '0ef7aa564933ce75b695cdad66be4a39b43a22726de7c58908e0e033', // EMUR8
+  '359d3f8e355c873b0b5cae1e18eb12e44dcfc2ad212706d93ac314ab', // EMURB
   '2a8294ad7538b15353b9ffd81e26dafe846ffc3f6b9e331d4c1dc030', // YORO1
   'b19f2d9498845652ae6eea5da77952b37e2bca9f59b2a98c56694cae', // YORO2
 ];
@@ -28,13 +28,13 @@ const brackets = [
   { startIndex: 53, positionGap: 27 },
 ];
 
-export type HistBPE = {|
+type HistBPE = {|
   +val: string,
   +time: string,
   +e: number,
 |};
 
-export type SocialMediaHandles = {|
+type SocialMediaHandles = {|
   tw: ?string,
   tg: ?string,
   fb: ?string,
@@ -74,14 +74,7 @@ export type Pool = {|
   +saturation: number,
 |};
 
-export type World = {|
-  +epoch: string,
-  +slot: string,
-  +stake: string,
-  +supply: number,
-  +pools: string,
-  +price: number,
-  +delegators: string,
+type World = {|
   +saturation: number,
 |};
 
@@ -102,7 +95,7 @@ export const SortingDirections = Object.freeze({
 });
 
 export type SortingEnum = $Values<typeof Sorting>;
-export type SortingDirEnum = $Values<typeof SortingDirections>;
+type SortingDirEnum = $Values<typeof SortingDirections>;
 
 export type SearchParams = {|
   limit?: number,
@@ -111,38 +104,69 @@ export type SearchParams = {|
   sortDirection?: SortingDirEnum,
 |};
 
-export type ApiPoolsResponse = {|
-  world?: World,
-  pools?: {| [string]: Pool |},
+type ApiPoolsResponse = {|
+  world: World,
+  pools: Array<Pool>,
 |};
 
-const toPoolArray: (?{| [string]: Pool |}) => Array<Pool> = (pools) => {
-  if (pools == null) return [];
-  return Object.keys(pools)
-    .map((key) => pools[key])
-    .filter((x) => x != null);
-};
 
-export function getPools(body: SearchParams): Promise<ApiPoolsResponse> {
+function transformData(poolsResponse) {
+  return {
+    world: {
+      saturation: SATURATION,
+    },
+    pools: poolsResponse?.data?.data?.map((pool) => (
+      {
+        id: pool.pool_id_hash_raw,
+        id_bech: pool.pool_id,
+        db_ticker: pool.pool_name.ticker,
+        db_name: pool.pool_name.name,
+        pledge: String(pool.pledged),
+        pledge_real: String(pool.pledged),
+        total_stake: String(pool.live_stake),
+        tax_fix: String(pool.pool_update.live.fixed_cost),
+        tax_ratio: String(pool.pool_update.live.margin),
+        blocks_epoch: pool.blocks.epoch,
+        roa: String(pool.stats.lifetime.roa),
+        handles: {},
+        saturation: pool.live_stake / SATURATION,
+        pool_pic: `https://ix.cexplorer.io/${pool.pool_id}`,
+      }
+    )) ?? [],
+  };
+}
+
+function getPools(network: 'mainnet' | 'preprod', body: SearchParams, bias: ?string = null): Promise<ApiPoolsResponse> {
   const requestBody = {
-    ...{ search: '', sort: Sorting.SCORE, limit: 250 },
+    ...{ limit: 250},
     ...body,
+    ...{ sort: 'ranking' }
   };
 
-  const encodeForm = (data) => {
-    return (Object.keys(data): any)
-      .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
-      .join('&');
-  };
+  const searchParams = new URLSearchParams();
+  if (requestBody.sort === 'ranking') {
+    searchParams.append('order', 'ranking');
+  }
+  if (requestBody.limit) {
+    searchParams.append('limit', String(requestBody.limit));
+  }
+  if (requestBody.sortDirection) {
+    searchParams.append('sort', requestBody.sortDirection);
+  }
+  if (requestBody.search) {
+    searchParams.append('name', requestBody.search);
+  }
+  if (bias) {
+    searchParams.append('poolId', bias);
+  }
+  const backendUrl = {
+    preprod: BACKEND_URL_FOR_PREPROD,
+    mainnet: BACKEND_URL_FOR_MAINNET,
+  }[network];
 
-  return axios(`${backendUrl}`, {
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    method: 'post',
-    data: encodeForm(requestBody),
-  })
+  return axios(`${backendUrl}?${searchParams.toString()}`)
     .then((response) => {
-      const poolsResponse: ApiPoolsResponse = response.data;
-      return poolsResponse;
+      return transformData(response.data);
     })
     .catch((error) => {
       console.error('API::getPools Error: ', error);
@@ -181,15 +205,16 @@ export type ListBiasedPoolsResponse = {|
 |};
 
 export async function listBiasedPools(
+  network: 'mainnet' | 'preprod',
   externalSeed: string,
   searchParams: SearchParams,
 ): Promise<ListBiasedPoolsResponse> {
-  const unbiasedPoolsResponse = await getPools(searchParams);
-  const originalPools = toPoolArray(unbiasedPoolsResponse.pools);
+  const unbiasedPoolsResponse = await getPools(network, searchParams);
+  const originalPools = unbiasedPoolsResponse.pools;
 
   const saturationLimit = unbiasedPoolsResponse.world?.saturation;
 
-  if (searchParams.search || searchParams.sort === Sorting.TICKER) {
+  if (searchParams.search || searchParams.sort === Sorting.TICKER || network !== 'mainnet') {
     // If user searched or sorted explicitly - then we don't bias
     return { pools: originalPools, saturationLimit };
   }
@@ -202,9 +227,9 @@ export async function listBiasedPools(
   const internalSeed = tail(p1?.id) + tail(p2?.id) + tail(p3?.id);
 
   try {
-    const biasedPoolsResponse = await getPools({ search: BIAS_POOLS_SEARCH_QUERY });
+    const biasedPoolsResponse = await getPools(network, ({}: any), BIAS_POOLS_SEARCH_QUERY);
     if (!biasedPoolsResponse) return { pools: unbiasedPools, saturationLimit };
-    const biasedPools = toPoolArray(biasedPoolsResponse.pools)
+    const biasedPools = biasedPoolsResponse.pools
       .filter((x) => x.id && BIAS_POOL_IDS.indexOf(x.id) >= 0)
       .sort((a, b) => {
         // this sorting is to ensure that changes in the backend response order is not affecting the final ordering
@@ -242,7 +267,3 @@ export async function listBiasedPools(
     return { pools: unbiasedPools, saturationLimit };
   }
 }
-
-export function listPools(): Promise<ApiPoolsResponse> {
-  return getPools(({}: any));
-}

src/App.js

@@ -5,7 +5,7 @@ import type { Node } from 'react';
 import GlobalStyle from './helpers/globalStyles';
 import Home from './containers/Home';
 import HomeRevamp from './containers/HomeRevamp';
-import type { UrlParams } from './containers/Home';
+import type { UrlParams } from './types';
 
 const parseIds = (array: ?string): Array<string> => {
   if (array == null) return [];
@@ -25,6 +25,7 @@ const extractParams = (locationSearch: string): UrlParams => {
     layout: params.get('layout'),
     bias: params.get('bias'),
     theme: params.get('theme'),
+    network: params.get('network') === 'preprod' ? 'preprod' : 'mainnet',
   };
 };
 

src/components/SearchRevamp.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import type { Node } from 'react';
 import styled from 'styled-components';
 import searchIcon from '../assets/search-icon.svg';
@@ -76,12 +76,16 @@ type Props = {|
   isLight?: boolean,
 |};
 
+const SEARCH_DEBOUNCE_DELAY = 500;
+
 const SearchRevamp = ({ filter, isDark, isLight }: Props): Node => {
   const [prevSearch, setPrevSearch] = useState('');
   const [searchValue, setSearchValue] = useState('');
 
   const callSearchFunction = (e) => {
-    e.preventDefault();
+    if (e) {
+      e.preventDefault();
+    }
 
     if (prevSearch !== searchValue) {
       filter(searchValue);
@@ -90,10 +94,20 @@ const SearchRevamp = ({ filter, isDark, isLight }: Props): Node => {
   };
 
   const handleSearchInputChanges = (e) => {
+    e.preventDefault();
     setSearchValue(e.target.value);
-    callSearchFunction(e);
   };
 
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      callSearchFunction();
+    }, SEARCH_DEBOUNCE_DELAY);
+
+    return () => {
+      clearTimeout(handle);
+    };
+  }, [searchValue]);
+
   return (
     <Form className="search">
       <SearchBtn onClick={callSearchFunction} type="submit">

src/containers/Home.js

@@ -20,6 +20,7 @@ import Modal from '../components/common/Modal';
 import SaturatedPoolAlert from '../components/SaturatedPoolAlert';
 import cexplorerIconMini from '../assets/cexplorer-logo-mini.svg';
 import cexplorerIcon from '../assets/cexplorer-logo-extend.svg';
+import type { UrlParams } from '../types';
 
 const Header = styled.div`
   display: flex;
@@ -71,17 +72,6 @@ const CreditSection = styled.div`
     height: 32px;
   }
 `;
-export type UrlParams = {|
-  chromeId: ?string,
-  mozId: ?string,
-  source: ?string,
-  selectedPoolIds: ?Array<string>,
-  lang: ?string,
-  totalAda: ?number,
-  layout: ?string,
-  bias: ?string,
-  theme: ?string,
-|};
 
 export type HomeProps = {|
   urlParams: UrlParams,
@@ -111,7 +101,7 @@ function Home(props: HomeProps): Node {
 
   useEffect(() => {
     setStatus('pending');
-    listBiasedPools(seed, {})
+    listBiasedPools(props.urlParams.network, seed, {})
       .then((resp: ListBiasedPoolsResponse) => {
         setStatus('resolved');
         setRowData(resp.pools);
@@ -130,7 +120,7 @@ function Home(props: HomeProps): Node {
     };
     setFilterOptions(newSearch);
     setStatus('pending');
-    listBiasedPools(seed, newSearch)
+    listBiasedPools(props.urlParams.network, seed, newSearch)
       .then((resp: ListBiasedPoolsResponse) => {
         setStatus('resolved');
         setRowData(resp.pools);
@@ -148,7 +138,7 @@ function Home(props: HomeProps): Node {
     };
     setFilterOptions(newSearch);
     setStatus('pending');
-    listBiasedPools(seed, newSearch)
+    listBiasedPools(props.urlParams.network, seed, newSearch)
       .then((resp: ListBiasedPoolsResponse) => {
         setStatus('resolved');
         setRowData(resp.pools);

src/containers/HomeRevamp.js

@@ -21,6 +21,7 @@ import DesktopTableRevamp from '../components/DesktopTableRevamp';
 import SearchRevamp from '../components/SearchRevamp';
 import MobileTableRevamp from '../components/MobileTableRevamp';
 import { formatCostLabel } from '../utils/utils';
+import type { UrlParams } from '../types';
 
 const Header = styled.div`
   display: flex;
@@ -89,18 +90,6 @@ const CreditSection = styled.div`
     height: 32px;
   }
 `;
-export type UrlParams = {|
-  chromeId: ?string,
-  mozId: ?string,
-  source: ?string,
-  selectedPoolIds: ?Array<string>,
-  lang: ?string,
-  totalAda: ?number,
-  layout: ?string,
-  bias: ?string,
-  theme: ?string,
-|};
-
 export type HomeProps = {|
   urlParams: UrlParams,
 |};
@@ -168,7 +157,7 @@ function Home(props: HomeProps): Node {
 
   useEffect(() => {
     setStatus('pending');
-    listBiasedPools(seed, {})
+    listBiasedPools(props.urlParams.network, seed, {})
       .then((resp: ListBiasedPoolsResponse) => {
         setStatus('resolved');
         setRowData(resp.pools);
@@ -189,7 +178,7 @@ function Home(props: HomeProps): Node {
     };
     setFilterOptions(newSearch);
     setStatus('pending');
-    listBiasedPools(seed, newSearch)
+    listBiasedPools(props.urlParams.network, seed, newSearch)
       .then((resp: ListBiasedPoolsResponse) => {
         setStatus('resolved');
         setRowData(resp.pools);

src/manifestEnvs.js

@@ -1,9 +1,9 @@
 // @flow
 
-const BACKEND_URL /*: string */ = process.env.BACKEND_URL != null
-  ? process.env.BACKEND_URL
-  : 'https://a.cexplorer.io/yoroi-api/';
+const BACKEND_URL_FOR_PREPROD = 'https://yoroi-backend-zero-preprod-prod.emurgornd.com/cexplorer-pool-list';
+const BACKEND_URL_FOR_MAINNET = 'https://zero.yoroiwallet.com/cexplorer-pool-list'
 
 module.exports = {
-  BACKEND_URL,
+  BACKEND_URL_FOR_PREPROD,
+  BACKEND_URL_FOR_MAINNET,
 };

src/types.js

@@ -0,0 +1,14 @@
+// @flow
+
+export type UrlParams = {|
+  chromeId: ?string,
+  mozId: ?string,
+  source: ?string,
+  selectedPoolIds: ?Array<string>,
+  lang: ?string,
+  totalAda: ?number,
+  layout: ?string,
+  bias: ?string,
+  theme: ?string,
+  network: 'mainnet' | 'preprod',
+|};