public image paths fixed

push-protocol · May 20, 2024 · cb5f3af · cb5f3af
1 parent 19d6d95
commit cb5f3af
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 55 deletions.
diff --git a/src/components/ChainIndicator.tsx b/src/components/ChainIndicator.tsx
@@ -15,6 +15,7 @@ import { useAccount } from 'hooks';
 import { SpanV2 } from './reusables/SharedStylingV2';
 import { ErrorContext } from 'contexts/ErrorContext';
 import { useClickAway } from 'hooks/useClickAway.js';
+import { getPublicAssetPath } from 'helpers/RoutesHelper.js';
 
 const ChainIndicator = ({ isDarkMode }) => {
   const toggleArrowRef = useRef(null);
@@ -34,7 +35,7 @@ const ChainIndicator = ({ isDarkMode }) => {
         id: chainId,
         value: chainName,
         title: chainName,
-        icon: `./svg/${LOGO_FROM_CHAIN_ID[chainId]}`,
+        icon: getPublicAssetPath(`svg/${LOGO_FROM_CHAIN_ID[chainId]}`),
         function: () => {
           switchChain(chainId);
           setShowDropdown(false);
@@ -61,7 +62,7 @@ const ChainIndicator = ({ isDarkMode }) => {
           >
             <CurrentChainInfo>
               <Image
-                src={`/svg/${LOGO_FROM_CHAIN_ID[currentChainId]}`}
+                src={getPublicAssetPath(`svg/${LOGO_FROM_CHAIN_ID[currentChainId]}`)}
                 width="24px"
                 height="24px"
               />
@@ -72,7 +73,7 @@ const ChainIndicator = ({ isDarkMode }) => {
               <img
                 alt="arrow"
                 className={`${showDropdown ? 'down' : 'up'}`}
-                src="/svg/arrow.svg"
+                src={getPublicAssetPath('svg/arrow.svg')}
               />
             </ToggleArrowImg>
           </CurrentChain>

diff --git a/src/components/ChainsSelect.tsx b/src/components/ChainsSelect.tsx
@@ -12,6 +12,7 @@ import Dropdown from './Dropdown';
 // Internal Configs
 import { appConfig, CHAIN_DETAILS } from 'config/index.js';
 import { LOGO_FROM_CHAIN_ID } from 'helpers/UtilityHelper';
+import { getPublicAssetPath } from 'helpers/RoutesHelper';
 
 // Faucet URLs
 const ChainsSelect = ({ channelsNetworkId, setChannelsNetworkId }) => {
@@ -33,7 +34,7 @@ const ChainsSelect = ({ channelsNetworkId, setChannelsNetworkId }) => {
         id: chainId,
         value: CHAIN_DETAILS[chainId].label,
         title: CHAIN_DETAILS[chainId].label,
-        icon: `./svg/${LOGO_FROM_CHAIN_ID[chainId]}`,
+        icon: getPublicAssetPath(`svg/${LOGO_FROM_CHAIN_ID[chainId]}`),
         function: () => {
           setChannelsNetworkId(chainId);
           setShowDropdown(false);
@@ -53,7 +54,7 @@ const ChainsSelect = ({ channelsNetworkId, setChannelsNetworkId }) => {
       >
         <ItemH padding="0 8px 0 0">
           <Image
-            src={`./svg/${LOGO_FROM_CHAIN_ID[channelsNetworkId]}`}
+            src={getPublicAssetPath(`svg/${LOGO_FROM_CHAIN_ID[channelsNetworkId]}`)}
             alt="active chain"
             width="32px"
             height="32px"
@@ -69,7 +70,7 @@ const ChainsSelect = ({ channelsNetworkId, setChannelsNetworkId }) => {
           <img
             alt="arrow"
             className={`${showDropdown ? 'down' : 'up'}`}
-            src="/svg/arrow.svg"
+            src={getPublicAssetPath('svg/arrow.svg')}
           />
         </ToggleArrowImg>
       </Faucet>

diff --git a/src/components/Faucets.tsx b/src/components/Faucets.tsx
@@ -110,7 +110,7 @@ const Faucets = () => {
           <img
             alt="arrow"
             className={`${showDropdown ? 'down' : 'up'}`}
-            src={getPublicAssetPath('/svg/arrow.svg')}
+            src={getPublicAssetPath('svg/arrow.svg')}
           />
         </ToggleArrowImg>
       </Faucet>

diff --git a/src/components/ViewChannelItem.jsx b/src/components/ViewChannelItem.jsx
@@ -42,6 +42,7 @@ import VerifiedTooltipContent from './VerifiedTooltipContent';
 import APP_PATHS from 'config/AppPaths';
 import { addresses, appConfig, CHAIN_DETAILS } from 'config/index.js';
 import { IPFSGateway } from 'helpers/IpfsHelper';
+import { getPublicAssetPath } from 'helpers/RoutesHelper';
 
 // Create Header
 function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, profileType }) {
@@ -539,7 +540,7 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
                         {channelObject && channelObject?.channel && (
                           <Span padding="0 0 0 5px">
                             <Image
-                              src={`./svg/Ethereum.svg`}
+                              src={getPublicAssetPath('svg/Ethereum.svg')}
                               alt="Ethereum"
                               width="20px"
                               height="20px"
@@ -553,9 +554,9 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
                           !MaskedAliasChannels[+channelObject?.alias_blockchain_id][channelObject?.channel] && (
                             <Span padding="0 0 0 5px">
                               <Image
-                                src={`./svg/${
-                                  CHAIN_DETAILS[+channelObject.alias_blockchain_id]?.label?.split(' ')[0]
-                                }.svg`}
+                                src={getPublicAssetPath(
+                                  `svg/${CHAIN_DETAILS[+channelObject.alias_blockchain_id]?.label?.split(' ')[0]}.svg`
+                                )}
                                 alt="Polygon"
                                 width="20px"
                                 height="20px"
@@ -712,7 +713,7 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
                     {channelObject && channelObject?.channel && (
                       <Span padding="0 0 0 5px">
                         <Image
-                          src={`./svg/Ethereum.svg`}
+                          src={getPublicAssetPath('svg/Ethereum.svg')}
                           alt="Ethereum"
                           width="20px"
                           height="20px"
@@ -726,7 +727,7 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
                       !MaskedAliasChannels[+channelObject?.alias_blockchain_id][channelObject?.channel] && (
                         <Span padding="0 0 0 5px">
                           <Image
-                            src={`./svg/${LOGO_FROM_CHAIN_ID[+channelObject.alias_blockchain_id]}`}
+                            src={getPublicAssetPath(`svg/${LOGO_FROM_CHAIN_ID[+channelObject.alias_blockchain_id]}`)}
                             alt="Alias Chain Logo"
                             width="20px"
                             height="20px"
@@ -801,7 +802,7 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
                   <MetaInfoDisplayer
                     externalIcon={
                       <Image
-                        src="./svg/users.svg"
+                        src={getPublicAssetPath('svg/users.svg')}
                         alt="users"
                         width="14px"
                         height="14px"
@@ -1002,7 +1003,7 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
                       <ActionTitle hideit={txInProgress}>Manage</ActionTitle>
                       <ImageV2
                         alt="arrow"
-                        src="/svg/arrow.svg"
+                        src={getPublicAssetPath('svg/arrow.svg')}
                         height="10px"
                         width="12px"
                       />

diff --git a/src/components/channel/ChannelProfileComponent.tsx b/src/components/channel/ChannelProfileComponent.tsx
@@ -8,6 +8,7 @@ import { ButtonV2 } from 'components/reusables/SharedStylingV2';
 import { IPFSGateway } from 'helpers/IpfsHelper';
 import axios from 'axios';
 import MetaInfoDisplayer from 'components/MetaInfoDisplayer';
+import { getPublicAssetPath } from 'helpers/RoutesHelper';
 
 const ChannelProfileComponent = ({ channelID, channelDetails }) => {
   const themes = useTheme();
@@ -177,7 +178,7 @@ const ChannelProfileComponent = ({ channelID, channelDetails }) => {
                 {channelDetails && channelDetails?.channel && (
                   <Span padding="0 0 0 5px">
                     <Image
-                      src={`./svg/Ethereum.svg`}
+                      src={getPublicAssetPath('svg/Ethereum.svg')}
                       alt="Ethereum"
                       width="20px"
                       height="20px"
@@ -191,7 +192,7 @@ const ChannelProfileComponent = ({ channelID, channelDetails }) => {
                   !MaskedAliasChannels[+channelDetails?.alias_blockchain_id][channelDetails?.channel] && (
                     <Span padding="0 0 0 5px">
                       <Image
-                        src={`./svg/${LOGO_FROM_CHAIN_ID[+channelDetails.alias_blockchain_id]}`}
+                        src={getPublicAssetPath(`svg/${LOGO_FROM_CHAIN_ID[+channelDetails.alias_blockchain_id]}`)}
                         alt="Alias Chain Logo"
                         width="20px"
                         height="20px"
@@ -265,7 +266,7 @@ const ChannelProfileComponent = ({ channelID, channelDetails }) => {
                 <MetaInfoDisplayer
                   externalIcon={
                     <Image
-                      src="./svg/users.svg"
+                      src={getPublicAssetPath('svg/users.svg')}
                       alt="users"
                       width="14px"
                       height="14px"

diff --git a/src/components/chat/w2wChat/TypeBar/Typebar.tsx b/src/components/chat/w2wChat/TypeBar/Typebar.tsx
@@ -16,6 +16,7 @@ import GifPicker from './Gifs/GifPicker';
 // Internal configs
 import { MessagetypeType } from '../../../../types/chat';
 import { filterXSS } from 'xss';
+import { getPublicAssetPath } from 'helpers/RoutesHelper';
 
 interface ITypeBar {
   isGroup: boolean;
@@ -178,7 +179,7 @@ const Typebar = ({
               filter={theme.snackbarBorderIcon}
             >
               <img
-                src="/svg/chats/smiley.svg"
+                src={getPublicAssetPath('svg/chats/smiley.svg')}
                 height="24px"
                 width="24px"
                 alt=""
@@ -228,7 +229,7 @@ const Typebar = ({
                     filter={theme.snackbarBorderIcon}
                   >
                     <img
-                      src="/svg/chats/gif.svg"
+                      src={getPublicAssetPath('svg/chats/gif.svg')}
                       height="18px"
                       width="22px"
                       alt=""
@@ -239,7 +240,7 @@ const Typebar = ({
               <label>
                 <Icon filter={theme.snackbarBorderIcon}>
                   <img
-                    src="/svg/chats/attachment.svg"
+                    src={getPublicAssetPath('svg/chats/attachment.svg')}
                     height="24px"
                     width="20px"
                     alt=""
@@ -268,7 +269,7 @@ const Typebar = ({
                 <>
                   <Icon onClick={handleSubmit}>
                     <img
-                      src={`/svg/chats/send${isDarkMode ? '_dark' : ''}.svg`}
+                      src={getPublicAssetPath(`svg/chats/send${isDarkMode ? '_dark' : ''}.svg`)}
                       height="27px"
                       width="27px"
                       alt=""

diff --git a/src/components/chat/w2wChat/groupChat/groupInfo/PendingMembers.tsx b/src/components/chat/w2wChat/groupChat/groupInfo/PendingMembers.tsx
@@ -9,6 +9,7 @@ import { ImageV2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedSt
 import { shortenText } from 'helpers/UtilityHelper';
 import { Context } from 'modules/chat/ChatModule';
 import { AppContext } from 'types/chat';
+import { getPublicAssetPath } from 'helpers/RoutesHelper';
 
 export const PendingMembers = ({ setshowPendingRequests, showPendingRequests }) => {
   const { currentChat }: AppContext = useContext<AppContext>(Context);
@@ -49,7 +50,7 @@ export const PendingMembers = ({ setshowPendingRequests, showPendingRequests })
           <img
             alt="arrow"
             className={`${showPendingRequests ? 'down' : 'up'}`}
-            src="/svg/arrow.svg"
+            src={getPublicAssetPath('svg/arrow.svg')}
           />
         </ToggleArrowImg>
       </ItemHV2>

diff --git a/src/components/chat/w2wChat/messageFeed/MessageFeed.tsx b/src/components/chat/w2wChat/messageFeed/MessageFeed.tsx
@@ -19,6 +19,7 @@ import { checkIfGroup, getChatsnapMessage, getGroupImage, getName } from '../../
 import { getDefaultFeed } from '../../../../helpers/w2w/user';
 import { useAccount } from 'hooks';
 import { AppContext } from 'contexts/AppContext';
+import { getPublicAssetPath } from 'helpers/RoutesHelper';
 
 // Internal Configs
 
@@ -260,7 +261,8 @@ const MessageFeed = (props: MessageFeedPropsI): JSX.Element => {
           <>
             {!feeds?.length && !messagesLoading && activeTab !== 3 && activeTab !== 4 ? (
               <EmptyConnection>
-                Start a new chat by using the + button <ArrowBend src="/svg/chats/arrowbendup.svg" />
+                Start a new chat by using the + button{' '}
+                <ArrowBend src={getPublicAssetPath('svg/chats/arrowbendup.svg')} />
               </EmptyConnection>
             ) : (
               feeds.map((feed: Feeds, i) => (

diff --git a/src/modules/claimGalxe/ClaimGalxeModule.tsx b/src/modules/claimGalxe/ClaimGalxeModule.tsx
@@ -17,6 +17,7 @@ import 'react-toastify/dist/ReactToastify.min.css';
 // Internal Configs
 import { abis, addresses, appConfig, CHAIN_DETAILS } from 'config/index.js';
 import GLOBALS, { device, globalsMargin } from 'config/Globals';
+import { getPublicAssetPath } from 'helpers/RoutesHelper';
 
 const ClaimGalxeModule = () => {
   const theme = useTheme();
@@ -149,7 +150,7 @@ const ClaimGalxeModule = () => {
       <ClaimInnerContainer>
         <ClaimLeftContainer>
           <GalxeImg
-            src={`./svg/${theme.scheme === 'light' ? 'GalxeLight.svg' : 'GalxeDark.svg'}`}
+            src={getPublicAssetPath(`svg/${theme.scheme === 'light' ? 'GalxeLight.svg' : 'GalxeDark.svg'}`)}
             height="1.5rem"
             width="9rem"
             padding="0 0 1.5rem 0"
@@ -193,8 +194,8 @@ const ClaimGalxeModule = () => {
         </ClaimLeftContainer>
         <AlphaImageContainer>
           <AlphaImageInnerContainer>
-            <AlphaAccessTextImg src={'./svg/AccessNFTText.svg'} />
-            <AlphaAccessImg src={'./svg/AccessNFT.svg'} />
+            <AlphaAccessTextImg src={getPublicAssetPath('svg/AccessNFTText.svg')} />
+            <AlphaAccessImg src={getPublicAssetPath('svg/AccessNFT.svg')} />
           </AlphaImageInnerContainer>
         </AlphaImageContainer>
       </ClaimInnerContainer>

diff --git a/src/primaries/Profile.tsx b/src/primaries/Profile.tsx
@@ -21,6 +21,7 @@ import { AppContext } from 'contexts/AppContext';
 import { ErrorContext } from 'contexts/ErrorContext';
 import { GlobalContext, GlobalContextType, ReadOnlyWalletMode } from 'contexts/GlobalContext';
 import { AppContextType } from 'types/context';
+import { getPublicAssetPath } from 'helpers/RoutesHelper.js';
 
 // Create Header
 const Profile = ({ isDarkMode }: { isDarkMode: boolean }) => {
@@ -131,7 +132,7 @@ const Profile = ({ isDarkMode }: { isDarkMode: boolean }) => {
                   <img
                     alt="arrow"
                     className={`${showDropdown ? 'down' : 'up'}`}
-                    src="/svg/arrow.svg"
+                    src={getPublicAssetPath('svg/arrow.svg')}
                   />
                 </ToggleArrowImg>
               </Wallet>