Publish Stage (osmosis-labs#2366)

* update feature requests link (osmosis-labs#2370) Co-authored-by: Michael Millington <> * Revert master (osmosis-labs#2369) * revert master * Add client side ID Co-authored-by: Max Millington <[email protected]> --------- Co-authored-by: Max Millington <[email protected]> * chore: fix typos (osmosis-labs#2373) * small style adjustments (osmosis-labs#2372) Co-authored-by: Michael Millington <> --------- Co-authored-by: Max Millington <[email protected]> Co-authored-by: vuittont60 <[email protected]>
onezoomin · Nov 7, 2023 · d8137e5 · d8137e5
1 parent 753bdcf
commit d8137e5
Show file tree

Hide file tree

Showing 23 changed files with 200 additions and 195 deletions.
diff --git a/packages/stores/src/ui-config/manage-liquidity/add-liquidity.ts b/packages/stores/src/ui-config/manage-liquidity/add-liquidity.ts
@@ -22,7 +22,7 @@ import { ManageLiquidityConfigBase } from "./base";
 import { CalculatingShareOutAmountError, NotInitializedError } from "./errors";
 
 /** Use to config user input UI for eventually sending a valid add liquidity msg.
- *  Supports specifying a single asset LP amount, or evenly adding liquidity from an aribtrary number of pool assets.
+ *  Supports specifying a single asset LP amount, or evenly adding liquidity from an arbitrary number of pool assets.
  */
 export class ObservableAddLiquidityConfig extends ManageLiquidityConfigBase {
   @observable.ref

diff --git a/packages/stores/src/ui-config/user-upgrades.ts b/packages/stores/src/ui-config/user-upgrades.ts
@@ -104,7 +104,7 @@ export class UserUpgradesConfig {
                         undefined,
                         undefined,
                         (tx) => {
-                          // fullfilled
+                          // fulfilled
                           if (tx.code) reject(tx.rawLog);
                           else {
                             resolve();

diff --git a/packages/web/components/cards/my-position/expanded.tsx b/packages/web/components/cards/my-position/expanded.tsx
@@ -361,7 +361,10 @@ export const MyPositionCardExpandedSection: FunctionComponent<{
           )}
         <div className="mt-4 flex flex-row flex-wrap justify-end gap-5 sm:flex-wrap sm:justify-start">
           {showLinkToPool && (
-            <ArrowButton onClick={() => router.push(`/pool/${poolId}`)}>
+            <ArrowButton
+              className="md:ml-auto"
+              onClick={() => router.push(`/pool/${poolId}`)}
+            >
               {t("clPositions.goToPool", { poolId })}
             </ArrowButton>
           )}
@@ -373,7 +376,7 @@ export const MyPositionCardExpandedSection: FunctionComponent<{
             !isUnbonding && (
               <>
                 <button
-                  className="w-fit rounded-[10px] bg-superfluid py-[2px] px-[2px]"
+                  className="w-fit rounded-[10px] bg-superfluid py-[2px] px-[2px] md:ml-auto"
                   disabled={!Boolean(account)}
                   onClick={() => {
                     setSelectSfValidatorAddress(true);
@@ -464,7 +467,7 @@ const PositionButton: FunctionComponent<ComponentProps<typeof Button>> = (
     <Button
       mode="unstyled"
       size="sm"
-      className="text-white w-fit whitespace-nowrap rounded-[10px] border-2 border-wosmongton-400 bg-transparent py-4 px-5 text-subtitle1 font-subtitle1 hover:border-wosmongton-300 disabled:border-osmoverse-600 disabled:text-osmoverse-400"
+      className="text-white w-fit whitespace-nowrap rounded-[10px] border-2 border-wosmongton-400 bg-transparent py-4 px-5 text-subtitle1 font-subtitle1 hover:border-wosmongton-300 disabled:border-osmoverse-600 disabled:text-osmoverse-400 md:ml-auto"
       onClick={props.onClick}
       {...props}
     >
@@ -648,7 +651,7 @@ const SuperfluidPositionInfo: FunctionComponent<
   const endTime = "endTime" in props ? props.endTime : undefined;
 
   return (
-    <div className="subtitle1 flex w-full flex-col gap-4 sm:flex-col">
+    <div className="subtitle1 flex w-full flex-col gap-4 md:gap-1">
       <span className="text-osmoverse-400">
         {t("clPositions.superfluidValidator")}
       </span>
@@ -660,13 +663,13 @@ const SuperfluidPositionInfo: FunctionComponent<
           height={50}
           width={50}
         />
-        <div className="flex flex-col">
+        <div className="md:caption flex flex-col">
           <span>{validatorName}</span>
           <span>~{equivalentStakedAmount.trim(true).toString()}</span>
         </div>
-        <div className="flex flex-col pl-8 text-right md:pl-4">
+        <div className="md:caption flex flex-col pl-8 text-right md:pl-4">
           <span className="text-superfluid-gradient">
-            +{superfluidApr.toString()} {t("pool.APR")}
+            +{superfluidApr.maxDecimals(2).toString()} {t("pool.APR")}
           </span>
           {validatorCommission && (
             <span>
@@ -675,7 +678,7 @@ const SuperfluidPositionInfo: FunctionComponent<
             </span>
           )}
         </div>
-        <div className="flex flex-col pl-8 text-right md:pl-4">
+        <div className="md:caption flex flex-col pl-8 text-right md:pl-4">
           {endTime ? (
             <span>
               {t("clPositions.superfluidUnstaking", {

diff --git a/packages/web/components/cards/stake-dashboard.tsx b/packages/web/components/cards/stake-dashboard.tsx
@@ -71,8 +71,8 @@ export const StakeDashboard: React.FC<{
       }
     }, [account, logEvent]);
 
-    const gasForecastedCollectRewards = 2901105; // estimate based on gas simulation to run collect succesfully
-    const gasForecastedCollectAndReinvestRewards = 6329136; // estimate based on gas simulation to run collect and reinvest succesfully
+    const gasForecastedCollectRewards = 2901105; // estimate based on gas simulation to run collect successfully
+    const gasForecastedCollectAndReinvestRewards = 6329136; // estimate based on gas simulation to run collect and reinvest successfully
 
     const { fee: collectRewardsFee } = useFakeFeeConfig(
       chainStore,

diff --git a/packages/web/components/complex/pool/create/index.ts b/packages/web/components/complex/pool/create/index.ts
@@ -4,4 +4,4 @@ export * from "./step2-add-liquidity";
 export * from "./step3-confirm";
 export * from "./types";
 
-export const POOL_CREATION_FEE = "1000 OSMO";
+export const POOL_CREATION_FEE = "400 OSMO";
diff --git a/packages/web/components/main-menu.tsx b/packages/web/components/main-menu.tsx
@@ -47,7 +47,7 @@ const MenuLink: FunctionComponent<{
       className="h-full w-full flex-shrink flex-grow"
     >
       <div
-        className={`${!showMore && "h-12 px-4 py-3"}`}
+        className={`${!showMore && "flex h-12 items-center px-4 py-3"}`}
         onMouseEnter={() => shouldShowHover && setShowSecondary(true)}
         onMouseLeave={() => shouldShowHover && setShowSecondary(false)}
         onClick={handleLinkClick}
@@ -64,25 +64,29 @@ const MorePopover: FunctionComponent<{
 }> = ({ item, secondaryMenus }) => {
   return (
     <Popover className="relative flex">
-      <Popover.Button className="h-full w-full px-4 py-3 focus:outline-none">
-        <MenuItemContent menu={item} />
-      </Popover.Button>
-      <Popover.Panel className="top-navbar-mobile absolute top-[-10px] right-[20px] flex w-52 flex-col gap-2 rounded-3xl bg-osmoverse-800 py-4 px-3">
-        {secondaryMenus.map((menu: MainLayoutMenu) => {
-          const { link, selectionTest, secondaryLogo, showMore } = menu;
-          return (
-            <MenuLink
-              href={link}
-              secondaryLogo={secondaryLogo}
-              selectionTest={selectionTest}
-              showMore={showMore}
-              key={menu.label}
-            >
-              {() => <MenuItemContent menu={menu} />}
-            </MenuLink>
-          );
-        })}
-      </Popover.Panel>
+      {({ open }) => (
+        <>
+          <Popover.Button className="h-full w-full px-4 py-3 focus:outline-none">
+            <MenuItemContent menu={item} selected={open} />
+          </Popover.Button>
+          <Popover.Panel className="top-navbar-mobile absolute bottom-[3.5rem] flex w-60 flex-col gap-2 rounded-3xl bg-osmoverse-800 py-4 px-3">
+            {secondaryMenus.map((menu: MainLayoutMenu) => {
+              const { link, selectionTest, secondaryLogo, showMore } = menu;
+              return (
+                <MenuLink
+                  href={link}
+                  secondaryLogo={secondaryLogo}
+                  selectionTest={selectionTest}
+                  showMore={showMore}
+                  key={menu.label}
+                >
+                  {() => <MenuItemContent menu={menu} />}
+                </MenuLink>
+              );
+            })}
+          </Popover.Panel>
+        </>
+      )}
     </Popover>
   );
 };
@@ -149,15 +153,15 @@ const MenuItemContent: React.FC<{
       </div>
       <div
         className={classNames(
-          "max-w-24 ml-2.5 overflow-hidden overflow-x-hidden text-base font-semibold transition-all transition-transform duration-300 ease-in-out",
+          "max-w-24 ml-2.5 overflow-hidden overflow-x-hidden font-semibold transition-all duration-300 ease-in-out",
           {
             "text-white-full/60 group-hover:text-white-mid": !selected,
             "w-full": isNew || Boolean(badge),
           }
         )}
       >
         {isNew ? (
-          <div className="flex items-center justify-between">
+          <div className="flex w-full items-center justify-between">
             {label}
             <Pill>
               <span className="button px-[8px] py-[2px]">{t("menu.new")}</span>
@@ -174,11 +178,11 @@ const MenuItemContent: React.FC<{
               {badge}
             </div>
             <div
-              className={`transition-visibility transition-opacity duration-300 ease-in-out ${
+              className={`transition-visibility mt-0 transition-opacity duration-300 ease-in-out ${
                 showSecondary && subtext
                   ? "visible h-5 opacity-100"
                   : "invisible h-0 opacity-0"
-              } text-white-opacity-70 mt-1 text-sm`}
+              } text-white-opacity-70 mt-1 text-xs font-medium`}
             >
               {subtext}
             </div>
@@ -200,7 +204,7 @@ export const MainMenu: FunctionComponent<{
   return (
     <ul
       className={classNames(
-        "mt-20 mb-56 flex w-full flex-col gap-3 md:mb-0 md:mt-0 md:gap-0",
+        "mt-20 flex w-full flex-col gap-3 md:mb-0 md:mt-0 md:gap-0",
         className
       )}
     >

diff --git a/packages/web/components/navbar-osmo-price.tsx b/packages/web/components/navbar-osmo-price.tsx
@@ -19,6 +19,7 @@ import {
 } from "~/hooks";
 import { FiatOnrampSelectionModal } from "~/modals";
 import { useStore } from "~/stores";
+import { theme } from "~/tailwind.config";
 import { getLastDayChartData } from "~/utils/chart";
 
 const NavbarOsmoPrice = observer(() => {
@@ -146,6 +147,8 @@ const OsmoPriceAndChart: FunctionComponent<{ isOsmoPriceReady: boolean }> =
       chainStore.osmosis.stakeCurrency.coinDenom
     );
 
+    const isNumberGoUp = tokenDataQuery.get24hrChange?.toDec().gte(new Dec(0));
+
     return (
       <SkeletonLoader
         isLoaded={
@@ -161,19 +164,13 @@ const OsmoPriceAndChart: FunctionComponent<{ isOsmoPriceReady: boolean }> =
           height={24}
           lineWidth={2}
           color={
-            tokenDataQuery.get24hrChange?.toDec().gte(new Dec(0))
-              ? "#6BDEC9"
-              : "#E91F4F"
+            isNumberGoUp
+              ? theme.colors.bullish[400]
+              : theme.colors.osmoverse[500]
           }
         />
 
-        <p
-          className={
-            tokenDataQuery.get24hrChange?.toDec().gte(new Dec(0))
-              ? "text-bullish-400"
-              : "text-error"
-          }
-        >
+        <p className={isNumberGoUp ? "text-bullish-400" : "text-osmoverse-500"}>
           {tokenDataQuery.get24hrChange
             ?.maxDecimals(2)
             .inequalitySymbol(false)

diff --git a/packages/web/components/navbar/index.tsx b/packages/web/components/navbar/index.tsx
@@ -326,6 +326,25 @@ export const NavBar: FunctionComponent<
                 />
               </NotifiContextProvider>
             )}
+            <div className="group">
+              <a href="https://pro.osmosis.zone">
+                <Button
+                  className="subtitle2 group mr-0 flex !w-40 transform items-center justify-center whitespace-nowrap bg-osmoverse-700 px-12 font-semibold tracking-wide text-osmoverse-200 transition-all duration-300 ease-in-out hover:px-6"
+                  mode="icon-primary"
+                  size="unstyled"
+                  style={{ maxWidth: "180px" }}
+                >
+                  <Image
+                    className="mr-1 inline-block w-0 opacity-0 transition-all duration-300 group-hover:w-6 group-hover:opacity-100"
+                    height={24}
+                    src="/images/tfm-logo.png"
+                    width={24}
+                    alt="TFM Logo"
+                  />
+                  {t("menu.trade")}
+                </Button>
+              </a>
+            </div>
             <IconButton
               aria-label="Open settings dropdown"
               icon={<Icon id="setting" width={24} height={24} />}
@@ -351,111 +370,6 @@ export const NavBar: FunctionComponent<
             </ClientOnly>
           </div>
         </div>
-        <div className="flex shrink-0 items-center gap-3 lg:gap-2 md:hidden">
-          <div className="group">
-            <a href="https://pro.osmosis.zone">
-              <Button
-                className="subtitle2 group mr-0 flex !w-40 transform items-center justify-center whitespace-nowrap bg-osmoverse-700 px-12 font-semibold tracking-wide text-osmoverse-200 transition-all duration-300 ease-in-out hover:px-6"
-                mode="icon-primary"
-                size="unstyled"
-                style={{ maxWidth: "180px" }}
-              >
-                <Image
-                  className="mr-1 inline-block w-0 opacity-0 transition-all duration-300 group-hover:w-6 group-hover:opacity-100"
-                  height={24}
-                  src="/images/tfm-logo.png"
-                  width={24}
-                  alt="TFM Logo"
-                />
-                {t("menu.trade")}
-              </Button>
-            </a>
-          </div>
-          {featureFlags.upgrades && userUpgrades.hasUpgradeAvailable && (
-            <div className="relative">
-              {showUpgradesFyi && (
-                <>
-                  <div
-                    className={classNames(
-                      "absolute top-12 right-0 z-20 flex w-80 shrink flex-col gap-5 rounded-3xl bg-osmoverse-700 p-6"
-                    )}
-                  >
-                    <div className="flex w-full place-content-end items-center text-center">
-                      <span className="subtitle1 mx-auto">
-                        {t("upgrades.foundHere")}
-                      </span>
-                      <Icon
-                        id="close"
-                        color={theme.colors.osmoverse[400]}
-                        width={24}
-                        height={24}
-                        onClick={() => {
-                          setShowUpgradesFyi(false);
-                        }}
-                      />
-                    </div>
-                    <span className="body2 text-osmoverse-100">
-                      {t("upgrades.availableHereCaption")}
-                    </span>
-                  </div>
-                  <div
-                    onClick={() => {
-                      setShowUpgradesFyi(false);
-                    }}
-                    className="fixed top-0 left-0 z-10 h-[100vh] w-[100vw] justify-center bg-osmoverse-800/60"
-                  />
-                </>
-              )}
-              <IconButton
-                aria-label="Open upgrades"
-                icon={
-                  <Image
-                    className="shrink-0"
-                    alt="upgrade"
-                    src="/icons/upgrade.svg"
-                    width={24}
-                    height={24}
-                  />
-                }
-                className="relative z-20 w-[48px] px-3 outline-none"
-                onClick={onOpenUpgrades}
-              />
-            </div>
-          )}
-          {featureFlags.notifications && walletSupportsNotifications && (
-            <NotifiContextProvider>
-              <NotifiPopover className="z-40 px-3 outline-none" />
-              <NotifiModal
-                isOpen={isNotifiOpen}
-                onRequestClose={onCloseNotifi}
-                onOpenNotifi={onOpenNotifi}
-              />
-            </NotifiContextProvider>
-          )}
-          <IconButton
-            aria-label="Open settings dropdown"
-            icon={<Icon id="setting" width={24} height={24} />}
-            className="w-12 px-3 outline-none"
-            onClick={onOpenSettings}
-          />
-          <UserUpgradesModal
-            isOpen={isUpgradesOpen}
-            onRequestClose={onCloseUpgrades}
-          />
-          <SettingsModal
-            isOpen={isSettingsOpen}
-            onRequestClose={onCloseSettings}
-          />
-          <ClientOnly>
-            <SkeletonLoader isLoaded={!isWalletLoading}>
-              <WalletInfo
-                className="md:hidden"
-                icnsName={icnsQuery?.primaryName}
-                onOpenProfile={onOpenProfile}
-              />
-            </SkeletonLoader>
-          </ClientOnly>
-        </div>
         {/* Back-layer element to occupy space for the caller */}
         <div
           className={classNames(

diff --git a/packages/web/components/pool-detail/base-pool.tsx b/packages/web/components/pool-detail/base-pool.tsx
@@ -87,7 +87,7 @@ export const BasePoolDetails: FunctionComponent<{
                     {t("pool.swapFee")}
                   </span>
                   <h4 className="text-osmoverse-100">
-                    {new RatePretty(pool.swapFee).maxDecimals(0).toString()}
+                    {new RatePretty(pool.swapFee).maxDecimals(2).toString()}
                   </h4>
                 </div>
               </div>

diff --git a/packages/web/components/pool-detail/share.tsx b/packages/web/components/pool-detail/share.tsx
@@ -610,7 +610,8 @@ export const SharePool: FunctionComponent<{ poolId: string }> = observer(
             </div>
           )}
         </section>
-        {flags.concentratedLiquidity &&
+        {!isMobile &&
+          flags.concentratedLiquidity &&
           flags.upgrades &&
           relevantCfmmToClUpgrade &&
           pool && (