Skip to content

Commit

Permalink
fix: sign page bugs (#2236)
Browse files Browse the repository at this point in the history
* fix: enhancement of number input checking rule

* fix: remove the title attribute of gasSelector

* fix: gas ui

* feat: useApprovalUtils

* fix: remove screen height

* fix: remove
  • Loading branch information
heisenberg-2077 authored and richardo2016x committed Apr 29, 2024
1 parent a7e0f21 commit cae735e
Show file tree
Hide file tree
Showing 9 changed files with 130 additions and 30 deletions.
3 changes: 1 addition & 2 deletions src/background/controller/provider/rpcFlow.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import * as Sentry from '@sentry/browser';
import stats from '@/stats';
import { addHexPrefix, stripHexPrefix } from 'ethereumjs-util';
import { findChain } from '@/utils/chain';
import browser from 'webextension-polyfill';

const isSignApproval = (type: string) => {
const SIGN_APPROVALS = ['SignText', 'SignTypedData', 'SignTx'];
Expand All @@ -25,7 +24,7 @@ const lockedOrigins = new Set<string>();
const connectOrigins = new Set<string>();

const getScreenAvailHeight = async () => {
return (await browser.windows.getCurrent()).height || 1000;
return 1000;
};

const flow = new PromiseFlow<{
Expand Down
13 changes: 13 additions & 0 deletions src/constant/regexp.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/**
* Regex for input number
* 1. Can't have more than one dot
* 2. Can't have more than one leading zero
* 3. Can't have non-numeric characters
*/
export const INPUT_NUMBER_RE = /^(?!0{2,})[0-9]*(?!.*\..*\.)[0-9.]*$/;

// filter start with 0 or 0.
// replace start with . to 0.
export const filterNumber = (value: string = '') => {
return value.replace(/^0*(\d+)/, '$1').replace(/^\./, '0.');
};
9 changes: 8 additions & 1 deletion src/ui/component/TokenAmountInput/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { abstractTokenToTokenItem, getTokenSymbol } from 'ui/utils/token';
import TokenSelector, { TokenSelectorProps } from '../TokenSelector';
import TokenWithChain from '../TokenWithChain';
import './style.less';
import { INPUT_NUMBER_RE, filterNumber } from '@/constant/regexp';

interface TokenAmountInputProps {
token: TokenItem;
Expand Down Expand Up @@ -166,6 +167,12 @@ const TokenAmountInput = ({

const valueNum = Number(value);

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (INPUT_NUMBER_RE.test(e.target.value)) {
onChange?.(filterNumber(e.target.value));
}
};

return (
<div className={clsx('token-amount-input', className)}>
<div className="left" onClick={handleSelectToken}>
Expand All @@ -186,7 +193,7 @@ const TokenAmountInput = ({
placeholder="0"
className={clsx(!valueNum && 'h-[100%]')}
value={value}
onChange={(e) => onChange && onChange(e.target.value)}
onChange={handleChange}
title={value}
/>
{inlinePrize && (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
import React, { useRef } from 'react';
import React, { useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Form, Input } from 'antd';
import { useForm } from 'antd/lib/form/Form';
import { Popup } from 'ui/component';
import { useAlias } from '@/ui/utils';
import IconEdit from 'ui/assets/editpen.svg';
import { useApprovalUtils } from '../../../hooks/useApprovalUtils';

const AddressMemo = ({ address }: { address: string }) => {
const [addressAlias, updateAlias] = useAlias(address);
const { alias } = useApprovalUtils();
const addressAlias = alias.accountMap[address]?.alias;
const inputRef = useRef<Input>(null);
const [form] = useForm();
const { t } = useTranslation();

useEffect(() => {
alias.add(address);
}, [address]);

const updateAddressMemo = (
alias: string | undefined,
update: (memo: string) => void
update: (addr: string, memo: string) => void
) => {
form.setFieldsValue({
memo: alias,
Expand All @@ -34,7 +39,7 @@ const AddressMemo = ({ address }: { address: string }) => {
form
.validateFields()
.then((values) => {
return update(values.memo);
return update(address, values.memo);
})
.then(() => {
destroy();
Expand Down Expand Up @@ -80,7 +85,7 @@ const AddressMemo = ({ address }: { address: string }) => {
return (
<div
className="inline-flex cursor-pointer"
onClick={() => updateAddressMemo(addressAlias, updateAlias)}
onClick={() => updateAddressMemo(addressAlias, alias.update)}
>
<span className="mr-6">{addressAlias || '-'}</span>
<img src={IconEdit} className="icon-edit-alias icon w-[13px]" />
Expand Down
25 changes: 12 additions & 13 deletions src/ui/views/Approval/components/TxComponents/GasSelecter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { Chain } from '@debank/common';
import { getGasLevelI18nKey } from '@/ui/utils/trans';
import ThemeIcon from '@/ui/component/ThemeMode/ThemeIcon';
import { findChain } from '@/utils/chain';
import { INPUT_NUMBER_RE, filterNumber } from '@/constant/regexp';

export interface GasSelectorResponse extends GasLevel {
gasLimit: number;
Expand Down Expand Up @@ -380,8 +381,8 @@ const GasSelector = ({

const handleCustomGasChange = (e: React.ChangeEvent<HTMLInputElement>) => {
e.stopPropagation();
if (/^\d*(\.\d*)?$/.test(e.target.value)) {
setCustomGas(e.target.value);
if (INPUT_NUMBER_RE.test(e.target.value)) {
setCustomGas(filterNumber(e.target.value));
}
};

Expand Down Expand Up @@ -473,11 +474,8 @@ const GasSelector = ({
) => {
e.stopPropagation();

if (/^\d*(\.\d*)?$/.test(e.target.value)) {
let value = e?.target?.value || '';
if (value.trim() === '.') {
value = '0.';
}
if (INPUT_NUMBER_RE.test(e.target.value)) {
const value = filterNumber(e.target.value);
setCustomGas(value);

const gasObj = {
Expand Down Expand Up @@ -652,11 +650,11 @@ const GasSelector = ({
gas.error || !gas.success ? 'items-start mb-12' : 'mb-12'
)}
>
<div className="relative flex">
<div className="relative flex overflow-hidden">
<div className="gas-selector-card-title">
{t('page.signTx.gasSelectorTitle')}
</div>
<div className="gas-selector-card-content ml-4">
<div className="gas-selector-card-content ml-4 overflow-hidden">
{disabled ? (
<div className="font-semibold">
{t('page.signTx.noGasRequired')}
Expand All @@ -669,15 +667,17 @@ const GasSelector = ({
</>
) : (
<div className="gas-selector-card-content-item">
<div className="gas-selector-card-amount translate-y-1 flex items-center">
<span className="text-r-blue-default font-medium text-15">
<div className="gas-selector-card-amount translate-y-1 flex items-center overflow-hidden">
<span className="text-r-blue-default font-medium text-15 truncate">
{formatTokenAmount(
new BigNumber(gas.gasCostAmount).toString(10),
8
)}{' '}
{chain.nativeTokenSymbol}
</span>
&nbsp; ≈${new BigNumber(gas.gasCostUsd).toFixed(2)}
<span className="truncate">
&nbsp; ≈${new BigNumber(gas.gasCostUsd).toFixed(2)}
</span>
{L2_ENUMS.includes(chain.enum) &&
!CAN_ESTIMATE_L1_FEE_CHAINS.includes(chain.enum) && (
<span className="relative ml-6">
Expand Down Expand Up @@ -1070,7 +1070,6 @@ const GasSelectPanel = ({
'custom-input': item.level === 'custom',
active: selectedGas?.level === item.level,
})}
title={new BigNumber(item.price / 1e9).toFixed()}
>
{item.level === 'custom' ? (
<Input
Expand Down
44 changes: 44 additions & 0 deletions src/ui/views/Approval/hooks/useApprovalAlias.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { useWallet } from '@/ui/utils';
import React from 'react';

type AccountWithAliasName = {
address: string;
alias?: string;
};

export const useApprovalAlias = () => {
const [accounts, setAccounts] = React.useState<AccountWithAliasName[]>([]);
const wallet = useWallet();

const accountMap = React.useMemo(() => {
return accounts.reduce((acc, account) => {
acc[account.address] = account;
return acc;
}, {} as Record<string, AccountWithAliasName>);
}, [accounts]);

const add = React.useCallback(
async (address: string) => {
if (accounts.some((account) => account.address === address)) {
return accounts;
}
const alias = await wallet.getAlianName(address);
setAccounts([...accounts, { address, alias }]);
},
[accounts]
);

const update = React.useCallback((address: string, alias: string) => {
setAccounts((accounts) => {
return accounts.map((account) => {
if (account.address === address) {
wallet.updateAlianName(address, alias);
return { ...account, alias };
}
return account;
});
});
}, []);

return { accountMap, add, update };
};
30 changes: 30 additions & 0 deletions src/ui/views/Approval/hooks/useApprovalUtils.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React, { createContext, useContext } from 'react';
import { useApprovalAlias } from './useApprovalAlias';

/**
* useApprovalUtils
* @description some global state for approval page
*/
const useApprovalUtilsState = () => {
const alias = useApprovalAlias();

return { alias };
};

const ApprovalUtilsContext = createContext<
ReturnType<typeof useApprovalUtilsState>
>({} as any);

export const useApprovalUtils = () => {
return useContext(ApprovalUtilsContext);
};

export const ApprovalUtilsProvider = ({ children }) => {
const value = useApprovalUtilsState();

return (
<ApprovalUtilsContext.Provider value={value}>
{children}
</ApprovalUtilsContext.Provider>
);
};
14 changes: 8 additions & 6 deletions src/ui/views/Approval/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
import { Approval } from 'background/service/notification';
import { useWallet, useApproval } from 'ui/utils';
import { IExtractFromPromise } from '@/ui/utils/type';

import { ApprovalUtilsProvider } from './hooks/useApprovalUtils';
import * as ApprovalComponent from './components';

import './style.less';
Expand Down Expand Up @@ -49,11 +49,13 @@ const Approval: React.FC<{
return (
<div className={clsx('approval', className)}>
{approval && (
<CurrentApprovalComponent
params={params}
origin={origin}
// requestDefer={requestDefer}
/>
<ApprovalUtilsProvider>
<CurrentApprovalComponent
params={params}
origin={origin}
// requestDefer={requestDefer}
/>
</ApprovalUtilsProvider>
)}
</div>
);
Expand Down
5 changes: 3 additions & 2 deletions src/ui/views/SendToken/components/GasSelector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import styled from 'styled-components';
import { BigNumber } from 'bignumber.js';
import { getGasLevelI18nKey } from '@/ui/utils/trans';
import { findChain } from '@/utils/chain';
import { INPUT_NUMBER_RE, filterNumber } from '@/constant/regexp';

interface GasSelectorProps {
chainId: number;
Expand Down Expand Up @@ -71,8 +72,8 @@ const GasSelector = ({

const handleCustomGasChange = (e: React.ChangeEvent<HTMLInputElement>) => {
e.stopPropagation();
if (/^\d*(\.\d*)?$/.test(e.target.value)) {
setCustomGas(e.target.value);
if (INPUT_NUMBER_RE.test(e.target.value)) {
setCustomGas(filterNumber(e.target.value));
}
};

Expand Down

0 comments on commit cae735e

Please sign in to comment.