refactor(wallet): improve component imports (#1743)

* feat(wallet): Improve component imports. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat(wallet): improve imports. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat(wallet): revert not '_component' imports. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat(wallet): Change import to '_components'. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat(wallet): Change import to '_components'. Update after merge. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat(wallet): Update imports after merge develop. Fix PR comments. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat(wallet): Fixes after merge. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * fix: import --------- Signed-off-by: Eugene Panteleymonchuk <[email protected]> Co-authored-by: Mario <[email protected]> Co-authored-by: Begoña Alvarez <[email protected]>
iotaledger · Aug 14, 2024 · 18cbfd7 · 18cbfd7
1 parent b571920
commit 18cbfd7
Show file tree

Hide file tree

Showing 121 changed files with 266 additions and 256 deletions.
diff --git a/apps/wallet/configs/ts/tsconfig.common.json b/apps/wallet/configs/ts/tsconfig.common.json
@@ -30,6 +30,7 @@
             "_hooks": ["./src/ui/app/hooks/"],
             "_helpers": ["./src/ui/app/helpers/"],
             "_pages/*": ["./src/ui/app/pages/*"],
+            "_components": ["./src/ui/app/components"],
             "_components/*": ["./src/ui/app/components/*"],
             "_messaging/*": ["./src/shared/messaging/*"],
             "_messages": ["./src/shared/messaging/messages/"],

diff --git a/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx b/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx
@@ -15,7 +15,7 @@ import { toast } from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 import { object, string as YupString } from 'yup';
 
-import Alert from './alert';
+import { Alert } from '_components';
 
 const validation = object({
     password: YupString().ensure().required().label('Password'),

diff --git a/apps/wallet/src/ui/app/components/accounts/AccountBalanceItem.tsx b/apps/wallet/src/ui/app/components/accounts/AccountBalanceItem.tsx
@@ -5,7 +5,7 @@ import { Copy12 } from '@iota/icons';
 import { Text } from '_src/ui/app/shared/text';
 import { formatAddress } from '@iota/iota-sdk/utils';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
-import { IconButton } from '../IconButton';
+import { IconButton } from '_components';
 import { type SerializedUIAccount } from '_src/background/accounts/Account';
 import { useBalance, useFormatCoin } from '@iota/core';
 

diff --git a/apps/wallet/src/ui/app/components/accounts/AccountItem.tsx b/apps/wallet/src/ui/app/components/accounts/AccountItem.tsx
@@ -12,8 +12,7 @@ import { forwardRef, type ReactNode } from 'react';
 import { useAccounts } from '../../hooks/useAccounts';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
 import { useExplorerLink } from '../../hooks/useExplorerLink';
-import { ExplorerLinkType } from '../explorer-link/ExplorerLinkType';
-import { IconButton } from '../IconButton';
+import { ExplorerLinkType, IconButton } from '_components';
 import { EditableAccountName } from './EditableAccountName';
 
 interface AccountItemProps {

diff --git a/apps/wallet/src/ui/app/components/accounts/AccountItemApproveConnection.tsx b/apps/wallet/src/ui/app/components/accounts/AccountItemApproveConnection.tsx
@@ -2,9 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { AccountIcon } from '_components/accounts/AccountIcon';
-import { LockUnlockButton } from '_components/accounts/LockUnlockButton';
-import { useUnlockAccount } from '_components/accounts/UnlockAccountContext';
+import { AccountIcon, LockUnlockButton, useUnlockAccount } from '_components';
 import { type SerializedUIAccount } from '_src/background/accounts/Account';
 import { useResolveIotaNSName } from '@iota/core';
 import { CheckFill16 } from '@iota/icons';

diff --git a/apps/wallet/src/ui/app/components/accounts/AccountMultiSelect.tsx b/apps/wallet/src/ui/app/components/accounts/AccountMultiSelect.tsx
@@ -2,13 +2,11 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { AccountItemApproveConnection } from '_components/accounts/AccountItemApproveConnection';
+import { AccountItemApproveConnection, SelectAllButton } from '_components';
 import { type SerializedUIAccount } from '_src/background/accounts/Account';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import { useState } from 'react';
 
-import { SelectAllButton } from '_components/accounts/SelectAllButton';
-
 interface AccountMultiSelectProps {
     accounts: SerializedUIAccount[];
     selectedAccountIDs: string[];

diff --git a/apps/wallet/src/ui/app/components/accounts/LockUnlockButton.tsx b/apps/wallet/src/ui/app/components/accounts/LockUnlockButton.tsx
@@ -6,7 +6,7 @@ import { LockLocked16, LockUnlocked16 } from '@iota/icons';
 import { type ComponentPropsWithoutRef } from 'react';
 
 import { Tooltip } from '../../shared/tooltip';
-import LoadingIndicator from '../loading/LoadingIndicator';
+import { LoadingIndicator } from '_components';
 
 interface LockUnlockButtonProps extends ComponentPropsWithoutRef<'button'> {
     isLocked: boolean;

diff --git a/apps/wallet/src/ui/app/components/accounts/ProtectAccountForm.tsx b/apps/wallet/src/ui/app/components/accounts/ProtectAccountForm.tsx
@@ -55,7 +55,7 @@ const formSchema = z
     })
     .merge(zodSchema);
 
-export type FormValues = z.infer<typeof formSchema>;
+type FormValues = z.infer<typeof formSchema>;
 
 interface ProtectAccountFormProps {
     submitButtonText: string;

diff --git a/apps/wallet/src/ui/app/components/accounts/index.ts b/apps/wallet/src/ui/app/components/accounts/index.ts
@@ -0,0 +1,27 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './AccountBalanceItem';
+export * from './AccountIcon';
+export * from './AccountItem';
+export * from './AccountItemApproveConnection';
+export * from './AccountListItem';
+export * from './AccountMultiSelect';
+export * from './AccountsFormContext';
+export * from './AccountsList';
+export * from './AutoLockSelector';
+export * from './EditableAccountName';
+export * from './FooterLink';
+export * from './ImportPrivateKeyForm';
+export * from './ImportRecoveryPhraseForm';
+export * from './ImportSeedForm';
+export * from './LockUnlockButton';
+export * from './NicknameDialog';
+export * from './PasswordInputDialog';
+export * from './ProtectAccountForm';
+export * from './RecoverAccountsGroup';
+export * from './SelectAllButton';
+export * from './UnlockAccountButton';
+export * from './UnlockAccountContext';
+export * from './UnlockAccountModal';
+export * from './VerifyPasswordModal';
diff --git a/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx b/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx
@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { CoinIcon } from '_components/coin-icon';
+import { CoinIcon } from '_components';
 import { useFormatCoin } from '@iota/core';
 import { type ReactNode } from 'react';
 import {

diff --git a/apps/wallet/src/ui/app/components/active-coins-card/index.tsx b/apps/wallet/src/ui/app/components/active-coins-card/index.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useActiveAddress } from '_app/hooks/useActiveAddress';
-import Loading from '_components/loading';
+import { Loading } from '_components';
 import { useCoinsReFetchingConfig } from '_hooks';
 import { useIotaClientQuery } from '@iota/dapp-kit';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';

diff --git a/apps/wallet/src/ui/app/components/address-input/index.tsx b/apps/wallet/src/ui/app/components/address-input/index.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Text } from '_app/shared/text';
-import Alert from '_src/ui/app/components/alert';
+import { Alert } from '_components';
 import { useIotaClient } from '@iota/dapp-kit';
 import { QrCode, X12 } from '@iota/icons';
 import { isValidIotaAddress } from '@iota/iota-sdk/utils';

diff --git a/apps/wallet/src/ui/app/components/alert/index.tsx b/apps/wallet/src/ui/app/components/alert/index.tsx
@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import LoadingIndicator from '_components/loading/LoadingIndicator';
+import { LoadingIndicator } from '_components/loading/LoadingIndicator';
 import { CheckStroke16, Info16 } from '@iota/icons';
 import { cva, type VariantProps } from 'class-variance-authority';
 import type { ReactNode } from 'react';
@@ -49,10 +49,10 @@ const MODE_TO_ICON = {
     warning: <Info16 className="h-3.5 w-3.5" />,
     issue: <Info16 className="h-3.5 w-3.5" />,
     success: <CheckStroke16 className="h-3 w-3" />,
-    loading: <LoadingIndicator color="inherit" />,
+    loading: <LoadingIndicator color="inherit" />, // Note: Import LoadingIndicator using the exact file path, not just '_components' to avoid module resolution issues.
 };
 
-export default function Alert({
+export function Alert({
     children,
     noBorder,
     rounded,

diff --git a/apps/wallet/src/ui/app/components/error-boundary/index.tsx b/apps/wallet/src/ui/app/components/error-boundary/index.tsx
@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import Alert from '_components/alert';
+import { Alert } from '_components';
 import type { ReactNode } from 'react';
 import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
 import type { FallbackProps } from 'react-error-boundary';

diff --git a/apps/wallet/src/ui/app/components/explorer-link/index.tsx b/apps/wallet/src/ui/app/components/explorer-link/index.tsx
@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import ExternalLink from '_components/external-link';
+import { ExternalLink } from '_components';
 import { ArrowUpRight16 } from '@iota/icons';
 import { formatAddress } from '@iota/iota-sdk/utils';
 import type { ReactNode } from 'react';
@@ -20,7 +20,7 @@ export type ExplorerLinkProps = ExplorerLinkConfig & {
     showIcon?: boolean;
 };
 
-function ExplorerLink({
+export function ExplorerLink({
     track,
     children,
     className,
@@ -56,4 +56,6 @@ export function AddressLink({ address }: { address: string }) {
     );
 }
 
+export * from './ExplorerLinkType';
+
 export default ExplorerLink;
diff --git a/apps/wallet/src/ui/app/components/external-link/index.tsx b/apps/wallet/src/ui/app/components/external-link/index.tsx
@@ -13,7 +13,7 @@ export interface ExternalLinkProps {
     onClick?(): void;
 }
 
-function ExternalLink({ href, className, children, title, onClick }: ExternalLinkProps) {
+export function ExternalLink({ href, className, children, title, onClick }: ExternalLinkProps) {
     return (
         <a
             href={href}

diff --git a/apps/wallet/src/ui/app/components/index.ts b/apps/wallet/src/ui/app/components/index.ts
@@ -0,0 +1,45 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './DAppInfoCard';
+export * from './DAppPermissionsList';
+export * from './HideShowDisplayBox';
+export * from './IconButton';
+export * from './LabelValueItem';
+export * from './LabelValuesContainer';
+export * from './PageTemplate';
+export * from './PasswordInputDialog';
+export * from './SectionHeader';
+export * from './SummaryCard';
+export * from './WalletListSelect';
+export * from './accounts';
+export * from './active-coins-card';
+export * from './active-coins-card/CoinItem';
+export * from './address-input';
+export * from './alert';
+export * from './coin-icon';
+export * from './error-boundary';
+export * from './explorer-link';
+export * from './explorer-link/Explorer';
+export * from './explorer-link/ExplorerLinkType';
+export * from './external-link';
+export * from './iota-apps';
+export * from './iota-apps/IotaApp';
+export * from './ledger';
+export * from './loading';
+export * from './loading/LoadingIndicator';
+export * from './logo';
+export * from './menu';
+export * from './navigation';
+export * from './network-selector';
+export * from './nft-display';
+export * from './nft-display/NftImage';
+export * from './number-input';
+export * from './overlay';
+export * from './receipt-card';
+export * from './receipt-card/TxnAddress';
+export * from './receipt-card/TxnAmount';
+export * from './transactions-card';
+export * from './transactions-card/NoActivityCard';
+export * from './user-approve-container';
+export { default as FiltersPortal } from './filters-tags';
diff --git a/apps/wallet/src/ui/app/components/iota-apps/Banner.tsx b/apps/wallet/src/ui/app/components/iota-apps/Banner.tsx
@@ -6,7 +6,7 @@ import { ampli } from '_src/shared/analytics/ampli';
 import { Feature } from '_src/shared/experimentation/features';
 import { useFeature } from '@growthbook/growthbook-react';
 
-import ExternalLink from '../external-link';
+import { ExternalLink } from '_components';
 
 export type BannerProps = {
     enabled: boolean;

diff --git a/apps/wallet/src/ui/app/components/iota-apps/ConnectedAppsCard.tsx b/apps/wallet/src/ui/app/components/iota-apps/ConnectedAppsCard.tsx
@@ -12,7 +12,7 @@ import { useEffect, useMemo } from 'react';
 
 import { useBackgroundClient } from '../../hooks/useBackgroundClient';
 import { permissionsSelectors } from '../../redux/slices/permissions';
-import Loading from '../loading';
+import { Loading } from '_components';
 import { IotaApp, type DAppEntry } from './IotaApp';
 import { IotaAppEmpty } from './IotaAppEmpty';
 

diff --git a/apps/wallet/src/ui/app/components/iota-apps/DisconnectApp.tsx b/apps/wallet/src/ui/app/components/iota-apps/DisconnectApp.tsx
@@ -2,7 +2,13 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import Overlay from '_components/overlay';
+import {
+    Overlay,
+    DAppInfoCard,
+    DAppPermissionsList,
+    SummaryCard,
+    WalletListSelect,
+} from '_components';
 import { useAppSelector } from '_hooks';
 import { permissionsSelectors } from '_redux/slices/permissions';
 import { ampli } from '_src/shared/analytics/ampli';
@@ -14,10 +20,6 @@ import { toast } from 'react-hot-toast';
 import { useBackgroundClient } from '../../hooks/useBackgroundClient';
 import { Button } from '../../shared/ButtonUI';
 import { Text } from '../../shared/text';
-import { DAppInfoCard } from '../DAppInfoCard';
-import { DAppPermissionsList } from '../DAppPermissionsList';
-import { SummaryCard } from '../SummaryCard';
-import { WalletListSelect } from '../WalletListSelect';
 import { type DAppEntry } from './IotaApp';
 
 export interface DisconnectAppProps extends Omit<DAppEntry, 'description' | 'tags'> {

diff --git a/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx b/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ImageIcon } from '_app/shared/image-icon';
-import ExternalLink from '_components/external-link';
+import { ExternalLink } from '_components';
 import { ampli } from '_src/shared/analytics/ampli';
 import { getDAppUrl } from '_src/shared/utils';
 import { Text } from '_src/ui/app/shared/text';

diff --git a/apps/wallet/src/ui/app/components/iota-apps/index.tsx b/apps/wallet/src/ui/app/components/iota-apps/index.tsx
@@ -16,7 +16,7 @@ import { AppsPageBanner } from './Banner';
 import { IotaApp, type DAppEntry } from './IotaApp';
 import { IotaAppEmpty } from './IotaAppEmpty';
 
-function AppsPlayGround() {
+export function AppsPlayGround() {
     const ecosystemApps = useFeature<DAppEntry[]>(Feature.WalletDapps).value;
     const { tagName } = useParams();
 

diff --git a/apps/wallet/src/ui/app/components/ledger/ConnectLedgerModal.tsx b/apps/wallet/src/ui/app/components/ledger/ConnectLedgerModal.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ampli } from '_src/shared/analytics/ampli';
-import { useIotaLedgerClient } from '_src/ui/app/components/ledger/IotaLedgerClientProvider';
+import { useIotaLedgerClient } from '_components';
 import { Button } from '_src/ui/app/shared/ButtonUI';
 import {
     Dialog,

diff --git a/apps/wallet/src/ui/app/components/ledger/index.ts b/apps/wallet/src/ui/app/components/ledger/index.ts
@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './ConnectLedgerModal';
+export * from './IotaLedgerClientProvider';
+export * from './LedgerAccountList';
+export * from './LedgerAccountRow';
+export * from './ledgerErrors';
+export * from './useDeriveLedgerAccounts';
diff --git a/apps/wallet/src/ui/app/components/loading/LoadingIndicator.tsx b/apps/wallet/src/ui/app/components/loading/LoadingIndicator.tsx
@@ -16,7 +16,7 @@ const styles = cva('', {
 
 export type LoadingIndicatorProps = VariantProps<typeof styles>;
 
-function LoadingIndicator({ color = 'iota' }: LoadingIndicatorProps) {
+export function LoadingIndicator({ color = 'iota' }: LoadingIndicatorProps) {
     return <Spinner16 className={styles({ className: 'animate-spin', color })} />;
 }
 

diff --git a/apps/wallet/src/ui/app/components/loading/index.tsx b/apps/wallet/src/ui/app/components/loading/index.tsx
@@ -10,7 +10,7 @@ interface LoadingProps extends LoadingIndicatorProps {
     children: ReactNode | ReactNode[];
 }
 
-function Loading({ loading, children, ...indicatorProps }: LoadingProps) {
+export function Loading({ loading, children, ...indicatorProps }: LoadingProps) {
     return loading ? (
         <div className="flex h-full items-center justify-center">
             <LoadingIndicator {...indicatorProps} />

diff --git a/apps/wallet/src/ui/app/components/logo/index.tsx b/apps/wallet/src/ui/app/components/logo/index.tsx
@@ -17,7 +17,7 @@ const NETWORK_LOGOS = {
     [Network.Custom]: IotaCustomRpc,
 };
 
-function Logo({ network }: LogoProps) {
+export function Logo({ network }: LogoProps) {
     let LogoComponent = NETWORK_LOGOS[Network.Custom];
 
     if (network && NETWORK_LOGOS[network]) {

diff --git a/apps/wallet/src/ui/app/components/menu/button/WalletSettingsButton.tsx b/apps/wallet/src/ui/app/components/menu/button/WalletSettingsButton.tsx
@@ -6,7 +6,7 @@ import { ButtonOrLink } from '_src/ui/app/shared/utils/ButtonOrLink';
 import { HamburgerOpen24 as HamburgerOpenIcon, Settings24 as SettingsIcon } from '@iota/icons';
 import { cx } from 'class-variance-authority';
 
-import { useMenuIsOpen, useNextMenuUrl } from '../hooks';
+import { useMenuIsOpen, useNextMenuUrl } from '_components';
 
 export function WalletSettingsButton() {
     const isOpen = useMenuIsOpen();

diff --git a/apps/wallet/src/ui/app/components/menu/button/index.tsx b/apps/wallet/src/ui/app/components/menu/button/index.tsx
@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useMenuIsOpen, useNextMenuUrl } from '_components/menu/hooks';
+import { useMenuIsOpen, useNextMenuUrl } from '_components';
 import cl from 'clsx';
 import { memo } from 'react';
 import { Link } from 'react-router-dom';

diff --git a/apps/wallet/src/ui/app/components/menu/content/AutoLockAccounts.tsx b/apps/wallet/src/ui/app/components/menu/content/AutoLockAccounts.tsx
@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useNextMenuUrl } from '_components/menu/hooks';
+import { useNextMenuUrl, Loading, Overlay, AutoLockSelector, zodSchema } from '_components';
 import {
     autoLockDataToMinutes,
     parseAutoLock,
@@ -15,10 +15,6 @@ import { useZodForm } from '@iota/core';
 import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
-import { AutoLockSelector, zodSchema } from '../../accounts/AutoLockSelector';
-import Loading from '../../loading';
-import Overlay from '../../overlay';
-
 export function AutoLockAccounts() {
     const mainMenuUrl = useNextMenuUrl(true, '/');
     const navigate = useNavigate();