Lm pool view fixes (#748)

* add execution fee asset into settings

* remove unnecessary

* replace swap action form with operation form

* remove old deps

* fix ergo swap fees display

* fix warnings

* fix cardano swap info

* fix OperationSettings.tsx

* update ido notification

* update deps and fix params

* Spf modal (#739)

* add amplitude and firstlaunch / session start events

* update analytics

* add events

* update event

* update analytics

* add redeem close confirm / swap close confirm

* fix after review

* update ci

* update request modal

* add spf modal

* add spf modal all states

* add claim spf notification

* update names & add polling & add request

* some fixes

* fix spf modal

* update spf status view

* fix modal styles

* update filter fns

* spf modal fixes

* fix spf links

* remove claim button from mobile devices

* new spf button logic

* some fixes

* add polling to reward

* add polling disabling on last stage

* ClaimSpfButton.tsx

* update paddings

* spf design fixes

* fix spf screens

* fix notification z-index

* fix build analytics methods

* update urls and comment amplitude analytics

* update version

* remove ido notification

---------

Co-authored-by: deadit <stdeadit@gmail.com>

* update spf id

* fix nothing to claim state links

* add to variable to CurrencyConverter.ts

* enable cardano update screen

* update version

* Update links to pp and tos (#740)

* update links

* fix claim spf styles

---------

Co-authored-by: ridel1e <ridellee@gmail.com>

* update cardano sdk and remove and remove cardano update page

* fix CurrencyConverter.ts

* remove old files

* add new ergo execution

* fix swap info content

* update confirmations

* add swap validators

* update libs and rename pool actions

* fix warnings

* add walletSwap switch

* add swap operation

* fix cardano swap info

* fix cardano swap validators

* add remove liquidity fee switcher

* switch logger

* add spf fee remove liquidity

* fix warnings

* fix fees order

* remove old redeem validator fee

* add validators to cardano network

* add deposit validators

* add native deposit max button click

* fix warnings and add maxLiquidity spf button

* add deposit operation switcher

* fix streams

* add spf deposit operation

* add PoolInfoView

* add farms to positions

* add locked liquidity chart

* remove trash

* some pool overview update

* update positions request

* update some constants

* fix lock liquidity not enough data state

* update ergo-dex-sdk

* update price history styles and fix warnings

---------

Co-authored-by: deadit <stdeadit@gmail.com>
Co-authored-by: yb <43601702+yasha-black@users.noreply.github.com>

package.json

@@ -23,9 +23,9 @@
     "@babel/preset-env": "^7.15.6",
     "@emurgo/cardano-serialization-lib-nodejs": "^11.0.5",
     "@ergolabs/cardano-dex-sdk": "^0.0.70",
-    "@ergolabs/ergo-dex-sdk": "^1.9.52",
+    "@ergolabs/ergo-dex-sdk": "^1.9.54",
     "@ergolabs/ergo-sdk": "^0.5.6",
-    "@ergolabs/ui-kit": "^2.4.21",
+    "@ergolabs/ui-kit": "^2.4.22",
     "@rehooks/local-storage": "2.4.0",
     "@sentry/react": "^6.16.1",
     "@sentry/tracing": "^6.16.1",

src/common/constants/erg.ts

@@ -7,4 +7,4 @@ export const MIN_NITRO = 1.2;
 export const UI_FEE = 0;
 export const UI_FEE_BIGINT = 0n;
 
-export const NEW_MIN_BOX_VALUE = 250000n;
+export const NEW_MIN_BOX_VALUE = 400000n;

src/common/models/Position.ts

@@ -6,6 +6,7 @@ import { Searchable } from '../utils/Searchable';
 import { AmmPool } from './AmmPool';
 import { AssetLock, AssetLockStatus } from './AssetLock';
 import { Currency } from './Currency';
+import { Farm } from './Farm';
 
 export class Position implements Searchable {
   static noop(ammPool: AmmPool): Position {
@@ -15,6 +16,7 @@ export class Position implements Searchable {
       true,
       [],
       0,
+      [],
     );
   }
 
@@ -45,17 +47,17 @@ export class Position implements Searchable {
 
   @cache
   get totalX(): Currency {
-    return this.availableX.plus(this.lockedX);
+    return this.availableX.plus(this.lockedX).plus(this.stakedX);
   }
 
   @cache
   get totalY(): Currency {
-    return this.availableY.plus(this.lockedY);
+    return this.availableY.plus(this.lockedY).plus(this.stakedY);
   }
 
   @cache
   get totalLp(): Currency {
-    return this.availableLp.plus(this.lockedLp);
+    return this.availableLp.plus(this.lockedLp).plus(this.stakedLp);
   }
 
   match(term?: string): boolean {
@@ -85,12 +87,19 @@ export class Position implements Searchable {
 
   readonly withdrawableLockedLp: Currency;
 
+  readonly stakedX: Currency;
+
+  readonly stakedY: Currency;
+
+  readonly stakedLp: Currency;
+
   constructor(
     public pool: AmmPool,
     public availableLp: Currency,
     public empty = false,
     tokenLocks: TokenLock[],
     networkHeight: number,
+    farms: Farm[],
   ) {
     this.locks = tokenLocks.map((tl) => new AssetLock(this, tl, networkHeight));
     const {
@@ -137,5 +146,12 @@ export class Position implements Searchable {
     this.withdrawableLockedLp = withdrawableLockedLp;
     this.withdrawableLockedY = withdrawableLockedY;
     this.withdrawableLockedX = withdrawableLockedX;
+
+    this.stakedLp = farms.reduce<Currency>(
+      (sum, f) => sum.plus(f.yourStakeLq),
+      new Currency(0n, this.pool.lp.asset),
+    );
+    this.stakedX = this.pool.shares(this.stakedLp)[0];
+    this.stakedY = this.pool.shares(this.stakedLp)[1];
   }
 }

src/components/AssetIcon/AssetIcon.tsx

@@ -9,11 +9,12 @@ type TokenIconProps = React.DetailedHTMLProps<
   HTMLDivElement
 > & {
   asset?: AssetInfo;
-  size?: 'medium' | 'large' | 'small' | 'extraSmall' | 'extraLarge';
+  size?: 'medium' | 'large' | 'small' | 'extraSmall' | 'extraLarge' | 'tiny';
   inline?: boolean;
 };
 
 const MAP_SIZE_TO_NUMBER = {
+  tiny: 10,
   extraSmall: 16,
   small: 20,
   medium: 24,

src/components/AssetTitle/AssetTitle.tsx

@@ -8,7 +8,16 @@ import { Truncate } from '../Truncate/Truncate';
 export interface TokenTitleProps {
   readonly asset: AssetInfo;
   readonly size?: 'large' | 'small' | 'extraSmall';
-  readonly level?: 1 | 2 | 3 | 4 | 5 | 'body' | 'body-secondary' | undefined;
+  readonly level?:
+    | 1
+    | 2
+    | 3
+    | 4
+    | 5
+    | 'body'
+    | 'body-secondary'
+    | 'small-strong'
+    | undefined;
   readonly gap?: number;
   readonly limit?: number;
 }
@@ -24,8 +33,14 @@ export const AssetTitle: FC<TokenTitleProps> = ({
     <Flex.Item marginRight={gap}>
       <AssetIcon size={size} asset={asset} />
     </Flex.Item>
-    {level === 'body' || level === 'body-secondary' ? (
-      <Typography.Body secondary={level === 'body-secondary'}>
+    {level === 'body' ||
+    level === 'body-secondary' ||
+    level === 'small-strong' ? (
+      <Typography.Body
+        secondary={level === 'body-secondary'}
+        size={level === 'small-strong' ? 'small' : undefined}
+        strong={level === 'small-strong'}
+      >
         <Truncate limit={limit}>{asset.ticker || asset.name}</Truncate>
       </Typography.Body>
     ) : (

src/components/InlineGrid/InlineGrid.tsx

@@ -0,0 +1,31 @@
+import { Flex } from '@ergolabs/ui-kit';
+import React, { FC, ReactNode } from 'react';
+
+export interface InlineGridItemProps {
+  readonly title: ReactNode | ReactNode[] | string;
+  readonly value: ReactNode | ReactNode[] | string;
+}
+
+const InlineGridItem: FC<InlineGridItemProps> = ({ title, value }) => (
+  <Flex align="center">
+    <Flex.Item flex={1}>{title}</Flex.Item>
+    <Flex.Item>{value}</Flex.Item>
+  </Flex>
+);
+
+export interface InlineGridProps {
+  readonly gap?: number;
+  readonly children?: ReactNode | ReactNode[] | string;
+}
+
+export const InlineGrid: FC<InlineGridProps> & {
+  Item: FC<InlineGridItemProps>;
+} = ({ gap, children }) => {
+  return (
+    <Flex col gap={gap}>
+      {children}
+    </Flex>
+  );
+};
+
+InlineGrid.Item = InlineGridItem;

src/components/Page/PageHeader/PageHeader.tsx

@@ -1,4 +1,4 @@
-import { Flex, Typography } from '@ergolabs/ui-kit';
+import { ButtonProps, Flex, Typography } from '@ergolabs/ui-kit';
 import React, { ReactNode } from 'react';
 
 import { Position } from '../../../common/models/Position';
@@ -11,33 +11,39 @@ interface FormHeaderProps {
   actionsMenu?: ReactNode | ReactNode[] | undefined;
   actionsMenuWidth?: number;
   children?: ReactNode | ReactNode[] | undefined;
+  actionButtonSize?: ButtonProps['size'];
+  level?: 4 | 3;
 }
 
 const PageHeader: React.FC<FormHeaderProps> = ({
   position,
   actionsMenu,
   actionsMenuWidth,
   children,
+  level,
+  actionButtonSize,
 }) => {
   return (
     <Flex justify="space-between" align="center">
-      <Flex align="center">
+      <Flex.Item display="flex" align="center" marginRight={2} flex={1}>
         <Flex.Item display="flex" marginRight={2}>
           <AssetIconPair
             assetX={position.availableX.asset}
             assetY={position.availableY.asset}
           />
         </Flex.Item>
         <Flex.Item marginRight={2}>
-          <Typography.Title level={4}>
+          <Typography.Title level={level || 4}>
             <Truncate>{position.availableX.asset.ticker}</Truncate> /{' '}
             <Truncate>{position.availableY.asset.ticker}</Truncate>
           </Typography.Title>
         </Flex.Item>
-        {children}
-      </Flex>
+        <Flex.Item flex={1}>{children}</Flex.Item>
+      </Flex.Item>
       {actionsMenu && (
-        <OptionsButton width={actionsMenuWidth}>{actionsMenu}</OptionsButton>
+        <OptionsButton size={actionButtonSize} width={actionsMenuWidth}>
+          {actionsMenu}
+        </OptionsButton>
       )}
     </Flex>
   );

src/components/Page/PageSection/PageSection.tsx

@@ -1,32 +1,42 @@
 import { Flex, Typography } from '@ergolabs/ui-kit';
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { FormSpace } from '../../common/FormView/FormSpace/FormSpace';
 
 interface FormSectionProps {
   title: string;
   children: React.ReactChild | React.ReactChild[];
+  subtitle?: ReactNode | ReactNode[] | string;
   noPadding?: boolean;
   noBorder?: boolean;
   boxed?: boolean;
   glass?: boolean;
+  height?: number;
 }
 
 const PageSection: React.FC<FormSectionProps> = ({
   children,
   title,
+  subtitle,
   noPadding,
   noBorder,
   boxed,
   glass,
+  height,
 }) => {
   return (
     <Flex direction="col">
-      <Flex.Item marginBottom={2}>
+      <Flex.Item marginBottom={subtitle ? 1 : 2}>
         <Typography.Body strong>{title}</Typography.Body>
       </Flex.Item>
+      {subtitle && <Flex.Item marginBottom={2}>{subtitle}</Flex.Item>}
       {boxed || boxed === undefined ? (
-        <FormSpace noBorder={noBorder} glass={glass} noPadding={noPadding}>
+        <FormSpace
+          height={height}
+          noBorder={noBorder}
+          glass={glass}
+          noPadding={noPadding}
+        >
           {children}
         </FormSpace>
       ) : (

src/components/TitledBox/TitledBox.tsx

@@ -0,0 +1,26 @@
+import { Box, BoxProps, Flex } from '@ergolabs/ui-kit';
+import React, { FC, ReactNode } from 'react';
+
+export interface TitledBoxProps extends BoxProps {
+  readonly title?: ReactNode | ReactNode[] | string;
+  readonly titleGap?: number;
+  readonly subtitle?: ReactNode | ReactNode[] | string;
+  readonly subtitleGap?: number;
+}
+
+export const TitledBox: FC<TitledBoxProps> = ({
+  titleGap,
+  title,
+  subtitleGap,
+  subtitle,
+  width,
+  ...rest
+}) => {
+  return (
+    <Flex col width={width}>
+      {title && <Flex.Item marginBottom={titleGap}>{title}</Flex.Item>}
+      {subtitle && <Flex.Item marginBottom={subtitleGap}>{subtitle}</Flex.Item>}
+      <Box width={width} {...rest} />
+    </Flex>
+  );
+};

src/components/common/ConnectWalletButton/ConnectWalletButton.tsx

@@ -15,6 +15,7 @@ import { ChooseWalletModal } from './ChooseWalletModal/ChooseWalletModal';
 
 export interface ConnectWalletButtonProps {
   readonly size?: ButtonProps['size'];
+  readonly width?: ButtonProps['width'];
   readonly className?: string;
   readonly children?: ReactNode | ReactNode[] | string;
   readonly analytics?: PAnalytics;
@@ -25,6 +26,7 @@ export const ConnectWalletButton: FC<ConnectWalletButtonProps> = ({
   className,
   children,
   analytics,
+  width,
 }) => {
   const [isWalletConnected] = useObservable(isWalletSetuped$);
 
@@ -44,6 +46,7 @@ export const ConnectWalletButton: FC<ConnectWalletButtonProps> = ({
         className={cn(className, 'connect-wallet-btn')}
         isWalletConnected={isWalletConnected}
         caption={<Trans>Connect wallet</Trans>}
+        width={width}
       >
         {children}
       </SpectrumConnectWalletButton>

src/components/common/FormView/FormPairSection/FormPairSection.tsx

@@ -9,12 +9,14 @@ import { Truncate } from '../../../Truncate/Truncate';
 
 interface PairSpaceProps {
   readonly title: string;
+  readonly subtitle?: ReactNode | ReactNode[] | string;
   readonly xAmount: Currency;
   readonly yAmount: Currency;
   readonly fees?: boolean;
   readonly children?: ReactNode | ReactNode[];
   readonly noBorder?: boolean;
   readonly glass?: boolean;
+  readonly boxed?: boolean;
 }
 
 const TOKEN_NAME_SYMBOLS_LIMIT = 15;
@@ -27,9 +29,17 @@ const FormPairSection: React.FC<PairSpaceProps> = ({
   children,
   noBorder,
   glass,
+  subtitle,
+  boxed,
 }): JSX.Element => {
   return (
-    <PageSection title={title} noBorder={noBorder} glass={glass}>
+    <PageSection
+      boxed={boxed}
+      title={title}
+      noBorder={noBorder}
+      glass={glass}
+      subtitle={subtitle}
+    >
       <Flex direction="col">
         <Flex.Item marginBottom={2}>
           <Flex justify="space-between" align="center">

src/components/common/FormView/FormSpace/FormSpace.tsx

@@ -6,20 +6,23 @@ interface FormSpaceProps {
   noPadding?: boolean;
   noBorder?: boolean;
   glass?: boolean;
+  height?: number;
 }
 
 const FormSpace: React.FC<FormSpaceProps> = ({
   children,
   noPadding,
   noBorder,
   glass,
+  height,
 }): JSX.Element => {
   return (
     <Box
       secondary
       glass={glass}
       padding={noPadding ? 0 : 4}
       borderRadius="l"
+      height={height}
       bordered={!noBorder}
     >
       {children}

src/network/cardano/api/positions/positions.ts

@@ -17,6 +17,7 @@ export const positions$ = zip([ammPools$, lpBalance$, networkContext$]).pipe(
             false,
             [],
             networkContext.height,
+            [],
           ),
       ),
   ),