feat(wallet): rebrand balance section (#1863)

* feat(wallet): Home page. Update balance section. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat(wallet): Home page. Update balance section. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat(wallet): Redirect to send coins page after unlock. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat(wallet): Home balance section. Revert changing hook, update business-logic. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat(wallet): Home balance section. Disable when locked. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat(wallet): rebrand home. Updates after PR comments. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat(wallet): remove console.log Signed-off-by: Eugene Panteleymonchuk <[email protected]> --------- Signed-off-by: Eugene Panteleymonchuk <[email protected]> Co-authored-by: evavirseda <[email protected]>
iotaledger · Aug 26, 2024 · 134873d · 134873d
1 parent 3632ee8
commit 134873d
Show file tree

Hide file tree

Showing 9 changed files with 221 additions and 51 deletions.
diff --git a/apps/ui-icons/src/Send.tsx b/apps/ui-icons/src/Send.tsx
@@ -0,0 +1,23 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { SVGProps } from 'react';
+export default function SvgSend(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            fill="none"
+            viewBox="0 0 24 24"
+            {...props}
+        >
+            <path
+                fill="currentColor"
+                fillRule="evenodd"
+                d="m12.013 21.389-2.664-6.717-6.718-2.664c-.848-.337-.84-1.541.014-1.865l16.018-6.076c.806-.305 1.596.484 1.29 1.29l-6.076 16.018c-.324.854-1.528.863-1.864.014Zm-3.069-9.03 4.091-2.045a.5.5 0 0 1 .671.67l-2.045 4.092 1.26 3.18 4.374-11.53-11.53 4.373 3.18 1.26Z"
+                clipRule="evenodd"
+            />
+        </svg>
+    );
+}
diff --git a/apps/ui-icons/src/index.ts b/apps/ui-icons/src/index.ts
@@ -36,9 +36,9 @@ export { default as Handler } from './Handler';
 export { default as Home } from './Home';
 export { default as ImportPass } from './ImportPass';
 export { default as Info } from './Info';
+export { default as IotaLogoWeb } from './IotaLogoWeb';
 export { default as IotaLogoMark } from './IotaLogoMark';
 export { default as IotaLogoSmall } from './IotaLogoSmall';
-export { default as IotaLogoWeb } from './IotaLogoWeb';
 export { default as Key } from './Key';
 export { default as Ledger } from './Ledger';
 export { default as ListViewLarge } from './ListViewLarge';
@@ -61,6 +61,7 @@ export { default as RadioOn } from './RadioOn';
 export { default as Save } from './Save';
 export { default as Search } from './Search';
 export { default as Seed } from './Seed';
+export { default as Send } from './Send';
 export { default as Settings } from './Settings';
 export { default as SortByDefault } from './SortByDefault';
 export { default as SortByDown } from './SortByDown';

diff --git a/apps/ui-icons/svgs/send.svg b/apps/ui-icons/svgs/send.svg
diff --git a/apps/ui-kit/src/lib/components/molecules/account/Account.tsx b/apps/ui-kit/src/lib/components/molecules/account/Account.tsx
@@ -93,7 +93,7 @@ export function Account({
                     </div>
                     <Address
                         text={subtitle}
-                        onCopy={onCopy}
+                        onCopySuccess={onCopy}
                         onOpen={onOpen}
                         isCopyable={isCopyable}
                         isExternal={isExternal}

diff --git a/apps/ui-kit/src/lib/components/molecules/address/Address.tsx b/apps/ui-kit/src/lib/components/molecules/address/Address.tsx
@@ -19,10 +19,24 @@ interface AddressProps {
      * Has open icon  (optional).
      */
     isExternal?: boolean;
+
+    /**
+     * The link for external resource (optional).
+     */
+    externalLink?: string;
+
+    /**
+     * Text that need to be copied (optional).
+     */
+    copyText?: string;
     /**
-     * The onCopy event of the Address  (optional).
+     * The onCopySuccess event of the Address  (optional).
      */
-    onCopy?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onCopySuccess?: (e: React.MouseEvent<HTMLButtonElement>, text: string) => void;
+    /**
+     * The onCopyError event of the Address  (optional).
+     */
+    onCopyError?: (e: unknown, text: string) => void;
     /**
      * The onOpen event of the Address  (optional).
      */
@@ -33,24 +47,50 @@ export function Address({
     text,
     isCopyable,
     isExternal,
-    onCopy,
+    externalLink,
+    copyText = text,
+    onCopySuccess,
+    onCopyError,
     onOpen,
 }: AddressProps): React.JSX.Element {
+    async function handleCopyClick(event: React.MouseEvent<HTMLButtonElement>) {
+        if (!navigator.clipboard) {
+            return;
+        }
+
+        try {
+            await navigator.clipboard.writeText(copyText);
+            onCopySuccess?.(event, copyText);
+        } catch (error) {
+            console.error('Failed to copy:', error);
+            onCopyError?.(error, copyText);
+        }
+    }
+
+    function handleOpenClick(event: React.MouseEvent<HTMLButtonElement>) {
+        if (externalLink) {
+            const newWindow = window.open(externalLink, '_blank', 'noopener,noreferrer');
+            if (newWindow) newWindow.opener = null;
+        } else {
+            onOpen?.(event);
+        }
+    }
+
     return (
-        <div className="group flex flex-row items-center justify-center gap-1 text-neutral-40 dark:text-neutral-60">
+        <div className="group flex flex-row items-center gap-1 text-neutral-40 dark:text-neutral-60">
             <span className={cx('font-inter text-body-sm')}>{text}</span>
             {isCopyable && (
                 <ButtonUnstyled
-                    onClick={onCopy}
-                    className="opacity-0 focus:opacity-100 group-hover:opacity-100"
+                    onClick={handleCopyClick}
+                    className="opacity-0 group-hover:opacity-100"
                 >
                     <Copy />
                 </ButtonUnstyled>
             )}
             {isExternal && (
                 <ButtonUnstyled
-                    onClick={onOpen}
-                    className="opacity-0 focus:opacity-100 group-hover:opacity-100"
+                    onClick={handleOpenClick}
+                    className="opacity-0 group-hover:opacity-100"
                 >
                     <ArrowTopRight />
                 </ButtonUnstyled>

diff --git a/apps/wallet/src/ui/app/components/accounts/UnlockAccountContext.tsx b/apps/wallet/src/ui/app/components/accounts/UnlockAccountContext.tsx
@@ -3,17 +3,25 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { type SerializedUIAccount } from '_src/background/accounts/Account';
-import React, { createContext, useCallback, useContext, useState, type ReactNode } from 'react';
+import React, {
+    createContext,
+    useCallback,
+    useContext,
+    useState,
+    type ReactNode,
+    useRef,
+} from 'react';
 import { toast } from 'react-hot-toast';
-
 import { useBackgroundClient } from '../../hooks/useBackgroundClient';
 import { useUnlockMutation } from '../../hooks/useUnlockMutation';
 import { UnlockAccountModal } from './UnlockAccountModal';
 
+type OnSuccessCallback = () => void | Promise<void>;
+
 interface UnlockAccountContextType {
     isUnlockModalOpen: boolean;
     accountToUnlock: SerializedUIAccount | null;
-    unlockAccount: (account: SerializedUIAccount) => void;
+    unlockAccount: (account: SerializedUIAccount, onSuccessCallback?: OnSuccessCallback) => void;
     lockAccount: (account: SerializedUIAccount) => void;
     isPending: boolean;
     hideUnlockModal: () => void;
@@ -28,20 +36,26 @@ interface UnlockAccountProviderProps {
 export function UnlockAccountProvider({ children }: UnlockAccountProviderProps) {
     const [isUnlockModalOpen, setIsUnlockModalOpen] = useState(false);
     const [accountToUnlock, setAccountToUnlock] = useState<SerializedUIAccount | null>(null);
+    const onSuccessCallbackRef = useRef<OnSuccessCallback | undefined>();
     const unlockAccountMutation = useUnlockMutation();
     const backgroundClient = useBackgroundClient();
     const hideUnlockModal = useCallback(() => {
         setIsUnlockModalOpen(false);
         setAccountToUnlock(null);
+        onSuccessCallbackRef.current && onSuccessCallbackRef.current();
     }, []);
 
     const unlockAccount = useCallback(
-        async (account: SerializedUIAccount) => {
+        async (account: SerializedUIAccount, onSuccessCallback?: OnSuccessCallback) => {
             if (account) {
                 if (account.isPasswordUnlockable) {
                     // for password-unlockable accounts, show the unlock modal
                     setIsUnlockModalOpen(true);
                     setAccountToUnlock(account);
+
+                    if (onSuccessCallback) {
+                        onSuccessCallbackRef.current = onSuccessCallback;
+                    }
                 } else {
                     try {
                         // for non-password-unlockable accounts, unlock directly

diff --git a/apps/wallet/src/ui/app/hooks/index.ts b/apps/wallet/src/ui/app/hooks/index.ts
@@ -15,6 +15,7 @@ export { useTransactionDryRun } from './useTransactionDryRun';
 export { useGetTxnRecipientAddress } from './useGetTxnRecipientAddress';
 export { useGetTransferAmount } from './useGetTransferAmount';
 export { useOwnedNFT } from './useOwnedNFT';
+export { useCopyToClipboard } from './useCopyToClipboard';
 
 export * from './useTransactionData';
 export * from './useActiveAddress';