fix home videos

CheesecakeLabs · Sep 25, 2023 · ae39190 · ae39190
1 parent b97d172
commit ae39190
Show file tree

Hide file tree

Showing 14 changed files with 73 additions and 47 deletions.
diff --git a/frontend/src/app/core/pages/payments-tokens/index.tsx b/frontend/src/app/core/pages/payments-tokens/index.tsx
@@ -24,7 +24,7 @@ export const PaymentsTokens: React.FC = () => {
   const handleSignOut = async (): Promise<void> => {
     const isSuccess = await signOut()
     if (isSuccess) {
-      navigate('/login')
+      navigate('/sandbox/v2/login')
     }
   }
 

diff --git a/frontend/src/app/core/pages/profile/index.tsx b/frontend/src/app/core/pages/profile/index.tsx
@@ -24,7 +24,7 @@ export const Profile: React.FC = () => {
   const handleSignOut = async (): Promise<void> => {
     const isSuccess = await signOut()
     if (isSuccess) {
-      navigate('/login')
+      navigate('/sandbox/v2/login')
     }
   }
 

diff --git a/frontend/public/asset-management.mp4 → ...esources/home-videos/asset-management.mp4 b/frontend/public/asset-management.mp4 → ...esources/home-videos/asset-management.mp4
diff --git a/frontend/public/dashboards.mp4 → ...core/resources/home-videos/dashboards.mp4 b/frontend/public/dashboards.mp4 → ...core/resources/home-videos/dashboards.mp4
diff --git a/frontend/public/forge-asset.mp4 → ...ore/resources/home-videos/forge-asset.mp4 b/frontend/public/forge-asset.mp4 → ...ore/resources/home-videos/forge-asset.mp4
diff --git a/frontend/public/general.mp4 → ...pp/core/resources/home-videos/general.mp4 b/frontend/public/general.mp4 → ...pp/core/resources/home-videos/general.mp4
diff --git a/frontend/public/roles.mp4 → .../app/core/resources/home-videos/roles.mp4 b/frontend/public/roles.mp4 → .../app/core/resources/home-videos/roles.mp4
diff --git a/frontend/public/soroban.mp4 → ...pp/core/resources/home-videos/soroban.mp4 b/frontend/public/soroban.mp4 → ...pp/core/resources/home-videos/soroban.mp4
diff --git a/frontend/public/treasury.mp4 → ...p/core/resources/home-videos/treasury.mp4 b/frontend/public/treasury.mp4 → ...p/core/resources/home-videos/treasury.mp4
diff --git a/frontend/src/components/templates/home/carousel-data.tsx b/frontend/src/components/templates/home/carousel-data.tsx
@@ -1,9 +1,16 @@
 import { Text, Box } from '@chakra-ui/react'
 
+import VIDEO_ASSET_MANAGEMENT from 'app/core/resources/home-videos/asset-management.mp4'
+import VIDEO_DASHBOARDS from 'app/core/resources/home-videos/dashboards.mp4'
+import VIDEO_GENERAL from 'app/core/resources/home-videos/general.mp4'
+import VIDEO_ROLES from 'app/core/resources/home-videos/roles.mp4'
+import VIDEO_SOROBAN from 'app/core/resources/home-videos/soroban.mp4'
+import VIDEO_TREASURY from 'app/core/resources/home-videos/treasury.mp4'
+
 export const carouselData = [
   {
     title: 'Welcome to the Stellar Asset Issuance Sandbox (Custodial Edition)!',
-    slide: 'general.mp4',
+    slide: VIDEO_GENERAL,
     actionName: undefined,
     actionDestination: undefined,
     children: (
@@ -28,7 +35,7 @@ export const carouselData = [
   },
   {
     title: 'Role-based Access and Custody',
-    slide: 'roles.mp4',
+    slide: VIDEO_ROLES,
     actionName: undefined,
     actionDestination: undefined,
     children: (
@@ -61,7 +68,7 @@ export const carouselData = [
   },
   {
     title: 'Token Management in the Sandbox',
-    slide: 'asset-management.mp4',
+    slide: VIDEO_ASSET_MANAGEMENT,
     actionName: undefined,
     actionDestination: undefined,
     children: (
@@ -105,7 +112,7 @@ export const carouselData = [
   },
   {
     title: 'Treasury Management in the Sandbox',
-    slide: 'treasury.mp4',
+    slide: VIDEO_TREASURY,
     actionName: undefined,
     actionDestination: undefined,
     children: (
@@ -148,7 +155,7 @@ export const carouselData = [
   },
   {
     title: 'Dashboards: Insights at Your Fingertips',
-    slide: 'dashboards.mp4',
+    slide: VIDEO_DASHBOARDS,
     actionName: undefined,
     actionDestination: undefined,
     children: (
@@ -182,7 +189,7 @@ export const carouselData = [
   },
   {
     title: 'Soroban: The Next Evolution (Coming Soon)',
-    slide: 'soroban.mp4',
+    slide: VIDEO_SOROBAN,
     actionName: undefined,
     actionDestination: undefined,
     children: (

diff --git a/frontend/src/components/templates/home/index.tsx b/frontend/src/components/templates/home/index.tsx
@@ -53,10 +53,10 @@ export const HomeTemplate: React.FC<IHomeTemplate> = () => {
           >
             <ArrowBackIcon />
           </IconButton>
-          <Box height={'400px'} width={'900px'}>
+          <Box w="full" maxW={'900px'}>
             <Slider {...settings} ref={(slider): void => setSlider(slider)}>
-              {carouselData.map(data => (
-                <Box w="full">
+              {carouselData.map((data, index) => (
+                <Box w="full" key={index}>
                   <Container
                     variant="primary"
                     mt="1rem"

diff --git a/frontend/src/components/templates/home/videos/general.mp4 b/frontend/src/components/templates/home/videos/general.mp4
diff --git a/frontend/src/components/templates/token-management/index.tsx b/frontend/src/components/templates/token-management/index.tsx
@@ -11,6 +11,7 @@ import {
   Button,
   Skeleton,
   Tooltip,
+  useMediaQuery,
 } from '@chakra-ui/react'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
@@ -44,6 +45,9 @@ export const TokenManagementTemplate: React.FC<ITokenManagementTemplate> = ({
   userPermissions,
 }) => {
   const navigate = useNavigate()
+  const [isLargerThanLg] = useMediaQuery('(min-width: 992px)')
+  const [isLargerThanMd] = useMediaQuery('(min-width: 768px)')
+  const [isLargerThanSm] = useMediaQuery('(min-width: 480px)')
 
   return (
     <Flex flexDir="column" w="full">
@@ -70,17 +74,20 @@ export const TokenManagementTemplate: React.FC<ITokenManagementTemplate> = ({
           <Container variant="primary" p={0} maxW="full">
             <Table variant="simple">
               <Thead>
-                <Th w="2rem" p={0} />
-                <Th>Code</Th>
-                <Th>Name</Th>
-                <Th isNumeric>Supply</Th>
-                <Th>Asset type</Th>
-                <Th>Controls</Th>
-                <Th w="2rem" p={0} />
+                <Tr>
+                  <Th w="2rem" p={0} />
+                  <Th>Code</Th>
+                  <Th>Name</Th>
+                  {isLargerThanSm && <Th isNumeric>Supply</Th>}
+                  {isLargerThanLg && <Th>Asset type</Th>}
+                  {isLargerThanMd && <Th>Controls</Th>}
+                  <Th w="2rem" p={0} />
+                </Tr>
               </Thead>
               <Tbody>
-                {assets.map(asset => (
+                {assets.map((asset, index) => (
                   <Tr
+                    key={index}
                     cursor="pointer"
                     onClick={(): void =>
                       navigate(`${PathRoute.ASSET_HOME}/${asset.id}`)
@@ -89,34 +96,44 @@ export const TokenManagementTemplate: React.FC<ITokenManagementTemplate> = ({
                     <Td>{getCurrencyIcon(asset.code, '2rem')}</Td>
                     <Td>{asset.code}</Td>
                     <Td>{asset.name}</Td>
-                    <Td isNumeric>
-                      {asset.assetData
-                        ? toCrypto(Number(asset.assetData?.amount))
-                        : '-'}
-                    </Td>
-                    <Td>
-                      {typesAsset.find(type => type.id === asset.asset_type)
-                        ?.name || ''}
-                    </Td>
-                    <Td>
-                      <Flex fill="black.900" _dark={{ fill: 'white' }} gap={2}>
-                        {asset.assetData?.flags.auth_required && (
-                          <Tooltip label="Authorize required">
-                            <AuthorizeIcon width="18px" height="18px" />
-                          </Tooltip>
-                        )}
-                        {asset.assetData?.flags.auth_clawback_enabled && (
-                          <Tooltip label="Clawback enabled">
-                            <BackIcon width="18px" height="18px" />
-                          </Tooltip>
-                        )}
-                        {asset.assetData?.flags.auth_revocable && (
-                          <Tooltip label="Freeze enabled">
-                            <BlockIcon width="18px" height="18px" />
-                          </Tooltip>
-                        )}
-                      </Flex>
-                    </Td>
+                    {isLargerThanSm && (
+                      <Td isNumeric>
+                        {asset.assetData
+                          ? toCrypto(Number(asset.assetData?.amount))
+                          : '-'}
+                      </Td>
+                    )}
+                    {isLargerThanLg && (
+                      <Td>
+                        {typesAsset.find(type => type.id === asset.asset_type)
+                          ?.name || ''}
+                      </Td>
+                    )}
+                    {isLargerThanMd && (
+                      <Td>
+                        <Flex
+                          fill="black.900"
+                          _dark={{ fill: 'white' }}
+                          gap={2}
+                        >
+                          {asset.assetData?.flags.auth_required && (
+                            <Tooltip label="Authorize required">
+                              <AuthorizeIcon width="18px" height="18px" />
+                            </Tooltip>
+                          )}
+                          {asset.assetData?.flags.auth_clawback_enabled && (
+                            <Tooltip label="Clawback enabled">
+                              <BackIcon width="18px" height="18px" />
+                            </Tooltip>
+                          )}
+                          {asset.assetData?.flags.auth_revocable && (
+                            <Tooltip label="Freeze enabled">
+                              <BlockIcon width="18px" height="18px" />
+                            </Tooltip>
+                          )}
+                        </Flex>
+                      </Td>
+                    )}
                     <Td w="2rem" p={0}>
                       <ArrowRightIcon width="12px" />
                     </Td>

diff --git a/frontend/src/react-app-env.d.ts b/frontend/src/react-app-env.d.ts
@@ -1 +1,3 @@
 /// <reference types="react-scripts" />
+
+declare module '*.mp4'