feat: add primary account

src/extension/components/AccountAvatarWithBadges/AccountAvatarWithBadges.tsx

@@ -1,6 +1,10 @@
 import { AvatarBadge, Icon } from '@chakra-ui/react';
-import React, { FC } from 'react';
-import { IoEyeOutline, IoLockClosedOutline } from 'react-icons/io5';
+import React, { type FC } from 'react';
+import {
+  IoEyeOutline,
+  IoLockClosedOutline,
+  IoStarOutline,
+} from 'react-icons/io5';
 
 // components
 import AccountAvatar from '../AccountAvatar';
@@ -19,6 +23,7 @@ const AccountAvatarWithBadges: FC<IProps> = ({
   account,
   accounts,
   network,
+  systemInfo,
 }) => {
   // misc
   const accountInformation = network
@@ -35,7 +40,7 @@ const AccountAvatarWithBadges: FC<IProps> = ({
         p={1}
         placement="top-end"
       >
-        <Icon as={IoEyeOutline} color="white" h={iconSize} w={iconSize} />
+        <Icon as={IoEyeOutline} boxSize={iconSize} color="white" />
       </AvatarBadge>
     );
 
@@ -61,24 +66,32 @@ const AccountAvatarWithBadges: FC<IProps> = ({
 
   return (
     <AccountAvatar>
+      {/*polis account badge*/}
+      {systemInfo && systemInfo.polisAccountID === account.id && (
+        <AvatarBadge
+          bg="orange.500"
+          borderWidth={0}
+          boxSize="1.25em"
+          p={1}
+          placement="top-start"
+        >
+          <Icon as={IoStarOutline} boxSize={iconSize} color="white" />
+        </AvatarBadge>
+      )}
+
       {/*watch badge*/}
       {renderWatchAccountBadge()}
 
       {/*re-key badge*/}
       {accountInformation && accountInformation.authAddress && (
         <AvatarBadge
-          bg="orange.500"
+          bg="green.500"
           borderWidth={0}
           boxSize="1.25em"
           p={1}
           placement="bottom-end"
         >
-          <Icon
-            as={IoLockClosedOutline}
-            color="white"
-            h={iconSize}
-            w={iconSize}
-          />
+          <Icon as={IoLockClosedOutline} boxSize={2.5} color="white" />
         </AvatarBadge>
       )}
     </AccountAvatar>

src/extension/components/AccountAvatarWithBadges/types/IProps.ts

@@ -1,10 +1,15 @@
 // types
-import type { IAccountWithExtendedProps, INetwork } from '@extension/types';
+import type {
+  IAccountWithExtendedProps,
+  INetwork,
+  ISystemInfo,
+} from '@extension/types';
 
 interface IProps {
   account: IAccountWithExtendedProps;
   accounts: IAccountWithExtendedProps[];
   network: INetwork;
+  systemInfo: ISystemInfo | null;
 }
 
 export default IProps;

src/extension/components/AccountSelect/AccountSelectModal.tsx

@@ -39,7 +39,10 @@ import usePrimaryColorScheme from '@extension/hooks/usePrimaryColorScheme';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
 // selectors
-import { useSelectSettingsSelectedNetwork } from '@extension/selectors';
+import {
+  useSelectSettingsSelectedNetwork,
+  useSelectSystemInfo,
+} from '@extension/selectors';
 
 // theme
 import { theme } from '@extension/theme';
@@ -52,6 +55,7 @@ import type { TAccountSelectModalProps } from './types';
 import calculateIconSize from '@extension/utils/calculateIconSize';
 import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
 import ellipseAddress from '@extension/utils/ellipseAddress';
+import sortAccountsByPolisAccount from '@extension/utils/sortAccountsByPolisAccount';
 import upsertItemsById from '@extension/utils/upsertItemsById';
 
 const AccountSelectModal: FC<TAccountSelectModalProps> = ({
@@ -67,6 +71,7 @@ const AccountSelectModal: FC<TAccountSelectModalProps> = ({
   const { t } = useTranslation();
   // selectors
   const network = useSelectSettingsSelectedNetwork();
+  const systemInfo = useSelectSystemInfo();
   // hooks
   const buttonHoverBackgroundColor = useButtonHoverBackgroundColor();
   const defaultTextColor = useDefaultTextColor();
@@ -134,7 +139,14 @@ const AccountSelectModal: FC<TAccountSelectModalProps> = ({
       );
     }
 
-    return accounts.map((account, index) => {
+    return (
+      systemInfo?.polisAccountID
+        ? sortAccountsByPolisAccount({
+            accounts,
+            polisAccountID: systemInfo.polisAccountID,
+          })
+        : accounts
+    ).map((account, index) => {
       const address = convertPublicKeyToAVMAddress(account.publicKey);
 
       return (
@@ -188,6 +200,7 @@ const AccountSelectModal: FC<TAccountSelectModalProps> = ({
               account={account}
               accounts={accounts}
               network={network}
+              systemInfo={systemInfo}
             />
 
             {/*name/address*/}

src/extension/components/PolisAccountBadge/PolisAccountBadge.tsx

@@ -0,0 +1,26 @@
+import { Tag, TagLabel, TagLeftIcon, Tooltip } from '@chakra-ui/react';
+import React, { type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IoStarOutline } from 'react-icons/io5';
+
+// types
+import type { IProps } from './types';
+
+const PolisAccountBadge: FC<IProps> = ({ size = 'sm', tooltipLabel }) => {
+  const { t } = useTranslation();
+  // misc
+  const tag = (
+    <Tag borderRadius="full" colorScheme="orange" size={size} variant="solid">
+      <TagLeftIcon as={IoStarOutline} />
+      <TagLabel>{t('labels.primary')}</TagLabel>
+    </Tag>
+  );
+
+  if (tooltipLabel) {
+    return <Tooltip label={tooltipLabel}>{tag}</Tooltip>;
+  }
+
+  return tag;
+};
+
+export default PolisAccountBadge;

src/extension/components/PolisAccountBadge/index.ts

@@ -0,0 +1 @@
+export { default } from './PolisAccountBadge';

src/extension/components/PolisAccountBadge/types/IProps.ts

@@ -0,0 +1,8 @@
+import type { ResponsiveValue } from '@chakra-ui/react';
+
+interface IProps {
+  size?: ResponsiveValue<'size'>;
+  tooltipLabel?: string;
+}
+
+export default IProps;

src/extension/components/PolisAccountBadge/types/index.ts

@@ -0,0 +1 @@
+export type { default as IProps } from './IProps';

src/extension/components/RekeyedAccountBadge/ReKeyedAccountBadge.tsx

@@ -12,6 +12,9 @@ import { IoAlertCircleOutline, IoLockClosedOutline } from 'react-icons/io5';
 // types
 import type { IProps } from './types';
 
+// utils
+import ellipseAddress from '@extension/utils/ellipseAddress';
+
 const ReKeyedAccountBadge: FC<IProps> = ({
   authAddress,
   isAuthAccountAvailable = false,
@@ -21,13 +24,15 @@ const ReKeyedAccountBadge: FC<IProps> = ({
   const { t } = useTranslation();
   // misc
   const tag = (
-    <Tag borderRadius="full" colorScheme="orange" size={size} variant="solid">
+    <Tag borderRadius="full" colorScheme="green" size={size} variant="solid">
       <TagLeftIcon as={IoLockClosedOutline} />
 
-      <TagLabel>{t('labels.reKeyed')}</TagLabel>
+      <TagLabel>{`${t('labels.reKeyed')}: ${ellipseAddress(
+        authAddress
+      )}`}</TagLabel>
 
       {!isAuthAccountAvailable && (
-        <TagRightIcon as={IoAlertCircleOutline} color="red.300" />
+        <TagRightIcon as={IoAlertCircleOutline} color="red.600" />
       )}
     </Tag>
   );

src/extension/components/SideBar/SideBar.tsx

@@ -61,6 +61,7 @@ import {
   useSelectActiveAccountDetails,
   useSelectAvailableAccountsForSelectedNetwork,
   useSelectSettingsSelectedNetwork,
+  useSelectSystemInfo,
 } from '@extension/selectors';
 
 // types
@@ -84,6 +85,7 @@ const SideBar: FC = () => {
   const availableAccounts = useSelectAvailableAccountsForSelectedNetwork();
   const fetchingAccounts = useSelectAccountsFetching();
   const network = useSelectSettingsSelectedNetwork();
+  const systemInfo = useSelectSystemInfo();
   // hooks
   const borderColor = useBorderColor();
   const defaultTextColor = useDefaultTextColor();
@@ -245,6 +247,7 @@ const SideBar: FC = () => {
           network={network}
           onClick={handleOnAccountClick}
           onSort={handleOnAccountSort}
+          systemInfo={systemInfo}
         />
       </ScrollableContainer>
 

src/extension/components/SideBarAccountList/Item.tsx

@@ -45,6 +45,7 @@ const Item: FC<IItemProps> = ({
   isShortForm,
   network,
   onClick,
+  systemInfo,
 }) => {
   const {
     attributes,
@@ -120,6 +121,7 @@ const Item: FC<IItemProps> = ({
                 account={account}
                 accounts={accounts}
                 network={network}
+                systemInfo={systemInfo}
               />
             </Center>
 

src/extension/components/SideBarAccountList/SideBarAccountList.tsx

@@ -31,6 +31,7 @@ const SideBarAccountList: FC<IProps> = ({
   network,
   onClick,
   onSort,
+  systemInfo,
 }) => {
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -92,6 +93,7 @@ const SideBarAccountList: FC<IProps> = ({
                 key={value.id}
                 network={network}
                 onClick={handleOnClick}
+                systemInfo={systemInfo}
               />
             ))}
           </SortableContext>

src/extension/components/SideBarAccountList/types/IItemProps.ts

@@ -2,6 +2,7 @@
 import type {
   IAccountWithExtendedProps,
   INetworkWithTransactionParams,
+  ISystemInfo,
 } from '@extension/types';
 
 /**
@@ -14,6 +15,7 @@ interface IItemProps {
   isShortForm: boolean;
   network: INetworkWithTransactionParams;
   onClick: (id: string) => void;
+  systemInfo: ISystemInfo | null;
 }
 
 export default IItemProps;

src/extension/components/SideBarAccountList/types/IProps.ts

@@ -2,6 +2,7 @@
 import type {
   IAccountWithExtendedProps,
   INetworkWithTransactionParams,
+  ISystemInfo,
 } from '@extension/types';
 
 /**
@@ -15,6 +16,7 @@ interface IProps {
   network: INetworkWithTransactionParams | null;
   onClick: (id: string) => void;
   onSort: (accounts: IAccountWithExtendedProps[]) => void;
+  systemInfo: ISystemInfo | null;
 }
 
 export default IProps;

src/extension/features/system/enums/ThunkEnum.ts

@@ -1,6 +1,7 @@
 enum ThunkEnum {
   FetchFromStorage = 'system/fetchFromStorage',
   SaveDisableWhatsNewOnUpdate = 'system/saveDisableWhatsNewOnUpdate',
+  SavePolisAccountID = 'system/savePolisAccountID',
   SaveWhatsNewVersion = 'system/saveWhatsNewVersion',
   StartPollingForNetworkConnectivity = 'networks/startPollingForNetworkConnectivity',
   StopPollingForNetworkConnectivity = 'networks/stopPollingForNetworkConnectivity',

src/extension/features/system/slice.ts

@@ -1,4 +1,4 @@
-import { createSlice, PayloadAction, Reducer } from '@reduxjs/toolkit';
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
 import type { i18n } from 'i18next';
 
 // enums
@@ -8,6 +8,7 @@ import { StoreNameEnum } from '@extension/enums';
 import {
   fetchFromStorageThunk,
   saveDisableWhatsNewOnUpdateThunk,
+  savePolisAccountIDThunk,
   saveWhatsNewVersionThunk,
   startPollingForNetworkConnectivityThunk,
   stopPollingForTransactionsParamsThunk,
@@ -23,14 +24,14 @@ import { getInitialState } from './utils';
 
 const slice = createSlice({
   extraReducers: (builder) => {
-    /** fetch from storage **/
+    /**fetch from storage**/
     builder.addCase(
       fetchFromStorageThunk.fulfilled,
       (state: IState, action) => {
         state.info = action.payload;
       }
     );
-    /** save disable what's on update **/
+    /**save disable what's on update**/
     builder.addCase(
       saveDisableWhatsNewOnUpdateThunk.fulfilled,
       (state: IState, action) => {
@@ -45,7 +46,19 @@ const slice = createSlice({
         }
       }
     );
-    /** save what's new version **/
+    /**save polis account id**/
+    builder.addCase(
+      savePolisAccountIDThunk.fulfilled,
+      (state: IState, action) => {
+        if (state.info) {
+          state.info = {
+            ...state.info,
+            polisAccountID: action.payload,
+          };
+        }
+      }
+    );
+    /**save what's new version**/
     builder.addCase(
       saveWhatsNewVersionThunk.fulfilled,
       (state: IState, action) => {
@@ -60,21 +73,21 @@ const slice = createSlice({
         }
       }
     );
-    /** start polling for network connectivity **/
+    /**start polling for network connectivity**/
     builder.addCase(
       startPollingForNetworkConnectivityThunk.fulfilled,
       (state: IState, action) => {
         state.networkConnectivity.pollingID = action.payload;
       }
     );
-    /** stop polling for network connectivity **/
+    /**stop polling for network connectivity**/
     builder.addCase(
       stopPollingForTransactionsParamsThunk.fulfilled,
       (state: IState) => {
         state.networkConnectivity.pollingID = null;
       }
     );
-    /** update network connectivity **/
+    /**update network connectivity**/
     builder.addCase(
       updateNetworkConnectivityThunk.fulfilled,
       (state: IState, action) => {
@@ -107,5 +120,5 @@ const slice = createSlice({
   },
 });
 
-export const reducer: Reducer = slice.reducer;
+export const reducer = slice.reducer;
 export const { setI18nAction, setLogger } = slice.actions;

src/extension/features/system/thunks/index.ts

@@ -1,5 +1,6 @@
 export { default as fetchFromStorageThunk } from './fetchFromStorageThunk';
 export { default as saveDisableWhatsNewOnUpdateThunk } from './saveDisableWhatsNewOnUpdateThunk';
+export { default as savePolisAccountIDThunk } from './savePolisAccountIDThunk';
 export { default as saveWhatsNewVersionThunk } from './saveWhatsNewVersionThunk';
 export { default as startPollingForNetworkConnectivityThunk } from './startPollingForNetworkConnectivityThunk';
 export { default as stopPollingForTransactionsParamsThunk } from './stopPollingForTransactionsParamsThunk';