Merge pull request #30 from RealT-Community/develop

Release v2.1.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "realtoken-dashboard-v2",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

src/components/assetPage/assetPageTransfersTab.tsx

@@ -7,7 +7,10 @@ import {
   RealTokenTransfer,
   TransferOrigin,
 } from 'src/repositories/transferts.repository'
-import { selectAddressList } from 'src/store/features/settings/settingsSelector'
+import {
+  selectAllUserAddressList,
+  selectUserAddressList,
+} from 'src/store/features/settings/settingsSelector'
 import { UserRealtoken } from 'src/store/features/wallets/walletsSelector'
 
 function getTransferTitle(item: RealTokenTransfer) {
@@ -80,15 +83,17 @@ const TransferRow: FC<{ item: RealTokenTransfer }> = ({ item }) => {
 export const AssetPageTransfersTab: FC<{ data: UserRealtoken }> = ({
   data,
 }) => {
-  const addressList = useSelector(selectAddressList)
+  const addressList = useSelector(selectUserAddressList)
+  const allAddressList = useSelector(selectAllUserAddressList)
   const [transfers, setTransfers] = useState<RealTokenTransfer[]>([])
 
   useEffect(() => {
     GetRealTokenTransfers({
       addressList: addressList,
+      allAddressList: allAddressList,
       realtokenList: [data],
     }).then((item) => setTransfers(item))
-  }, [data, addressList])
+  }, [data, addressList, allAddressList])
 
   return (
     <table style={{ width: '100%' }}>

src/components/layouts/MainLayout.tsx

@@ -5,8 +5,8 @@ import { MediaQuery, createStyles } from '@mantine/core'
 import { useModals } from '@mantine/modals'
 
 import {
-  selectCleanedAddressList,
   selectIsInitialized,
+  selectUserAddressList,
 } from 'src/store/features/settings/settingsSelector'
 
 import { Footer } from './Footer'
@@ -43,7 +43,7 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
   const { classes } = useStyles()
 
   const isInitialized = useSelector(selectIsInitialized)
-  const addressList = useSelector(selectCleanedAddressList)
+  const addressList = useSelector(selectUserAddressList)
   const modals = useModals()
 
   useEffect(() => {

src/components/layouts/WalletMenu.tsx

@@ -23,17 +23,18 @@ import {
   selectIsInitialized,
   selectUser,
 } from 'src/store/features/settings/settingsSelector'
-import { setUserAddress } from 'src/store/features/settings/settingsSlice'
+import { User, setUserAddress } from 'src/store/features/settings/settingsSlice'
 
 import { IntegerField, StringField } from '../commons'
 
 interface WalletItemProps {
   address: string
+  isVisible?: boolean
 }
 
 const useStyles = createStyles({
   address: {
-    span: { fontFamily: 'monospace', fontSize: '12px' },
+    span: { fontFamily: 'monospace', fontSize: '11px' },
   },
 })
 
@@ -45,21 +46,64 @@ const WalletItem: FC<WalletItemProps> = (props) => {
       variant={'dot'}
       fullWidth={true}
       className={classes.address}
-      style={{ textTransform: 'none', justifyContent: 'space-between' }}
+      style={{
+        textTransform: 'none',
+        justifyContent: 'space-between',
+        opacity: props.isVisible ? 0.5 : 1,
+      }}
     >
       {EthersUtils.getAddress(props.address)}
     </Badge>
   )
 }
 WalletItem.displayName = 'WalletItem'
 
-const WalletItemList: FC<{ addressList: string[] }> = (props) => {
+const AddWalletButton: FC<{ onClick?: () => void }> = (props) => {
+  const modals = useModals()
+  const { t } = useTranslation('common', { keyPrefix: 'manageWalletModal' })
+
+  function openModal() {
+    props.onClick?.()
+    modals.openContextModal('manageWalletModal', {
+      innerProps: {},
+      closeOnClickOutside: false,
+      closeOnEscape: false,
+    })
+  }
+
+  return (
+    <>
+      <Button
+        onClick={openModal}
+        size={'xs'}
+        compact={true}
+        variant={'outline'}
+      >
+        {t('open')}
+      </Button>
+    </>
+  )
+}
+AddWalletButton.displayName = 'AddWalletButton'
+
+const WalletItemList: FC<{ user: User }> = (props) => {
+  const addresses = [
+    ...(props.user?.addressList ?? []),
+    ...(props.user?.customAddressList ?? []),
+  ]
+
+  const hiddenAddressList = props.user?.hiddenAddressList ?? []
+
   return (
     <Flex direction={'column'} gap={'xs'}>
-      {props.addressList
+      {addresses
         .filter((item) => item)
-        .map((address) => (
-          <WalletItem key={address} address={address} />
+        .map((item) => (
+          <WalletItem
+            key={item}
+            address={item}
+            isVisible={hiddenAddressList.includes(item)}
+          />
         ))}
     </Flex>
   )
@@ -140,7 +184,11 @@ export const WalletMenu: FC = () => {
 
             <Menu.Divider my={'xs'} />
 
-            <WalletItemList addressList={user.addressList} />
+            <WalletItemList user={user} />
+
+            <Box ta={'center'} mb={'xs'} mt={'sm'}>
+              <AddWalletButton onClick={handlers.close} />
+            </Box>
 
             <Menu.Divider mt={'xs'} />
           </>