Merge pull request #398 from pendulum-chain/369-add-currency-names-in…

…-the-to-dropdown [READY] show currency names in the dropdown
pendulum-chain · Jan 22, 2025 · b4fd6c5 · b4fd6c5
2 parents 6252890 + 1857a96
commit b4fd6c5
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 3 deletions.
diff --git a/src/components/InputKeys/PoolListItem/index.tsx b/src/components/InputKeys/PoolListItem/index.tsx
@@ -9,6 +9,7 @@ interface PoolListItemProps<T extends InputTokenType | OutputTokenType> {
   isSelected?: boolean;
   onSelect: (tokenType: T) => void;
   assetIcon: AssetIconType;
+  name?: string;
 }
 
 export function PoolListItem<T extends InputTokenType | OutputTokenType>({
@@ -17,6 +18,7 @@ export function PoolListItem<T extends InputTokenType | OutputTokenType>({
   isSelected,
   onSelect,
   assetIcon,
+  name,
 }: PoolListItemProps<T>) {
   const tokenIcon = useGetAssetIcon(assetIcon);
 
@@ -43,7 +45,7 @@ export function PoolListItem<T extends InputTokenType | OutputTokenType>({
         <span className="text-lg leading-5 dark:text-white">
           <strong>{tokenSymbol}</strong>
         </span>
-        <span className="text-sm leading-5 text-neutral-500">{tokenSymbol}</span>
+        <span className="text-sm leading-5 text-neutral-500">{name || tokenSymbol}</span>
       </span>
     </Button>
   );

diff --git a/src/components/InputKeys/SelectionModal.tsx b/src/components/InputKeys/SelectionModal.tsx
@@ -13,7 +13,7 @@ interface PoolSelectorModalProps<T extends InputTokenType | OutputTokenType> ext
 }
 
 interface PoolListProps<T extends InputTokenType | OutputTokenType> {
-  definitions: { assetSymbol: string; type: T; assetIcon: AssetIconType }[];
+  definitions: { assetSymbol: string; type: T; assetIcon: AssetIconType; name?: string }[];
   onSelect: (tokenType: InputTokenType | OutputTokenType) => void;
   selected: InputTokenType | OutputTokenType;
 }
@@ -46,14 +46,15 @@ function PoolList<T extends InputTokenType | OutputTokenType>({ onSelect, defini
         placeholder="Find by name or address"
       />
       <div className="flex flex-col gap-1">
-        {definitions.map(({ assetIcon, assetSymbol, type }) => (
+        {definitions.map(({ assetIcon, assetSymbol, type, name }) => (
           <PoolListItem
             key={type}
             isSelected={selected === type}
             onSelect={onSelect}
             tokenType={type}
             tokenSymbol={assetSymbol}
             assetIcon={assetIcon}
+            name={name}
           />
         ))}
       </div>

diff --git a/src/constants/tokenConfig.ts b/src/constants/tokenConfig.ts
@@ -39,6 +39,7 @@ export type InputTokenType = 'usdc' | 'usdce' | 'usdt';
 export interface Fiat {
   assetIcon: AssetIconType;
   symbol: string;
+  name: string;
 }
 
 export interface OutputTokenDetails {
@@ -261,6 +262,7 @@ export const OUTPUT_TOKEN_CONFIG: Record<OutputTokenType, OutputTokenDetails> =
     fiat: {
       assetIcon: 'eur',
       symbol: 'EUR',
+      name: 'Euro',
     },
     stellarAsset: {
       code: {
@@ -286,6 +288,7 @@ export const OUTPUT_TOKEN_CONFIG: Record<OutputTokenType, OutputTokenDetails> =
     fiat: {
       assetIcon: 'ars',
       symbol: 'ARS',
+      name: 'Argentine Peso',
     },
     stellarAsset: {
       code: {

diff --git a/src/pages/swap/index.tsx b/src/pages/swap/index.tsx
@@ -295,6 +295,7 @@ export const SwapPage = () => {
           type: key as OutputTokenType,
           assetSymbol: value.fiat.symbol,
           assetIcon: value.fiat.assetIcon,
+          name: value.fiat.name,
         }));
 
   const modals = (