feat(synthetix): display perp position side (#2621)

Co-authored-by: gaulois <[email protected]>
Co-authored-by: William Poulin <[email protected]>

src/apps/kwenta/optimism/kwenta.perp-v1-cross-margin.contract-position-fetcher.ts

@@ -23,7 +23,6 @@ const getCrossMarginAccountsQuery = gql`
 @PositionTemplate()
 export class OptimismKwentaPerpV1CrossMarginContractPositionFetcher extends OptimismSynthetixPerpV1ContractPositionFetcher {
   groupLabel = 'PerpV1 cross-margin';
-  extraLabel = ' (v1 cross-margin)';
 
   async getAccountAddress(address: string): Promise<string> {
     const crossMarginAccountsFromSubgraph = await gqlFetch<GetCrossMarginAccounts>({

src/apps/kwenta/optimism/kwenta.perp-v2-smart-margin.contract-position-fetcher.ts

@@ -11,7 +11,6 @@ import { KwentaContractFactory } from '../contracts';
 @PositionTemplate()
 export class OptimismKwentaPerpV2SmartMarginContractPositionFetcher extends OptimismSynthetixPerpV2ContractPositionFetcher {
   groupLabel = 'PerpV2 smart-margin';
-  extraLabel = ' (v2 smart-margin)';
   kwentaAccountResolverAddress = '0x8234f990b149ae59416dc260305e565e5dafeb54';
 
   constructor(

src/apps/synthetix/optimism/synthetix.perp-v1.contract-position-fetcher.ts

@@ -5,7 +5,7 @@ import { OptimismSynthetixPerpContractPositionFetcher } from './synthetix.perp.c
 @PositionTemplate()
 export class OptimismSynthetixPerpV1ContractPositionFetcher extends OptimismSynthetixPerpContractPositionFetcher {
   groupLabel = 'PerpV1';
-  extraLabel = '(v1)';
+  extraLabel = ' (v1)';
 
   marketFilter(market) {
     return !this.isV2Market(market);

src/apps/synthetix/optimism/synthetix.perp.contract-position-fetcher.ts

@@ -7,8 +7,8 @@ import { getAppAssetImage } from '~app-toolkit/helpers/presentation/image.presen
 import { gqlFetch } from '~app-toolkit/helpers/the-graph.helper';
 import { MetaType } from '~position/position.interface';
 import { ContractPositionTemplatePositionFetcher } from '~position/template/contract-position.template.position-fetcher';
+import { DefaultDataProps } from '~position/display.interface';
 import {
-  DefaultContractPositionDefinition,
   GetDisplayPropsParams,
   GetTokenBalancesParams,
 } from '~position/template/contract-position.template.types';
@@ -31,6 +31,11 @@ export const getContractsQuery = gql`
   }
 `;
 
+export type PerpPositionDefinition = {
+  address: string;
+  side: string;
+};
+
 export abstract class OptimismSynthetixPerpContractPositionFetcher extends ContractPositionTemplatePositionFetcher<SynthetixPerp> {
   extraLabel = '';
   constructor(
@@ -52,15 +57,24 @@ export abstract class OptimismSynthetixPerpContractPositionFetcher extends Contr
     return marketKeyString.includes('PERP');
   }
 
-  async getDefinitions(): Promise<DefaultContractPositionDefinition[]> {
+  async getDefinitions(): Promise<PerpPositionDefinition[]> {
     const contractsFromSubgraph = await gqlFetch<GetContracts>({
       endpoint: 'https://api.thegraph.com/subgraphs/name/kwenta/optimism-perps',
       query: getContractsQuery,
     });
 
-    return contractsFromSubgraph.futuresMarkets
-      .filter(market => this.marketFilter(market))
-      .map(futuresMarket => ({ address: futuresMarket.id }));
+    const markets = contractsFromSubgraph.futuresMarkets
+      .filter(market => this.marketFilter(market));
+
+    const longMarkets = this.getMarketsDefinitions(markets, 'LONG');
+    const shortMarkets = this.getMarketsDefinitions(markets, 'SHORT');
+    const neutralMarkets = this.getMarketsDefinitions(markets, 'NEUTRAL');
+
+    return longMarkets.concat(shortMarkets, neutralMarkets);
+  }
+
+  getMarketsDefinitions(markets, side: string) {
+    return markets.map(futuresMarket => ({ address: futuresMarket.id, side: side }));
   }
 
   async getTokenDefinitions() {
@@ -85,18 +99,30 @@ export abstract class OptimismSynthetixPerpContractPositionFetcher extends Contr
     return baseAsset;
   }
 
-  async getLabel({ contractPosition }: GetDisplayPropsParams<SynthetixPerp>): Promise<string> {
+  async getLabel({ contractPosition, definition }: GetDisplayPropsParams<SynthetixPerp, DefaultDataProps, PerpPositionDefinition>): Promise<string> {
     const baseAsset = await this.getBaseAsset({ contractPosition });
-    return `${baseAsset}-PERP${this.extraLabel}`;
+    return `${baseAsset}-PERP ${definition.side}${this.extraLabel}`;
+  }
+
+  async getDataProps({ definition }) {
+    return { side: definition.side };
   }
 
   async getImages({ contractPosition }: GetDisplayPropsParams<SynthetixPerp>) {
     const baseAsset = await this.getBaseAsset({ contractPosition });
     return [getAppAssetImage('synthetix', `s${baseAsset}`)];
   }
 
-  async getTokenBalancesPerPosition({ address, contract }: GetTokenBalancesParams<SynthetixPerp>) {
+  async getTokenBalancesPerPosition({ address, contract, contractPosition }: GetTokenBalancesParams<SynthetixPerp>) {
     const remainingMargin = await contract.remainingMargin(address);
-    return [remainingMargin.marginRemaining];
+    const marginRemaining = remainingMargin.marginRemaining;
+    if (Number(marginRemaining) === 0) {
+      return [];
+    }
+    const position = await contract.positions(address);
+    const side = contractPosition.dataProps.side;
+    const size = Number(position.size);
+    const matchesSide = (size > 0 && side === 'LONG') || (size < 0 && side === 'SHORT') || (size === 0 && side === 'NEUTRAL');
+    return matchesSide ? [marginRemaining] : [];
   }
 }