Improve ENS view styling (#4015)

* Improve ENS view styling * Fix bug with new ENS saga
MyCryptoHQ · Jun 10, 2021 · 24ed19c · 24ed19c
1 parent 110f4ae
commit 24ed19c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 21 deletions.
diff --git a/src/features/Ens/EnsDashboard.tsx b/src/features/Ens/EnsDashboard.tsx
@@ -3,11 +3,11 @@ import React from 'react';
 import { Heading } from '@mycrypto/ui';
 import styled from 'styled-components';
 
-import { Box, DashboardPanel, PoweredByText } from '@components';
+import { Box, DashboardPanel, Icon, LinkApp, PoweredByText, Text } from '@components';
+import { ROUTE_PATHS } from '@config';
 import { getENSFetched, getENSRecords, useSelector } from '@store';
 import { BREAK_POINTS, SPACING } from '@theme';
 import { translateRaw } from '@translations';
-import { useScreenSize } from '@utils';
 
 import { EnsTable } from './EnsTable';
 
@@ -34,7 +34,6 @@ const StyledLayout = styled.div`
 export default function EnsDashboard() {
   const ensOwnershipRecords = useSelector(getENSRecords);
   const isEnsFetched = useSelector(getENSFetched);
-  const { isMobile } = useScreenSize();
 
   return (
     <StyledLayout>
@@ -44,16 +43,31 @@ export default function EnsDashboard() {
         </DashboardSubHeader>
         <DashboardPanel
           heading={translateRaw('ENS_MY_DOMAINS_TABLE_HEADER')}
-          headingRight={!isMobile ? <PoweredByText provider="ENS" /> : <></>}
+          headingRight={
+            <Box variant="rowAlign">
+              <LinkApp href={ROUTE_PATHS.SETTINGS.path} mr={SPACING.BASE} variant="opacityLink">
+                <Box variant="rowAlign">
+                  <Icon type="edit" width="1em" />
+                  <Text ml={SPACING.XS} mb={0}>
+                    {translateRaw('EDIT')}
+                  </Text>
+                </Box>
+              </LinkApp>
+              <LinkApp href={ROUTE_PATHS.ADD_ACCOUNT.path} variant="opacityLink">
+                <Box variant="rowAlign">
+                  <Icon type="add-bold" width="1em" />
+                  <Text ml={SPACING.XS} mb={0}>
+                    {translateRaw('ADD')}
+                  </Text>
+                </Box>
+              </LinkApp>
+            </Box>
+          }
         >
           <EnsTable records={ensOwnershipRecords} isFetched={isEnsFetched} />
-          {isMobile && (
-            <Box display="flex" justifyContent="flex-start" pl={SPACING.MD} pb={SPACING.BASE}>
-              <PoweredByText provider="ENS" />
-            </Box>
-          )}
         </DashboardPanel>
       </DashboardWrapper>
+      {<PoweredByText provider="ENS" />}
     </StyledLayout>
   );
 }
diff --git a/src/features/Ens/EnsTable.tsx b/src/features/Ens/EnsTable.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Spinner } from '@components';
-import { BREAK_POINTS, SPACING } from '@theme';
 import { DomainNameRecord } from '@types';
 
 import MyDomains from './MyDomains';
@@ -16,14 +15,6 @@ const SpinnerContainer = styled.div`
   justify-content: center;
 `;
 
-const EnsTableContainer = styled.div`
-  max-height: 650px;
-  overflow: auto;
-  @media (max-width: ${BREAK_POINTS.SCREEN_SM}) {
-    margin-bottom: ${SPACING.BASE};
-  }
-`;
-
 export const EnsTable = ({
   records,
   isFetched
@@ -32,7 +23,7 @@ export const EnsTable = ({
   isFetched: boolean;
 }) => {
   return (
-    <EnsTableContainer>
+    <>
       {records.length === 0 &&
         (isFetched ? (
           <NoDomains />
@@ -42,7 +33,7 @@ export const EnsTable = ({
           </SpinnerContainer>
         ))}
       {records.length !== 0 && <MyDomains domainOwnershipRecords={records} />}
-    </EnsTableContainer>
+    </>
   );
 };
 

diff --git a/src/services/Store/store/ens.slice.ts b/src/services/Store/store/ens.slice.ts
@@ -62,7 +62,10 @@ export function* fetchENSWorker() {
 
   const filteredAccounts = accounts.filter((a) => a.networkId === 'Ethereum');
 
-  if (filteredAccounts.length === 0) return;
+  if (filteredAccounts.length === 0) {
+    yield put(slice.actions.setRecords([]));
+    return;
+  }
 
   try {
     const records = yield call(ENSService.fetchOwnershipRecords, filteredAccounts);