Refactor: Centralize URLs in a constant file (#574)

* fix: add url constant file

* refactor: align url to constant file

* fix: update url constant file

* refactor: align url to constant file

* fix: update indexer urls

* chore: remove unused URLs

* fix: replace toke logo by coinmarket cap

* fix: remove unused

* fix: remove unused

* fix: replace toke logo by coinmarket cap

* refactor: align url to constant file

* fix: remove unused new url

* fix: remove encoded from param to avoid misleading values

* fix: remove void and added underscore to param

* refactor: align urls to use backslash to no replace

Author: victorkl400

packages/vechain-kit/src/assets/icons/BetterSwapLogo/BetterSwapLogo.tsx

@@ -23,4 +23,3 @@ export const BetterSwapLogo = ({ boxSize = '24px', ...props }: { boxSize?: strin
         </svg>
     );
 };
-

packages/vechain-kit/src/assets/icons/PrivyLogo/PrivyLogo.tsx

@@ -1,5 +1,6 @@
 import { Image, ImageProps } from '@chakra-ui/react';
 import React from 'react';
+import { PRIVY_MINTLIFY_ASSETS_S3_BASE_URL } from '@/constants';
 
 type Props = {
     isDark?: boolean;
@@ -10,8 +11,14 @@ export const PrivyLogo: React.FC<Props> = ({ isDark = false, ...props }) => {
         <Image
             src={
                 isDark
-                    ? 'https://mintlify.s3.us-west-1.amazonaws.com/privy-c2af3412/logo/privy-logo-dark.png'
-                    : 'https://mintlify.s3.us-west-1.amazonaws.com/privy-c2af3412/logo/privy-logo-light.png'
+                    ? new URL(
+                          '/privy-c2af3412/logo/privy-logo-dark.png',
+                          PRIVY_MINTLIFY_ASSETS_S3_BASE_URL,
+                      ).toString()
+                    : new URL(
+                          '/privy-c2af3412/logo/privy-logo-light.png',
+                          PRIVY_MINTLIFY_ASSETS_S3_BASE_URL,
+                      ).toString()
             }
             alt="Privy Logo"
             {...props}

packages/vechain-kit/src/components/AccountModal/Components/CrossAppConnectionSecurityCard.tsx

@@ -14,6 +14,7 @@ import {
 import { LuExternalLink, LuUserCog, LuShieldCheck } from 'react-icons/lu';
 import { useTranslation } from 'react-i18next';
 import { useCrossAppConnectionCache } from '@/hooks';
+import { VEBETTERDAO_GOVERNANCE_BASE_URL } from '@/constants';
 
 export const CrossAppConnectionSecurityCard = () => {
     const { t } = useTranslation();
@@ -112,7 +113,7 @@ export const CrossAppConnectionSecurityCard = () => {
                     onClick={() => {
                         window.open(
                             connectionCache?.ecosystemApp.website ??
-                                'https://governance.vebetterdao.org/',
+                                VEBETTERDAO_GOVERNANCE_BASE_URL,
                             '_blank',
                         );
                     }}

packages/vechain-kit/src/components/AccountModal/Contents/Bridge/BridgeContent.tsx

@@ -16,6 +16,7 @@ import { useTranslation } from 'react-i18next';
 import { useVeChainKitConfig } from '@/providers';
 import { VechainEnergy } from '@/assets';
 import { useAccountModalOptions } from '@/hooks/modals/useAccountModalOptions';
+import { VECHAIN_ENERGY_SWAP_BASE_URL } from '@/constants';
 
 type Props = {
     setCurrentContent: React.Dispatch<
@@ -29,7 +30,7 @@ export const BridgeContent = ({ setCurrentContent }: Props) => {
     const { isolatedView } = useAccountModalOptions();
 
     const handleLaunchVeChainEnergy = () => {
-        window.open('https://swap.vechain.energy/', '_blank');
+        window.open(VECHAIN_ENERGY_SWAP_BASE_URL, '_blank');
     };
 
     return (

packages/vechain-kit/src/components/AccountModal/Contents/Ecosystem/ExploreEcosystemContent.tsx

@@ -36,6 +36,11 @@ import {
 } from './Components/CategoryFilterSection';
 import { AllowedCategories } from './Components/CategoryLabel';
 import { useAccountModalOptions } from '@/hooks/modals/useAccountModalOptions';
+import {
+    VEBETTERDAO_GOVERNANCE_BASE_URL,
+    VET_DOMAINS_BASE_URL,
+    COINMARKETCAP_STATIC_BASE_URL,
+} from '@/constants';
 
 export type EcosystemWithCategoryProps = {
     selectedCategory: CategoryFilter;
@@ -56,48 +61,52 @@ const DEFAULT_APPS: XAppMetadata[] = [
     {
         name: 'VeBetterDAO',
         description: 'Engage, earn and prosper by doing sustainable actions.',
-        external_url: 'https://governance.vebetterdao.org/',
-        logo: 'https://i.ibb.co/cgJBj83/vbd.png',
-        banner: 'https://i.ibb.co/cgJBj83/vbd.png',
+        external_url: VEBETTERDAO_GOVERNANCE_BASE_URL,
+        logo: new URL(
+            '/static/img/coins/64x64/33509.png',
+            COINMARKETCAP_STATIC_BASE_URL,
+        ).toString(),
+        banner: new URL(
+            '/static/img/icons/vbd.png',
+            COINMARKETCAP_STATIC_BASE_URL,
+        ).toString(),
         screenshots: [],
         social_urls: [],
         app_urls: [],
         tweets: [],
         ve_world: {
-            banner: 'https://i.ibb.co/cgJBj83/vbd.png',
+            banner: new URL(
+                '/static/img/icons/vbd.png',
+                COINMARKETCAP_STATIC_BASE_URL,
+            ).toString(),
         },
         categories: [],
     },
     {
         name: 'vet.domains',
         description:
             '.vet.domains provides a unique and unchangeable identity for Vechain users by linking information to their wallet addresses. It becomes easier for people to use the blockchain by replacing complicated wallet addresses with easy-to-remember names.',
-        external_url: 'https://vet.domains',
-        logo: 'https://vet.domains/assets/walletconnect.png',
-        banner: 'https://vet.domains/assets/walletconnect.png',
+        external_url: VET_DOMAINS_BASE_URL,
+        logo: new URL(
+            '/assets/walletconnect.png',
+            VET_DOMAINS_BASE_URL,
+        ).toString(),
+        banner: new URL(
+            '/assets/walletconnect.png',
+            VET_DOMAINS_BASE_URL,
+        ).toString(),
         screenshots: [],
         social_urls: [],
         app_urls: [],
         tweets: [],
         ve_world: {
-            banner: 'https://vet.domains/assets/walletconnect.png',
+            banner: new URL(
+                '/assets/walletconnect.png',
+                VET_DOMAINS_BASE_URL,
+            ).toString(),
         },
         categories: [],
     },
-    // {
-    //     name: 'VeChain Kit',
-    //     description: 'A all-in-one library for building VeChain applications.',
-    //     external_url: 'https://vechainkit.vechain.org/',
-    //     logo: 'https://vechain.org/wp-content/uploads/2025/02/VeChain_Icon_Quartz_300ppi.png',
-    //     banner: '',
-    //     screenshots: [],
-    //     social_urls: [],
-    //     app_urls: [],
-    //     tweets: [],
-    //     ve_world: {
-    //         banner: '',
-    //     },
-    // },
 ];
 
 export const ExploreEcosystemContent = ({

packages/vechain-kit/src/components/AccountModal/Contents/FAQ/FAQContent.tsx

@@ -20,6 +20,7 @@ import { FAQAccordion } from './FAQAccordion';
 import { useTranslation } from 'react-i18next';
 import { supportedLanguages, languageNames } from '../../../../../i18n';
 import { useAccountModalOptions } from '@/hooks/modals/useAccountModalOptions';
+import { VECHAIN_KIT_DOCS_BASE_URL } from '@/constants';
 
 export type FAQContentProps = {
     onGoBack: () => void;
@@ -79,7 +80,7 @@ export const FAQContent = ({
 
                     <Button
                         as={Link}
-                        href="https://docs.vechainkit.vechain.org/"
+                        href={VECHAIN_KIT_DOCS_BASE_URL}
                         isExternal
                         variant="vechainKitSecondary"
                         rightIcon={<Icon as={LuExternalLink} />}

packages/vechain-kit/src/components/AccountModal/Contents/SuccessfulOperation/SuccessfulOperationContent.tsx

@@ -81,9 +81,7 @@ export const SuccessfulOperationContent = ({
                             >
                                 {t('Share on')}
                             </Text>
-                            <ShareButtons
-                                descriptionEncoded={socialDescription}
-                            />
+                            <ShareButtons description={socialDescription} />
                         </VStack>
                     )}
                 </VStack>

packages/vechain-kit/src/components/TransactionModal/Components/ShareButtons.tsx

@@ -4,12 +4,7 @@ import { FaTelegramPlane, FaWhatsapp } from 'react-icons/fa';
 import { FaXTwitter } from 'react-icons/fa6';
 import React from 'react';
 import { useVeChainKitConfig } from '@/providers';
-
-const TWITTER_INJECT = 'https://twitter.com/intent/tweet?text=';
-
-const WHATSAPP_INJECT = 'https://wa.me/?text=';
-
-const TELEGRAM_INJECT = 'https://telegram.me/share/url?url=';
+import { TELEGRAM_BASE_URL, TWITTER_BASE_URL, WHATSAPP_BASE_URL } from '@/constants';
 
 // bouncing circle button animation provider
 const BouncingAnimation = ({ children }: { children: React.ReactNode }) => (
@@ -32,21 +27,28 @@ const BouncingAnimation = ({ children }: { children: React.ReactNode }) => (
 );
 
 type Props = {
-    descriptionEncoded: string;
+    description: string;
     url?: string;
     facebookHashtag?: string;
 };
 
-export const ShareButtons = ({ descriptionEncoded }: Props) => {
+export const ShareButtons = ({ description }: Props) => {
     const { darkMode: isDark } = useVeChainKitConfig();
 
+    // `description` is treated as raw text; use URLSearchParams so values are encoded.
+    const twitterUrl = new URL('intent/tweet', TWITTER_BASE_URL);
+    twitterUrl.searchParams.set('text', description);
+
+    const telegramUrl = new URL('share/url', TELEGRAM_BASE_URL);
+    telegramUrl.searchParams.set('url', description);
+
+    const whatsappUrl = new URL('', WHATSAPP_BASE_URL);
+    whatsappUrl.searchParams.set('text', description);
+
     return (
         <HStack gap={2}>
             <BouncingAnimation>
-                <Link
-                    href={`${TWITTER_INJECT}${descriptionEncoded}`}
-                    isExternal
-                >
+                <Link href={twitterUrl.toString()} isExternal>
                     <Box
                         bg={isDark ? 'blackAlpha.700' : 'lightgrey'}
                         p={2}
@@ -57,20 +59,14 @@ export const ShareButtons = ({ descriptionEncoded }: Props) => {
                 </Link>
             </BouncingAnimation>
             <BouncingAnimation>
-                <Link
-                    href={`${TELEGRAM_INJECT}${descriptionEncoded}`}
-                    isExternal
-                >
+                <Link href={telegramUrl.toString()} isExternal>
                     <Box bg={'#30abec'} p={2} borderRadius={'full'}>
                         <FaTelegramPlane color="white" size={22} />
                     </Box>
                 </Link>
             </BouncingAnimation>
             <BouncingAnimation>
-                <Link
-                    href={`${WHATSAPP_INJECT}${descriptionEncoded}`}
-                    isExternal
-                >
+                <Link href={whatsappUrl.toString()} isExternal>
                     <Box bg={'#01cb37'} p={2} borderRadius={'full'}>
                         <FaWhatsapp size={22} color="white" />
                     </Box>

packages/vechain-kit/src/components/TransactionModal/TransactionModalContent.tsx

@@ -156,9 +156,7 @@ export const TransactionModalContent = ({
                             >
                                 {t('Share on')}
                             </Text>
-                            <ShareButtons
-                                descriptionEncoded={socialDescription}
-                            />
+                            <ShareButtons description={socialDescription} />
                         </VStack>
                     )}
 

packages/vechain-kit/src/components/UpgradeSmartAccountModal/Contents/SuccessfulOperationContent.tsx

@@ -80,9 +80,7 @@ export const SuccessfulOperationContent = ({
                     {showSocialButtons && txId && (
                         <VStack mt={2}>
                             <Text fontSize="xs">{t('Share on')}</Text>
-                            <ShareButtons
-                                descriptionEncoded={socialDescription}
-                            />
+                            <ShareButtons description={socialDescription} />
                         </VStack>
                     )}
                 </VStack>