Merge pull request #3573 from Emurgo/sorin/YOEXT-1225/fix-modal

fix: Delegate modal dialog

packages/yoroi-extension/app/components/swap/SwapInput.js

@@ -75,7 +75,7 @@ export default function SwapInput({
         component="fieldset"
         sx={{
           borderStyle: 'solid',
-          borderWidth: tokenInfo.id?.length > 0 && error ? '2px' : '1px',
+          borderWidth: (tokenInfo.id?.length > 0 && error) || focusState.value ? '2px' : '1px',
           borderColor: error ? 'magenta.500' : isFocusedColor,
           borderRadius: '8px',
           p: '16px',
@@ -88,6 +88,7 @@ export default function SwapInput({
           bgcolor: 'common.white',
           columnGap: '6px',
           rowGap: '8px',
+          maxHeight: '95px',
           '&:hover': {
             borderColor: !error && 'grayscale.max',
           },

packages/yoroi-extension/app/containers/swap/orders/NoCompleteOrders.js

@@ -0,0 +1,18 @@
+// @flow
+
+import { Stack, Typography } from '@mui/material';
+import { ReactComponent as NoCompleteOders } from '../../../assets/images/revamp/no-complete-orders.inline.svg';
+import type { Node } from 'react';
+
+const NoCompleteOrders = (): Node => {
+  return (
+    <Stack direction="column" justifyContent="center" alignItems="center" flex={1} pt="98px">
+      <NoCompleteOders />
+      <Typography variant="h4" fontWeight="500" color="ds.text_gray_normal" mt="52px" pb="8px">
+        No orders completed yet
+      </Typography>
+    </Stack>
+  );
+};
+
+export default NoCompleteOrders;

packages/yoroi-extension/app/containers/swap/orders/NoOpenOrders.js

@@ -0,0 +1,21 @@
+// @flow
+
+import { Stack, Typography } from '@mui/material';
+import type { Node } from 'react';
+import { ReactComponent as NoOpenOders } from '../../../assets/images/revamp/no-open-orders.inline.svg';
+
+const NoOpenOrders = (): Node => {
+  return (
+    <Stack direction="column" justifyContent="center" alignItems="center" flex={1} pt="98px">
+      <NoOpenOders />
+      <Typography variant="h4" fontWeight="500" color="ds.text_gray_normal" mt="52px" pb="8px">
+        No orders available yet
+      </Typography>
+      <Typography variant="body1" color="ds.text_gray_medium" width="343px" textAlign="center">
+        Start doing the swap operations to see your open orders here
+      </Typography>
+    </Stack>
+  );
+};
+
+export default NoOpenOrders;

packages/yoroi-extension/app/containers/swap/orders/OrdersPage.js

@@ -26,6 +26,8 @@ import type { CardanoConnectorSignRequest } from '../../../connector/types';
 import { genLookupOrFail } from '../../../stores/stateless/tokenHelpers';
 import moment from 'moment';
 import { signTransactionHex } from '../../../api/ada/transactions/signTransactionHex';
+import NoCompleteOrders from './NoCompleteOrders';
+import NoOpenOrders from './NoOpenOrders';
 
 type ColumnContext = {|
   completedOrders: boolean,
@@ -378,8 +380,12 @@ export default function SwapOrdersPage(props: StoresAndActionsProps): Node {
     .map(c => resolveValueOrGetter(c.width ?? 'auto', columnContext))
     .join(' ');
 
+  const isDisplayOpenOrdersEmpty = !showCompletedOrders && openOrders?.length === 0;
+  const isDisplayCompletedOrdersEmpty = showCompletedOrders && completedOrders?.length === 0;
+  const safeColumnNames = isDisplayOpenOrdersEmpty || isDisplayCompletedOrdersEmpty ? [] : columnNames;
+
   return (
-    <>
+    <Box sx={{ border: '1px solid transparent' }}>
       <Box sx={{ mx: '24px' }}>
         <Box sx={{ my: '24px' }}>
           <Tabs
@@ -397,9 +403,10 @@ export default function SwapOrdersPage(props: StoresAndActionsProps): Node {
             ]}
           />
         </Box>
+
         <Table
           columnKeys={columnKeys}
-          columnNames={columnNames}
+          columnNames={safeColumnNames}
           columnAlignment={columnAlignment}
           columnLeftPaddings={columnLeftPaddings}
           gridTemplateColumns={gridTemplateColumns}
@@ -447,7 +454,9 @@ export default function SwapOrdersPage(props: StoresAndActionsProps): Node {
           hwWalletError={null}
         />
       )}
-    </>
+      {isDisplayOpenOrdersEmpty && <NoOpenOrders />}
+      {isDisplayCompletedOrdersEmpty && <NoCompleteOrders />}
+    </Box>
   );
 }
 

packages/yoroi-extension/app/containers/wallet/staking/CardanoStakingPage.js

@@ -56,8 +56,14 @@ class CardanoStakingPage extends Component<AllProps, State> {
   @observable notificationElementId: string = '';
 
   cancel: void => void = () => {
+    const selectedWallet = this.props.stores.wallets.selected;
+    this.props.stores.delegation.setPoolTransitionConfig(selectedWallet, {
+      shouldUpdatePool: false,
+      show: 'idle',
+    });
     this.props.actions.ada.delegationTransaction.reset.trigger({ justTransaction: true });
   };
+
   async componentWillUnmount() {
     this.props.actions.ada.delegationTransaction.reset.trigger({ justTransaction: false });
     await this.props.actions.ada.delegationTransaction.setPools.trigger([]);