Publish redesign (#978)

* New assets page * Fixes from review * WIP sidebar design * WIP pool quick actions * Tweak banner and add event listeners * Remove non-external data from external query store * Fix external query ref * Fix memoization issues * Refactor + add "add liquidity" quick action * Move toasts * Add quick actions to external incentives table * Add remove liquidity + filter options for user-relevance * Fix quick action menu filter * Add superfluid config, naming * Only show remove liquidity if liquidity available * Add quick lock callbacks * Update .gitignore * Add pool detail and gauge wrapper hooks * Add superfluid modal to quick action * Remove logs * Tweaks for assets page * Fix ref error * Rename pool detail and SFS pool store -> config * Remove highcharts from bundle * Fix nav bar button reset bug * Overload nav bar hook * WIP new pool page (header) * Create pool, step 1 * Progress on create pool modal * Responsive pool page overview graphic * Filter pool dust via user setting * Store dust setting in local storage * Filter assets * Filter pools in assets page * Fix nav bar store * Fix error state + button disabled state * Update step 2 * Step 3 create pool * Trade tokens modal * Remove primary 200 * Use name in nav bar instead of address * WIP new pool detail page * Accumulate prior internal incentives * Move superfluid info * Add superfluid UI * Go superfluid * Add unlock token functionality WIP * Tweak drawer * Set up add and remove liquidity modals, remove manage liquidity modal * WIP new remove liquidity * New slider * Update remove liquidity * Fix build errors * Fix swap fee apy * Update display of APRs + refactor external query store * Add swap fee row * Fix drawer positioning * Increase height of drawer * Add vial images * Use memoization * Add updated "go superfluid" * Handle go superfluid * Move details button on drawer expansion * Add fallback img for sfs validators * Tweak drawer * WIP update lock tokens modal * remove shadows * Update lock tokens modal w/ apr * Remove max button * Update add liquidity modal * Show shares in remove liquidity * Fix react warning * Fix unlock bug * Fix color * Tweak create pool UI * Show unbonding shares * Localization (#899) * Localization initialization * Add formatted component to translate with inside component * Add translations for 404 and 505 page * Add menu translation, update formatted component for <br/> component * Add translations of trade-clipboard * Add translations of pools * Add translations of pool * Add translation of assets * Add translations for toasts * Move error translations to root of json file * Review of french translations * Add language setting and language-select * Remove unnecessary comments * fix menu dropdown icon * refractor icon dropdown * Add icon dropdown for mobile * Add method getLabel in User setting to get translated label * fix dropdown label, fix dependency of create pool button * Add translation for pool creation * Add documentation for Formatted * add t in useMemo dependencies * remove unused comments * refractor ShowDust constructor * Tweak * Fix errors from merge * Add pool catalyst view * Fix drawer * Add user stats * Add user stats view WIP * Update gauge APR calculation * APY -> APR * WIP sidebar and pool detail page * WIP mobile pool detail page - level 1 * Mobile navbar WIP * Progress on mobile nav * Pools page and pool detail page WIP * Fix pool detail * Pools page * Update tab text * Asset table * Tweak assets page * New pre-transfer modal * Fix build errors * Add fiat on ramps (#924) * Add transak modal * Change buy button name * Add kado * Fix asset table button appearances * Fix transfer * Update kado logo * Hardcode non-secret API key * Merge remote-tracking branch 'origin/feat/redesign' into jonator/redesign/fiat-onramps * Fix transfer config * Fix transfer config * Update API keys with KYB enabled * Fix deposit click event * Update buttons * Fix null check * Fix connect wallet buttons * Fix padding * Mobile remove and add liquidity * Update pool page with create pool at bottom * Update to Kevin's recommended preview image * Add pool rewards query * Fix daily reward query * Fix formatting * Fix metric being displayed * User stats on mobile + missing title * Update pool detail page translations * Translate errors, cleanup * Lock tokens modal tx * More translations * Create pool + go superfluid * Fix liquidity buttons on various screen sizes * More tweaks for localization and lock token modal * Fix mobile nav bar + menu * Tweaks * Update colors and tooltip + update icons * Add translations (#947) * Add translations * Fixes * fix typo Co-authored-by: Jon Ator <jonathanator0@gmail.com> * Fix translations * Fix incentive drawer text wrap + rem log * Mobile redesign + fixes (#937) * WIP sidebar and pool detail page * WIP mobile pool detail page - level 1 * Mobile navbar WIP * Progress on mobile nav * Pools page and pool detail page WIP * Fix pool detail * Pools page * Update tab text * Asset table * Tweak assets page * New pre-transfer modal * Fix build errors * Update buttons * Fix null check * Fix connect wallet buttons * Fix padding * Mobile remove and add liquidity * Update pool page with create pool at bottom * Update to Kevin's recommended preview image * Add pool rewards query * Fix daily reward query * Fix formatting * Fix metric being displayed * User stats on mobile + missing title * Update pool detail page translations * Translate errors, cleanup * Lock tokens modal tx * More translations * Create pool + go superfluid * Fix liquidity buttons on various screen sizes * More tweaks for localization and lock token modal * Fix mobile nav bar + menu * Tweaks * Update colors and tooltip + update icons * Add translations (#947) * Add translations * Fixes * fix typo Co-authored-by: Jon Ator <jonathanator0@gmail.com> * Fix translations Co-authored-by: Dorian Latouche <Dorian.Latouche@hotmail.com> * Don't show on ramps on mobile * Add missing translations * update fr translations (#949) * Updates * Remove space * Remove old button component * Remove old colors, update sfs modal * Update trade clipboard WIP * Trade clipboard mobile * Always use token select modal * Update colors in pool token select * Remove bg-card * Remove bg-card 2 * Fix colors * CSS fixes * Update menu label, add missing translations * Tweak trade clipboard * Tweaks and add learn more link * Disable button * Text over graphic * Update readme, remove unused code * Tweaks * Adjust modal background * Transfer modal fixes * Fix address display issue * Fix from address logic * Colors * Add insufficient balance error * Add error message to create pool * Add superfluid APR, remove log * save settings in local storage in UserSetting (#951) * Adjust shares on mobile/ handle overflow * Add feature flag for transak * Mobile- reduce size * Use configured base urls * add frontier colors - remove unused gradients * Update superfluid color * add korean WIP (#953) * Remove language icons, use native language in menu * Add levels to bond liquidity config * Subtract the sfs APR * Comment * Declare type explicitly * Added Polish translation (#960) * Added a polish translation * Minor fixes * Removed language names from file * Use cloudflare price middleware * Español esta aqui amigos (#962) * Español esta aqui amigos * Add Español to dropdown * Some fixes * Some fixes * Some fixes * Turkish Language Added Turkish crypto community is one of the largest in crypto. We felt the need to add Turkish as a language to Osmosis. * Superfulid text, wallet info button * Left align transfer table text * Animate pool card hover * Fix superfluid texts * Reduce size of * Center switch icon * Manual slippage bg * Fix turkish * Button height and color transition * Use normal position for token select * Various fixes * Fix quick action dropdown location, close others * Fix menu dropdowns, use border button swap tool * Fixes + improvements * Fixes * Use coingecko * Update bond card arrangement * Fix bond card backdrop * Revert "Use coingecko" This reverts commit 46e2cd0. * Fix pool quick action bug * Auto set superfluid * Frontier button black text * Black -> osmoverse * Update nav bar, buttons, tablet * Tweak asset table controls * Input box animation on focus * Caret color * Trade page bg * Lock token menu, make sidebar text AX * Dropdown hover state * Remove selected language from dropdown * Pool detail gap * Tweaks * Close quick action modal on tx complete * Lock tokens on mobile modal tweak * Lock token modal - mobile * Add arrow button * Fix quick action modal titles * Update bond card * Tweak table spacing * remove scrollbar style * Match button sizes * Pool table control spacing + focus effect * Update Spanish (#973) * Spanish Fixes * Fix spanish * Spanish fixes * Small fixes * Fix button style * Translate wrap asset link * Fix external links * UI for no bonding periods * Tweaks on mobile pool detail page * Tablet pool detail tweaks * Mobile tweaks * Tweak nav bar spacing * Tweak search bar offset * Remove white background * Add files via upload (#981) -Fixed missing lines. -Removed extra lines. Co-authored-by: Dorian Latouche <Dorian.Latouche@hotmail.com> Co-authored-by: KIM, WOOJUNG <gnujoow@users.noreply.github.com> Co-authored-by: pawarm <piwirm@gmail.com> Co-authored-by: Daniel Farina <contact@nevulas.com> Co-authored-by: Huginn.Academy <107777584+HuginnAcademy@users.noreply.github.com>
osmosis-labs · Nov 9, 2022 · 8f9c72d · 8f9c72d · vercel · Nov 9, 2022
1 parent 0fddb06
commit 8f9c72d
Show file tree

Hide file tree

Showing 300 changed files with 14,260 additions and 7,928 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,7 @@ dist
 prod
 build
 yarn-error.log
+.yarn
 
 src/styles/index.scss
 .vercel
diff --git a/CODEOWNERS b/CODEOWNERS
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,20 @@
+FROM node:14.19.1 as build
+
+WORKDIR /usr/src/app
+
+COPY . .
+
+RUN npm install -g npm@8.10.0
+
+RUN yarn
+RUN yarn build
+
+FROM node:14.19.1-alpine
+
+WORKDIR /usr/src/app
+
+COPY --from=build /usr/src/app .
+
+EXPOSE 3000
+
+CMD [ "yarn", "start" ]
diff --git a/README.md b/README.md
@@ -70,6 +70,8 @@ Otherwise the non-frontier commands can be used with the env var set to true.
 
 ### Testnet
 
+Testnet version of the frontend uses `NEXT_PUBLIC_IS_TESTNET=true`.
+
 Dev:
 
 ```bash

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -0,0 +1,9 @@
+version: '3.5'
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: ./Dockerfile
+    ports:
+      - '3000:3000'
diff --git a/packages/stores/src/price/pool.ts b/packages/stores/src/price/pool.ts
@@ -28,7 +28,9 @@ export class PoolFallbackPriceStore
     protected readonly queryPool: ObservableQueryPools,
     intermidiateRoutes: IntermediateRoute[]
   ) {
-    super(kvStore, supportedVsCurrencies, defaultVsCurrency);
+    super(kvStore, supportedVsCurrencies, defaultVsCurrency, {
+      baseURL: "https://prices.osmosis.zone/api/v3",
+    });
 
     this._intermidiateRoutes = intermidiateRoutes;
 

diff --git a/packages/stores/src/queries-external/base.ts b/packages/stores/src/queries-external/base.ts
@@ -0,0 +1,13 @@
+import Axios from "axios";
+import { ObservableQuery } from "@keplr-wallet/stores";
+import { KVStore } from "@keplr-wallet/common";
+export class ObservableQueryExternalBase<
+  T = unknown,
+  E = unknown
+> extends ObservableQuery<T, E> {
+  constructor(kvStore: KVStore, baseURL: string, urlPath: string) {
+    const instance = Axios.create({ baseURL });
+
+    super(kvStore, instance, urlPath);
+  }
+}
diff --git a/packages/stores/src/queries-external/index.ts b/packages/stores/src/queries-external/index.ts
@@ -1,2 +1,8 @@
 export * from "./pool-fees";
+export * from "./pool-rewards";
 export * from "./store";
+
+export const IMPERATOR_HISTORICAL_DATA_BASEURL =
+  "https://api-osmosis.imperator.co";
+export const IMPERATOR_TX_REWARD_BASEURL =
+  "https://api-osmosis-chain.imperator.co";
diff --git a/packages/stores/src/queries-external/pool-fees/index.ts b/packages/stores/src/queries-external/pool-fees/index.ts
@@ -2,40 +2,19 @@ import { makeObservable } from "mobx";
 import { computedFn } from "mobx-utils";
 import { KVStore } from "@keplr-wallet/common";
 import { Dec, PricePretty, RatePretty } from "@keplr-wallet/unit";
-import { pow } from "@osmosis-labs/math";
 import { IPriceStore } from "../../price";
 import { ObservableQueryPool } from "../../queries/pools";
-import { ObservableQueryExternal } from "../store";
-import {
-  ObservablePoolWithFeeMetrics,
-  PoolFeesMetrics,
-  PoolFees,
-} from "./types";
+import { ObservableQueryExternalBase } from "../base";
+import { PoolFeesMetrics, PoolFees } from "./types";
 
 /** Queries Imperator pool fee history data. */
-export class ObservableQueryPoolFeesMetrics extends ObservableQueryExternal<PoolFees> {
+export class ObservableQueryPoolFeesMetrics extends ObservableQueryExternalBase<PoolFees> {
   constructor(kvStore: KVStore, baseURL: string) {
     super(kvStore, baseURL, "/fees/v1/pools");
 
     makeObservable(this);
   }
 
-  readonly makePoolWithFeeMetrics = computedFn(
-    (
-      pool: ObservableQueryPool,
-      priceStore: IPriceStore
-    ): ObservablePoolWithFeeMetrics => {
-      const poolFeesMetrics = this.getPoolFeesMetrics(pool.id, priceStore);
-      const liquidity = pool.computeTotalValueLocked(priceStore);
-
-      return {
-        pool,
-        liquidity,
-        ...poolFeesMetrics,
-      };
-    }
-  );
-
   readonly getPoolFeesMetrics = computedFn(
     (poolId: string, priceStore: IPriceStore): PoolFeesMetrics => {
       const fiatCurrency = priceStore.getFiatCurrency(
@@ -89,32 +68,20 @@ export class ObservableQueryPoolFeesMetrics extends ObservableQueryExternal<Pool
     }
   );
 
-  /** Get pool non-incentivized return from fees based on past 7d of activity, compounded. */
-  readonly get7dPoolFeeApy = computedFn(
-    (
-      pool: ObservablePoolWithFeeMetrics,
-      priceStore: IPriceStore
-    ): RatePretty => {
-      const avgDayFeeRevenue = new Dec(
-        pool.feesSpent7d.toDec().toString(),
-        6
-      ).quo(new Dec(7));
-      const poolTVL = pool.pool.computeTotalValueLocked(priceStore).toDec();
-
-      if (poolTVL.equals(new Dec(0))) {
-        return new RatePretty(0).ready(false);
-      }
-      const percentRevenue = avgDayFeeRevenue.quo(poolTVL);
-      const dailyRate = new Dec(1).add(percentRevenue);
-
-      if (!dailyRate.lt(new Dec(2))) return new RatePretty(0);
+  /** Get pool non-incentivized return from fees based on past 7d of activity. */
+  readonly get7dPoolFeeApr = computedFn(
+    (pool: ObservableQueryPool, priceStore: IPriceStore): RatePretty => {
+      const { feesSpent7d } = this.getPoolFeesMetrics(pool.id, priceStore);
+      const avgDayFeeRevenue = new Dec(feesSpent7d.toDec().toString(), 6).quo(
+        new Dec(7)
+      );
+      const poolTVL = pool.computeTotalValueLocked(priceStore).toDec();
+      const revenuePerYear = avgDayFeeRevenue.mul(new Dec(365));
 
-      const rate = pow(dailyRate, new Dec(365));
+      if (poolTVL.equals(new Dec(0)) || revenuePerYear.equals(new Dec(0)))
+        return new RatePretty(0);
 
-      return new RatePretty(rate)
-        .sub(new Dec(1))
-        .mul(new Dec(2))
-        .moveDecimalPointLeft(2);
+      return new RatePretty(revenuePerYear.quo(poolTVL));
     }
   );
 }

diff --git a/packages/stores/src/queries-external/pool-fees/types.ts b/packages/stores/src/queries-external/pool-fees/types.ts
@@ -1,13 +1,4 @@
-import { PricePretty, RatePretty } from "@keplr-wallet/unit";
-import { ObservableQueryPool } from "../../queries/pools";
-
-export interface ObservablePoolWithFeeMetrics extends PoolFeesMetrics {
-  pool: ObservableQueryPool;
-  liquidity: PricePretty;
-  myLiquidity?: PricePretty;
-  epochsRemaining?: number;
-  apr?: RatePretty;
-}
+import { PricePretty } from "@keplr-wallet/unit";
 
 export interface PoolFeesMetrics {
   volume24h: PricePretty;

diff --git a/packages/stores/src/queries-external/pool-rewards/index.ts b/packages/stores/src/queries-external/pool-rewards/index.ts
@@ -0,0 +1,70 @@
+import { makeObservable } from "mobx";
+import { computedFn } from "mobx-utils";
+import { KVStore } from "@keplr-wallet/common";
+import { HasMapStore } from "@keplr-wallet/stores";
+import { Dec, PricePretty } from "@keplr-wallet/unit";
+import { IPriceStore } from "../../price";
+import { ObservableQueryExternalBase } from "../base";
+import { PoolsRewards, PoolRewards } from "./types";
+
+/** Queries Imperator pool fee history data. */
+export class ObservableQueryAccountPoolRewards extends ObservableQueryExternalBase<PoolsRewards> {
+  constructor(
+    kvStore: KVStore,
+    baseURL: string,
+    protected readonly priceStore: IPriceStore,
+    protected readonly bech32Address: string
+  ) {
+    super(kvStore, baseURL, `/lp/v1/rewards/estimation/${bech32Address}`);
+
+    makeObservable(this);
+  }
+
+  protected canFetch(): boolean {
+    return this.bech32Address !== "";
+  }
+
+  readonly getUsdRewardsForPool = computedFn(
+    (poolId: string): PoolRewards | undefined => {
+      const fiat = this.priceStore.getFiatCurrency("usd");
+
+      if (!this.response || !fiat) return undefined;
+
+      const poolRewards = this.response.data.pools[poolId] as
+        | PoolsRewards["pools"][0]
+        | undefined;
+
+      if (!poolRewards) return undefined;
+
+      return {
+        day: new PricePretty(fiat, new Dec(poolRewards.day_usd)),
+        month: new PricePretty(fiat, new Dec(poolRewards.month_usd)),
+        year: new PricePretty(fiat, new Dec(poolRewards.year_usd)),
+      };
+    }
+  );
+}
+
+export class ObservableQueryAccountsPoolRewards extends HasMapStore<ObservableQueryAccountPoolRewards> {
+  constructor(
+    kvStore: KVStore,
+    priceStore: IPriceStore,
+    poolRewardsBaseUrl = "https://api-osmosis-chain.imperator.co"
+  ) {
+    super(
+      (bech32Address) =>
+        new ObservableQueryAccountPoolRewards(
+          kvStore,
+          poolRewardsBaseUrl,
+          priceStore,
+          bech32Address
+        )
+    );
+  }
+
+  get(bech32Address: string) {
+    return super.get(bech32Address) as ObservableQueryAccountPoolRewards;
+  }
+}
+
+export * from "./types";
diff --git a/packages/stores/src/queries-external/pool-rewards/types.ts b/packages/stores/src/queries-external/pool-rewards/types.ts
@@ -0,0 +1,20 @@
+import { PricePretty } from "@keplr-wallet/unit";
+
+export interface PoolsRewards {
+  pools: {
+    [id: string]: {
+      day_usd: number;
+      month_usd: number;
+      year_usd: number;
+    };
+  };
+  total_day_usd: number;
+  total_month_usd: number;
+  total_year_usd: number;
+}
+
+export interface PoolRewards {
+  day: PricePretty;
+  month: PricePretty;
+  year: PricePretty;
+}
diff --git a/packages/stores/src/queries-external/store.ts b/packages/stores/src/queries-external/store.ts
@@ -1,41 +1,32 @@
 import { KVStore } from "@keplr-wallet/common";
-import { HasMapStore, ObservableQuery } from "@keplr-wallet/stores";
 import { DeepReadonly } from "utility-types";
+import { IPriceStore } from "../price";
 import { ObservableQueryPoolFeesMetrics } from "./pool-fees";
-import Axios from "axios";
-
-export class QueriesExternalStore extends HasMapStore<QueriesExternal> {
-  constructor(protected readonly kvStore: KVStore, feeMetricsBaseURL?: string) {
-    super(() => new QueriesExternal(this.kvStore, feeMetricsBaseURL));
-  }
-
-  get(): QueriesExternal {
-    return super.get("external");
-  }
-}
+import { ObservableQueryAccountsPoolRewards } from "./pool-rewards";
+import {
+  IMPERATOR_HISTORICAL_DATA_BASEURL,
+  IMPERATOR_TX_REWARD_BASEURL,
+} from ".";
 
 /** Root store for queries external to any chain. */
-export class QueriesExternal {
+export class QueriesExternalStore {
   public readonly queryGammPoolFeeMetrics: DeepReadonly<ObservableQueryPoolFeesMetrics>;
+  public readonly queryAccountsPoolRewards: DeepReadonly<ObservableQueryAccountsPoolRewards>;
 
   constructor(
     kvStore: KVStore,
-    feeMetricsBaseURL = "https://api-osmosis.imperator.co"
+    priceStore: IPriceStore,
+    feeMetricsBaseURL = IMPERATOR_HISTORICAL_DATA_BASEURL,
+    poolRewardsBaseUrl = IMPERATOR_TX_REWARD_BASEURL
   ) {
     this.queryGammPoolFeeMetrics = new ObservableQueryPoolFeesMetrics(
       kvStore,
       feeMetricsBaseURL
     );
-  }
-}
-
-export class ObservableQueryExternal<
-  T = unknown,
-  E = unknown
-> extends ObservableQuery<T, E> {
-  constructor(kvStore: KVStore, baseURL: string, urlPath: string) {
-    const instance = Axios.create({ baseURL });
-
-    super(kvStore, instance, urlPath);
+    this.queryAccountsPoolRewards = new ObservableQueryAccountsPoolRewards(
+      kvStore,
+      priceStore,
+      poolRewardsBaseUrl
+    );
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,7 @@ dist @@
     prod
     build
     yarn-error.log
+    .yarn
     src/styles/index.scss
     .vercel