vitwit · charymalloju · Dec 29, 2023 · Dec 28, 2023 · Dec 28, 2023 · Dec 28, 2023
diff --git a/frontend/src/app/(routes)/transfers/SendPage.tsx b/frontend/src/app/(routes)/transfers/SendPage.tsx
@@ -16,6 +16,7 @@ import { txTransfer } from '@/store/features/ibc/ibcSlice';
 import { TxStatus } from '@/types/enums';
 import { setError } from '@/store/features/common/commonSlice';
 import NoAssets from '@/components/illustrations/NoAssets';
+import { capitalizeFirstLetter } from '@/utils/util';
 
 const SendPage = ({ sortedAssets }: { sortedAssets: ParsedAsset[] }) => {
   const [selectedAsset, setSelectedAsset] = useState<ParsedAsset | undefined>();
@@ -387,24 +388,42 @@ const Cards = ({
           key={index + ' ' + asset.chainID + ' ' + asset.displayDenom}
           onClick={() => onSelectAsset(asset, index)}
         >
-          <div className="flex gap-2">
-            <Image
-              className="rounded-full"
-              src={asset.chainLogoURL}
-              width={32}
-              height={32}
-              alt={asset.chainName}
-            />
+          <div className="flex gap-2 items-center">
+            <div style={{ position: 'relative', display: 'inline-block' }}>
+              <Image
+                className="rounded-full"
+                src={asset.chainLogoURL}
+                width={32}
+                height={32}
+                alt={asset.chainName}
+              />
+
+              {/* <Image
+                className="rounded-full hover:w-24"
+                src={
+                  '/' +
+                  (asset.type === 'ibc'
+                    ? asset.originDenomChainInfo.chainLogo
+                    : '')
+                }
+                width={20}
+                height={20}
+                alt={asset.chainName}
+                style={{ position: 'absolute', bottom: -5, left: -7 }}
+              /> */}
+            </div>
+            <div className="text-base not-italic font-bold leading-[normal] break-all">
+              {asset.balance}
+            </div>
+
             <div className="flex items-center text-sm not-italic font-normal leading-[normal] text-capitalize">
-              {asset.chainName}
+              {asset.displayDenom}
             </div>
           </div>
           <div className="flex gap-2">
-            <div className="text-base not-italic font-bold leading-[normal]">
-              {asset.balance}
-            </div>
             <div className="text-[#9c95ac] text-xs not-italic font-normal leading-[normal] flex items-center">
-              {asset.displayDenom}
+              on {capitalizeFirstLetter(asset.chainName)}{' '}
+              {asset.type === 'ibc' ? ' (IBC)' : ''}
             </div>
           </div>
         </div>

diff --git a/frontend/src/app/(routes)/transfers/components/DialogAllAssets.tsx b/frontend/src/app/(routes)/transfers/components/DialogAllAssets.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Dialog, DialogContent } from '@mui/material';
 import Image from 'next/image';
 import { customDialogPaper } from '../styles';
+import { capitalizeFirstLetter } from '@/utils/util';
 
 const DialogAllAssets = ({
   dialogOpen,
@@ -64,25 +65,46 @@ const DialogAllAssets = ({
                   handleDialogClose();
                 }}
               >
-                <div className="flex gap-2">
-                  <Image
-                    src={asset.chainLogoURL}
-                    width={32}
-                    height={32}
-                    alt={asset.chainName}
-                  />
-                  <div className="flex items-center text-[14] text-capitalize">
-                    {asset.chainName}
+                <div className="flex gap-2 items-center">
+                  <div
+                    style={{ position: 'relative', display: 'inline-block' }}
+                  >
+                    <Image
+                      className="rounded-full"
+                      src={asset.chainLogoURL}
+                      width={32}
+                      height={32}
+                      alt={asset.chainName}
+                    />
+
+                    {/* <Image
+                className="rounded-full hover:w-24"
+                src={
+                  '/' +
+                  (asset.type === 'ibc'
+                    ? asset.originDenomChainInfo.chainLogo
+                    : '')
+                }
+                width={20}
+                height={20}
+                alt={asset.chainName}
+                style={{ position: 'absolute', bottom: -5, left: -7 }}
+              /> */}
                   </div>
-                </div>
-                <div className="flex gap-2">
                   <div className="text-base not-italic font-bold leading-[normal]">
                     {asset.balance}
                   </div>
-                  <div className="text-[#9c95ac] text-xs not-italic font-normal leading-[normal] flex items-center">
+
+                  <div className="flex items-center text-sm not-italic font-normal leading-[normal] text-capitalize">
                     {asset.displayDenom}
                   </div>
                 </div>
+                <div className="flex gap-2">
+                  <div className="text-[#9c95ac] text-xs not-italic font-normal leading-[normal] flex items-center">
+                    on {capitalizeFirstLetter(asset.chainName)}{' '}
+                    {asset.type === 'ibc' ? ' (IBC)' : ''}
+                  </div>
+                </div>
               </div>
             ))}
           </div>

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -500,3 +500,76 @@
       0.5em 0 0 white;
   }
 }
+
+.loader  {
+  animation: rotate 1s infinite;  
+  height: 50px;
+  width: 50px;
+}
+
+.loader:before,
+.loader:after {   
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 20px;  
+  width: 20px;
+}
+.loader:before {
+  animation: ball1 1s infinite;  
+  background-color: #cb2025;
+  box-shadow: 30px 0 0 #f8b334;
+  margin-bottom: 10px;
+}
+.loader:after {
+  animation: ball2 1s infinite; 
+  background-color: #00a096;
+  box-shadow: 30px 0 0 #97bf0d;
+}
+
+@keyframes rotate {
+  0% { 
+    -webkit-transform: rotate(0deg) scale(0.8); 
+    -moz-transform: rotate(0deg) scale(0.8);
+  }
+  50% { 
+    -webkit-transform: rotate(360deg) scale(1.2); 
+    -moz-transform: rotate(360deg) scale(1.2);
+  }
+  100% { 
+    -webkit-transform: rotate(720deg) scale(0.8); 
+    -moz-transform: rotate(720deg) scale(0.8);
+  }
+}
+
+@keyframes ball1 {
+  0% {
+    box-shadow: 30px 0 0 #f8b334;
+  }
+  50% {
+    box-shadow: 0 0 0 #f8b334;
+    margin-bottom: 0;
+    -webkit-transform: translate(15px,15px);
+    -moz-transform: translate(15px, 15px);
+  }
+  100% {
+    box-shadow: 30px 0 0 #f8b334;
+    margin-bottom: 10px;
+  }
+}
+
+@keyframes ball2 {
+  0% {
+    box-shadow: 30px 0 0 #97bf0d;
+  }
+  50% {
+    box-shadow: 0 0 0 #97bf0d;
+    margin-top: -20px;
+    -webkit-transform: translate(15px,15px);
+    -moz-transform: translate(15px, 15px);
+  }
+  100% {
+    box-shadow: 30px 0 0 #97bf0d;
+    margin-top: 0;
+  }
+}
diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx
@@ -8,7 +8,10 @@ import {
   isConnected,
   removeAllAuthTokens,
 } from '../utils/localStorage';
-import { establishWalletConnection } from '../store/features/wallet/walletSlice';
+import {
+  establishWalletConnection,
+  unsetIsLoading,
+} from '../store/features/wallet/walletSlice';
 import { RootState } from '../store/store';
 import { getAllTokensPrice } from '@/store/features/common/commonSlice';
 import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks';
@@ -48,6 +51,8 @@ export const Landingpage = ({ children }: { children: React.ReactNode }) => {
     const walletName = getWalletName();
     if (isConnected()) {
       tryConnectWallet(walletName);
+    } else {
+      dispatch(unsetIsLoading());
     }
 
     const accountChangeListener = () => {

diff --git a/frontend/src/components/Loading.tsx b/frontend/src/components/Loading.tsx
@@ -3,9 +3,8 @@ import React from 'react';
 const Loading = () => {
   return (
     <div className="landingpage-background text-white min-h-screen min-w-full flex justify-center items-center">
-      <div className="flex">
-        <div>loading</div>
-        <div className="dots-flashing"></div>
+      <div className=" loader">
+
       </div>
     </div>
   );

diff --git a/frontend/src/custom-hooks/useGetChainInfo.ts b/frontend/src/custom-hooks/useGetChainInfo.ts
@@ -10,13 +10,6 @@ export interface DenomInfo {
   displayDenom: string;
 }
 
-export interface OriginDenomInfo {
-  originDenom: string;
-  decimals: number;
-  chainName: string;
-  chainID: string;
-}
-
 const useGetChainInfo = () => {
   const networks = useAppSelector((state: RootState) => state.wallet.networks);
 
@@ -73,16 +66,19 @@ const useGetChainInfo = () => {
       chainID: '-',
       chainName: '-',
       decimals: 0,
+      chainLogo: '-',
       // when the given minimalDenom is missing or unknown
       originDenom: 'Unknown-Token',
     };
     chainIDs.forEach((chainID) => {
       const config = networks[chainID].network.config;
       const currency = config.stakeCurrency;
+      const chainLogo = networks[chainID].network.logos.menu;
       const { coinDecimals, coinDenom, coinMinimalDenom } = currency;
       if (coinMinimalDenom === minimalDenom) {
         originDenomInfo = {
           chainID,
+          chainLogo,
           chainName: config.chainName,
           originDenom: coinDenom,
           decimals: coinDecimals,

diff --git a/frontend/src/custom-hooks/useSortedAssets.ts b/frontend/src/custom-hooks/useSortedAssets.ts
@@ -4,6 +4,7 @@ import { useAppSelector } from './StateHooks';
 import { RootState } from '@/store/store';
 import chainDenoms from '@/utils/chainDenoms.json';
 import { filterAsset } from '@/utils/util';
+import useGetChainInfo from './useGetChainInfo';
 const chainDenomsData = chainDenoms as AssetData;
 
 export interface Options {
@@ -32,6 +33,8 @@ const useSortedAssets = (
     (state) => state.common.allTokensInfoState.info
   );
 
+  const { getOriginDenomInfo } = useGetChainInfo();
+
   const sortedAssets = useMemo(() => {
     let sortedAssets: ParsedAsset[] = [];
 
@@ -107,6 +110,7 @@ const useSortedAssets = (
           );
           const usdDenomValue = usdDenomPrice * balanceAmount;
           asset = {
+            originDenomChainInfo: getOriginDenomInfo(denomInfo[0].origin_denom),
             type: 'ibc',
             usdValue: usdDenomValue,
             usdPrice: usdDenomPrice,

diff --git a/frontend/src/store/features/wallet/walletSlice.ts b/frontend/src/store/features/wallet/walletSlice.ts
@@ -168,6 +168,9 @@ const walletSlice = createSlice({
     resetConnectWalletStatus: (state) => {
       state.status = TxStatus.INIT;
     },
+    unsetIsLoading: (state) => {
+      state.isLoading = false;
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -192,7 +195,11 @@ const walletSlice = createSlice({
   },
 });
 
-export const { setWallet, resetWallet, resetConnectWalletStatus } =
-  walletSlice.actions;
+export const {
+  setWallet,
+  resetWallet,
+  resetConnectWalletStatus,
+  unsetIsLoading,
+} = walletSlice.actions;
 
 export default walletSlice.reducer;
diff --git a/frontend/src/types/assets.d.ts b/frontend/src/types/assets.d.ts
@@ -9,6 +9,7 @@ interface ParsedIBCAsset {
   denomInfo: (IBCAsset | NativeAsset)[];
   displayDenom: string;
   denom: string;
+  originDenomChainInfo: OriginDenomInfo;
   chainLogoURL: string;
   decimals: number;
 }
@@ -30,3 +31,11 @@ interface ParsedNativeAsset {
 }
 
 type ParsedAsset = ParsedIBCAsset | ParsedNativeAsset;
+
+interface OriginDenomInfo {
+  originDenom: string;
+  decimals: number;
+  chainName: string;
+  chainID: string;
+  chainLogo: string;
+}