Publish stage

packages/stores/src/queries/lockup/account-locked.ts

@@ -51,6 +51,7 @@ export class ObservableQueryAccountLockedInner extends ObservableChainQuery<Acco
     chainInfo.addUnknownCurrencies(...[...new Set(unknownCurrencies)]);
   }
 
+  /** Locked coins aggregated by duration. */
   get lockedCoins(): {
     amount: CoinPretty;
     lockIds: string[];
@@ -66,8 +67,8 @@ export class ObservableQueryAccountLockedInner extends ObservableChainQuery<Acco
     });
 
     const map: Map<
-      // key: coinMinimalDenom
-      string,
+      // key: duration in milliseconds
+      number,
       {
         amount: CoinPretty;
         lockIds: string[];
@@ -76,30 +77,35 @@ export class ObservableQueryAccountLockedInner extends ObservableChainQuery<Acco
     > = new Map();
 
     for (const lock of matchedLocks) {
+      const seconds = parseInt(lock.duration.slice(0, -1));
+      const curDuration = dayjs.duration({ seconds });
+      const curDurationMs = curDuration.asMilliseconds();
+
       for (const coin of lock.coins) {
         const currency = this.chainGetter
           .getChain(this.chainId)
           .findCurrency(coin.denom);
 
         if (currency) {
-          const key = currency.coinMinimalDenom;
-          if (!map.has(key)) {
-            const seconds = parseInt(lock.duration.slice(0, -1));
-
-            map.set(key, {
+          if (!map.has(curDurationMs)) {
+            map.set(curDurationMs, {
               amount: new CoinPretty(currency, new Dec(0)),
               lockIds: [],
-              duration: dayjs.duration({ seconds }),
+              duration: curDuration,
             });
           }
 
-          const value = map.get(key)!;
-          value.amount = value.amount.add(
-            new CoinPretty(currency, new Dec(coin.amount))
-          );
-          value.lockIds.push(lock.ID);
+          const curDurationValue = map.get(curDurationMs);
 
-          map.set(key, value);
+          // aggregate amount for current duration
+          if (curDurationValue) {
+            curDurationValue.amount = curDurationValue.amount.add(
+              new CoinPretty(currency, new Dec(coin.amount))
+            );
+            curDurationValue.lockIds.push(lock.ID);
+
+            map.set(curDurationMs, curDurationValue);
+          }
         }
       }
     }

packages/stores/src/queries/lockup/types.ts

@@ -15,6 +15,7 @@ export type AccountLockedLongerDuration = {
     ID: string;
     owner: string;
     duration: string;
+    /** UTC */
     end_time: string;
     coins: {
       denom: string;

packages/stores/src/queries/pool-incentives/lockable-durations.ts

@@ -17,6 +17,7 @@ export class ObservableQueryLockableDurations extends ObservableChainQuery<Locka
     makeObservable(this);
   }
 
+  /** On chain param: bond durations capable of receiving internal (OSMO) mint incentives, assuming pool is marked incentivized. */
   @computed
   get lockableDurations(): Duration[] {
     if (!this.response) {

packages/stores/src/queries/pool-share/index.ts

@@ -254,4 +254,14 @@ export class ObservableQueryGammPoolShare {
       });
     }
   );
+
+  fetch(bech32Address: string) {
+    return Promise.all([
+      this.queryPools.fetch(),
+      this.queryBalances.getQueryBech32Address(bech32Address).fetch(),
+      this.queryAccountLocked.get(bech32Address).fetch(),
+      this.queryLockedCoins.get(bech32Address).fetch(),
+      this.queryUnlockingCoins.get(bech32Address).fetch(),
+    ]);
+  }
 }

packages/stores/src/ui-config/manage-liquidity/bond-liquidity.ts

@@ -16,8 +16,10 @@ import { ObservableQueryPoolFeesMetrics } from "../../queries-external";
 import { IPriceStore } from "../../price";
 import { UserConfig } from "../user-config";
 
-export type BondableDuration = {
+export type BondDuration = {
   duration: Duration;
+  /** Bondable if there's any active gauges for this duration. */
+  bondable: boolean;
   userShares: CoinPretty;
   userUnlockingShares?: { shares: CoinPretty; endTime?: Date };
   aggregateApr: RatePretty;
@@ -30,6 +32,8 @@ export type BondableDuration = {
   }[];
   /** Both `delegated` and `undelegating` will be `undefined` if the user may "Go superfluid". */
   superfluid?: {
+    /** Duration users can bond to for superfluid participation. Assumed to be longest duration on lock durations chain param. */
+    duration: Duration;
     apr: RatePretty;
     commission?: RatePretty;
     validatorMoniker?: string;
@@ -61,23 +65,23 @@ export class ObservableBondLiquidityConfig extends UserConfig {
    *  2. Liquidity needs to be bonded
    */
   readonly calculateBondLevel = computedFn(
-    (bondableDurations: BondableDuration[]): 1 | 2 | undefined => {
+    (bondDurations: BondDuration[]): 1 | 2 | undefined => {
       if (
         this.poolDetails?.userAvailableValue.toDec().gt(new Dec(0)) &&
-        bondableDurations.length > 0
+        bondDurations.some((duration) => duration.bondable)
       )
         return 2;
 
       if (this.poolDetails?.userAvailableValue.toDec().isZero()) return 1;
     }
   );
 
-  /** Gets all available durations for user to bond in, with a breakdown of the assets incentivizing the duration. Internal OSMO incentives & swap fees included in breakdown. */
-  readonly getBondableAllowedDurations = computedFn(
+  /** Gets all durations for user to bond in, or has locked tokens for, with a breakdown of the assets incentivizing the duration. Internal OSMO incentives & swap fees included in breakdown. */
+  readonly getAllowedBondDurations = computedFn(
     (
       findCurrency: (denom: string) => AppCurrency | undefined,
       allowedGauges: { gaugeId: string; denom: string }[] | undefined
-    ): BondableDuration[] => {
+    ): BondDuration[] => {
       const poolId = this.poolDetails.pool.id;
       const gauges = this.superfluidPool.gaugesWithSuperfluidApr;
 
@@ -119,7 +123,7 @@ export class ObservableBondLiquidityConfig extends UserConfig {
         });
 
       return Array.from(durationsMsSet.values())
-        .sort()
+        .sort((a, b) => b - a)
         .reverse()
         .map((durationMs) => {
           const curDuration = dayjs.duration({
@@ -142,6 +146,7 @@ export class ObservableBondLiquidityConfig extends UserConfig {
             this.poolDetails.poolShareCurrency,
             curDuration
           ).amount;
+
           const unlockingUserShares =
             queryLockedCoin.getUnlockingCoinWithDuration(
               this.poolDetails.poolShareCurrency,
@@ -158,8 +163,7 @@ export class ObservableBondLiquidityConfig extends UserConfig {
                 }
               : undefined;
 
-          const incentivesBreakdown: BondableDuration["incentivesBreakdown"] =
-            [];
+          const incentivesBreakdown: BondDuration["incentivesBreakdown"] = [];
 
           // push single internal incentive for current duration
           if (internalGaugeOfDuration) {
@@ -217,7 +221,7 @@ export class ObservableBondLiquidityConfig extends UserConfig {
 
           // add superfluid data if highest duration
           const sfsDuration = this.poolDetails.longestDuration;
-          let superfluid: BondableDuration["superfluid"] | undefined;
+          let superfluid: BondDuration["superfluid"] | undefined;
           if (
             this.superfluidPool.isSuperfluid &&
             this.superfluidPool.superfluid &&
@@ -234,6 +238,7 @@ export class ObservableBondLiquidityConfig extends UserConfig {
                 : undefined;
 
             superfluid = {
+              duration: sfsDuration,
               apr: this.superfluidPool.superfluidApr,
               commission: delegation?.validatorCommission,
               delegated: !this.superfluidPool.superfluid.upgradeableLpLockIds
@@ -260,6 +265,9 @@ export class ObservableBondLiquidityConfig extends UserConfig {
 
           return {
             duration: curDuration,
+            bondable:
+              internalGaugeOfDuration !== undefined ||
+              externalGaugesOfDuration.length > 0,
             userShares: lockedUserShares,
             userUnlockingShares,
             aggregateApr,

packages/stores/types/queries/lockup/account-locked.d.ts

@@ -9,6 +9,7 @@ export declare class ObservableQueryAccountLockedInner extends ObservableChainQu
     constructor(kvStore: KVStore, chainId: string, chainGetter: ChainGetter, bech32Address: string);
     protected canFetch(): boolean;
     protected setResponse(response: Readonly<QueryResponse<AccountLockedLongerDuration>>): void;
+    /** Locked coins aggregated by duration. */
     get lockedCoins(): {
         amount: CoinPretty;
         lockIds: string[];

packages/stores/types/queries/lockup/types.d.ts

@@ -21,6 +21,7 @@ export declare type AccountLockedLongerDuration = {
         ID: string;
         owner: string;
         duration: string;
+        /** UTC */
         end_time: string;
         coins: {
             denom: string;

packages/stores/types/queries/pool-incentives/lockable-durations.d.ts

@@ -4,6 +4,7 @@ import { LockableDurations } from "./types";
 import { Duration } from "dayjs/plugin/duration";
 export declare class ObservableQueryLockableDurations extends ObservableChainQuery<LockableDurations> {
     constructor(kvStore: KVStore, chainId: string, chainGetter: ChainGetter);
+    /** On chain param: bond durations capable of receiving internal (OSMO) mint incentives, assuming pool is marked incentivized. */
     get lockableDurations(): Duration[];
     get highestDuration(): Duration | undefined;
 }

packages/stores/types/queries/pool-share/index.d.ts

@@ -42,4 +42,5 @@ export declare class ObservableQueryGammPoolShare {
         amount: CoinPretty;
         lockIds: string[];
     }[];
+    fetch(bech32Address: string): Promise<[Generator<unknown, any, any>, void, Generator<unknown, any, any>, Generator<unknown, any, any>, Generator<unknown, any, any>]>;
 }

packages/stores/types/ui-config/manage-liquidity/bond-liquidity.d.ts

@@ -5,8 +5,10 @@ import { ObservableQueryPoolDetails, ObservableQuerySuperfluidPool, ObservableQu
 import { ObservableQueryPoolFeesMetrics } from "../../queries-external";
 import { IPriceStore } from "../../price";
 import { UserConfig } from "../user-config";
-export declare type BondableDuration = {
+export declare type BondDuration = {
     duration: Duration;
+    /** Bondable if there's any active gauges for this duration. */
+    bondable: boolean;
     userShares: CoinPretty;
     userUnlockingShares?: {
         shares: CoinPretty;
@@ -22,6 +24,8 @@ export declare type BondableDuration = {
     }[];
     /** Both `delegated` and `undelegating` will be `undefined` if the user may "Go superfluid". */
     superfluid?: {
+        /** Duration users can bond to for superfluid participation. Assumed to be longest duration on lock durations chain param. */
+        duration: Duration;
         apr: RatePretty;
         commission?: RatePretty;
         validatorMoniker?: string;
@@ -50,10 +54,10 @@ export declare class ObservableBondLiquidityConfig extends UserConfig {
      *  1. Liquidity needs to be added
      *  2. Liquidity needs to be bonded
      */
-    readonly calculateBondLevel: (bondableDurations: BondableDuration[]) => 1 | 2 | undefined;
-    /** Gets all available durations for user to bond in, with a breakdown of the assets incentivizing the duration. Internal OSMO incentives & swap fees included in breakdown. */
-    readonly getBondableAllowedDurations: (findCurrency: (denom: string) => AppCurrency | undefined, allowedGauges: {
+    readonly calculateBondLevel: (bondDurations: BondDuration[]) => 1 | 2 | undefined;
+    /** Gets all durations for user to bond in, or has locked tokens for, with a breakdown of the assets incentivizing the duration. Internal OSMO incentives & swap fees included in breakdown. */
+    readonly getAllowedBondDurations: (findCurrency: (denom: string) => AppCurrency | undefined, allowedGauges: {
         gaugeId: string;
         denom: string;
-    }[] | undefined) => BondableDuration[];
+    }[] | undefined) => BondDuration[];
 }

packages/web/components/assets/pool-assets-icon.tsx

@@ -21,7 +21,7 @@ export const PoolAssetsIcon: FunctionComponent<Props> = ({
             "w-[3.125rem] h-[3.125rem]": size === "md",
             "w-[2.5rem] h-[2.5rem]": size === "sm",
           },
-          "absolute z-10 rounded-full flex items-center justify-center overflow-hidden"
+          "absolute z-10 flex items-center justify-center overflow-hidden"
         )}
       >
         {assets[0].coinImageUrl ? (
@@ -46,7 +46,7 @@ export const PoolAssetsIcon: FunctionComponent<Props> = ({
             "w-[3.125rem] h-[3.125rem] ml-10": size === "md",
             "w-[2.5rem] h-[2.5rem] ml-5": size === "sm",
           },
-          "rounded-full shrink-0 flex items-center justify-center overflow-hidden"
+          "shrink-0 flex items-center justify-center overflow-hidden"
         )}
       >
         {assets.length >= 3 ? (

packages/web/components/cards/asset-card.tsx

@@ -60,7 +60,7 @@ export const AssetCard: FunctionComponent<
                   );
                 })
               ) : (
-                <div className="w-[2.125rem] h-[2.125rem] rounded-full shrink-0 flex items-center justify-center overflow-hidden">
+                <div className="w-[2.125rem] h-[2.125rem] shrink-0 flex items-center justify-center overflow-hidden">
                   <Image
                     alt="asset"
                     src={coinImageUrl}