feat: add currency configuration and dynamic display for Proof of Yie…

…ld components
OriginProtocol · Jan 30, 2025 · 024152c · 024152c
1 parent 261ac4b
commit 024152c
Show file tree

Hide file tree

Showing 9 changed files with 143 additions and 42 deletions.
diff --git a/libs/analytics/shared/src/components/ProofOfYield/components/DailyYieldCard.tsx b/libs/analytics/shared/src/components/ProofOfYield/components/DailyYieldCard.tsx
@@ -9,7 +9,7 @@ import type { CardProps } from '@mui/material';
 
 export const DailyYieldCard = (props: CardProps) => {
   const intl = useIntl();
-  const { token, selectedItem, isLoading, yKey } = usePoY();
+  const { token, selectedItem, isLoading, yKey, config } = usePoY();
 
   return (
     <Card {...props}>
@@ -58,22 +58,33 @@ export const DailyYieldCard = (props: CardProps) => {
             },
             {
               label: intl.formatMessage({ defaultMessage: 'Vault value' }),
-              value: intl.formatNumber(selectedItem?.tvlETH ?? 0, {
-                maximumFractionDigits: 1,
-              }),
+              value: intl.formatNumber(
+                config.currency === 'USD'
+                  ? (selectedItem?.tvlUSD ?? 0)
+                  : (selectedItem?.tvlETH ?? 0),
+                {
+                  maximumFractionDigits: 1,
+                },
+              ),
+              currency: config.currency,
             },
             {
               label: intl.formatMessage({ defaultMessage: 'Fees generated' }),
-              value: intl.formatNumber(selectedItem?.feesETH ?? 0, {
-                maximumFractionDigits: 3,
-                minimumFractionDigits: 3,
-              }),
+              value: intl.formatNumber(
+                config.currency === 'USD'
+                  ? (selectedItem?.feesUSD ?? 0)
+                  : (selectedItem?.feesETH ?? 0),
+                {
+                  maximumFractionDigits: 3,
+                  minimumFractionDigits: 3,
+                },
+              ),
+              currency: config.currency,
             },
-          ].map(({ label, value }) => (
+          ].map((item) => (
             <ValueLabel
-              key={label}
-              label={label}
-              value={value}
+              key={item.label}
+              {...item}
               isLoading={isLoading}
               valueProps={{
                 variant: 'body1',

diff --git a/libs/analytics/shared/src/components/ProofOfYield/components/YieldEventsCard.tsx b/libs/analytics/shared/src/components/ProofOfYield/components/YieldEventsCard.tsx
@@ -14,6 +14,7 @@ import {
   Typography,
 } from '@mui/material';
 import {
+  CurrencyLabel,
   ExternalLink,
   Spinner,
   TablePagination,
@@ -48,7 +49,7 @@ const columnHelper = createColumnHelper<{
 }>();
 
 export const YieldEventsCard = (props: CardProps) => {
-  const { token, selectedItem } = usePoY();
+  const { token, selectedItem, config } = usePoY();
   const ts = dayjs.utc(selectedItem?.timestamp);
   const morning = ts.hour(0).minute(0).second(0).millisecond(0);
   const evening = ts.hour(23).minute(59).second(59).millisecond(999);
@@ -65,8 +66,19 @@ export const YieldEventsCard = (props: CardProps) => {
       placeholderData: keepPreviousData,
       select: (data) =>
         data?.oTokenRebases?.map((d) => {
-          const fees = [BigInt(d?.feeETH ?? 0), token.decimals] as Dnum;
-          const amount = sub([BigInt(d?.yieldETH ?? 0), token.decimals], fees);
+          const fees =
+            config.currency === 'USD'
+              ? ([BigInt(d?.feeUSD ?? 0), token.decimals] as Dnum)
+              : config.currency === 'ETH'
+                ? ([BigInt(d?.feeETH ?? 0), token.decimals] as Dnum)
+                : ([BigInt(d?.fee ?? 0), token.decimals] as Dnum);
+          const yieldAmt =
+            config.currency === 'USD'
+              ? ([BigInt(d?.yieldUSD ?? 0), token.decimals] as Dnum)
+              : config.currency === 'ETH'
+                ? ([BigInt(d?.yieldETH ?? 0), token.decimals] as Dnum)
+                : ([BigInt(d?.yield ?? 0), token.decimals] as Dnum);
+          const amount = sub(yieldAmt, fees);
 
           return {
             timestamp: new Date(d.timestamp).getTime(),
@@ -110,14 +122,24 @@ export const YieldEventsCard = (props: CardProps) => {
         size: 200,
       }),
       columnHelper.accessor('amount', {
-        cell: (info) =>
-          intl.formatNumber(info.getValue(), { maximumFractionDigits: 4 }),
+        cell: (info) => (
+          <CurrencyLabel currency={config.currency}>
+            {intl.formatNumber(info.getValue(), {
+              maximumFractionDigits: config.currencyDigits,
+            })}
+          </CurrencyLabel>
+        ),
         header: intl.formatMessage({ defaultMessage: 'Amount' }),
         size: 100,
       }),
       columnHelper.accessor('fees', {
-        cell: (info) =>
-          intl.formatNumber(info.getValue(), { maximumFractionDigits: 4 }),
+        cell: (info) => (
+          <CurrencyLabel currency={config.currency}>
+            {intl.formatNumber(info.getValue(), {
+              maximumFractionDigits: config.currencyDigits,
+            })}
+          </CurrencyLabel>
+        ),
         header: intl.formatMessage({ defaultMessage: 'Fees' }),
         size: 100,
       }),

diff --git a/libs/analytics/shared/src/constants/oTokenConfig.ts b/libs/analytics/shared/src/constants/oTokenConfig.ts
@@ -29,6 +29,8 @@ export type OTokenConfig = {
   currency: Currency;
   // default currency options for chart display
   currencyOptions?: Currency[];
+  // default number of digits for currency display
+  currencyDigits?: number;
 };
 
 export const oTokenConfig: Record<string, OTokenConfig> = {
@@ -42,13 +44,15 @@ export const oTokenConfig: Record<string, OTokenConfig> = {
     lineChartColor: '#586CF8',
     currency: 'ETH',
     currencyOptions: ['ETH', 'USD'],
+    currencyDigits: 4,
   },
   [tokens.arbitrum.wOETH.id]: {
     from: '2024-02-07T00:00:00.000000Z',
     availableNetworks: [arbitrum],
     dripperToken: tokens.arbitrum.WETH,
     currency: 'ETH',
     currencyOptions: ['ETH', 'USD'],
+    currencyDigits: 4,
   },
   [tokens.mainnet.OUSD.id]: {
     from: '2023-06-01T00:00:00.000000Z',
@@ -59,6 +63,7 @@ export const oTokenConfig: Record<string, OTokenConfig> = {
     lineChartColor: '#14C4BA',
     currency: 'USD',
     currencyOptions: ['ETH', 'USD'],
+    currencyDigits: 2,
   },
   [tokens.base.superOETHb.id]: {
     from: '2024-08-28T00:00:00.000000Z',
@@ -72,6 +77,7 @@ export const oTokenConfig: Record<string, OTokenConfig> = {
     lineChartColor: '#7A26F3',
     currency: 'ETH',
     currencyOptions: ['ETH', 'USD'],
+    currencyDigits: 4,
   },
   [tokens.mainnet['ARM-WETH-stETH'].id]: {
     from: '2024-08-28T00:00:00.000000Z',
@@ -83,6 +89,7 @@ export const oTokenConfig: Record<string, OTokenConfig> = {
     lineChartColor: '#E85BFF',
     currency: 'ETH',
     currencyOptions: ['ETH', 'USD'],
+    currencyDigits: 4,
   },
   [tokens.sonic.OS.id]: {
     from: '2025-01-20T00:00:00.000000Z',
@@ -95,5 +102,6 @@ export const oTokenConfig: Record<string, OTokenConfig> = {
     lineChartColor: '#E79156',
     currency: 'S',
     currencyOptions: ['S', 'USD'],
+    currencyDigits: 2,
   },
 };
diff --git a/libs/analytics/shared/src/queries/oTokens.generated.ts b/libs/analytics/shared/src/queries/oTokens.generated.ts
@@ -48,7 +48,7 @@ export type OTokenRebasesQueryVariables = Types.Exact<{
 }>;
 
 
-export type OTokenRebasesQuery = { __typename?: 'Query', oTokenRebases: Array<{ __typename?: 'OTokenRebase', blockNumber: number, feeETH: string, totalSupply: string, txHash: string, yieldETH: string, timestamp: string }> };
+export type OTokenRebasesQuery = { __typename?: 'Query', oTokenRebases: Array<{ __typename?: 'OTokenRebase', blockNumber: number, txHash: string, timestamp: string, fee: string, feeETH: string, feeUSD: string, yield: string, yieldETH: string, yieldUSD: string, totalSupply: string }> };
 
 export type OTokenStrategiesQueryVariables = Types.Exact<{
   chainId: Types.Scalars['Float']['input'];
@@ -207,11 +207,15 @@ export const OTokenRebasesDocument = `
     where: {timestamp_gte: $from, timestamp_lte: $to, otoken_eq: $token, chainId_eq: $chainId}
   ) {
     blockNumber
-    feeETH
-    totalSupply
     txHash
-    yieldETH
     timestamp
+    fee
+    feeETH
+    feeUSD
+    yield
+    yieldETH
+    yieldUSD
+    totalSupply
   }
 }
     `;

diff --git a/libs/analytics/shared/src/queries/oTokens.graphql b/libs/analytics/shared/src/queries/oTokens.graphql
@@ -100,11 +100,15 @@ query oTokenRebases(
     }
   ) {
     blockNumber
-    feeETH
-    totalSupply
     txHash
-    yieldETH
     timestamp
+    fee
+    feeETH
+    feeUSD
+    yield
+    yieldETH
+    yieldUSD
+    totalSupply    
   }
 }
 

diff --git a/libs/defi/shared/src/queries/snapshot.generated.ts b/libs/defi/shared/src/queries/snapshot.generated.ts
@@ -179,6 +179,13 @@ export type Metrics = {
   total?: Maybe<Scalars['Int']['output']>;
 };
 
+export type Network = {
+  __typename?: 'Network';
+  id: Scalars['String']['output'];
+  premium?: Maybe<Scalars['Boolean']['output']>;
+  spacesCount?: Maybe<Scalars['Int']['output']>;
+};
+
 export type Option = {
   __typename?: 'Option';
   name?: Maybe<Scalars['String']['output']>;
@@ -286,7 +293,7 @@ export type Query = {
   follows?: Maybe<Array<Maybe<Follow>>>;
   leaderboards?: Maybe<Array<Maybe<Leaderboard>>>;
   messages?: Maybe<Array<Maybe<Message>>>;
-  networks?: Maybe<Array<Maybe<Item>>>;
+  networks?: Maybe<Array<Maybe<Network>>>;
   options?: Maybe<Array<Maybe<Option>>>;
   plugins?: Maybe<Array<Maybe<Item>>>;
   proposal?: Maybe<Proposal>;
@@ -472,6 +479,19 @@ export type RolesWhere = {
   address: Scalars['String']['input'];
 };
 
+export type SkinSettings = {
+  __typename?: 'SkinSettings';
+  bg_color?: Maybe<Scalars['String']['output']>;
+  border_color?: Maybe<Scalars['String']['output']>;
+  content_color?: Maybe<Scalars['String']['output']>;
+  header_color?: Maybe<Scalars['String']['output']>;
+  heading_color?: Maybe<Scalars['String']['output']>;
+  link_color?: Maybe<Scalars['String']['output']>;
+  primary_color?: Maybe<Scalars['String']['output']>;
+  text_color?: Maybe<Scalars['String']['output']>;
+  theme?: Maybe<Scalars['String']['output']>;
+};
+
 export type Space = {
   __typename?: 'Space';
   about?: Maybe<Scalars['String']['output']>;
@@ -512,6 +532,7 @@ export type Space = {
   proposalsCount30d?: Maybe<Scalars['Int']['output']>;
   rank?: Maybe<Scalars['Float']['output']>;
   skin?: Maybe<Scalars['String']['output']>;
+  skinSettings?: Maybe<SkinSettings>;
   strategies?: Maybe<Array<Maybe<Strategy>>>;
   symbol?: Maybe<Scalars['String']['output']>;
   template?: Maybe<Scalars['String']['output']>;

diff --git a/libs/governance/proposals/src/snapshot.generated.ts b/libs/governance/proposals/src/snapshot.generated.ts
@@ -179,6 +179,13 @@ export type Metrics = {
   total?: Maybe<Scalars['Int']['output']>;
 };
 
+export type Network = {
+  __typename?: 'Network';
+  id: Scalars['String']['output'];
+  premium?: Maybe<Scalars['Boolean']['output']>;
+  spacesCount?: Maybe<Scalars['Int']['output']>;
+};
+
 export type Option = {
   __typename?: 'Option';
   name?: Maybe<Scalars['String']['output']>;
@@ -286,7 +293,7 @@ export type Query = {
   follows?: Maybe<Array<Maybe<Follow>>>;
   leaderboards?: Maybe<Array<Maybe<Leaderboard>>>;
   messages?: Maybe<Array<Maybe<Message>>>;
-  networks?: Maybe<Array<Maybe<Item>>>;
+  networks?: Maybe<Array<Maybe<Network>>>;
   options?: Maybe<Array<Maybe<Option>>>;
   plugins?: Maybe<Array<Maybe<Item>>>;
   proposal?: Maybe<Proposal>;
@@ -472,6 +479,19 @@ export type RolesWhere = {
   address: Scalars['String']['input'];
 };
 
+export type SkinSettings = {
+  __typename?: 'SkinSettings';
+  bg_color?: Maybe<Scalars['String']['output']>;
+  border_color?: Maybe<Scalars['String']['output']>;
+  content_color?: Maybe<Scalars['String']['output']>;
+  header_color?: Maybe<Scalars['String']['output']>;
+  heading_color?: Maybe<Scalars['String']['output']>;
+  link_color?: Maybe<Scalars['String']['output']>;
+  primary_color?: Maybe<Scalars['String']['output']>;
+  text_color?: Maybe<Scalars['String']['output']>;
+  theme?: Maybe<Scalars['String']['output']>;
+};
+
 export type Space = {
   __typename?: 'Space';
   about?: Maybe<Scalars['String']['output']>;
@@ -512,6 +532,7 @@ export type Space = {
   proposalsCount30d?: Maybe<Scalars['Int']['output']>;
   rank?: Maybe<Scalars['Float']['output']>;
   skin?: Maybe<Scalars['String']['output']>;
+  skinSettings?: Maybe<SkinSettings>;
   strategies?: Maybe<Array<Maybe<Strategy>>>;
   symbol?: Maybe<Scalars['String']['output']>;
   template?: Maybe<Scalars['String']['output']>;

diff --git a/libs/shared/components/src/Labels/CurrencyLabel.tsx b/libs/shared/components/src/Labels/CurrencyLabel.tsx
@@ -1,22 +1,27 @@
-import { includes, isNilOrEmpty } from '@origin/shared/utils';
+import { includes } from '@origin/shared/utils';
 
 import type { ReactNode } from 'react';
 
+import type { Currency } from '../Controls';
+
 export type CurrencyLabelProps = {
-  currency?: 'ETH' | 'USD' | 'S';
+  currency?: Currency;
   children?: ReactNode;
 };
 
 export const CurrencyLabel = ({ currency, children }: CurrencyLabelProps) => {
-  const symbol = isNilOrEmpty(currency) ? (
-    ''
-  ) : currency === 'ETH' ? (
-    <span style={{ fontFamily: 'Arial' }}>Ξ</span>
-  ) : currency === 'S' ? (
-    'S'
-  ) : (
-    '$'
-  );
+  if (!currency) {
+    return children;
+  }
+
+  const symbol =
+    currency === 'ETH' ? (
+      <span style={{ fontFamily: 'Arial' }}>Ξ</span>
+    ) : currency === 'S' ? (
+      'S'
+    ) : (
+      '$'
+    );
 
   return includes(['ETH', 'USD'], currency) ? (
     <>

diff --git a/libs/shared/components/src/Labels/ValueLabel.tsx b/libs/shared/components/src/Labels/ValueLabel.tsx
@@ -6,6 +6,8 @@ import { CurrencyLabel } from './CurrencyLabel';
 import type { StackProps, TypographyProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
+import type { Currency } from '../Controls';
+
 export type ValueLabelProps = {
   label: ReactNode;
   value: ReactNode;
@@ -14,7 +16,7 @@ export type ValueLabelProps = {
   labelInfoTooltip?: string;
   isLoading?: boolean;
   sWidth?: number;
-  currency?: 'ETH' | 'USD';
+  currency?: Currency;
 } & StackProps;
 
 export const ValueLabel = ({
@@ -79,8 +81,11 @@ export const ValueLabel = ({
               : [valueProps?.sx]),
           ]}
         >
-          <CurrencyLabel currency={currency} />
-          {isLoading ? <Skeleton width={sWidth} /> : value}
+          {isLoading ? (
+            <Skeleton width={sWidth} />
+          ) : (
+            <CurrencyLabel currency={currency}>{value}</CurrencyLabel>
+          )}
         </Typography>
       ) : (
         value