Skip to content

Commit 5d3ee1d

Browse files
0x74616e670x74616e67
authored
Merge pull request #801 from Conflux-Chain/dev
feat: release v2.14.0
2 parents 2ae7363 + 7d93a13 commit 5d3ee1d

File tree

31 files changed

+1736
-84
lines changed

31 files changed

+1736
-84
lines changed

‎src/app/components/AddressContainer/index.tsx

Lines changed: 110 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { Text } from '../Text/Loadable';
33
import { Link } from '../Link/Loadable';
4-
import { WithTranslation, withTranslation } from 'react-i18next';
4+
import { WithTranslation, withTranslation, Translation } from 'react-i18next';
55
import { translations } from 'locales/i18n';
66
import styled from 'styled-components/macro';
77
import {
@@ -14,7 +14,7 @@ import {
1414
isPosAddress,
1515
getUrl,
1616
} from 'utils';
17-
import { AlertTriangle, File } from '@zeit-ui/react-icons';
17+
import { AlertTriangle, File, Bookmark } from '@zeit-ui/react-icons';
1818
import ContractIcon from 'images/contract-icon.png';
1919
import isMeIcon from 'images/me.png';
2020
import InternalContractIcon from 'images/internal-contract-icon.png';
@@ -27,6 +27,8 @@ import {
2727
} from 'utils/constants';
2828
import { monospaceFont } from 'styles/variable';
2929
import SDK from 'js-conflux-sdk/dist/js-conflux-sdk.umd.min.js';
30+
import { useGlobalData } from 'utils/hooks/useGlobal';
31+
import { LOCALSTORAGE_KEYS_MAP } from 'utils/constants';
3032

3133
interface Props {
3234
value: string; // address value
@@ -37,10 +39,10 @@ interface Props {
3739
link?: boolean; // add link to address, default true
3840
isMe?: boolean; // when `address === portal selected address`, set isMe to true to add special tag, default false
3941
suffixAddressSize?: number; // suffix address size, default is 8
40-
prefixFloat?: boolean; // prefix icon float or take up space, default false
4142
showIcon?: boolean; // whether show contract icon, default true
4243
verify?: boolean; // show verified contract icon or unverified contract icon
4344
isEspaceAddress?: boolean; // check the address if is a eSpace hex address, if yes, link to https://evm.confluxscan.net/address/{hex_address}
45+
showLabeled?: boolean;
4446
}
4547

4648
const defaultPCMaxWidth = 138;
@@ -51,6 +53,32 @@ const defaultPCSuffixAddressSize =
5153
const defaultPCSuffixPosAddressSize = 10;
5254
const defaultMobileSuffixAddressSize = 4;
5355

56+
const getAddressLabelInfo = label => {
57+
if (label) {
58+
return {
59+
label,
60+
icon: (
61+
<IconWrapper>
62+
<Text
63+
span
64+
hoverValue={
65+
<Translation>
66+
{t => t(translations.profile.tip.label)}
67+
</Translation>
68+
}
69+
>
70+
<Bookmark color="var(--theme-color-gray2)" size={16} />
71+
</Text>
72+
</IconWrapper>
73+
),
74+
};
75+
}
76+
return {
77+
label: '',
78+
icon: null,
79+
};
80+
};
81+
5482
// ≈ 2.5 ms
5583
const RenderAddress = ({
5684
cfxAddress,
@@ -66,10 +94,11 @@ const RenderAddress = ({
6694
prefix = null,
6795
suffix = null,
6896
type = 'pow',
97+
addressLabel = '',
6998
}: any) => {
7099
const aftercontent =
71100
type === 'pow'
72-
? cfxAddress && !isFull && !alias
101+
? cfxAddress && !isFull && !addressLabel && !alias
73102
? cfxAddress.substr(-suffixSize)
74103
: ''
75104
: '';
@@ -101,7 +130,7 @@ const RenderAddress = ({
101130
alias={alias}
102131
aftercontent={aftercontent}
103132
>
104-
<span>{content || alias || cfxAddress}</span>
133+
<span>{content || addressLabel || alias || cfxAddress}</span>
105134
</LinkWrapper>
106135
);
107136
}
@@ -113,15 +142,42 @@ const RenderAddress = ({
113142
alias={alias}
114143
aftercontent={aftercontent}
115144
>
116-
<span>{content || alias || cfxAddress}</span>
145+
<span>{content || addressLabel || alias || cfxAddress}</span>
117146
</PlainWrapper>
118147
);
119148
}
120149

121150
return (
122151
<AddressWrapper>
123152
{prefix}
124-
<Text span hoverValue={hoverValue || cfxAddress}>
153+
<Text
154+
span
155+
hoverValue={
156+
<>
157+
{addressLabel ? (
158+
<>
159+
<span>
160+
<Translation>
161+
{t => t(translations.profile.address.myNameTag)}
162+
</Translation>
163+
</span>
164+
{addressLabel}
165+
</>
166+
) : null}
167+
<div>{hoverValue || cfxAddress}</div>
168+
{addressLabel && alias ? (
169+
<>
170+
<span>
171+
<Translation>
172+
{t => t(translations.profile.address.publicNameTag)}
173+
</Translation>
174+
</span>
175+
{alias}
176+
</>
177+
) : null}
178+
</>
179+
}
180+
>
125181
{text}
126182
</Text>
127183
{suffix}
@@ -142,12 +198,14 @@ export const AddressContainer = withTranslation()(
142198
link = true,
143199
isMe = false,
144200
suffixAddressSize,
145-
prefixFloat = false,
146201
showIcon = true,
147202
t,
148203
verify = false,
149204
isEspaceAddress,
205+
showLabeled = true,
150206
}: Props & WithTranslation) => {
207+
const [globalData = {}] = useGlobalData();
208+
151209
const suffixSize =
152210
suffixAddressSize ||
153211
(window.innerWidth <= sizes.m
@@ -161,18 +219,33 @@ export const AddressContainer = withTranslation()(
161219
);
162220

163221
if (contractCreated) {
222+
let addressLabel: React.ReactNode = null,
223+
addressLabelIcon: React.ReactNode = null;
224+
225+
if (showLabeled) {
226+
const { label, icon } = getAddressLabelInfo(
227+
globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][
228+
formatAddress(contractCreated)
229+
],
230+
);
231+
232+
addressLabel = label;
233+
addressLabelIcon = icon;
234+
}
235+
164236
return RenderAddress({
165237
cfxAddress: '',
166-
alias,
238+
alias: alias || txtContractCreation,
239+
addressLabel,
167240
hoverValue: formatAddress(contractCreated),
168241
hrefAddress: formatAddress(contractCreated),
169-
content: txtContractCreation,
170242
link,
171243
isFull,
172244
maxWidth: 160,
173245
suffixSize,
174246
prefix: (
175-
<IconWrapper className={prefixFloat ? 'float' : ''}>
247+
<IconWrapper>
248+
{addressLabelIcon}
176249
<Text span hoverValue={txtContractCreation}>
177250
<img src={ContractIcon} alt={txtContractCreation} />
178251
</Text>
@@ -216,7 +289,7 @@ export const AddressContainer = withTranslation()(
216289
maxWidth,
217290
suffixSize: 0,
218291
prefix: (
219-
<IconWrapper className={prefixFloat ? 'float' : ''}>
292+
<IconWrapper>
220293
<Text span hoverValue={tip}>
221294
<File size={16} color="#17B38A" />
222295
</Text>
@@ -239,7 +312,7 @@ export const AddressContainer = withTranslation()(
239312
suffixSize,
240313
style: { color: '#e00909' },
241314
prefix: (
242-
<IconWrapper className={prefixFloat ? 'float' : ''}>
315+
<IconWrapper>
243316
<Text span hoverValue={tip}>
244317
<AlertTriangle size={16} color="#e00909" />
245318
</Text>
@@ -259,6 +332,19 @@ export const AddressContainer = withTranslation()(
259332
alias = t(translations.general.zeroAddress);
260333
}
261334

335+
let addressLabel: React.ReactNode = null,
336+
addressLabelIcon: React.ReactNode = null;
337+
if (showLabeled) {
338+
const { label, icon } = getAddressLabelInfo(
339+
globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][
340+
formatAddress(cfxAddress)
341+
],
342+
);
343+
344+
addressLabel = label;
345+
addressLabelIcon = icon;
346+
}
347+
262348
if (isContractAddress(cfxAddress) || isInnerContractAddress(cfxAddress)) {
263349
const typeText = t(
264350
isInnerContractAddress(cfxAddress)
@@ -270,16 +356,14 @@ export const AddressContainer = withTranslation()(
270356
return RenderAddress({
271357
cfxAddress,
272358
alias,
359+
addressLabel,
273360
link,
274361
isFull,
275362
maxWidth,
276363
suffixSize,
277364
prefix: showIcon ? (
278-
<IconWrapper
279-
className={`${isFull ? 'icon' : ''} ${
280-
prefixFloat ? 'float' : ''
281-
}`}
282-
>
365+
<IconWrapper className={`${isFull ? 'icon' : ''}`}>
366+
{addressLabelIcon}
283367
<Text span hoverValue={typeText}>
284368
<ImgWrapper>
285369
{isInnerContractAddress(cfxAddress) ? (
@@ -307,12 +391,13 @@ export const AddressContainer = withTranslation()(
307391
return RenderAddress({
308392
cfxAddress,
309393
alias,
394+
addressLabel,
310395
link,
311396
isFull,
312397
maxWidth,
313398
suffixSize,
314399
suffix: (
315-
<IconWrapper className={prefixFloat ? 'float' : ''}>
400+
<IconWrapper>
316401
<img
317402
src={isMeIcon}
318403
alt="is me"
@@ -330,10 +415,12 @@ export const AddressContainer = withTranslation()(
330415
return RenderAddress({
331416
cfxAddress,
332417
alias,
418+
addressLabel,
333419
link,
334420
isFull,
335421
maxWidth,
336422
suffixSize,
423+
prefix: addressLabelIcon,
337424
});
338425
},
339426
),
@@ -349,7 +436,6 @@ export const PoSAddressContainer = withTranslation()(
349436
link = true,
350437
isMe = false,
351438
suffixAddressSize,
352-
prefixFloat = false,
353439
t,
354440
}: Props & WithTranslation) => {
355441
const suffixSize =
@@ -378,7 +464,7 @@ export const PoSAddressContainer = withTranslation()(
378464
suffixSize,
379465
style: { color: '#e00909' },
380466
prefix: (
381-
<IconWrapper className={prefixFloat ? 'float' : ''}>
467+
<IconWrapper>
382468
<Text span hoverValue={tip}>
383469
<AlertTriangle size={16} color="#e00909" />
384470
</Text>
@@ -403,7 +489,7 @@ export const PoSAddressContainer = withTranslation()(
403489
maxWidth,
404490
suffixSize,
405491
suffix: (
406-
<IconWrapper className={prefixFloat ? 'float' : ''}>
492+
<IconWrapper>
407493
<img
408494
src={isMeIcon}
409495
alt="is me"
@@ -458,10 +544,6 @@ const IconWrapper = styled.span`
458544
margin-right: 2px;
459545
flex-shrink: 0;
460546
461-
&.float {
462-
margin-left: -18px;
463-
}
464-
465547
svg {
466548
vertical-align: bottom;
467549
margin-bottom: 4px;
@@ -487,7 +569,7 @@ const addressStyle = (props: any) => `
487569
display: inline-flex !important;
488570
flex-wrap: nowrap;
489571
max-width: ${
490-
props.maxwidth || (props.alias ? 180 : defaultPCMaxWidth)
572+
props.maxwidth || (props.alias ? 160 : defaultPCMaxWidth)
491573
}px !important;
492574
outline: none;
493575
@@ -500,7 +582,7 @@ const addressStyle = (props: any) => `
500582
501583
${media.m} {
502584
max-width: ${
503-
props.maxwidth || (props.alias ? 160 : defaultMobileMaxWidth)
585+
props.maxwidth || (props.alias ? 140 : defaultMobileMaxWidth)
504586
}px !important;
505587
}
506588

‎src/app/components/ConnectWallet/Button.tsx

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ import { ScanEvent } from 'utils/gaConstants';
1818
import { NETWORK_TYPE, NETWORK_TYPES } from 'utils/constants';
1919
import SDK from 'js-conflux-sdk/dist/js-conflux-sdk.umd.min.js';
2020
import { getBalance } from 'utils/rpcRequest';
21+
import { useGlobalData } from 'utils/hooks/useGlobal';
22+
import { LOCALSTORAGE_KEYS_MAP } from 'utils/constants';
23+
import { Bookmark } from '@zeit-ui/react-icons';
24+
import { Text } from '../Text/Loadable';
2125

2226
import iconLoadingWhite from './assets/loading-white.svg';
2327

@@ -28,14 +32,14 @@ interface Button {
2832
}
2933

3034
export const Button = ({ className, onClick, showBalance }: Button) => {
35+
const [globalData = {}] = useGlobalData();
3136
const { t } = useTranslation();
3237
const [balance, setBalance] = useState('0');
3338
const { installed, connected, accounts } = usePortal();
34-
3539
const { pendingRecords } = useContext(TxnHistoryContext);
3640
const { isValid } = useCheckHook(true);
3741

38-
let buttonText = t(translations.connectWallet.button.text);
42+
let buttonText: React.ReactNode = t(translations.connectWallet.button.text);
3943
let buttonStatus: React.ReactNode = '';
4044
let hasPendingRecords = connected === 1 && !!pendingRecords.length;
4145

@@ -53,10 +57,24 @@ export const Button = ({ className, onClick, showBalance }: Button) => {
5357
count: pendingRecords.length,
5458
});
5559
} else {
56-
buttonText =
57-
NETWORK_TYPE === NETWORK_TYPES.mainnet
58-
? accounts[0].replace(/(.*:.{3}).*(.{8})/, '$1...$2')
59-
: accounts[0].replace(/(.*:.{3}).*(.{4})/, '$1...$2');
60+
const addressLabel =
61+
globalData[LOCALSTORAGE_KEYS_MAP.addressLabel]?.[accounts[0]];
62+
const addressLabelIcon = (
63+
<Text span hoverValue={t(translations.profile.tip.label)}>
64+
<Bookmark color="var(--theme-color-gray2)" size={16} />
65+
</Text>
66+
);
67+
68+
buttonText = addressLabel ? (
69+
<StyledAddressLabelWrapper>
70+
{addressLabelIcon}
71+
{addressLabel}
72+
</StyledAddressLabelWrapper>
73+
) : NETWORK_TYPE === NETWORK_TYPES.mainnet ? (
74+
accounts[0].replace(/(.*:.{3}).*(.{8})/, '$1...$2')
75+
) : (
76+
accounts[0].replace(/(.*:.{3}).*(.{4})/, '$1...$2')
77+
);
6078
buttonStatus = <span className="button-status-online"></span>;
6179
}
6280
}
@@ -172,3 +190,9 @@ const ButtonWrapper = styled.div`
172190
flex-grow: 1;
173191
}
174192
`;
193+
194+
const StyledAddressLabelWrapper = styled.span`
195+
display: inline-flex;
196+
vertical-align: middle;
197+
line-height: 2;
198+
`;

0 commit comments

Comments
 (0)