Asset page (#722)

Author: zerts

src/modules/remote-config/plugins/firebase.ts

@@ -9,13 +9,15 @@ const defaultConfig: RemoteConfig = {
   extension_wallet_name_flags: {},
   extension_uninstall_link: '',
   extension_loyalty_enabled: true,
+  extension_asset_page_enabled: false,
   loyalty_config: {},
 };
 
 const knownKeys: (keyof RemoteConfig)[] = [
   'extension_wallet_name_flags',
   'extension_uninstall_link',
   'extension_loyalty_enabled',
+  'extension_asset_page_enabled',
   'loyalty_config',
 ];
 

src/modules/remote-config/types.ts

@@ -4,6 +4,7 @@ export interface RemoteConfig {
   extension_wallet_name_flags: Record<string, WalletNameFlag[]>;
   extension_uninstall_link: string;
   extension_loyalty_enabled: boolean;
+  extension_asset_page_enabled: boolean;
   loyalty_config: Partial<{
     referrerXpPercent: number;
     gasbackValue: number;

src/modules/zerion-api/hooks/useAssetFullInfo.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import { ZerionAPI } from 'src/modules/zerion-api/zerion-api.client';
+import { type Params } from '../requests/asset-get-fungible-full-info';
+import type { BackendSourceParams } from '../shared';
+
+export function useAssetFullInfo(
+  params: Params,
+  { source }: BackendSourceParams,
+  { suspense = false }: { suspense?: boolean } = {}
+) {
+  return useQuery({
+    queryKey: ['assetGetFungibleFullInfo', params, source],
+    queryFn: () => ZerionAPI.assetGetFungibleFullInfo(params, { source }),
+    suspense,
+    staleTime: 20000,
+  });
+}

src/modules/zerion-api/hooks/useWalletAssetDetails.ts

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+import type { Params } from '../requests/wallet-get-asset-details';
+import { ZerionAPI } from '../zerion-api.client';
+import type { BackendSourceParams } from '../shared';
+
+export function useWalletAssetDetails(
+  params: Params,
+  { source }: BackendSourceParams,
+  {
+    suspense = false,
+    enabled = true,
+  }: {
+    suspense?: boolean;
+    enabled?: boolean;
+  } = {}
+) {
+  return useQuery({
+    queryKey: ['walletGetAssetDetails', params, source],
+    queryFn: () => ZerionAPI.walletGetAssetDetails(params, { source }),
+    suspense,
+    enabled,
+    staleTime: 20000,
+  });
+}

src/modules/zerion-api/hooks/useWalletAssetPnl.ts

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+import type { Params } from '../requests/asset-get-fungible-pnl';
+import { ZerionAPI } from '../zerion-api.client';
+import type { BackendSourceParams } from '../shared';
+
+export function useWalletAssetPnl(
+  params: Params,
+  { source }: BackendSourceParams,
+  {
+    suspense = false,
+    enabled = true,
+  }: {
+    suspense?: boolean;
+    enabled?: boolean;
+  } = {}
+) {
+  return useQuery({
+    queryKey: ['assetGetFungiblePnl', params, source],
+    queryFn: () => ZerionAPI.assetGetFungiblePnl(params, { source }),
+    suspense,
+    enabled,
+    staleTime: 20000,
+  });
+}

src/modules/zerion-api/requests/asset-get-fungible-full-info.ts

@@ -0,0 +1,68 @@
+import type { ClientOptions } from '../shared';
+import { CLIENT_DEFAULTS, ZerionHttpClient } from '../shared';
+import type { ZerionApiContext } from '../zerion-api-bare';
+import type { ResponseBody } from './ResponseBody';
+
+export interface Params {
+  fungibleId: string;
+  currency: string;
+}
+
+export interface Asset {
+  id: string;
+  iconUrl: string | null;
+  name: string;
+  new: boolean;
+  symbol: string;
+  verified: boolean;
+  implementations: Record<string, { address: string | null; decimals: number }>;
+  meta: {
+    circulatingSupply: number | null;
+    fullyDilutedValuation: number | null;
+    marketCap: number | null;
+    price: number | null;
+    relativeChange1d: number | null;
+    relativeChange30d: number | null;
+    relativeChange90d: number | null;
+    relativeChange365d: number | null;
+    totalSupply: number | null;
+  };
+}
+
+export interface AssetResource {
+  name: string;
+  url: string;
+  iconUrl: string;
+  displayableName: string;
+}
+
+export interface AssetFullInfo {
+  extra: {
+    createdAt: string;
+    description: string | null;
+    holders: null;
+    liquidity: null;
+    top10: null;
+    volume24h: null;
+    relevantResources: AssetResource[];
+    mainChain: string;
+  };
+  fungible: Asset;
+}
+
+type Response = ResponseBody<AssetFullInfo>;
+
+export async function assetGetFungibleFullInfo(
+  this: ZerionApiContext,
+  payload: Params,
+  options: ClientOptions = CLIENT_DEFAULTS
+) {
+  const params = new URLSearchParams({
+    fungibleId: payload.fungibleId,
+    currency: payload.currency,
+  });
+  return ZerionHttpClient.get<Response>({
+    endpoint: `asset/get-fungible-full-info/v1?${params}`,
+    ...options,
+  });
+}

src/modules/zerion-api/requests/asset-get-fungible-pnl.ts

@@ -0,0 +1,38 @@
+import type { ClientOptions } from '../shared';
+import { CLIENT_DEFAULTS, ZerionHttpClient } from '../shared';
+import type { ZerionApiContext } from '../zerion-api-bare';
+import type { ResponseBody } from './ResponseBody';
+
+export interface Params {
+  fungibleId: string;
+  addresses: string[];
+  currency: string;
+}
+
+export interface AssetAddressPnl {
+  realizedPnl: number;
+  unrealizedPnl: number;
+  totalPnl: number;
+  relativeRealizedPnl: number;
+  relativeUnrealizedPnl: number;
+  relativeTotalPnl: number;
+  averageBuyPrice: number;
+  bought: number;
+}
+
+type Response = ResponseBody<AssetAddressPnl>;
+
+export async function assetGetFungiblePnl(
+  this: ZerionApiContext,
+  params: Params,
+  options: ClientOptions = CLIENT_DEFAULTS
+) {
+  const firstAddress = params.addresses[0];
+  const provider = await this.getAddressProviderHeader(firstAddress);
+  return ZerionHttpClient.post<Response>({
+    endpoint: 'asset/get-fungible-pnl/v1',
+    body: JSON.stringify(params),
+    headers: { 'Zerion-Wallet-Provider': provider },
+    ...options,
+  });
+}

src/modules/zerion-api/requests/wallet-get-asset-details.ts

@@ -0,0 +1,69 @@
+import type { ClientOptions } from '../shared';
+import { CLIENT_DEFAULTS, ZerionHttpClient } from '../shared';
+import type { ZerionApiContext } from '../zerion-api-bare';
+import type { ResponseBody } from './ResponseBody';
+
+export interface Params {
+  assetId: string;
+  addresses: string[];
+  currency: string;
+  groupBy: ('by-wallet' | 'by-app')[];
+}
+
+interface NetworkShortInfo {
+  id: string;
+  name: string;
+  iconUrl: string;
+  testnet: boolean;
+}
+
+export interface WalletAssetDetails {
+  chainsDistribution: Array<{
+    chain: NetworkShortInfo;
+    value: number;
+    percentageAllocation: number;
+  }> | null;
+  wallets: Array<{
+    wallet: {
+      name: string;
+      iconUrl: string;
+      premium: boolean;
+      address: string;
+    };
+    chains: NetworkShortInfo[];
+    value: number;
+    convertedQuantity: number;
+    percentageAllocation: number;
+  }>;
+  apps: Array<{
+    app: {
+      id: string;
+      name: string;
+      iconUrl: string | null;
+      url: string | null;
+    };
+    chains: NetworkShortInfo[];
+    value: number;
+    convertedQuantity: number;
+    percentageAllocation: number;
+  }> | null;
+  totalValue: number;
+  totalConvertedQuantity: number;
+}
+
+type Response = ResponseBody<WalletAssetDetails>;
+
+export async function walletGetAssetDetails(
+  this: ZerionApiContext,
+  params: Params,
+  options: ClientOptions = CLIENT_DEFAULTS
+) {
+  const firstAddress = params.addresses[0];
+  const provider = await this.getAddressProviderHeader(firstAddress);
+  return ZerionHttpClient.post<Response>({
+    endpoint: 'wallet/get-asset-details/v1',
+    body: JSON.stringify(params),
+    headers: { 'Zerion-Wallet-Provider': provider },
+    ...options,
+  });
+}

src/modules/zerion-api/zerion-api-bare.ts

@@ -15,6 +15,9 @@ import { walletGetPortfolio } from './requests/wallet-get-portfolio';
 import { checkReferral } from './requests/check-referral';
 import { referWallet } from './requests/refer-wallet';
 import { claimRetro } from './requests/claim-retro';
+import { assetGetFungibleFullInfo } from './requests/asset-get-fungible-full-info';
+import { walletGetAssetDetails } from './requests/wallet-get-asset-details';
+import { assetGetFungiblePnl } from './requests/asset-get-fungible-pnl';
 
 export interface ZerionApiContext {
   getAddressProviderHeader(address: string): Promise<string>;
@@ -34,6 +37,9 @@ export const ZerionApiBare = {
   checkReferral,
   referWallet,
   claimRetro,
+  assetGetFungibleFullInfo,
+  assetGetFungiblePnl,
+  walletGetAssetDetails,
 };
 
 export type ZerionApiClient = typeof ZerionApiBare;

src/shared/units/formatPriceValue.ts

@@ -0,0 +1,56 @@
+import BigNumber from 'bignumber.js';
+import memoize from 'memoize-one';
+import type { CurrencyConfig } from 'src/modules/currency/currencies';
+import { CURRENCIES, resolveOptions } from 'src/modules/currency/currencies';
+import { minus as typographicMinus } from 'src/ui/shared/typography';
+
+const getCurrencyFormatter = memoize((locale, currency, config = {}) => {
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+    ...config,
+  });
+});
+
+const getSmallPriceCurrencyFormatter = memoize(
+  (locale, currency, config = {}) => {
+    return new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency,
+      minimumFractionDigits: 2,
+      maximumSignificantDigits: 3,
+      maximumFractionDigits: 20,
+      ...config,
+    });
+  }
+);
+
+// ~1$ values should be formatted as regular currency values
+const SMALL_VALUE_THRESHOLD = 0.99;
+
+export function formatPriceValue(
+  value: BigNumber.Value,
+  locale: string,
+  currency: string,
+  opts: Intl.NumberFormatOptions | null = null
+) {
+  const number = value instanceof BigNumber ? value.toNumber() : Number(value);
+  const sign = number < 0 ? typographicMinus : '';
+  const absValue = Math.abs(number);
+  const isSmallValue = absValue < SMALL_VALUE_THRESHOLD;
+
+  const config = CURRENCIES[currency] as CurrencyConfig | undefined;
+  const numberFormatOptions = resolveOptions(number, config || null, opts);
+  const formatter = isSmallValue
+    ? getSmallPriceCurrencyFormatter(locale, currency, numberFormatOptions)
+    : getCurrencyFormatter(locale, currency, numberFormatOptions);
+
+  const modifyParts = config?.modifyParts;
+  if (modifyParts) {
+    const parts = formatter.formatToParts(absValue);
+    return `${sign}${modifyParts(parts)
+      .map((part) => part.value)
+      .join('')}`;
+  }
+  return `${sign}${formatter.format(absValue)}`;
+}