Update the EUR icon and name on Vortex UI (#95)

* add EUR icon * show fiat icons in pool selector modal * improve code readability of SelectionModal * implement showing FIAT * simplify useGetIcon hook * Simplify and streamline icon definition * Fix bug for invalid token storage items --------- Co-authored-by: Torsten Stüber <15174476+TorstenStueber@users.noreply.github.com>
pendulum-chain · Aug 21, 2024 · 12b4073 · 12b4073
1 parent b54fbfe
commit 12b4073
Show file tree

Hide file tree

Showing 11 changed files with 121 additions and 121 deletions.
diff --git a/src/assets/coins/EUR.svg b/src/assets/coins/EUR.svg
diff --git a/src/components/AssetNumericInput/index.tsx b/src/components/AssetNumericInput/index.tsx
@@ -1,48 +1,29 @@
 import { FC, useMemo } from 'preact/compat';
 import { UseFormRegisterReturn } from 'react-hook-form';
-import { ConnectButton } from '@rainbow-me/rainbowkit';
-import { InputTokenType, OutputTokenType } from '../../constants/tokenConfig';
 import { AssetButton } from '../buttons/AssetButton';
 import { SwapFormValues } from '../Nabla/schema';
 import { NumericInput } from '../NumericInput';
-
-export const ChainName = () => (
-  <ConnectButton.Custom>
-    {({ account, chain, openChainModal, openConnectModal, authenticationStatus, mounted }) => {
-      const ready = mounted && authenticationStatus !== 'loading';
-      const connected =
-        ready && account && chain && (!authenticationStatus || authenticationStatus === 'authenticated');
-
-      return (
-        <button type="button" className="text-sm text-blue-700" onClick={connected ? openChainModal : openConnectModal}>
-          {chain?.name || ''}
-        </button>
-      );
-    }}
-  </ConnectButton.Custom>
-);
+import { AssetIconType } from '../../hooks/useGetIcon';
 
 interface AssetNumericInputProps {
-  tokenType?: InputTokenType | OutputTokenType;
-  tokenSymbol?: string;
+  assetIcon: AssetIconType;
+  tokenSymbol: string;
   onClick: () => void;
-  additionalText?: string;
   disabled?: boolean;
   readOnly?: boolean;
   registerInput: UseFormRegisterReturn<keyof SwapFormValues>;
 }
 
 export const AssetNumericInput: FC<AssetNumericInputProps> = ({
-  additionalText,
-  tokenType,
+  assetIcon,
   tokenSymbol,
   onClick,
   registerInput,
   ...rest
 }) => {
   const memoizedAssetButton = useMemo(
-    () => <AssetButton tokenType={tokenType} tokenSymbol={tokenSymbol} onClick={onClick} />,
-    [tokenType, tokenSymbol, onClick],
+    () => <AssetButton assetIcon={assetIcon} tokenSymbol={tokenSymbol} onClick={onClick} />,
+    [assetIcon, tokenSymbol, onClick],
   );
 
   return (
@@ -55,7 +36,6 @@ export const AssetNumericInput: FC<AssetNumericInputProps> = ({
       <div className="flex items-center justify-between">
         {memoizedAssetButton}
         <div className="w-2"></div>
-        {additionalText ? <p className="text-sm text-blue-700">{additionalText}</p> : <ChainName />}
       </div>
 
       <NumericInput

diff --git a/src/components/ExchangeRate/index.tsx b/src/components/ExchangeRate/index.tsx
@@ -1,19 +1,19 @@
 import { FC } from 'preact/compat';
-import { InputTokenDetails, OutputTokenDetails } from '../../constants/tokenConfig';
+import { InputTokenDetails } from '../../constants/tokenConfig';
 import { UseTokenOutAmountResult } from '../../hooks/nabla/useTokenAmountOut';
 
 interface ExchangeRateProps {
-  fromToken?: InputTokenDetails;
-  toToken?: OutputTokenDetails;
+  fromToken: InputTokenDetails;
+  toTokenSymbol: string;
   tokenOutData: UseTokenOutAmountResult;
 }
 
-export const ExchangeRate: FC<ExchangeRateProps> = ({ tokenOutData, fromToken, toToken }) => {
+export const ExchangeRate: FC<ExchangeRateProps> = ({ tokenOutData, fromToken, toTokenSymbol }) => {
   const exchangeRate =
-    fromToken !== undefined && toToken !== undefined && !tokenOutData.isLoading && tokenOutData.data ? (
-      <>{`1 ${fromToken.assetSymbol} = ${Number(tokenOutData.data.effectiveExchangeRate).toFixed(2)} ${
-        toToken.stellarAsset.code.string
-      }`}</>
+    fromToken !== undefined && !tokenOutData.isLoading && tokenOutData.data ? (
+      <>{`1 ${fromToken.assetSymbol} = ${Number(tokenOutData.data.effectiveExchangeRate).toFixed(
+        2,
+      )} ${toTokenSymbol}`}</>
     ) : (
       `-`
     );

diff --git a/src/components/FeeCollapse/index.tsx b/src/components/FeeCollapse/index.tsx
@@ -23,10 +23,10 @@ function calculateFeesUSD(fromAmount: string): string {
 interface CollapseProps {
   fromAmount?: string;
   toAmount?: string;
-  toCurrency?: OutputTokenType;
+  toTokenSymbol: string;
 }
 
-export const FeeCollapse: FC<CollapseProps> = ({ fromAmount, toAmount, toCurrency }) => {
+export const FeeCollapse: FC<CollapseProps> = ({ fromAmount, toAmount, toTokenSymbol }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { trackEvent } = useEventsContext();
 
@@ -35,8 +35,6 @@ export const FeeCollapse: FC<CollapseProps> = ({ fromAmount, toAmount, toCurrenc
     setIsOpen((state) => !state);
   };
 
-  const outputToken = toCurrency ? OUTPUT_TOKEN_CONFIG[toCurrency] : undefined;
-
   const chevron = isOpen ? (
     <ChevronUpIcon className="w-8 text-blue-700" />
   ) : (
@@ -52,7 +50,7 @@ export const FeeCollapse: FC<CollapseProps> = ({ fromAmount, toAmount, toCurrenc
         <div className="flex items-center justify-between">
           <p>
             <strong className="font-bold">
-              {totalReceive} {outputToken?.stellarAsset.code.string}
+              {totalReceive} {toTokenSymbol}
             </strong>
             &nbsp;is what you will receive, after fees
           </p>

diff --git a/src/components/InputKeys/PoolListItem/index.tsx b/src/components/InputKeys/PoolListItem/index.tsx
@@ -1,22 +1,24 @@
 import { Avatar, AvatarProps, Button } from 'react-daisyui';
 import { CheckIcon } from '@heroicons/react/20/solid';
-import { useGetIcon } from '../../../hooks/useGetIcon';
+import { AssetIconType, useGetIcon } from '../../../hooks/useGetIcon';
 import { InputTokenType, OutputTokenType } from '../../../constants/tokenConfig';
 
 interface PoolListItemProps<T extends InputTokenType | OutputTokenType> {
   tokenType: T;
   tokenSymbol: string;
   isSelected?: boolean;
   onSelect: (tokenType: T) => void;
+  assetIcon: AssetIconType;
 }
 
 export function PoolListItem<T extends InputTokenType | OutputTokenType>({
   tokenType,
   tokenSymbol,
   isSelected,
   onSelect,
+  assetIcon,
 }: PoolListItemProps<T>) {
-  const tokenIcon = useGetIcon(tokenType);
+  const tokenIcon = useGetIcon(assetIcon);
 
   return (
     <Button

diff --git a/src/components/InputKeys/SelectionModal.tsx b/src/components/InputKeys/SelectionModal.tsx
@@ -1,9 +1,10 @@
 import { Input } from 'react-daisyui';
 import { ChangeEvent, useState } from 'preact/compat';
-import { InputTokenType, OutputTokenType } from '../../constants/tokenConfig';
+import { Fiat, InputTokenType, OutputTokenType } from '../../constants/tokenConfig';
 import { Dialog } from '../Dialog';
 import { Skeleton } from '../Skeleton';
 import { PoolListItem } from './PoolListItem';
+import { AssetIconType } from '../../hooks/useGetIcon';
 
 interface PoolSelectorModalProps<T extends InputTokenType | OutputTokenType> extends PoolListProps<T> {
   isLoading?: boolean;
@@ -12,9 +13,9 @@ interface PoolSelectorModalProps<T extends InputTokenType | OutputTokenType> ext
 }
 
 interface PoolListProps<T extends InputTokenType | OutputTokenType> {
-  definitions: { assetSymbol: string; type: T }[];
+  definitions: { assetSymbol: string; type: T; assetIcon: AssetIconType }[];
   onSelect: (tokenType: InputTokenType | OutputTokenType) => void;
-  selected: InputTokenType | OutputTokenType | undefined;
+  selected: InputTokenType | OutputTokenType;
 }
 
 export function PoolSelectorModal<T extends InputTokenType | OutputTokenType>({
@@ -45,13 +46,14 @@ function PoolList<T extends InputTokenType | OutputTokenType>({ onSelect, defini
         placeholder="Find by name or address"
       />
       <div className="flex flex-col gap-1">
-        {definitions.map(({ assetSymbol, type }) => (
+        {definitions.map(({ assetIcon, assetSymbol, type }) => (
           <PoolListItem
             key={type}
-            isSelected={selected === assetSymbol}
+            isSelected={selected === type}
             onSelect={onSelect}
             tokenType={type}
             tokenSymbol={assetSymbol}
+            assetIcon={assetIcon}
           />
         ))}
       </div>

diff --git a/src/components/Nabla/useSwapForm.tsx b/src/components/Nabla/useSwapForm.tsx
@@ -23,9 +23,13 @@ export const useSwapForm = () => {
 
   const initialState = useMemo(() => {
     const storageValues = storageService.getParsed<SwapSettings>(storageKeys.SWAP_SETTINGS);
+
+    const storedFromTokenIsValid = INPUT_TOKEN_CONFIG[storageValues?.from as InputTokenType] !== undefined;
+    const storedToTokenIsValid = OUTPUT_TOKEN_CONFIG[storageValues?.to as OutputTokenType] !== undefined;
+
     return {
-      from: (storageValues?.from ?? 'usdc') as InputTokenType,
-      to: (storageValues?.to ?? 'eurc') as OutputTokenType,
+      from: (storedFromTokenIsValid ? storageValues?.from : 'usdc') as InputTokenType,
+      to: (storedToTokenIsValid ? storageValues?.to : 'eurc') as OutputTokenType,
       taxNumber: '',
       bankAccount: '',
     };

diff --git a/src/components/buttons/AssetButton/index.tsx b/src/components/buttons/AssetButton/index.tsx
@@ -1,13 +1,12 @@
-import { InputTokenType, OutputTokenType } from '../../../constants/tokenConfig';
-import { useGetIcon } from '../../../hooks/useGetIcon';
+import { AssetIconType, useGetIcon } from '../../../hooks/useGetIcon';
 
 interface AssetButtonProps {
-  tokenType?: InputTokenType | OutputTokenType;
-  tokenSymbol?: string;
+  assetIcon: AssetIconType;
+  tokenSymbol: string;
   onClick: () => void;
 }
-export function AssetButton({ tokenType, tokenSymbol, onClick }: AssetButtonProps) {
-  const icon = useGetIcon(tokenType);
+export function AssetButton({ assetIcon, tokenSymbol, onClick }: AssetButtonProps) {
+  const icon = useGetIcon(assetIcon);
 
   return (
     <button
@@ -16,9 +15,9 @@ export function AssetButton({ tokenType, tokenSymbol, onClick }: AssetButtonProp
       type="button"
     >
       <span className="h-full p-px mr-1 rounded-full">
-        {tokenType && <img src={icon} alt={tokenType} className="w-auto h-full" />}
+        <img src={icon} alt={assetIcon} className="w-auto h-full" />
       </span>
-      <strong className="font-bold text-black">{tokenSymbol || 'Select'}</strong>
+      <strong className="font-bold text-black">{tokenSymbol}</strong>
     </button>
   );
 }
diff --git a/src/constants/tokenConfig.ts b/src/constants/tokenConfig.ts
@@ -1,5 +1,4 @@
-import UsdcIcon from '../assets/coins/USDC.png';
-import EurcIcon from '../assets/coins/EURC.png';
+import { AssetIconType } from '../hooks/useGetIcon';
 
 export interface InputTokenDetails {
   assetSymbol: string;
@@ -9,15 +8,21 @@ export interface InputTokenDetails {
     pendulumCurrencyId: { XCM: number };
     pendulumAssetSymbol: string;
   };
+  polygonAssetIcon: AssetIconType;
   decimals: number;
-  icon: string;
 }
 
 export type InputTokenType = 'usdc' | 'usdce';
 
+export interface Fiat {
+  assetIcon: AssetIconType;
+  symbol: string;
+}
+
 export interface OutputTokenDetails {
   tomlFileUrl: string;
   decimals: number;
+  fiat: Fiat;
   stellarAsset: {
     code: {
       hex: string;
@@ -32,7 +37,6 @@ export interface OutputTokenDetails {
   minWithdrawalAmountRaw: string;
   maxWithdrawalAmountRaw: string;
   erc20WrapperAddress: string;
-  icon: string;
 }
 export const INPUT_TOKEN_CONFIG: Record<InputTokenType, InputTokenDetails> = {
   usdc: {
@@ -43,8 +47,8 @@ export const INPUT_TOKEN_CONFIG: Record<InputTokenType, InputTokenDetails> = {
       pendulumCurrencyId: { XCM: 12 },
       pendulumAssetSymbol: 'USDC.axl',
     },
+    polygonAssetIcon: 'polygonUSDC',
     decimals: 6,
-    icon: UsdcIcon,
   },
   usdce: {
     assetSymbol: 'USDC.e',
@@ -54,8 +58,8 @@ export const INPUT_TOKEN_CONFIG: Record<InputTokenType, InputTokenDetails> = {
       pendulumCurrencyId: { XCM: 12 },
       pendulumAssetSymbol: 'USDC.axl',
     },
+    polygonAssetIcon: 'polygonUSDC',
     decimals: 6,
-    icon: UsdcIcon,
   },
 };
 
@@ -64,6 +68,10 @@ export const OUTPUT_TOKEN_CONFIG: Record<OutputTokenType, OutputTokenDetails> =
   eurc: {
     tomlFileUrl: 'https://mykobo.co/.well-known/stellar.toml',
     decimals: 12,
+    fiat: {
+      assetIcon: 'eur',
+      symbol: 'EUR',
+    },
     stellarAsset: {
       code: {
         hex: '0x45555243',
@@ -78,7 +86,6 @@ export const OUTPUT_TOKEN_CONFIG: Record<OutputTokenType, OutputTokenDetails> =
     erc20WrapperAddress: '6fA9DRKJ12oTXfSAU7ZZGZ9gEQ92YnyRXeJzW1wXekPzeXZC',
     minWithdrawalAmountRaw: '10000000000000',
     maxWithdrawalAmountRaw: '10000000000000000',
-    icon: EurcIcon,
   },
 };