Skip to content

Commit 417ce36

Browse files
jinoosssjinoosss
authored
feat: adjust approve transaction popup ui (#714)
1 parent d0cc9cd commit 417ce36

File tree

16 files changed

+183
-53
lines changed

16 files changed

+183
-53
lines changed

‎packages/adena-extension/src/common/mapper/transaction-mapper.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ export function mappedTransactionMessages(
88
): ContractMessage[] {
99
return messages
1010
.map((message) => {
11-
console.log(message);
1211
switch (message.type) {
1312
case '/bank.MsgSend':
1413
return {

‎packages/adena-extension/src/components/molecules/approve-transaction-loading/approve-transaction-loading.styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const ApproveTransactionLoadingWrapper = styled.div`
1616
}
1717
1818
.domain-skeleton {
19-
margin: 24px auto;
19+
margin: 24px auto 12px auto;
2020
}
2121
`;
2222

‎packages/adena-extension/src/components/molecules/approve-transaction-message-box/approve-transaction-message-box.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,38 @@
1-
import React from 'react';
1+
import React, { useMemo } from 'react';
22

33
import { ContractMessage } from '@adena-wallet/sdk';
44

5+
import { GnoArgumentInfo } from '@inject/message/methods/gno-connect';
56
import ApproveTransactionMessage from '../approve-transaction-message/approve-transaction-message';
67
import { ApproveTransactionMessageBoxWrapper } from './approve-transaction-message-box.styles';
78

89
export interface ApproveTransactionMessageBoxProps {
910
messages: ContractMessage[];
11+
argumentInfos?: GnoArgumentInfo[];
1012
changeMessages: (messages: ContractMessage[]) => void;
1113
openScannerLink: (path: string, parameters?: { [key in string]: string }) => void;
1214
}
1315

1416
const ApproveTransactionMessageBox: React.FC<ApproveTransactionMessageBoxProps> = ({
1517
messages,
18+
argumentInfos,
1619
changeMessages,
1720
openScannerLink,
1821
}) => {
22+
const argumentKeyMap = useMemo(() => {
23+
if (!argumentInfos) {
24+
return undefined;
25+
}
26+
27+
return argumentInfos.reduce(
28+
(acc, info) => {
29+
acc[info.index] = info.key;
30+
return acc;
31+
},
32+
{} as Record<number, string>,
33+
);
34+
}, [argumentInfos]);
35+
1936
const changeMessage = (index: number, message: ContractMessage): void => {
2037
const newMessages = [...messages];
2138
newMessages[index] = message;
@@ -33,6 +50,7 @@ const ApproveTransactionMessageBox: React.FC<ApproveTransactionMessageBoxProps>
3350
key={index}
3451
index={index}
3552
message={message}
53+
argumentKeyMap={argumentKeyMap}
3654
changeMessage={changeMessage}
3755
openScannerLink={openScannerLink}
3856
/>

‎packages/adena-extension/src/components/molecules/approve-transaction-message/approve-transaction-message.styles.ts‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,21 @@ export const ApproveTransactionMessageWrapper = styled(View)`
1010
margin-bottom: 8px;
1111
background-color: ${getTheme('neutral', '_9')};
1212
13-
.row {
13+
.message-row {
1414
${mixins.flex({ direction: 'row' })};
1515
position: relative;
16-
padding: 10px 18px;
16+
width: 100%;
17+
padding: 10px 0;
1718
justify-content: space-between;
1819
border-bottom: 2px solid ${getTheme('neutral', '_8')};
19-
${fonts.body1Reg};
20+
${fonts.body2Reg};
2021
2122
&:last-child {
2223
border-bottom: none;
2324
}
2425
2526
&.argument {
26-
padding: 0 0 0 18px;
27+
padding: 0;
2728
}
2829
2930
.key {
@@ -68,13 +69,23 @@ export const ApproveTransactionMessageWrapper = styled(View)`
6869
}
6970
`;
7071

72+
export const MessageRowWrapper = styled(View)`
73+
${mixins.flex({ direction: 'column' })};
74+
position: relative;
75+
width: 100%;
76+
padding: 0 18px;
77+
justify-content: flex-start;
78+
border-bottom: 2px solid ${getTheme('neutral', '_8')};
79+
`;
80+
7181
export const ApproveTransactionMessageArgumentsOpenerWrapper = styled(View)`
7282
${mixins.flex({ direction: 'row', align: 'center', justify: 'space-between' })};
7383
width: 100%;
7484
height: auto;
7585
color: ${getTheme('neutral', 'a')};
7686
padding: 14px 18px;
7787
${fonts.body1Bold};
88+
border-bottom: 2px solid ${getTheme('neutral', '_8')};
7889
7990
& .title-wrapper {
8091
${mixins.flex({ direction: 'row', align: 'center', justify: 'space-between' })};
@@ -101,20 +112,23 @@ export const ApproveTransactionMessageArgumentsOpenerWrapper = styled(View)`
101112

102113
export const RealmPathInfoWrapper = styled.span`
103114
display: block;
104-
max-width: 157px;
115+
max-width: 191px;
105116
text-align: right;
106117
text-overflow: ellipsis;
107118
overflow: hidden;
108-
${fonts.body1Reg};
119+
${fonts.body2Reg};
109120
direction: rtl;
110-
color: ${getTheme('neutral', 'a')};
121+
& .domain-path {
122+
color: ${getTheme('neutral', 'a')};
123+
font-weight: 400;
124+
}
111125
112126
& .namespace-path {
113127
color: ${getTheme('neutral', '_1')};
114128
font-weight: 400;
115129
}
116130
117-
& .contract {
131+
& .contract-path {
118132
color: ${getTheme('neutral', '_1')};
119133
font-weight: 700;
120134
}

‎packages/adena-extension/src/components/molecules/approve-transaction-message/approve-transaction-message.tsx‎

Lines changed: 45 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import IconLink from '@assets/icon-link';
1313
import {
1414
ApproveTransactionMessageArgumentsOpenerWrapper,
1515
ApproveTransactionMessageWrapper,
16+
MessageRowWrapper,
1617
RealmPathInfoWrapper,
1718
} from './approve-transaction-message.styles';
1819

@@ -27,16 +28,22 @@ function isMsgCall(type: string): boolean {
2728
return type === '/vm.m_call';
2829
}
2930

31+
function makeTitle(index: number, functionName: string): string {
32+
return `${index + 1}. ${functionName}`;
33+
}
34+
3035
export interface ApproveTransactionMessageProps {
3136
index: number;
3237
message: ContractMessage;
38+
argumentKeyMap?: Record<number, string>;
3339
changeMessage: (index: number, messages: ContractMessage) => void;
3440
openScannerLink: (path: string, parameters?: { [key in string]: string }) => void;
3541
}
3642

3743
const ApproveTransactionMessage: React.FC<ApproveTransactionMessageProps> = ({
3844
index,
3945
message,
46+
argumentKeyMap,
4047
changeMessage,
4148
openScannerLink,
4249
}) => {
@@ -47,6 +54,7 @@ const ApproveTransactionMessage: React.FC<ApproveTransactionMessageProps> = ({
4754
<MsgCallTransactionMessage
4855
index={index}
4956
message={message}
57+
argumentKeyMap={argumentKeyMap}
5058
changeMessage={changeMessage}
5159
openScannerLink={openScannerLink}
5260
/>
@@ -63,29 +71,36 @@ const ApproveTransactionMessage: React.FC<ApproveTransactionMessageProps> = ({
6371
);
6472
};
6573

66-
const DefaultTransactionMessage: React.FC<ApproveTransactionMessageProps> = ({ message }) => {
74+
const DefaultTransactionMessage: React.FC<ApproveTransactionMessageProps> = ({
75+
index,
76+
message,
77+
}) => {
6778
const { type } = message;
6879
const [isOpen, setIsOpen] = useState(true);
6980

7081
const functionName = useMemo(() => {
7182
return functionNameMap[type] || 'Unknown';
7283
}, [type]);
7384

85+
const title = useMemo(() => {
86+
return makeTitle(index, functionName);
87+
}, [functionName, index]);
88+
7489
return (
7590
<ApproveTransactionMessageWrapper>
76-
<MessageBoxArgumentsOpener title={functionName} isOpen={isOpen} setIsOpen={setIsOpen} />
91+
<MessageBoxArgumentsOpener title={title} isOpen={isOpen} setIsOpen={setIsOpen} />
7792

7893
{isOpen && (
79-
<React.Fragment>
80-
<div className='row'>
94+
<MessageRowWrapper>
95+
<div className='message-row'>
8196
<span className='key'>Type</span>
8297
<span className='value'>{type}</span>
8398
</div>
84-
<div className='row'>
99+
<div className='message-row'>
85100
<span className='key'>Function</span>
86101
<span className='value'>{functionName}</span>
87102
</div>
88-
</React.Fragment>
103+
</MessageRowWrapper>
89104
)}
90105
</ApproveTransactionMessageWrapper>
91106
);
@@ -94,6 +109,7 @@ const DefaultTransactionMessage: React.FC<ApproveTransactionMessageProps> = ({ m
94109
const MsgCallTransactionMessage: React.FC<ApproveTransactionMessageProps> = ({
95110
index,
96111
message,
112+
argumentKeyMap,
97113
changeMessage,
98114
openScannerLink,
99115
}) => {
@@ -104,6 +120,10 @@ const MsgCallTransactionMessage: React.FC<ApproveTransactionMessageProps> = ({
104120
return func || '';
105121
}, [func]);
106122

123+
const title = useMemo(() => {
124+
return makeTitle(index, functionName);
125+
}, [functionName, index]);
126+
107127
const realmPathInfo = useMemo(() => {
108128
if (!pkg_path) {
109129
return {
@@ -127,7 +147,7 @@ const MsgCallTransactionMessage: React.FC<ApproveTransactionMessageProps> = ({
127147
};
128148
}
129149

130-
const domain = paths.slice(0, 2).join('/');
150+
const domain = paths.slice(1, 2).join('/');
131151
const nameSpace = paths[2];
132152
const namespaceSubPath = paths.length > 5 ? paths.slice(3, paths.length - 1).join('/') : '';
133153
const contract = paths[paths.length - 1];
@@ -189,11 +209,11 @@ const MsgCallTransactionMessage: React.FC<ApproveTransactionMessageProps> = ({
189209

190210
return (
191211
<ApproveTransactionMessageWrapper>
192-
<MessageBoxArgumentsOpener title={functionName} isOpen={isOpen} setIsOpen={setIsOpen} />
212+
<MessageBoxArgumentsOpener title={title} isOpen={isOpen} setIsOpen={setIsOpen} />
193213

194214
{isOpen && (
195-
<React.Fragment>
196-
<div className='row'>
215+
<MessageRowWrapper>
216+
<div className='message-row'>
197217
<span className='key realm'>Realm</span>
198218
<span className='realm-wrapper'>
199219
<RealmPathInfo
@@ -207,23 +227,25 @@ const MsgCallTransactionMessage: React.FC<ApproveTransactionMessageProps> = ({
207227
</div>
208228
</span>
209229
</div>
210-
<div className='row argument'>
230+
<div className='message-row argument'>
211231
<span className='key'>Send</span>
212232
<ArgumentEditBox
213233
value={sendAmount}
214234
onChange={(value): void => changeSendAmount(value)}
215235
/>
216236
</div>
217237
{displayArguments.map((arg, argumentIndex) => (
218-
<div className='row argument' key={argumentIndex}>
219-
<span className='key'>{`Arg${argumentIndex + 1}`}</span>
238+
<div className='message-row argument' key={argumentIndex}>
239+
<span className='key'>
240+
{argumentKeyMap?.[argumentIndex] || `Arg${argumentIndex + 1}`}
241+
</span>
220242
<ArgumentEditBox
221243
value={arg}
222244
onChange={(value): void => changeArgument(argumentIndex, value)}
223245
/>
224246
</div>
225247
))}
226-
</React.Fragment>
248+
</MessageRowWrapper>
227249
)}
228250
</ApproveTransactionMessageWrapper>
229251
);
@@ -266,11 +288,17 @@ const RealmPathInfo: React.FC<{
266288
return displayNamespace;
267289
}, [nameSpace, namespaceSubPath]);
268290

291+
if (!domain && !displayNamespacePath && !contract) {
292+
return <RealmPathInfoWrapper />;
293+
}
294+
269295
return (
270296
<RealmPathInfoWrapper>
271-
{domain && <span className='domain'>{domain}</span>}
272-
{displayNamespacePath && <span className='namespace-path'>/{displayNamespacePath}</span>}
273-
{contract && <span className='contract'>/{contract}</span>}
297+
{domain && <span className='domain-path'>{domain}</span>}
298+
{displayNamespacePath && <span className='namespace-path'>/</span>}
299+
{displayNamespacePath && <span className='namespace-path'>{displayNamespacePath}</span>}
300+
{contract && <span className='contract-path'>/</span>}
301+
{contract && <span className='contract-path'>{contract}</span>}
274302
</RealmPathInfoWrapper>
275303
);
276304
};

‎packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
7070
min-height: 41px;
7171
border-radius: 24px;
7272
padding: 10px 18px;
73-
margin: 24px auto;
73+
margin: 24px auto 12px auto;
7474
gap: 7px;
7575
background-color: ${getTheme('neutral', '_9')};
7676
${fonts.body2Reg};
@@ -139,8 +139,8 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
139139
width: 100%;
140140
padding: 0 16px;
141141
${fonts.captionReg};
142-
margin-bottom: 8px;
143142
color: ${getTheme('red', '_5')};
143+
white-space: pre-line;
144144
}
145145
146146
.transaction-data-wrapper {

‎packages/adena-extension/src/components/molecules/approve-transaction/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import IconArraowUp from '@assets/arrowS-up-gray.svg';
88
import UnknownLogo from '@assets/common-unknown-logo.svg';
99
import NetworkFeeSetting from '@components/pages/network-fee-setting/network-fee-setting/network-fee-setting';
1010
import { UseNetworkFeeReturn } from '@hooks/wallet/use-network-fee';
11+
import { GnoArgumentInfo } from '@inject/message/methods/gno-connect';
1112
import { ContractMessage } from '@inject/types';
1213
import { NetworkFee as NetworkFeeType } from '@types';
1314
import { ApproveTransactionLoading } from '../approve-transaction-loading';
@@ -35,6 +36,7 @@ export interface ApproveTransactionProps {
3536
networkFee: NetworkFeeType | null;
3637
transactionData: string;
3738
opened: boolean;
39+
argumentInfos?: GnoArgumentInfo[];
3840
processing: boolean;
3941
done: boolean;
4042
transactionMessages: ContractMessage[];
@@ -66,6 +68,7 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
6668
processing,
6769
done,
6870
useNetworkFeeReturn,
71+
argumentInfos,
6972
changeMemo,
7073
onToggleTransactionData,
7174
onResponse,
@@ -173,6 +176,7 @@ export const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
173176

174177
<ApproveTransactionMessageBox
175178
messages={transactionMessages}
179+
argumentInfos={argumentInfos}
176180
changeMessages={changeTransactionMessages}
177181
openScannerLink={openScannerLink}
178182
/>

0 commit comments

Comments
 (0)