Skip to content

Commit

Permalink
Merge branch 'feat/sign-ui' into tmp/20241018
Browse files Browse the repository at this point in the history
  • Loading branch information
heisenberg-2077 committed Oct 15, 2024
2 parents eb5da18 + f13e37e commit c7df20c
Show file tree
Hide file tree
Showing 22 changed files with 162 additions and 301 deletions.
2 changes: 1 addition & 1 deletion _raw/locales/en/messages.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
"gasLimitLessThanGasUsed": "Gas limit is too low. There is 95% chance that the transaction may fail.",
"nativeTokenNotEngouthForGas": "Gas balance is not enough for transaction",
"nonceLowerThanExpect": "Nonce is too low, the minimum should be {{0}}",
"canOnlyUseImportedAddress": "You can only use imported addresses to sign",
"canOnlyUseImportedAddress": "You cannot sign transactions with a watch-only address.",
"multiSigChainNotMatch": "Multi-signature addresses are not on this chain and cannot initiate transactions",
"safeAddressNotSupportChain": "Current safe address is not supported on {{0}} chain",
"noGasRequired": "No gas required",
Expand Down
11 changes: 5 additions & 6 deletions src/background/service/keyring/eth-ledger-keyring.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
FeeMarketEIP1559Transaction,
} from '@ethereumjs/tx';
import { EVENTS } from 'consts';
import { isSameAddress, wait } from '@/background/utils';
import { isSameAddress } from '@/background/utils';
import { SignHelper, LedgerHDPathType } from './helper';

const type = 'Ledger Hardware';
Expand Down Expand Up @@ -303,11 +303,10 @@ class LedgerBridgeKeyring {
// wait connect the WebHID
while (!this.app) {
await this.makeApp();
await wait(() => {
if (count++ > 50) {
throw new Error('Ledger: Failed to connect to Ledger');
}
}, 100);
await new Promise((resolve) => setTimeout(resolve, 100));
if (count++ > 50) {
throw new Error('Ledger: Failed to connect to Ledger');
}
}
}

Expand Down
9 changes: 0 additions & 9 deletions src/background/utils/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,6 @@ export function normalizeAddress(input: number | string): string {
return ethUtil.addHexPrefix(input);
}

export const wait = (fn: () => void, ms = 1000) => {
return new Promise((resolve) => {
setTimeout(() => {
fn();
resolve(true);
}, ms);
});
};

export const setPageStateCacheWhenPopupClose = (data) => {
const cache = pageStateCache.get();
if (cache && cache.path === '/import/wallet-connect') {
Expand Down
19 changes: 2 additions & 17 deletions src/ui/component/AccountSearchInput/AddressItem.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Tooltip } from 'antd';
import clsx from 'clsx';
import { KEYRING_ICONS, WALLET_BRAND_CONTENT } from 'consts';
import React, {
memo,
MouseEventHandler,
Expand All @@ -15,12 +14,10 @@ import { useRabbySelector } from '@/ui/store';

import { ReactComponent as RcIconWhitelist } from 'ui/assets/address/whitelist.svg';
import { CopyChecked } from '@/ui/component/CopyChecked';
import { useWalletConnectIcon } from '@/ui/component/WalletConnect/useWalletConnectIcon';
import { CommonSignal } from '@/ui/component/ConnectStatus/CommonSignal';
import { useTranslation } from 'react-i18next';
import ThemeIcon from '../ThemeMode/ThemeIcon';
import { pickKeyringThemeIcon } from '@/utils/account';
import { useThemeMode } from '@/ui/hooks/usePreference';
import { useBrandIcon } from '@/ui/hooks/useBrandIcon';

export interface AddressItemProps {
balance: number;
Expand Down Expand Up @@ -60,24 +57,12 @@ const AddressItem = memo(
const alias = _alias || aliasName;
const titleRef = useRef<HTMLDivElement>(null);

const brandIcon = useWalletConnectIcon({
const addressTypeIcon = useBrandIcon({
address,
brandName,
type,
});

const { isDarkTheme } = useThemeMode();

const addressTypeIcon = useMemo(
() =>
brandIcon ||
pickKeyringThemeIcon(type as any, isDarkTheme) ||
KEYRING_ICONS[type] ||
pickKeyringThemeIcon(brandName as any, isDarkTheme) ||
WALLET_BRAND_CONTENT?.[brandName]?.image,
[type, brandName, brandIcon, isDarkTheme]
);

return (
<div
className={clsx(
Expand Down
49 changes: 49 additions & 0 deletions src/ui/hooks/useBrandIcon.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { useWalletConnectIcon } from '../component/WalletConnect/useWalletConnectIcon';
import { useThemeMode } from './usePreference';
import React from 'react';
import { pickKeyringThemeIcon } from '@/utils/account';
import {
KEYRING_ICONS,
KEYRINGS_LOGOS,
WALLET_BRAND_CONTENT,
} from '@/constant';

export const useBrandIcon = ({
address,
brandName,
type,
forceLight,
}: {
address: string;
brandName: string;
type: string;
forceLight?: boolean;
}) => {
const brandIcon = useWalletConnectIcon({
address,
brandName,
type,
});

const { isDarkTheme } = useThemeMode();

const addressTypeIcon = React.useMemo(
() =>
forceLight
? brandIcon ||
pickKeyringThemeIcon(type as any, {
needLightVersion: true,
}) ||
WALLET_BRAND_CONTENT?.[brandName]?.image ||
KEYRINGS_LOGOS[type]
: brandIcon ||
pickKeyringThemeIcon(brandName as any, {
needLightVersion: isDarkTheme,
}) ||
WALLET_BRAND_CONTENT?.[brandName]?.image ||
KEYRING_ICONS[type],
[type, brandName, brandIcon, isDarkTheme]
);

return addressTypeIcon;
};
8 changes: 7 additions & 1 deletion src/ui/utils/hooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,32 @@ import { useEffect, useRef, useState, useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import { Approval } from 'background/service/notification';
import { useWallet } from './WalletContext';
import { getUiType } from './index';
import { KEYRING_TYPE_TEXT, WALLET_BRAND_CONTENT } from '@/constant';
import { LedgerHDPathType, LedgerHDPathTypeLabel } from '@/ui/utils/ledger';
import { useApprovalPopup } from './approval-popup';
import { useRabbyDispatch, useRabbySelector } from '../store';
import { useTranslation } from 'react-i18next';
import { useDeviceConnect } from './useDeviceConnect';

export const useApproval = () => {
const wallet = useWallet();
const history = useHistory();
const { showPopup, enablePopup } = useApprovalPopup();

const getApproval: () => Promise<Approval> = wallet.getApproval;
const deviceConnect = useDeviceConnect();

const resolveApproval = async (
data?: any,
stay = false,
forceReject = false,
approvalId?: string
) => {
// handle connect
if (!deviceConnect(data.type)) {
return;
}

const approval = await getApproval();

if (approval) {
Expand Down
57 changes: 57 additions & 0 deletions src/ui/utils/useDeviceConnect.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { KEYRING_CLASS } from '@/constant';
import React from 'react';
import { useLedgerStatus } from '../component/ConnectStatus/useLedgerStatus';
import { useCommonPopupView } from './WalletContext';
import { useSessionStatus } from '../component/WalletConnect/useSessionStatus';
import { useCurrentAccount } from '../hooks/backgroundState/useAccount';
import { useImKeyStatus } from '../component/ConnectStatus/useImKeyStatus';

/**
* some devices require a connection to the device to sign transactions
* ledger, walletConnect, gridplus, etc
*/
export const useDeviceConnect = () => {
const ledgerStatus = useLedgerStatus();
const account = useCurrentAccount();
const walletConnectStatus = useSessionStatus(account!);
const imKeyStatus = useImKeyStatus();
const { activePopup, setAccount } = useCommonPopupView();

/**
* @returns {boolean} true if connected, false if not connected and popup is shown
*/
const connect = React.useCallback(
(type: string) => {
if (type === KEYRING_CLASS.HARDWARE.LEDGER) {
if (ledgerStatus.status === 'DISCONNECTED') {
activePopup('Ledger');
return false;
}
} else if (type === KEYRING_CLASS.WALLETCONNECT) {
if (
!walletConnectStatus.status ||
walletConnectStatus.status === 'DISCONNECTED'
) {
if (account) {
setAccount({
...account,
type,
});
}
activePopup('WalletConnect');
return false;
}
} else if (type === KEYRING_CLASS.HARDWARE.IMKEY) {
if (imKeyStatus.status === 'DISCONNECTED') {
activePopup('ImKeyPermission');
return false;
}
}

return true;
},
[ledgerStatus, walletConnectStatus, imKeyStatus, account]
);

return connect;
};
30 changes: 3 additions & 27 deletions src/ui/views/AddressManagement/AddressItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,8 @@ import { message, Tooltip } from 'antd';
import clsx from 'clsx';
import {
BRAND_ALIAN_TYPE_TEXT,
KEYRINGS_LOGOS,
KEYRING_CLASS,
KEYRING_ICONS,
KEYRING_TYPE_TEXT,
KeyringWithIcon,
WALLET_BRAND_CONTENT,
} from 'consts';
import React, {
Expand All @@ -31,11 +28,9 @@ import IconCheck from 'ui/assets/check.svg';
import { ReactComponent as RcIconWhitelist } from 'ui/assets/address/whitelist.svg';
import { CopyChecked } from '@/ui/component/CopyChecked';
import SkeletonInput from 'antd/lib/skeleton/Input';
import { useWalletConnectIcon } from '@/ui/component/WalletConnect/useWalletConnectIcon';
import { CommonSignal } from '@/ui/component/ConnectStatus/CommonSignal';
import { pickKeyringThemeIcon } from '@/utils/account';
import { useThemeMode } from '@/ui/hooks/usePreference';
import ThemeIcon from '@/ui/component/ThemeMode/ThemeIcon';
import { useBrandIcon } from '@/ui/hooks/useBrandIcon';

export interface AddressItemProps {
balance: number;
Expand Down Expand Up @@ -149,32 +144,13 @@ const AddressItem = memo(
};
}, []);

const brandIcon = useWalletConnectIcon({
const addressTypeIcon = useBrandIcon({
address,
brandName,
type,
forceLight: isCurrentAccount,
});

const { isDarkTheme } = useThemeMode();

const addressTypeIcon = useMemo(
() =>
isCurrentAccount
? brandIcon ||
pickKeyringThemeIcon(type as any, {
needLightVersion: true,
}) ||
WALLET_BRAND_CONTENT?.[brandName]?.image ||
KEYRINGS_LOGOS[type]
: brandIcon ||
pickKeyringThemeIcon(brandName as any, {
needLightVersion: isDarkTheme,
}) ||
WALLET_BRAND_CONTENT?.[brandName]?.image ||
KEYRING_ICONS[type],
[type, brandName, brandIcon, isDarkTheme]
);

return (
<div className={clsx(className, 'rabby-address-item-container relative')}>
{canFastDeleteAccount && (
Expand Down
Loading

0 comments on commit c7df20c

Please sign in to comment.