Source CDN path in env, return to relative paths

automation/fluidity/common-mainnet.yml

@@ -3,6 +3,8 @@ ORG_ROOT: fluidity
 ENABLE: true
 CODEDEPLOY_CACHE_PURGE_LAMBDA: ecs-cloudfront-purge-cache-mainnet-purge-cache
 
+ENV_FLU_CDN: https://app-cdn.fluidity.money
+
 SECRET_FLU_SENTRY_URL: /fluidity/sentryUrl
 SECRET_FLU_FRONTEND_SENTRY_URL: /fluidity/frontend/sentryURL
 SECRET_FLU_NPM_GITHUB_TOKEN: /fluidity/npm/github_token

web/app.fluidity.money/README.md

@@ -16,6 +16,7 @@
 | `FLU_HASURA_SECRET`    | Hasura admin secret used in client headers for RPC calls  |
 | `FLU_SENTRY_DSN`       | Sentry reporting URI                                      |
 | `FLU_WALLETCONNECT_ID` | WalletConnect Client-Side Project ID                      |
+| `FLU_CDN`              | CDN URL to use for static content, without a trailing `/` |
 
 ## Building
 

web/app.fluidity.money/app/components/ConnectWalletModal.tsx

@@ -179,7 +179,7 @@ const ConnectWalletModal = ({ visible, close }: IConnectWalletModal) => {
 
               <img
                 onClick={close}
-                src="https://app-cdn.fluidity.money/images/icons/x.svg"
+                src="/images/icons/x.svg"
                 className="modal-cancel-btn"
               />
             </div>

web/app.fluidity.money/app/components/FLYClaimSubmitModal/index.tsx

@@ -298,7 +298,7 @@ const FLYClaimSubmitModal = ({
                   <div className="fly-submit-claim-heading-container">
                     <Heading as="h3" className="fly-submit-claim-heading">{currentMode === 'claim' ? "Claiming" : "Staking"} $FLY Tokens</Heading>
                     <span onClick={close}>
-                      <img src="https://app-cdn.fluidity.money/images/icons/x.svg" className="modal-cancel-btn" />
+                      <img src="/images/icons/x.svg" className="modal-cancel-btn" />
                     </span>
                   </div>
                   {confirmingClaim ?
@@ -453,7 +453,7 @@ const FLYClaimSubmitModal = ({
 };
 
 export const Checked = ({ size = 36 }: { size?: number }) => {
-  return <img className='fly-submit-claim-circle' height={size} width={size} src="https://app-cdn.fluidity.money/images/icons/checked.svg" alt="copy" />
+  return <img className='fly-submit-claim-circle' height={size} width={size} src="/images/icons/checked.svg" alt="copy" />
 }
 
 export const BaseCircle = () => {

web/app.fluidity.money/app/components/FLYStakingStatsModal/index.tsx

@@ -302,7 +302,7 @@ const FlyStakingStatsModal = ({ visible, close, showConnectWalletModal, shouldUp
                       }
                     </Heading>
                     <span onClick={handleClose}>
-                      <img src="https://app-cdn.fluidity.money/images/icons/x.svg" className="modal-cancel-btn" />
+                      <img src="/images/icons/x.svg" className="modal-cancel-btn" />
                     </span>
                   </div>
                   <div className="fly-submit-claim-modal-options">

web/app.fluidity.money/app/components/Fluidify/FluidifyHotSpot.tsx

@@ -34,7 +34,7 @@ const FluidityHotSpot = ({
         <div ref={drop} className="fluidify-hot-spot">
           <img
             className="fluidify-circle"
-            src="https://app-cdn.fluidity.money/images/fluidify/fluidify-hotspot.png"
+            src="/images/fluidify/fluidify-hotspot.png"
           />
           <span className={"dashed-circle"}>
             {!activeToken && (

web/app.fluidity.money/app/components/Fluidify/SwapCircle.tsx

@@ -55,7 +55,7 @@ const SwapCircle = ({
           >
             <Video
               className="swapping-video"
-              src={"https://app-cdn.fluidity.money/videos/LoadingOther.webm"}
+              src={"/videos/LoadingOther.webm"}
               loop={false}
               type="none"
               onEnded={() => {

web/app.fluidity.money/app/components/JoeFarmlandsOrCamelotKingdom/index.tsx

@@ -14,7 +14,7 @@ const JoeFarmlandsOrCamelotKingdom = () => {
       >
         <img
           className="joe_farmlands_or_camelot_img_joe"
-          src="https://app-cdn.fluidity.money/images/joe-farmlands.png"
+          src="/images/joe-farmlands.png"
         />
       </a>
       <a
@@ -24,7 +24,7 @@ const JoeFarmlandsOrCamelotKingdom = () => {
       >
         <img
           className="joe_farmlands_or_camelot_img_camelot"
-          src="https://app-cdn.fluidity.money/images/kingdom-of-camelot.png"
+          src="/images/kingdom-of-camelot.png"
         />
       </a>
     </div>

web/app.fluidity.money/app/components/MobileModal.tsx

@@ -139,7 +139,7 @@ export default function MobileModal({
               >
                 <img
                   style={{ width: "5.5em", height: "2.5em" }}
-                  src="https://app-cdn.fluidity.money/images/outlinedLogo.svg"
+                  src="/images/outlinedLogo.svg"
                   alt="Fluidity"
                 />
               </a>
@@ -260,7 +260,7 @@ export default function MobileModal({
                   ? navigate(`/${network}/dashboard/rewards/unclaimed`)
                   : navigate(`/${network}/dashboard/rewards`);
               }}
-              icon={<img src="https://app-cdn.fluidity.money/images/icons/arrowRightWhite.svg" />}
+              icon={<img src="/images/icons/arrowRightWhite.svg" />}
               className="unclaimed-button"
             >
               <Text size="lg" prominent={true}>

web/app.fluidity.money/app/components/ReferralModal/index.tsx

@@ -235,13 +235,13 @@ const HowItWorksContent = ({ isMobile = false }: { isMobile?: boolean }) => (
   >
     <div className="spread-center">
       <div className="single-line">
-        <img style={{ width: "1.25em" }} src={"https://app-cdn.fluidity.money/images/icons/circle1.svg"} />
+        <img style={{ width: "1.25em" }} src={"/images/icons/circle1.svg"} />
         <Text prominent size="sm">
           Copy Your Link.
         </Text>
       </div>
       <div className="single-line">
-        <img style={{ width: "1.25em" }} src={"https://app-cdn.fluidity.money/images/icons/circle2.svg"} />
+        <img style={{ width: "1.25em" }} src={"/images/icons/circle2.svg"} />
         <Text prominent size="sm">
           Share it with your friends.
         </Text>
@@ -296,7 +296,7 @@ const HowItWorksContent = ({ isMobile = false }: { isMobile?: boolean }) => (
     <div className="how-it-works-warning-container">
       <img
         style={{ width: isMobile ? "auto" : "50px" }}
-        src="https://app-cdn.fluidity.money/images/icons/circleInfo.svg"
+        src="/images/icons/circleInfo.svg"
       />
       <Text prominent size="sm" className="how-it-works-warning-text">
         They will have to earn 5 Loot Bottles for each referral in order to

web/app.fluidity.money/app/components/SwapCompleteModal.tsx

@@ -106,7 +106,7 @@ const SwapCompleteModal = ({
                 />
                 <Video
                   className="swapping-video"
-                  src={"https://app-cdn.fluidity.money/videos/LoadingOther.webm"}
+                  src={"/videos/LoadingOther.webm"}
                   loop={false}
                   type="fill"
                   height={"auto"}

web/app.fluidity.money/app/components/Table/index.tsx

@@ -298,8 +298,8 @@ const Table = <T,>(props: ITable<T>) => {
                 style={{ width: 16 }}
                 src={
                   page === 1
-                    ? "https://app-cdn.fluidity.money/images/icons/arrowLeftDark.svg"
-                    : "https://app-cdn.fluidity.money/images/icons/arrowLeftWhite.svg"
+                    ? "/images/icons/arrowLeftDark.svg"
+                    : "/images/icons/arrowLeftWhite.svg"
                 }
                 className={
                   page === 1 ? "pagination-arrow-off" : "pagination-arrow"
@@ -312,8 +312,8 @@ const Table = <T,>(props: ITable<T>) => {
                 style={{ width: 16 }}
                 src={
                   page === pageCount
-                    ? "https://app-cdn.fluidity.money/images/icons/arrowRightDark.svg"
-                    : "https://app-cdn.fluidity.money/images/icons/arrowRightWhite.svg"
+                    ? "/images/icons/arrowRightDark.svg"
+                    : "/images/icons/arrowRightWhite.svg"
                 }
                 className={
                   page === pageCount

web/app.fluidity.money/app/components/UnclaimedRewardsHoverModal.tsx

@@ -39,7 +39,7 @@ const UnclaimedRewardsHoverModal = ({
       >
         <img
           id="card-logo"
-          src="https://app-cdn.fluidity.money/images/fluidTokensMetallicCropped.svg"
+          src="/images/fluidTokensMetallicCropped.svg"
           alt="tokens"
           style={{ width: 100 }}
         />

web/app.fluidity.money/app/components/UtilityToken.tsx

@@ -5,23 +5,23 @@ interface IUtilityToken extends React.ImgHTMLAttributes<HTMLImageElement> {
 const UtilityToken = ({ utility, ...imgProps }: IUtilityToken) => {
   switch (utility) {
     case "chronos":
-      return <img {...imgProps} src="https://app-cdn.fluidity.money/assets/tokens/fUSDC.svg" />;
+      return <img {...imgProps} src="/assets/tokens/fUSDC.svg" />;
     case "wombat":
-      return <img {...imgProps} src="https://app-cdn.fluidity.money/images/providers/wombat.svg" />;
+      return <img {...imgProps} src="/images/providers/wombat.svg" />;
     case "sushi":
-      return <img {...imgProps} src="https://app-cdn.fluidity.money/images/providers/Sushiswap.svg" />;
+      return <img {...imgProps} src="/images/providers/Sushiswap.svg" />;
     case "trader_joe":
-      return <img {...imgProps} src="https://app-cdn.fluidity.money/images/providers/trader_joe.svg" />;
+      return <img {...imgProps} src="/images/providers/trader_joe.svg" />;
     case "ramses":
-      return <img {...imgProps} src="https://app-cdn.fluidity.money/images/providers/Ramses.svg" />;
+      return <img {...imgProps} src="/images/providers/Ramses.svg" />;
     case "jumper":
-      return <img {...imgProps} src="https://app-cdn.fluidity.money/images/providers/Jumper.svg" />;
+      return <img {...imgProps} src="/images/providers/Jumper.svg" />;
     case "arb":
-      return <img {...imgProps} src="https://app-cdn.fluidity.money/assets/chains/arbIcon.svg" />;
+      return <img {...imgProps} src="/assets/chains/arbIcon.svg" />;
     case "lifi":
-      return <img {...imgProps} src="https://app-cdn.fluidity.money/images/providers/Lifi.svg" />;
+      return <img {...imgProps} src="/images/providers/Lifi.svg" />;
     default:
-      return <img {...imgProps} src="https://app-cdn.fluidity.money/assets/tokens/fUSDC.svg" />;
+      return <img {...imgProps} src="/assets/tokens/fUSDC.svg" />;
   }
 };
 

web/app.fluidity.money/app/global-styles.css

@@ -15,7 +15,7 @@ html {
   height: 100vh;
   width: 100vw;
   background-color: black;
-  background-image: url("https://app-cdn.fluidity.money/images/bg-blur-desktop.png");
+  background-image: url("/images/bg-blur-desktop.png");
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;

web/app.fluidity.money/app/root.tsx

@@ -167,7 +167,7 @@ function ErrorBoundary(err: Error) {
           alignItems: "center",
         }}
       >
-        <img src="https://app-cdn.fluidity.money/images/logoMetallic.png" alt="" style={{ height: "40px" }} />
+        <img src="/images/logoMetallic.png" alt="" style={{ height: "40px" }} />
         <h1>Something went wrong!</h1>
         <br />
         <h2>Our team has been notified, and are working on fixing it!</h2>

web/app.fluidity.money/app/routes/$network.tsx

@@ -104,7 +104,7 @@ function ErrorBoundary({ error }: { error: string }) {
   console.error(error);
   return (
     <div>
-      <img src="https://app-cdn.fluidity.money/images/logoMetallic.png" alt="" style={{ height: "40px" }} />
+      <img src="/images/logoMetallic.png" alt="" style={{ height: "40px" }} />
       <h1>Could not connect to Provider!</h1>
       <br />
       <h2>Our team has been notified, and are working on fixing it!</h2>

web/app.fluidity.money/app/routes/$network/dashboard.tsx

@@ -110,7 +110,7 @@ function ErrorBoundary() {
         alignItems: "center",
       }}
     >
-      <img src="https://app-cdn.fluidity.money/images/logoMetallic.png" alt="" style={{ height: "40px" }} />
+      <img src="/images/logoMetallic.png" alt="" style={{ height: "40px" }} />
       <h1>Could not load Dashboard!</h1>
       <br />
       <h2>Our team has been notified, and are working on fixing it!</h2>
@@ -203,15 +203,15 @@ const CHAIN_NAME_MAP: Record<
 > = {
   arbitrum: {
     name: "ARB",
-    icon: <img src="https://app-cdn.fluidity.money/assets/chains/arbIcon.svg" />,
+    icon: <img src="/assets/chains/arbIcon.svg" />,
   },
   solana: {
     name: "SOL",
-    icon: <img src="https://app-cdn.fluidity.money/assets/chains/solanaIcon.svg" />,
+    icon: <img src="/assets/chains/solanaIcon.svg" />,
   },
   sui: {
     name: "SUI",
-    icon: <img src="https://app-cdn.fluidity.money/assets/chains/suiIcon.svg" />,
+    icon: <img src="/assets/chains/suiIcon.svg" />,
   },
 };
 
@@ -517,7 +517,7 @@ export default function Dashboard() {
           <Link to={"./home"}>
             <img
               style={{ width: "5.5em", height: "2.5em" }}
-              src="https://app-cdn.fluidity.money/images/outlinedLogo.svg"
+              src="/images/outlinedLogo.svg"
               alt="Fluidity"
             />
           </Link>
@@ -636,7 +636,7 @@ export default function Dashboard() {
               <a onClick={() => navigate("./home")}>
                 <img
                   style={{ width: "5.5em", height: "2.5em" }}
-                  src="https://app-cdn.fluidity.money/images/outlinedLogo.svg"
+                  src="/images/outlinedLogo.svg"
                   alt="Fluidity"
                 />
               </a>
@@ -869,7 +869,7 @@ export default function Dashboard() {
               rel="noopener noreferrer"
               target="_blank"
             >
-              <img src={"https://app-cdn.fluidity.money/images/socials/twitter.svg"} alt={"Twitter"} />
+              <img src={"/images/socials/twitter.svg"} alt={"Twitter"} />
             </a>
 
             {/* Discord */}
@@ -878,7 +878,7 @@ export default function Dashboard() {
               rel="noopener noreferrer"
               target="_blank"
             >
-              <img src={"https://app-cdn.fluidity.money/images/socials/discord.svg"} alt={"Discord"} />
+              <img src={"/images/socials/discord.svg"} alt={"Discord"} />
             </a>
 
             {/* Telegram */}
@@ -887,7 +887,7 @@ export default function Dashboard() {
               rel="noopener noreferrer"
               target="_blank"
             >
-              <img src={"https://app-cdn.fluidity.money/images/socials/telegram.svg"} alt={"Telegram"} />
+              <img src={"/images/socials/telegram.svg"} alt={"Telegram"} />
             </a>
 
             {/* LinkedIn */}
@@ -896,7 +896,7 @@ export default function Dashboard() {
               rel="noopener noreferrer"
               target="_blank"
             >
-              <img src={"https://app-cdn.fluidity.money/images/socials/linkedin.svg"} alt={"LinkedIn"} />
+              <img src={"/images/socials/linkedin.svg"} alt={"LinkedIn"} />
             </a>
           </section>
         </footer>

web/app.fluidity.money/app/routes/$network/dashboard/airdrop/common.tsx

@@ -1638,7 +1638,7 @@ const TutorialModal = ({
             width={isMobile ? 550 : 635}
             height={isMobile ? 550 : 230}
             loop
-            src={`https://app-cdn.fluidity.money/videos/airdrop/${isMobile ? `MOBILE` : `DESKTOP`}_-_${tutorialContent[currentSlide].image
+            src={`/videos/airdrop/${isMobile ? `MOBILE` : `DESKTOP`}_-_${tutorialContent[currentSlide].image
               }.mp4`}
             className="tutorial-image"
             style={{ maxWidth: "100%" }}
@@ -1672,7 +1672,7 @@ const TestnetRewardsModal = () => {
 
   return (
     <div className="claim-ropsten">
-      <img src="https://app-cdn.fluidity.money/images/testnetBanner.png" />
+      <img src="/images/testnetBanner.png" />
       <div className="ropsten-header">
         <Heading as="h3">Claim Testnet Rewards</Heading>
         <Text prominent size="sm">
@@ -1922,23 +1922,23 @@ const RecapModal = ({
 
   const bottleRarityColorIcon = {
     [Rarity.Common]: {
-      img: "https://app-cdn.fluidity.money/images/airdrop/COMMON.png",
+      img: "/images/airdrop/COMMON.png",
       color: "#FFFFFF",
     },
     [Rarity.Uncommon]: {
-      img: "https://app-cdn.fluidity.money/images/airdrop/UNCOMMON.png",
+      img: "/images/airdrop/UNCOMMON.png",
       color: "#80E4EF",
     },
     [Rarity.Rare]: {
-      img: "https://app-cdn.fluidity.money/images/airdrop/RARE.png",
+      img: "/images/airdrop/RARE.png",
       color: "#B7EBD4",
     },
     [Rarity.UltraRare]: {
-      img: "https://app-cdn.fluidity.money/images/airdrop/ULTRA RARE.png",
+      img: "/images/airdrop/ULTRA RARE.png",
       color: "#EDC6E1",
     },
     [Rarity.Legendary]: {
-      img: "https://app-cdn.fluidity.money/images/airdrop/LEGENDARY.png",
+      img: "/images/airdrop/LEGENDARY.png",
       color: "#F8D192",
     },
   };
@@ -2389,7 +2389,7 @@ const RecapModal = ({
           {/* Animation */}
           {currentVideo === 0 ? (
             <Video
-              src={`https://app-cdn.fluidity.money/videos/airdrop/${isMobile ? "FULL_ANIMATION_MOBILE.mp4" : "FULL_ANIMATION.mp4"
+              src={`/videos/airdrop/${isMobile ? "FULL_ANIMATION_MOBILE.mp4" : "FULL_ANIMATION.mp4"
                 }`}
               type={"cover"}
               loop={false}
@@ -2404,7 +2404,7 @@ const RecapModal = ({
             />
           ) : (
             <Video
-              src={`https://app-cdn.fluidity.money/videos/airdrop/${isMobile ? "LOOP_MOBILE.mp4" : "FLOAT_LOOP.mp4"
+              src={`/videos/airdrop/${isMobile ? "LOOP_MOBILE.mp4" : "FLOAT_LOOP.mp4"
                 }`}
               type={"cover"}
               loop={true}