DistributedCollective · creed-victor · Nov 12, 2024 · Oct 17, 2024 · Oct 17, 2024 · Oct 17, 2024
diff --git a/.changeset/gentle-schools-fetch.md b/.changeset/gentle-schools-fetch.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+chore: fix asset icon styles
diff --git a/.changeset/slimy-tigers-hope.md b/.changeset/slimy-tigers-hope.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-4524: Show USD values on Convert page
diff --git a/apps/frontend/CHANGELOG.md b/apps/frontend/CHANGELOG.md
@@ -1,5 +1,16 @@
 # frontend
 
+## 1.1.24
+
+### Patch Changes
+
+- 0bc23cc0: chore: update rune symbols
+- 52b7c4fe: chore: add new pools
+- Updated dependencies [0bc23cc0]
+- Updated dependencies [52b7c4fe]
+  - @sovryn/[email protected]
+  - @sovryn/[email protected]
+
 ## 1.1.23
 
 ### Patch Changes

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.1.23",
+  "version": "1.1.24",
   "homepage": ".",
   "private": true,
   "dependencies": {

diff --git a/apps/frontend/src/app/2_molecules/AssetRenderer/AssetRenderer.module.css b/apps/frontend/src/app/2_molecules/AssetRenderer/AssetRenderer.module.css
@@ -3,7 +3,7 @@
 }
 
 .assetLogo svg {
-  @apply mr-2 w-5 h-5;
+  @apply mr-2 w-5 h-5 bg-gray-80 rounded-full overflow-hidden;
 }
 
 .asset {

diff --git a/apps/frontend/src/app/2_molecules/AssetRenderer/AssetRenderer.tsx b/apps/frontend/src/app/2_molecules/AssetRenderer/AssetRenderer.tsx
@@ -92,11 +92,7 @@ export const AssetRenderer: FC<AssetRendererProps> = ({
     >
       {showAssetLogo && logo && (
         <div
-          className={classNames(
-            styles.assetLogo,
-            logoClassName,
-            'rounded-full overflow-hidden',
-          )}
+          className={classNames(styles.assetLogo, logoClassName)}
           dangerouslySetInnerHTML={{ __html: logo }}
         />
       )}

diff --git a/apps/frontend/src/app/5_pages/ConvertPage/ConvertPage.constants.ts b/apps/frontend/src/app/5_pages/ConvertPage/ConvertPage.constants.ts
@@ -54,5 +54,6 @@ export const CATEGORY_TOKENS: Record<CategoryType, string[]> = {
   [CategoryType.Stablecoins]: SMART_ROUTER_STABLECOINS,
   [CategoryType.BTC]: [COMMON_SYMBOLS.BTC],
   [CategoryType.Runes]: ['POWA', 'DOGGOTOTHEMOON'],
+  [CategoryType.LST]: ['SolvBTC.BBN', 'UniBTC'],
   [CategoryType.All]: [],
 };
diff --git a/apps/frontend/src/app/5_pages/ConvertPage/ConvertPage.tsx b/apps/frontend/src/app/5_pages/ConvertPage/ConvertPage.tsx
@@ -36,11 +36,12 @@ import { RSK_CHAIN_ID } from '../../../config/chains';
 import { AmountRenderer } from '../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../../2_molecules/AssetRenderer/AssetRenderer';
 import { MaxButton } from '../../2_molecules/MaxButton/MaxButton';
-import { TOKEN_RENDER_PRECISION } from '../../../constants/currencies';
+import { TOKEN_RENDER_PRECISION, USD } from '../../../constants/currencies';
 import { getTokenDisplayName } from '../../../constants/tokens';
 import { useAccount } from '../../../hooks/useAccount';
 import { useAssetBalance } from '../../../hooks/useAssetBalance';
 import { useCurrentChain } from '../../../hooks/useChainStore';
+import { useDollarValue } from '../../../hooks/useDollarValue';
 import { useWeiAmountInput } from '../../../hooks/useWeiAmountInput';
 import { translations } from '../../../locales/i18n';
 import {
@@ -49,7 +50,7 @@ import {
   listAssetsOfChain,
 } from '../../../utils/asset';
 import { removeTrailingZerosFromString } from '../../../utils/helpers';
-import { decimalic, fromWei } from '../../../utils/math';
+import { decimalic, fromWei, toWei } from '../../../utils/math';
 import {
   CATEGORY_TOKENS,
   FIXED_MYNT_RATE,
@@ -312,6 +313,36 @@ const ConvertPage: FC = () => {
       .toString();
   }, [quote, route, slippageTolerance]);
 
+  const { usdValue: minimumReceivedUsdValue } = useDollarValue(
+    destinationToken,
+    minimumReceived !== ''
+      ? toWei(minimumReceived).toString()
+      : Decimal.ZERO.toString(),
+  );
+
+  const renderMinimumReceived = useMemo(
+    () => (
+      <>
+        <AmountRenderer
+          value={minimumReceived}
+          suffix={getTokenDisplayName(destinationToken)}
+          precision={TOKEN_RENDER_PRECISION}
+        />
+
+        <span className="opacity-75">
+          {' ('}
+          <AmountRenderer
+            value={minimumReceivedUsdValue}
+            suffix={USD}
+            showRoundingPrefix={false}
+          />
+          {')'}
+        </span>
+      </>
+    ),
+    [destinationToken, minimumReceived, minimumReceivedUsdValue],
+  );
+
   const priceToken = useMemo<string>(() => {
     if (!destinationToken) {
       return sourceToken;
@@ -462,6 +493,11 @@ const ConvertPage: FC = () => {
     [quote],
   );
 
+  const { usdValue: priceUsdValue } = useDollarValue(
+    priceToken,
+    price !== '' ? toWei(price).toString() : Decimal.ZERO.toString(),
+  );
+
   const renderPriceAmount = useMemo(() => {
     if (price) {
       return (
@@ -472,11 +508,21 @@ const ConvertPage: FC = () => {
             precision={TOKEN_RENDER_PRECISION}
             trigger={TooltipTrigger.hover}
           />
+
+          <span className="opacity-75">
+            {' ('}
+            <AmountRenderer
+              value={priceUsdValue}
+              suffix={USD}
+              showRoundingPrefix={false}
+            />
+            {')'}
+          </span>
         </>
       );
     }
     return t(commonTranslations.na);
-  }, [price, priceToken]);
+  }, [price, priceToken, priceUsdValue]);
 
   const togglePriceQuote = useCallback(
     () => setPriceQuote(value => !value),
@@ -587,6 +633,16 @@ const ConvertPage: FC = () => {
     }
   }, [account, setAmount]);
 
+  const { usdValue: sourceUsdValue } = useDollarValue(
+    sourceToken,
+    weiAmount.toString(),
+  );
+
+  const { usdValue: destinationUsdValue } = useDollarValue(
+    destinationToken,
+    quote !== '' ? toWei(renderDestinationAmount).toString() : '0',
+  );
+
   return (
     <>
       <Helmet>
@@ -619,18 +675,25 @@ const ConvertPage: FC = () => {
               />
             </div>
 
-            <div className="w-full flex flex-row justify-between items-center gap-3 mt-3.5">
-              <AmountInput
-                value={amount}
-                onChangeText={setAmount}
-                label={t(commonTranslations.amount)}
-                min={0}
-                invalid={!isValidAmount}
-                disabled={!account}
-                className="w-full flex-grow-0 flex-shrink"
-                dataAttribute="convert-from-amount"
-                placeholder="0"
-              />
+            <div className="w-full flex flex-row justify-between items-start gap-3 mt-3.5">
+              <div>
+                <AmountInput
+                  value={amount}
+                  onChangeText={setAmount}
+                  label={t(commonTranslations.amount)}
+                  min={0}
+                  invalid={!isValidAmount}
+                  disabled={!account}
+                  className="w-full flex-grow-0 flex-shrink"
+                  dataAttribute="convert-from-amount"
+                  placeholder="0"
+                />
+
+                <div className="flex justify-end text-tiny text-gray-30 mt-1">
+                  <AmountRenderer value={sourceUsdValue} suffix={USD} />
+                </div>
+              </div>
+
               <AssetDropdownWithFilters
                 token={sourceToken}
                 selectedCategories={sourceCategories}
@@ -671,15 +734,22 @@ const ConvertPage: FC = () => {
               {t(pageTranslations.form.convertTo)}
             </Paragraph>
 
-            <div className="w-full flex flex-row justify-between items-center gap-3 mt-3.5">
-              <AmountInput
-                value={renderDestinationAmount}
-                label={t(commonTranslations.amount)}
-                readOnly
-                placeholder={t(commonTranslations.na)}
-                className="w-full flex-grow-0 flex-shrink"
-                dataAttribute="convert-to-amount"
-              />
+            <div className="w-full flex flex-row justify-between items-start gap-3 mt-3.5">
+              <div>
+                <AmountInput
+                  value={renderDestinationAmount}
+                  label={t(commonTranslations.amount)}
+                  readOnly
+                  placeholder={t(commonTranslations.na)}
+                  className="w-full flex-grow-0 flex-shrink"
+                  dataAttribute="convert-to-amount"
+                />
+
+                <div className="flex justify-end text-tiny text-gray-30 mt-1">
+                  <AmountRenderer value={destinationUsdValue} suffix={USD} />
+                </div>
+              </div>
+
               <AssetDropdownWithFilters
                 token={destinationToken}
                 selectedCategories={destinationCategories}
@@ -720,13 +790,7 @@ const ConvertPage: FC = () => {
               <SimpleTableRow
                 label={t(pageTranslations.minimumReceived)}
                 valueClassName="text-primary-10"
-                value={
-                  <AmountRenderer
-                    value={minimumReceived}
-                    suffix={getTokenDisplayName(destinationToken)}
-                    precision={TOKEN_RENDER_PRECISION}
-                  />
-                }
+                value={renderMinimumReceived}
               />
               <SimpleTableRow
                 label={t(pageTranslations.maximumPrice)}

diff --git a/apps/frontend/src/app/5_pages/ConvertPage/ConvertPage.types.ts b/apps/frontend/src/app/5_pages/ConvertPage/ConvertPage.types.ts
@@ -3,4 +3,5 @@ export enum CategoryType {
   Stablecoins = 'Stablecoins',
   BTC = 'BTC',
   Runes = 'Runes',
+  LST = 'LST',
 }
diff --git a/...src/app/5_pages/MarketMakingPage/components/AmbientMarketMaking/utils/pools/bobMainnet.ts b/...src/app/5_pages/MarketMakingPage/components/AmbientMarketMaking/utils/pools/bobMainnet.ts
@@ -112,38 +112,38 @@ export const bobMainnet: AmbientLiquidityPool[] = [
   // new AmbientLiquidityPool('RETH', 'ETH', ChainIds.BOB_MAINNET, 400),
   // new AmbientLiquidityPool('WSTETH', 'ETH', ChainIds.BOB_MAINNET, 400),
 
-  // new AmbientLiquidityPool(
-  //   'UniBTC',
-  //   'SolvBTC.BBN',
-  //   ChainIds.BOB_MAINNET,
-  //   400,
-  //   '0xEBE212e59c012Bd2f092489d98d11fCe17697cb2',
-  //   PoolListGroup.new,
-  // ),
-  // new AmbientLiquidityPool(
-  //   'UniBTC',
-  //   'wBTC',
-  //   ChainIds.BOB_MAINNET,
-  //   400, // todo
-  //   '0x6D1529a7b34D452488f577495Dd7574954339dD9',
-  //   PoolListGroup.new,
-  // ),
-  // new AmbientLiquidityPool(
-  //   'SolvBTC.BBN',
-  //   'wBTC',
-  //   ChainIds.BOB_MAINNET,
-  //   400,
-  //   '0x0F3dAef46d5631f4C335643e287314580135011E',
-  //   PoolListGroup.new,
-  // ),
-  // new AmbientLiquidityPool(
-  //   'wBTC',
-  //   'SolvBTC',
-  //   ChainIds.BOB_MAINNET,
-  //   400,
-  //   '0xF11aB627c41044f40B5C2587e77540e7fC7Af42a',
-  //   PoolListGroup.new,
-  // ),
+  new AmbientLiquidityPool(
+    'UniBTC',
+    'SolvBTC.BBN',
+    ChainIds.BOB_MAINNET,
+    400,
+    '0xEBE212e59c012Bd2f092489d98d11fCe17697cb2',
+    PoolListGroup.new,
+  ),
+  new AmbientLiquidityPool(
+    'UniBTC',
+    'wBTC',
+    ChainIds.BOB_MAINNET,
+    400, // todo
+    '0x6D1529a7b34D452488f577495Dd7574954339dD9',
+    PoolListGroup.new,
+  ),
+  new AmbientLiquidityPool(
+    'SolvBTC.BBN',
+    'wBTC',
+    ChainIds.BOB_MAINNET,
+    400,
+    '0x0F3dAef46d5631f4C335643e287314580135011E',
+    PoolListGroup.new,
+  ),
+  new AmbientLiquidityPool(
+    'wBTC',
+    'SolvBTC',
+    ChainIds.BOB_MAINNET,
+    400,
+    '0xF11aB627c41044f40B5C2587e77540e7fC7Af42a',
+    PoolListGroup.new,
+  ),
   new AmbientLiquidityPool(
     'DOGGOTOTHEMOON',
     'POWA',

diff --git a/apps/frontend/src/app/5_pages/RunesPage/RunesPage.constants.ts b/apps/frontend/src/app/5_pages/RunesPage/RunesPage.constants.ts
@@ -4,7 +4,6 @@ import { translations } from '../../../locales/i18n';
 import { RUNES_USE_CASE_ACTIONS, AvailableRunes } from './RunesPage.types';
 import convertIcon from './assets/convert.svg';
 import earnIcon from './assets/earn.svg';
-import iconDog from './assets/iconDog.svg';
 import iconPups from './assets/iconPups.svg';
 import runesBenefitsIcon1 from './assets/l1.svg';
 import runesBenefitsIcon2 from './assets/l2.svg';
@@ -16,11 +15,10 @@ export const AVAILABLE_RUNES: AvailableRunes = {
     symbol: 'POWA',
   },
   DOG: {
-    symbol: 'DOG',
-    icon: iconDog,
+    symbol: 'DOGGOTOTHEMOON',
   },
   PUPS: {
-    symbol: 'PUPS',
+    symbol: 'PUPSWORLDPEACE',
     icon: iconPups,
   },
 };

diff --git a/apps/frontend/src/app/5_pages/RunesPage/RunesPage.tsx b/apps/frontend/src/app/5_pages/RunesPage/RunesPage.tsx
@@ -70,7 +70,7 @@ export const RunesPage: FC = () => {
                 className="text-gray-30 text-center font-medium text-base"
                 children={t(pageTranslations.availableRunes)}
               />
-              <div className="flex justify-center gap-3 my-6 flex-wrap px-6">
+              <div className="flex justify-center gap-3 my-6 flex-wrap">
                 {renderAvailableRunes()}
               </div>
 

diff --git a/apps/frontend/src/app/5_pages/RunesPage/RunesPage.utils.tsx b/apps/frontend/src/app/5_pages/RunesPage/RunesPage.utils.tsx
@@ -4,6 +4,8 @@ import { t } from 'i18next';
 
 import { Button, ButtonSize, ButtonStyle, Paragraph } from '@sovryn/ui';
 
+import { BOB_CHAIN_ID } from '../../../config/chains';
+
 import { AssetRenderer } from '../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../locales/i18n';
 import {
@@ -29,11 +31,13 @@ export const renderAvailableRunes = () =>
             asset={symbol}
             showAssetLogo
             assetClassName="font-semibold text-gray-30"
+            logoClassName="rounded-full w-5 h-5 mr-2"
+            chainId={BOB_CHAIN_ID}
           />
         )}
       </div>
       {symbol === AVAILABLE_RUNES.PUPS.symbol && (
-        <div className="text-xs text-gray-30">
+        <div className="text-xs text-gray-30 text-center">
           {t(pageTranslations.availableSoon)}
         </div>
       )}