[NO CHANGELOG][Add Funds Widget] Add bubble (#2313)

immutable · Oct 16, 2024 · 5391749 · 5391749
1 parent c785a51
commit 5391749
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 5 deletions.
diff --git a/packages/checkout/widgets-lib/src/lib/utils.ts b/packages/checkout/widgets-lib/src/lib/utils.ts
@@ -154,6 +154,10 @@ export function getRemoteImage(environment: Environment | undefined, path: strin
   return `${CHECKOUT_CDN_BASE_URL[environment ?? Environment.PRODUCTION]}/v1/blob/img${path}`;
 }
 
+export function getRemoteVideo(environment: Environment | undefined, path: string) {
+  return `${CHECKOUT_CDN_BASE_URL[environment ?? Environment.PRODUCTION]}/v1/blob/video${path}`;
+}
+
 export function getRemoteRive(environment: Environment | undefined, path: string) {
   return `${CHECKOUT_CDN_BASE_URL[environment ?? Environment.PRODUCTION]}/v1/blob/rive${path}`;
 }

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/Options.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/Options.tsx
@@ -9,20 +9,23 @@ import {
 } from '@biom3/react';
 import { motion } from 'framer-motion';
 import { useMemo } from 'react';
+import { Checkout } from '@imtbl/checkout-sdk';
 import {
   listItemVariants,
   listVariants,
 } from '../../../lib/animation/listAnimation';
 import { FiatOption } from './FiatOption';
 import { Chain, FiatOptionType, RouteData } from '../types';
 import { RouteOption } from './RouteOption';
+import { getRemoteVideo } from '../../../lib/utils';
 
 const defaultFiatOptions: FiatOptionType[] = [
   FiatOptionType.DEBIT,
   FiatOptionType.CREDIT,
 ];
 
 export interface OptionsProps {
+  checkout: Checkout;
   chains: Chain[] | null;
   onCardClick: (type: FiatOptionType) => void;
   onRouteClick: (route: RouteData, index: number) => void;
@@ -34,6 +37,7 @@ export interface OptionsProps {
 }
 
 export function Options({
+  checkout,
   routes,
   chains,
   onCardClick,
@@ -62,7 +66,10 @@ export function Options({
         </Body>
         <FramedVideo
           mimeType="video/mp4"
-          videoUrl="https://i.imgur.com/dVQoobw.mp4"
+          videoUrl={getRemoteVideo(
+            checkout.config.environment,
+            '/loading_bubble-small.mp4',
+          )}
           sx={{ alignSelf: 'center', mt: 'base.spacing.x2' }}
           size="large"
           circularFrame

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OptionsDrawer.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/OptionsDrawer.tsx
@@ -2,13 +2,15 @@ import { Drawer, EllipsizedText, MenuItem } from '@biom3/react';
 import { motion } from 'framer-motion';
 import { useContext, useRef } from 'react';
 
+import { Checkout } from '@imtbl/checkout-sdk';
 import { listVariants } from '../../../lib/animation/listAnimation';
 import { Options } from './Options';
 import { FiatOptionType, RouteData } from '../types';
 import { AddFundsContext } from '../context/AddFundsContext';
 import { useProvidersContext } from '../../../context/providers-context/ProvidersContext';
 
 type OptionsDrawerProps = {
+  checkout: Checkout;
   routes: RouteData[] | undefined;
   visible: boolean;
   onClose: () => void;
@@ -21,6 +23,7 @@ type OptionsDrawerProps = {
 };
 
 export function OptionsDrawer({
+  checkout,
   routes,
   visible,
   onClose,
@@ -83,6 +86,7 @@ export function OptionsDrawer({
         </MenuItem>
         <Options
           size="small"
+          checkout={checkout}
           routes={routes}
           chains={chains}
           onCardClick={onCardClick}

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/SelectedRouteOption.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/SelectedRouteOption.tsx
@@ -9,10 +9,13 @@ import {
   useMemo,
 } from 'react';
 
+import { Checkout } from '@imtbl/checkout-sdk';
 import { Chain, RouteData } from '../types';
 import { getRouteAndTokenBalances } from '../functions/getRouteAndTokenBalances';
+import { getRemoteVideo } from '../../../lib/utils';
 
-export interface RouteOptionProps {
+export interface SelectedRouteOptionProps {
+  checkout: Checkout;
   routeData?: RouteData;
   chains: Chain[] | null;
   onClick: MouseEventHandler<HTMLSpanElement>;
@@ -54,6 +57,7 @@ function SelectedRouteOptionContainer({
 }
 
 export function SelectedRouteOption({
+  checkout,
   routeData,
   chains,
   loading = false,
@@ -63,7 +67,7 @@ export function SelectedRouteOption({
   insufficientBalance = false,
   showOnrampOption = false,
   onClick,
-}: RouteOptionProps) {
+}: SelectedRouteOptionProps) {
   const { fromToken } = routeData?.amountData ?? {};
   const chain = chains?.find((c) => c.id === fromToken?.chainId);
 
@@ -93,7 +97,11 @@ export function SelectedRouteOption({
         selected={withSelectedWallet}
       >
         <MenuItem.FramedVideo
-          videoUrl="https://i.imgur.com/dVQoobw.mp4"
+          videoUrl={getRemoteVideo(
+            checkout.config.environment,
+            '/loading_bubble-small.mp4',
+          )}
+          padded
           mimeType="video/mp4"
           circularFrame
         />

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx
@@ -64,7 +64,7 @@ import { OnboardingDrawer } from '../components/OnboardingDrawer';
 import { useError } from '../hooks/useError';
 
 interface AddFundsProps {
-  checkout: Checkout | null;
+  checkout: Checkout;
   showBackButton?: boolean;
   showOnrampOption?: boolean;
   showSwapOption?: boolean;
@@ -651,6 +651,7 @@ export function AddFunds({
                 }}
               />
               <SelectedRouteOption
+                checkout={checkout}
                 loading={loading}
                 chains={chains}
                 routeData={selectedRouteData}
@@ -706,6 +707,7 @@ export function AddFunds({
             showOnRampOption={shouldShowOnRampOption}
           />
           <OptionsDrawer
+            checkout={checkout}
             routes={routes}
             showOnrampOption={shouldShowOnRampOption}
             showSwapOption={showSwapOption}