feat: group accounts

.github/workflows/pull_request_checks.yml

@@ -17,13 +17,41 @@ jobs:
       - name: "🔧 Setup"
         uses: ./.github/actions/use-dependencies
 
+  ##
+  # validation
+  ##
+
+  validate_pr_title:
+    name: "Validate PR Title"
+    needs: install
+    runs-on: ubuntu-latest
+    steps:
+      - name: "🛎 Checkout"
+        uses: actions/checkout@v4
+      - name: "🔧 Setup"
+        uses: ./.github/actions/use-dependencies
+      - name: "📥 Get PR Title"
+        id: get_pr_title
+        uses: actions/github-script@v7
+        with:
+          result-encoding: string
+          script: |
+            const { data } = await github.rest.pulls.get({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: context.payload.pull_request.number
+            });
+            return data.title;
+      - name: "✅ Validate"
+        run: echo "${{ steps.get_pr_title.outputs.result }}" | yarn commitlint
+
   ##
   # lint, type-check, build and test
   ##
 
   lint:
     name: "Lint"
-    needs: install
+    needs: [install, validate_pr_title]
     runs-on: ubuntu-latest
     steps:
       - name: "🛎 Checkout"
@@ -35,15 +63,15 @@ jobs:
 
   type_check:
     name: "Type Check"
-    needs: install
+    needs: [install, validate_pr_title]
     runs-on: ubuntu-latest
     steps:
       - name: "🛎 Checkout"
         uses: actions/checkout@v4
       - name: "🔧 Setup"
         uses: ./.github/actions/use-dependencies
       - name: "🔍 Type Check"
-        run: yarn types:check
+        run: yarn check:types
 
   test:
     name: "Test"
@@ -63,7 +91,7 @@ jobs:
 
   build_chrome:
     name: "Build Chrome"
-    needs: [install, type_check]
+    needs: [install, validate_pr_title, type_check]
     runs-on: ubuntu-latest
     environment: development
     steps:
@@ -80,7 +108,7 @@ jobs:
 
   build_edge:
     name: "Build Edge"
-    needs: [install, type_check]
+    needs: [install, validate_pr_title, type_check]
     runs-on: ubuntu-latest
     environment: development
     steps:
@@ -97,7 +125,7 @@ jobs:
 
   build_firefox:
     name: "Build Firefox"
-    needs: [install, type_check]
+    needs: [install, validate_pr_title, type_check]
     runs-on: ubuntu-latest
     environment: development
     steps:

package.json

@@ -9,7 +9,7 @@
   },
   "author": {
     "name": "Kieran O'Neill",
-    "email": "kieran@agoralabs.sh",
+    "email": "kieran@kibis.is",
     "url": "https://github.com/kieranroneill"
   },
   "license": "AGPL-3.0-or-later",
@@ -36,6 +36,7 @@
     "build:dapp-example": "cross-env TS_NODE_PROJECT=\"webpack/tsconfig.webpack.json\" webpack --config webpack/webpack.config.ts --config-name dapp-example --env environment=production",
     "build:edge": "cross-env TS_NODE_PROJECT=\"webpack/tsconfig.webpack.json\" webpack --config webpack/webpack.config.ts --config-name extension-scripts --config-name extension-apps --env environment=production --env target=edge",
     "build:firefox": "cross-env TS_NODE_PROJECT=\"webpack/tsconfig.webpack.json\" webpack --config webpack/webpack.config.ts --config-name extension-scripts --config-name extension-apps --env environment=production --env target=firefox",
+    "check:types": "tsc --noEmit",
     "install:chrome": "./scripts/install_chrome.sh",
     "install:firefox": "./scripts/install_firefox.sh",
     "lint": "eslint . --ext .ts --ext .tsx --ext .js",
@@ -51,7 +52,6 @@
     "start:firefox": "concurrently --names \"DAPP,EXTENSION\" -c \"blue.bold,magenta.bold\" \"yarn start:dapp-example\" \"yarn start:extension --env target=firefox\"",
     "test": "jest",
     "test:coverage": "jest --coverage",
-    "types:check": "tsc --noEmit",
     "validate:firefox": "addons-linter .firefox_build/"
   },
   "devDependencies": {
@@ -135,6 +135,7 @@
     "@reduxjs/toolkit": "^1.9.3",
     "@stablelib/base64": "^1.0.1",
     "@stablelib/hex": "^1.0.1",
+    "@stablelib/random": "^1.0.2",
     "@stablelib/utf8": "^1.0.1",
     "algosdk": "^2.7.0",
     "bignumber.js": "^9.1.1",
@@ -174,5 +175,6 @@
     "webpack-dev-middleware": "^5.3.4",
     "word-wrap": "^1.2.4",
     "yaml": "^2.2.2"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/extension/apps/main/App.tsx

@@ -15,7 +15,9 @@ import { reducer as arc200AssetsReducer } from '@extension/features/arc0200-asse
 import { reducer as credentialLockReducer } from '@extension/features/credential-lock';
 import { reducer as eventsReducer } from '@extension/features/events';
 import { reducer as layoutReducer } from '@extension/features/layout';
+import { reducer as manageGroupsModalReducer } from '@extension/features/manage-groups-modal';
 import { reducer as messagesReducer } from '@extension/features/messages';
+import { reducer as moveGroupModalReducer } from '@extension/features/move-group-modal';
 import { reducer as networksReducer } from '@extension/features/networks';
 import { reducer as notificationsReducer } from '@extension/features/notifications';
 import { reducer as passkeysReducer } from '@extension/features/passkeys';
@@ -51,7 +53,9 @@ const App: FC<IAppProps> = ({
       credentialLock: credentialLockReducer,
       events: eventsReducer,
       layout: layoutReducer,
+      manageGroupsModal: manageGroupsModalReducer,
       messages: messagesReducer,
+      moveGroupModal: moveGroupModalReducer,
       networks: networksReducer,
       notifications: notificationsReducer,
       passkeys: passkeysReducer,

src/extension/apps/main/Root.tsx

@@ -12,10 +12,12 @@ import { startPollingForAccountsThunk } from '@extension/features/accounts';
 import { fetchARC0072AssetsFromStorageThunk } from '@extension/features/arc0072-assets';
 import { fetchARC0200AssetsFromStorageThunk } from '@extension/features/arc0200-assets';
 import {
-  setConfirmModal,
+  openConfirmModal,
   setScanQRCodeModal,
   setWhatsNewModal,
 } from '@extension/features/layout';
+import { closeModal as closeManageGroupsModal } from '@extension/features/manage-groups-modal';
+import { closeModal as closeMoveGroupModal } from '@extension/features/move-group-modal';
 import { startPollingForTransactionsParamsThunk } from '@extension/features/networks';
 import { setShowingConfetti } from '@extension/features/notifications';
 import { reset as resetReKeyAccount } from '@extension/features/re-key-account';
@@ -41,6 +43,8 @@ import ARC0300KeyRegistrationTransactionSendEventModal from '@extension/modals/A
 import ConfirmModal from '@extension/modals/ConfirmModal';
 import CredentialLockModal from '@extension/modals/CredentialLockModal';
 import EnableModal from '@extension/modals/EnableModal';
+import ManageGroupsModal from '@extension/modals/ManageGroupsModal';
+import MoveGroupModal from '@extension/modals/MoveGroupModal';
 import ReKeyAccountModal from '@extension/modals/ReKeyAccountModal';
 import RemoveAssetsModal from '@extension/modals/RemoveAssetsModal';
 import ScanQRCodeModal from '@extension/modals/ScanQRCodeModal';
@@ -69,8 +73,10 @@ const Root: FC<IRootProps> = ({ i18n }) => {
   const whatsNewInfo = useSelectSystemWhatsNewInfo();
   // handlers
   const handleAddAssetsModalClose = () => dispatch(resetAddAsset());
-  const handleConfirmClose = () => dispatch(setConfirmModal(null));
+  const handleConfirmClose = () => dispatch(openConfirmModal(null));
   const handleConfettiComplete = () => dispatch(setShowingConfetti(false));
+  const handleManageGroupsModalClose = () => dispatch(closeManageGroupsModal());
+  const handleMoveGroupModalClose = () => dispatch(closeMoveGroupModal());
   const handleReKeyAccountModalClose = () => dispatch(resetReKeyAccount());
   const handleRemoveAssetsModalClose = () => dispatch(resetRemoveAssets());
   const handleScanQRCodeModalClose = () => dispatch(setScanQRCodeModal(null));
@@ -126,6 +132,8 @@ const Root: FC<IRootProps> = ({ i18n }) => {
       {/*action modals*/}
       <AddAssetsModal onClose={handleAddAssetsModalClose} />
       <AddAssetsForWatchAccountModal onClose={handleAddAssetsModalClose} />
+      <ManageGroupsModal onClose={handleManageGroupsModalClose} />
+      <MoveGroupModal onClose={handleMoveGroupModalClose} />
       <ReKeyAccountModal onClose={handleReKeyAccountModalClose} />
       <RemoveAssetsModal onClose={handleRemoveAssetsModalClose} />
       <SendAssetModal onClose={handleSendAssetModalClose} />

src/extension/components/AccountAvatar/AccountAvatar.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Icon } from '@chakra-ui/react';
+import { Avatar } from '@chakra-ui/react';
 import React, { type FC } from 'react';
 
 // hooks

src/extension/components/ActionItem/ActionItem.tsx

@@ -0,0 +1,78 @@
+import { Button as ChakraButton, HStack, Icon, Text } from '@chakra-ui/react';
+import React, { type FC } from 'react';
+import { IoChevronForward } from 'react-icons/io5';
+
+// constants
+import { DEFAULT_GAP, TAB_ITEM_HEIGHT } from '@extension/constants';
+
+// hooks
+import useButtonHoverBackgroundColor from '@extension/hooks/useButtonHoverBackgroundColor';
+import useColorModeValue from '@extension/hooks/useColorModeValue';
+import useSubTextColor from '@extension/hooks/useSubTextColor';
+
+// theme
+import { theme } from '@extension/theme';
+
+// types
+import type { IProps } from './types';
+
+// utils
+import calculateIconSize from '@extension/utils/calculateIconSize';
+
+const ActionItem: FC<IProps> = ({
+  icon,
+  isSelected = false,
+  label,
+  onClick,
+}) => {
+  // hooks
+  const buttonHoverBackgroundColor = useButtonHoverBackgroundColor();
+  const primaryButtonTextColor: string = useColorModeValue(
+    theme.colors.primaryLight['600'],
+    theme.colors.primaryDark['600']
+  );
+  const subTextColor = useSubTextColor();
+  // misc
+  const iconSize = calculateIconSize('md');
+  const textColor = isSelected ? primaryButtonTextColor : subTextColor;
+
+  return (
+    <ChakraButton
+      _hover={{
+        bg: buttonHoverBackgroundColor,
+      }}
+      alignItems="center"
+      backgroundColor={isSelected ? buttonHoverBackgroundColor : 'transparent'}
+      borderRadius="full"
+      fontSize="md"
+      h={TAB_ITEM_HEIGHT}
+      justifyContent="space-between"
+      onClick={onClick}
+      p={DEFAULT_GAP / 3}
+      rightIcon={
+        <Icon as={IoChevronForward} boxSize={iconSize} color={textColor} />
+      }
+      variant="ghost"
+      w="full"
+    >
+      <HStack
+        alignItems="center"
+        justifyContent="flex-start"
+        m={0}
+        p={DEFAULT_GAP / 2}
+        spacing={DEFAULT_GAP - 2}
+        w="full"
+      >
+        {/*icon*/}
+        <Icon as={icon} boxSize={iconSize} color={textColor} />
+
+        {/*content*/}
+        <Text color={textColor} noOfLines={1}>
+          {label}
+        </Text>
+      </HStack>
+    </ChakraButton>
+  );
+};
+
+export default ActionItem;

src/extension/components/ActionItem/index.ts

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

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

@@ -0,0 +1,10 @@
+import type { IconType } from 'react-icons';
+
+interface IProps {
+  icon: IconType;
+  isSelected?: boolean;
+  label: string;
+  onClick?: () => void;
+}
+
+export default IProps;

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

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