refactor list skeleton for account

ui/pages/ApiKeys.tsx

@@ -17,7 +17,7 @@ import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
 const DATA_LIMIT = 3;
@@ -63,7 +63,7 @@ const ApiKeysPage: React.FC = () => {
 
   const content = (() => {
     if (isLoading && !data) {
-      const loader = isMobile ? <SkeletonAccountMobile/> : (
+      const loader = isMobile ? <SkeletonListAccount/> : (
         <>
           <SkeletonTable columns={ [ '100%', '108px' ] }/>
           <Skeleton height="48px" width="156px" marginTop={ 8 }/>

ui/pages/CustomAbi.tsx

@@ -16,7 +16,7 @@ import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
 const CustomAbiPage: React.FC = () => {
@@ -60,7 +60,7 @@ const CustomAbiPage: React.FC = () => {
 
   const content = (() => {
     if (isLoading && !data) {
-      const loader = isMobile ? <SkeletonAccountMobile/> : (
+      const loader = isMobile ? <SkeletonListAccount/> : (
         <>
           <SkeletonTable columns={ [ '100%', '108px' ] }/>
           <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/pages/Watchlist.tsx

@@ -12,7 +12,7 @@ import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 import AddressModal from 'ui/watchlist/AddressModal/AddressModal';
 import DeleteAddressModal from 'ui/watchlist/DeleteAddressModal';
@@ -73,7 +73,7 @@ const WatchList: React.FC = () => {
 
   let content;
   if (isLoading && !data) {
-    const loader = isMobile ? <SkeletonAccountMobile showFooterSlot/> : (
+    const loader = isMobile ? <SkeletonListAccount showFooterSlot/> : (
       <>
         <SkeletonTable columns={ [ '70%', '30%', '160px', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/privateTags/PrivateAddressTags.tsx

@@ -9,7 +9,7 @@ import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
 import AddressModal from './AddressModal/AddressModal';
@@ -57,7 +57,7 @@ const PrivateAddressTags = () => {
   );
 
   if (isLoading && !addressTagsData) {
-    const loader = isMobile ? <SkeletonAccountMobile/> : (
+    const loader = isMobile ? <SkeletonListAccount/> : (
       <>
         <SkeletonTable columns={ [ '60%', '40%', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/privateTags/PrivateTransactionTags.tsx

@@ -9,7 +9,7 @@ import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
 import DeletePrivateTagModal from './DeletePrivateTagModal';
@@ -60,7 +60,7 @@ const PrivateTransactionTags = () => {
   );
 
   if (isLoading && !transactionTagsData) {
-    const loader = isMobile ? <SkeletonAccountMobile/> : (
+    const loader = isMobile ? <SkeletonListAccount/> : (
       <>
         <SkeletonTable columns={ [ '75%', '25%', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/publicTags/PublicTagsData.tsx

@@ -10,7 +10,7 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import PublicTagListItem from 'ui/publicTags/PublicTagTable/PublicTagListItem';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
+import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
 import DeletePublicTagModal from './DeletePublicTagModal';
@@ -58,7 +58,7 @@ const PublicTagsData = ({ changeToFormScreen, onTagDelete }: Props) => {
   );
 
   if (isLoading) {
-    const loader = isMobile ? <SkeletonAccountMobile/> : (
+    const loader = isMobile ? <SkeletonListAccount/> : (
       <>
         <SkeletonTable columns={ [ '50%', '25%', '25%', '108px' ] }/>
         <Skeleton height="48px" width="270px" marginTop={ 8 }/>

ui/shared/SkeletonAccountMobile.tsx → ui/shared/skeletons/SkeletonListAccount.tsx

@@ -5,7 +5,7 @@ interface Props {
   showFooterSlot?: boolean;
 }
 
-const SkeletonAccountMobile = ({ showFooterSlot }: Props) => {
+const SkeletonListAccount = ({ showFooterSlot }: Props) => {
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
@@ -18,9 +18,8 @@ const SkeletonAccountMobile = ({ showFooterSlot }: Props) => {
           paddingY={ 6 }
           borderTopWidth="1px"
           borderColor={ borderColor }
-          _first={{
-            borderTopWidth: '0',
-            pt: '0',
+          _last={{
+            borderBottomWidth: '0px',
           }}
         >
           <Flex columnGap={ 2 } w="100%" alignItems="center">
@@ -45,4 +44,4 @@ const SkeletonAccountMobile = ({ showFooterSlot }: Props) => {
   );
 };
 
-export default SkeletonAccountMobile;
+export default SkeletonListAccount;