Merge remote-tracking branch 'origin/develop' into ruslan/YOEXT-1214/…

…swap-hw # Conflicts: # packages/yoroi-extension/app/containers/swap/asset-swap/ConfirmSwapTransaction.js # packages/yoroi-extension/app/containers/swap/asset-swap/SwapPage.js
Emurgo · Sep 28, 2024 · 682422c · 682422c
2 parents dd9cb3b + 3373837
commit 682422c
Show file tree

Hide file tree

Showing 142 changed files with 3,005 additions and 1,737 deletions.
diff --git a/packages/e2e-tests/package-lock.json b/packages/e2e-tests/package-lock.json
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
@@ -47,7 +47,7 @@
     "@emurgo/cardano-serialization-lib-nodejs": "^12.0.0-alpha.26",
     "bignumber.js": "^9.1.2",
     "chai": "^4.3.10",
-    "chromedriver": "128.0.3",
+    "chromedriver": "129.0.0",
     "cross-env": "^7.0.3",
     "json-server": "^0.17.4",
     "mocha": "^10.2.0",

diff --git a/packages/yoroi-extension/app/Routes.js b/packages/yoroi-extension/app/Routes.js
@@ -28,6 +28,7 @@ import NFTsWrapper from './containers/wallet/NFTsWrapper';
 import Wallet from './containers/wallet/Wallet';
 import RestoreWalletPage, { RestoreWalletPagePromise } from './containers/wallet/restore/RestoreWalletPage';
 
+import PagePreparation from './components/page-preparation/PagePreparation';
 // New UI pages
 // $FlowIgnore: suppressing this error
 import { createCurrrentWalletInfo } from './UI/features/governace/common/helpers';
@@ -376,6 +377,7 @@ const SwapSubpages = (stores, actions) => (
   <Switch>
     <Route exact path={ROUTES.SWAP.ROOT} component={props => <SwapPage {...props} stores={stores} actions={actions} />} />
     <Route exact path={ROUTES.SWAP.ORDERS} component={props => <SwapOrdersPage {...props} stores={stores} actions={actions} />} />
+    <Route exact path={ROUTES.SWAP.ERROR} component={props => <PagePreparation {...props} stores={stores} actions={actions} />} />
     <Redirect to={ROUTES.SWAP.ROOT} />
   </Switch>
 );

diff --git a/packages/yoroi-extension/app/UI/components/Collapsible/Collapsible.tsx b/packages/yoroi-extension/app/UI/components/Collapsible/Collapsible.tsx
@@ -1,13 +1,13 @@
-import { IconButton } from '@mui/material';
 import MuiAccordion from '@mui/material/Accordion';
 import MuiAccordionDetails from '@mui/material/AccordionDetails';
 import MuiAccordionSummary from '@mui/material/AccordionSummary';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { Icon } from '../icons/index';
+import { IconButtonWrapper } from '../wrappers/IconButtonWrapper';
 
-const Accordion: any = styled(MuiAccordion)(() => ({
+const Accordion: any = styled(MuiAccordion)(({ theme }: any) => ({
   '&:not(:last-child)': {
     borderBottom: 0,
   },
@@ -17,7 +17,7 @@ const Accordion: any = styled(MuiAccordion)(() => ({
   '& .MuiAccordionSummary-root': {
     margin: '0px',
     padding: '0px',
-    backgroundColor: 'transparent',
+    backgroundColor: theme.palette.ds.bg_color_max,
     minHeight: '24px',
     height: '24px',
   },
@@ -29,9 +29,10 @@ const AccordionSummary = styled(MuiAccordionSummary)(() => ({
   },
 }));
 
-const AccordionDetails = styled(MuiAccordionDetails)(() => ({
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }: any) => ({
   padding: 0,
   paddingTop: '16px',
+  backgroundColor: theme.palette.ds.bg_color_max,
 }));
 
 type Props = {
@@ -52,9 +53,9 @@ export const Collapsible = ({ title, content }: Props) => {
         aria-controls="panel1d-content"
         id="panel1d-header"
         expandIcon={
-          <IconButton>
+          <IconButtonWrapper>
             <Icon.ChevronDown />
-          </IconButton>
+          </IconButtonWrapper>
         }
       >
         <Typography variant="body1" fontWeight="500">

diff --git a/packages/yoroi-extension/app/UI/components/Input/PasswordInput.tsx b/packages/yoroi-extension/app/UI/components/Input/PasswordInput.tsx
@@ -3,11 +3,11 @@ import React from 'react';
 
 import FormControl from '@mui/material/FormControl';
 import FormHelperText from '@mui/material/FormHelperText';
-import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import InputLabel from '@mui/material/InputLabel';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import { Icon } from '../icons/index';
+import { IconButtonWrapper } from '../wrappers/IconButtonWrapper';
 
 type StyledInputProps = {
   id: string;
@@ -43,14 +43,14 @@ export const PasswordInput = ({ id, label, onChange, value, error, disabled, hel
         disabled={disabled}
         endAdornment={
           <InputAdornment position="end">
-            <IconButton
+            <IconButtonWrapper
               aria-label="toggle password visibility"
               onClick={handleClickShowPassword}
               onMouseDown={handleMouseDownPassword}
               edge="end"
             >
               {!showPassword ? <Icon.VisibilityOff /> : <Icon.VisibilityOn />}
-            </IconButton>
+            </IconButtonWrapper>
           </InputAdornment>
         }
         label={label}

diff --git a/packages/yoroi-extension/app/UI/components/TransactionSubmitted/TransactionSubmitted.tsx b/packages/yoroi-extension/app/UI/components/TransactionSubmitted/TransactionSubmitted.tsx
@@ -29,12 +29,12 @@ export const TransactionSubmitted = ({
         {title ? title : <FormattedMessage {...globalMessages.transactionSubmitted} />}
       </Typography>
       {subtitle && (
-        <Typography variant="body1" color="ds.gray_c800" mt="8px">
+        <Typography variant="body1" color="ds.gray_gray_medium" mt="8px">
           {subtitle}
         </Typography>
       )}
 
-      <Typography variant="body1" mt="8px" color="ds.text_gray_medium" textAlign="center" mb="16px">
+      <Typography variant="body1" mt="8px" color="ds.text_gray_low" textAlign="center" mb="16px">
         {content ? content : <FormattedMessage {...globalMessages.transactionSubmittedInfo} />}
       </Typography>
       <Button

diff --git a/packages/yoroi-extension/app/UI/components/icons/CloseIcon.tsx b/packages/yoroi-extension/app/UI/components/icons/CloseIcon.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
-export const CloseIcon = () => {
+export const CloseIcon = ({ fill }: { fill?: string }) => {
   return (
     <svg width="16" height="17" viewBox="0 0 16 17" fill="none">
       <path
         d="M15.7071 2.20711C16.0976 1.81658 16.0976 1.18342 15.7071 0.792893C15.3166 0.402369 14.6834 0.402369 14.2929 0.792893L8 7.08579L1.70711 0.792893C1.31658 0.402369 0.683417 0.402369 0.292893 0.792893C-0.0976311 1.18342 -0.0976311 1.81658 0.292893 2.20711L6.58579 8.5L0.292893 14.7929C-0.0976311 15.1834 -0.0976311 15.8166 0.292893 16.2071C0.683417 16.5976 1.31658 16.5976 1.70711 16.2071L8 9.91421L14.2929 16.2071C14.6834 16.5976 15.3166 16.5976 15.7071 16.2071C16.0976 15.8166 16.0976 15.1834 15.7071 14.7929L9.41421 8.5L15.7071 2.20711Z"
-        fill="#242838"
+        fill={fill ? fill : '#242838'}
       />
     </svg>
   );

diff --git a/packages/yoroi-extension/app/UI/components/index.ts b/packages/yoroi-extension/app/UI/components/index.ts
@@ -1,12 +1,14 @@
+export * from './buttons/CopyButton';
 export * from './Card';
-export * from './Tooltip';
-export * from './Skeleton';
 export * from './Chip';
-export * from './buttons/CopyButton';
+export * from './Collapsible/Collapsible';
+export * from './icons';
+export * from './Input/PasswordInput';
 export * from './Input/SearchInput';
 export * from './Input/TextInput';
-export * from './Input/PasswordInput';
+export * from './Skeleton';
+export * from './Tooltip';
 export * from './TransactionFailed/TransactionFailed';
 export * from './TransactionSubmitted/TransactionSubmitted';
-export * from './Collapsible/Collapsible';
-export * from './icons';
+export * from './wrappers/IconButtonWrapper';
+export * from './wrappers/GradientBgBox';
diff --git a/packages/yoroi-extension/app/UI/components/modals/ModalManager.tsx b/packages/yoroi-extension/app/UI/components/modals/ModalManager.tsx
@@ -1,16 +1,17 @@
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
-import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { Icon } from '../icons/index';
+import { IconButtonWrapper } from '../wrappers/IconButtonWrapper';
 import { useModal } from './ModalContext';
 
-const BootstrapDialog: any = styled(Dialog)(({ width, height }: { width: string; height: string }) => ({
+const BootstrapDialog: any = styled(Dialog)(({ theme, width, height }: { width: string; height: string; theme: any }) => ({
   '& .MuiDialogContent-root': {
     padding: '24px',
+    backgroundColor: theme.palette.ds.bg_color_max,
   },
   '& .MuiDialog-root': {
     maxWidth: width,
@@ -39,23 +40,22 @@ export const ModalManager = () => {
       width={width}
       height={height}
     >
-      <DialogTitle sx={{ textAlign: 'center', p: '24px' }} id={`${title}-dialog-title`}>
-        <Typography variant="body1" fontWeight="500" lineHeight="22px">
+      <DialogTitle sx={{ textAlign: 'center', p: '24px', backgroundColor: 'ds.bg_color_max' }} id={`${title}-dialog-title`}>
+        <Typography variant="body1" fontWeight="500" lineHeight="22px" color="ds.gray_900">
           {title}
         </Typography>
       </DialogTitle>
-      <IconButton
+      <IconButtonWrapper
         aria-label="close"
         onClick={closeModal}
         sx={{
           position: 'absolute',
           right: 18,
           top: 22,
-          color: (theme: any) => theme.palette.ds.gray_500,
         }}
       >
         <Icon.CloseIcon />
-      </IconButton>
+      </IconButtonWrapper>
       <DialogContent>{content}</DialogContent>
     </BootstrapDialog>
   );

diff --git a/packages/yoroi-extension/app/UI/components/wrappers/GradientBgBox.tsx b/packages/yoroi-extension/app/UI/components/wrappers/GradientBgBox.tsx
@@ -0,0 +1,6 @@
+import { styled, Box } from '@mui/material';
+
+// For some reason the garatients are working only in styled components- and not in sx props
+export const GradientBgBox = styled(Box)(({ variant }: { variant: '1' | '2' | '3' }) => ({
+  backgroundImage: `theme.palette.ds.bg_gradient_${variant}`,
+}));
diff --git a/packages/yoroi-extension/app/UI/components/wrappers/IconButtonWrapper.tsx b/packages/yoroi-extension/app/UI/components/wrappers/IconButtonWrapper.tsx
@@ -0,0 +1,9 @@
+import { IconButton, styled } from '@mui/material';
+
+export const IconButtonWrapper = styled(IconButton)(({ theme }: any) => ({
+  '& svg': {
+    '& path': {
+      fill: theme.palette.ds.el_gray_medium,
+    },
+  },
+}));
diff --git a/packages/yoroi-extension/app/UI/features/governace/common/GovernanceVoteingCard.tsx b/packages/yoroi-extension/app/UI/features/governace/common/GovernanceVoteingCard.tsx
@@ -27,16 +27,16 @@ const StyledCard: any = styled(Stack)(({ theme, selected, pending, isDrepSelecte
   width: '294px',
   height: '362px',
   borderRadius: '8px',
+  border: `2px solid ${theme.palette.ds?.primary_100}`,
 
-  ...(!selected && {
-    background: !pending && (theme.name === 'light-theme' ? theme.palette.ds?.bg_gradient_1 : theme.palette.ds?.bg_gradient_2),
-    backgroundOrigin: 'border-box',
-    boxShadow: 'inset 0 100vw white',
-    border: '2px solid transparent',
-  }),
+  ...(!selected &&
+    {
+      // backgroundColor: !pending && theme.palette.ds?.primary_100,
+    }),
   ...(selected && {
-    background: !pending && theme.palette.ds.bg_gradient_2,
-    border: 'none',
+    backgroundImage: !pending && theme.palette.ds.bg_gradient_2,
+    border: '2px solid transparent',
+    backgroundOrigin: 'border-box',
     pointerEvents: !isDrepSelected && 'none',
   }),
   cursor: 'pointer',
@@ -45,10 +45,11 @@ const StyledCard: any = styled(Stack)(({ theme, selected, pending, isDrepSelecte
     cursor: 'not-allowed',
   }),
   '&:hover': {
-    background: !pending && theme.palette.ds.bg_gradient_1,
-    backgroundOrigin: 'content-box',
-    boxShadow: 'none',
-    transition: 'all 250ms ease-in-out',
+    backgroundImage: theme.palette.ds.bg_gradient_2,
+    border: '2px solid transparent',
+    backgroundOrigin: 'border-box',
+    // background: !pending && theme.palette.ds.bg_gradient_2,
+    transition: 'opacity 1s ease-in-out',
   },
 }));
 

diff --git a/packages/yoroi-extension/app/UI/features/governace/common/VotingSkeletonCard.tsx b/packages/yoroi-extension/app/UI/features/governace/common/VotingSkeletonCard.tsx
@@ -10,17 +10,26 @@ const StyledCard = styled(Stack)(({ theme }: any) => ({
   width: '294px',
   borderRadius: '8px',
   padding: '16px',
-  backgroundImage: theme.palette.ds?.bg_gradient_1,
-  backgroundOrigin: 'border-box',
-  boxShadow: 'inset 0 100vw white',
-  border: '2px solid transparent',
+  border: `2px solid ${theme.palette.ds?.primary_100}`,
 }));
 export const VotingSkeletonCard = () => {
   return (
     <StyledCard>
-      <Skeleton animation="wave" variant="rounded" width={157} height={180} sx={{ marginBottom: '22px' }} />
-      <Skeleton animation="wave" variant="rounded" width={185} height={22} sx={{ marginBottom: '12px' }} />
-      <Skeleton animation="wave" variant="rounded" width={262} height={88} />
+      <Skeleton
+        animation="wave"
+        variant="rounded"
+        width={157}
+        height={180}
+        sx={{ marginBottom: '22px', backgroundColor: 'ds.gray_100' }}
+      />
+      <Skeleton
+        animation="wave"
+        variant="rounded"
+        width={185}
+        height={22}
+        sx={{ marginBottom: '12px', backgroundColor: 'ds.gray_100' }}
+      />
+      <Skeleton animation="wave" variant="rounded" width={262} height={88} sx={{ backgroundColor: 'ds.gray_100' }} />
     </StyledCard>
   );
 };
diff --git a/...ages/yoroi-extension/app/UI/features/governace/useCases/DelagationForm/DelagationForm.tsx b/...ages/yoroi-extension/app/UI/features/governace/useCases/DelagationForm/DelagationForm.tsx
@@ -114,26 +114,26 @@ export const DelagationForm = () => {
   return (
     <Container>
       <Stack>
-        <Typography variant="body2" color="ds.gray_c600" mb="4px">
+        <Typography variant="body2" color="ds.text_gray_low" mb="4px">
           {mapStatus[governanceVote.kind || '']}
         </Typography>
-        <Typography variant="body1" mb="24px">
+        <Typography variant="body1" mb="24px" color="ds.text_gray_medium">
           {mapStatusDescription[governanceVote.kind || '']}
         </Typography>
         <TotalBox>
-          <Typography variant="h4" color="ds.gray_min">
+          <Typography variant="h4" color="ds.white_static">
             {strings.total}
           </Typography>
           <Box textAlign="right">
-            <Typography variant="h4" fontWeight="500" color="ds.gray_cmin">
+            <Typography variant="h4" fontWeight="500" color="ds.white_static">
               {txFee} ADA
             </Typography>
-            <Typography variant="body2" color="ds.gray_c300">
+            <Typography variant="body2" color="ds.white_static" sx={{ opacity: '0.5' }}>
               {String(getFormattedPairingAmount(String(Number(txFee) * 1000000)))}
             </Typography>
           </Box>
         </TotalBox>
-        <Typography variant="body2" color="ds.gray_600" mb="24px">
+        <Typography variant="body2" color="ds.text_gray_low" mb="24px">
           {strings.transactionDetails}
         </Typography>
         <Box mb="40px">
@@ -193,14 +193,14 @@ type OperationInfoProps = {
 const OperationInfo = ({ label, fee }: OperationInfoProps) => {
   return (
     <>
-      <Typography variant="body1" color="ds.text_gray_normal">
+      <Typography variant="body1" color="ds.text_gray_medium">
         {label}
       </Typography>
       <Stack direction="row" justifyContent="space-between">
-        <Typography variant="body1" fontWeight="500">
+        <Typography variant="body1" fontWeight="500" color="ds.text_gray_normal">
           Transaction fee
         </Typography>
-        <Typography variant="body1" color="ds.text_gray_normal">
+        <Typography variant="body1" color="ds.text_gray_max">
           {fee} ADA
         </Typography>
       </Stack>