Jonator/hotfix round 1 (#985)

* 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.

* Fix text wrap error

* Fix stablecoin info box

* Close swap modal in pool detail page

* Handle asset select edge caes

* Fix obscure assets table button bug

* Preload hovered images

* Fix network dropdown

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>

packages/web/components/alert/info.tsx

@@ -7,6 +7,7 @@ export const Info: FunctionComponent<
   { size?: "large" | "subtle" } & Alert & {
       data?: string;
       borderClassName?: string;
+      textClassName?: string;
     } & CustomClasses &
     MobileProps
 > = ({
@@ -15,6 +16,7 @@ export const Info: FunctionComponent<
   caption,
   data,
   borderClassName,
+  textClassName,
   className,
   isMobile = false,
 }) =>
@@ -25,7 +27,14 @@ export const Info: FunctionComponent<
         className
       )}
     >
-      <span className="subtitle1 text-white-mid md:caption">{message}</span>
+      <span
+        className={classNames(
+          "subtitle1 text-wosmongton-100 md:caption",
+          textClassName
+        )}
+      >
+        {message}
+      </span>
     </div>
   ) : (
     <div
@@ -36,7 +45,7 @@ export const Info: FunctionComponent<
     >
       <div
         className={classNames(
-          "flex grow place-content-between md:gap-1 px-5 py-4 md:p-2 bg-osmoverse-800 rounded-2xlinset",
+          "flex grow place-content-between md:gap-1 px-3 py-2 md:p-2 bg-osmoverse-800 rounded-2xlinset",
           {
             "items-center": !data,
           },
@@ -45,15 +54,22 @@ export const Info: FunctionComponent<
       >
         <div className="flex flex-col">
           {isMobile ? (
-            <span className="caption">
+            <span className={classNames("caption", textClassName)}>
               {message}
               {data && ` - ${data}`}
             </span>
           ) : (
-            <h6>{message}</h6>
+            <span className={classNames("body2", textClassName)}>
+              {message}
+            </span>
           )}
           {caption && (
-            <span className="text-osmoverse-400 body2 md:caption">
+            <span
+              className={classNames(
+                "text-wosmongton-100 body2 md:caption",
+                textClassName
+              )}
+            >
               {caption}
             </span>
           )}

packages/web/components/complex/add-liquidity.tsx

@@ -94,23 +94,6 @@ export const AddLiquidity: FunctionComponent<
                 key={currency.coinDenom}
                 className="flex flex-col gap-1 w-full md:p-3 p-4 border border-osmoverse-700 md:rounded-xl rounded-2xl"
               >
-                {isPeggedCurrency && (
-                  <Info
-                    size="subtle"
-                    className="border-2 border-rust-200/30"
-                    message={`You are adding liquidity to ${
-                      currency!.originCurrency!.coinDenom
-                    }, ${
-                      ["a", "e", "i", "o", "u"].some((vowel) =>
-                        currency.originCurrency!.pegMechanism!.startsWith(vowel)
-                      )
-                        ? "an"
-                        : "a"
-                    } ${
-                      currency.originCurrency!.pegMechanism
-                    }-backed stablecoin.`}
-                  />
-                )}
                 <div className="flex items-center w-full place-content-between">
                   {addLiquidityConfig.isSingleAmountIn ? (
                     <PoolTokenSelect
@@ -197,6 +180,17 @@ export const AddLiquidity: FunctionComponent<
                     </div>
                   </div>
                 </div>
+                {isPeggedCurrency && (
+                  <Info
+                    className="text-wosmongton-100"
+                    borderClassName="bg-gradient-neutral"
+                    textClassName="w-full text-center"
+                    message={t("addLiquidity.stablecoinWarning", {
+                      denom: currency!.originCurrency!.coinDenom,
+                      mechanism: currency.originCurrency!.pegMechanism!,
+                    })}
+                  />
+                )}
               </div>
             );
           })}

packages/web/components/navbar/index.tsx

@@ -137,6 +137,7 @@ const NavBarButton: FunctionComponent<
         src={hovered ? hovericonurl : iconurl}
         height={24}
         width={24}
+        priority={true}
       />
     </button>
   );

packages/web/components/table/cells/transfer-button.tsx

@@ -102,13 +102,15 @@ const TransferButton: FunctionComponent<{
           src="/icons/chevron-right-rust.svg"
           height={13}
           width={13}
+          priority={true}
         />
       ) : (
         <Image
           alt="chevron"
           src="/icons/chevron-right.svg"
           height={13}
           width={13}
+          priority={true}
         />
       )}
     </button>