Skip to content

Commit a193071

Browse files
xnylxnyl
committed
feat(fe) ui review changes
1 parent 6f7263e commit a193071

File tree

8 files changed

+114
-128
lines changed

8 files changed

+114
-128
lines changed

‎src/components/layout/LayoutHelpers.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,8 @@ export const MediumTopWrapper = styled("div")({
3535
export const BigTopWrapper = styled("div")({
3636
marginTop: 40,
3737
});
38+
39+
export const PaperSpacerWrapper = styled("div")({
40+
marginTop: 40,
41+
marginBottom: 40,
42+
});

‎src/components/typography/TypographyHelpers.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const useLabelWithValueStyles = makeStyles((theme) => ({
1919
marginBottom: 8,
2020
},
2121
labelWrapper: {
22+
flexShrink: 0,
2223
color: theme.palette.grey[600],
2324
},
2425
labelTooltip: {
@@ -30,9 +31,12 @@ const useLabelWithValueStyles = makeStyles((theme) => ({
3031
verticalAlign: "middle",
3132
},
3233
valueWrapper: {
34+
textAlign: "right",
3335
color: theme.palette.common.black,
3436
},
35-
value: {},
37+
value: {
38+
whiteSpace: "nowrap",
39+
},
3640
valueEquivalent: {
3741
color: theme.palette.grey[600],
3842
marginLeft: 4,

‎src/features/mint/steps/MintFeesStep.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,7 @@ export const MintFeesStep: FunctionComponent<TxConfigurationStepProps> = ({
286286
<ActionButtonWrapper>
287287
<ActionButton
288288
onClick={handleConfirm}
289-
disabled={showAckError || mintingInitialized}
289+
disabled={showAckError || mintingInitialized || !walletConnected}
290290
>
291291
{!walletConnected
292292
? "Connect Wallet"

‎src/features/mint/steps/MintInitialStep.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export const MintInitialStep: FunctionComponent<TxConfigurationStepProps> = ({
126126
<ActionButtonWrapper>
127127
<ActionButton
128128
onClick={handleNextStep}
129-
disabled={walletConnected && !canProceed}
129+
disabled={!walletConnected || !canProceed}
130130
>
131131
{walletConnected ? "Next" : "Connect Wallet"}
132132
</ActionButton>

‎src/features/mint/steps/MintProcessStep.tsx

+26-18
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,8 @@ import {
2222
} from "../../../components/buttons/Buttons";
2323
import { BackArrowIcon } from "../../../components/icons/RenIcons";
2424
import {
25-
BigWrapper,
2625
CenteringSpacedBox,
27-
MediumWrapper,
26+
PaperSpacerWrapper,
2827
} from "../../../components/layout/LayoutHelpers";
2928
import {
3029
PaperActions,
@@ -77,11 +76,17 @@ export const MintProcessStep: FunctionComponent<RouteComponentProps> = ({
7776
const dispatch = useDispatch();
7877
const chain = useSelector($chain);
7978
const { status } = useSelectedChainWallet();
79+
const walletConnected = status === WalletStatus.CONNECTED;
8080
const { tx: parsedTx, txState } = useTxParam();
8181
const [reloading, setReloading] = useState(false);
8282
const [tx, setTx] = useState<GatewaySession>(parsedTx as GatewaySession); // TODO Partial<GatewaySession>
8383
usePageTitle(getTxPageTitle(tx));
84-
const [paperTitle] = usePaperTitle();
84+
const [paperTitle, setPaperTitle] = usePaperTitle();
85+
useEffect(() => {
86+
if (!walletConnected) {
87+
setPaperTitle("Resume Transaction");
88+
}
89+
}, [walletConnected, setPaperTitle]);
8590

8691
const handlePreviousStepClick = useCallback(() => {
8792
history.goBack();
@@ -118,7 +123,6 @@ export const MintProcessStep: FunctionComponent<RouteComponentProps> = ({
118123
history.replace({ ...location, state: undefined });
119124
}, [history, location]);
120125

121-
const walletConnected = status === WalletStatus.CONNECTED;
122126
const showTransactionStatus = !!tx && walletConnected;
123127
const feeCurrency = getCurrencyConfigByRentxName(tx.sourceAsset).symbol;
124128
const amount = Number(tx.targetAmount);
@@ -144,28 +148,32 @@ export const MintProcessStep: FunctionComponent<RouteComponentProps> = ({
144148
<MintTransactionStatus tx={tx} />
145149
)}
146150
{!walletConnected && (
147-
<BigWrapper>
148-
<MediumWrapper>
151+
<>
152+
<PaperSpacerWrapper>
149153
<CenteringSpacedBox>
150154
<WalletConnectionProgress />
151155
</CenteringSpacedBox>
152-
</MediumWrapper>
156+
</PaperSpacerWrapper>
153157
<ActionButton onClick={handleWalletPickerOpen}>
154158
Connect Wallet
155159
</ActionButton>
156-
</BigWrapper>
160+
</>
157161
)}
158162
</PaperContent>
159-
<Divider />
160-
<PaperContent topPadding bottomPadding>
161-
<TransactionFees
162-
chain={chain}
163-
amount={amount}
164-
currency={feeCurrency}
165-
type={TxType.MINT}
166-
/>
167-
<Debug it={{ parsedTx, txState: txState }} />
168-
</PaperContent>
163+
{walletConnected && (
164+
<>
165+
<Divider />
166+
<PaperContent topPadding bottomPadding>
167+
<TransactionFees
168+
chain={chain}
169+
amount={amount}
170+
currency={feeCurrency}
171+
type={TxType.MINT}
172+
/>
173+
</PaperContent>
174+
</>
175+
)}
176+
<Debug it={{ parsedTx, txState: txState }} />
169177
{txState?.newTx && (
170178
<BookmarkPageWarning onClosed={onBookmarkWarningClosed} />
171179
)}

‎src/features/release/steps/ReleaseProcessStep.tsx

+69-101
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,35 @@
1-
import { Divider, IconButton } from "@material-ui/core";
2-
import { BurnMachineSchema, GatewaySession } from "@renproject/ren-tx";
3-
import React, {
4-
FunctionComponent,
5-
useCallback,
6-
useEffect,
7-
useState,
8-
} from "react";
9-
import { useDispatch, useSelector } from "react-redux";
10-
import { RouteComponentProps, useHistory } from "react-router-dom";
11-
import {
12-
ActionButton,
13-
ToggleIconButton,
14-
} from "../../../components/buttons/Buttons";
15-
import { NumberFormatText } from "../../../components/formatting/NumberFormatText";
16-
import { BackArrowIcon } from "../../../components/icons/RenIcons";
17-
import {
18-
BigWrapper,
19-
CenteringSpacedBox,
20-
MediumWrapper,
21-
} from "../../../components/layout/LayoutHelpers";
22-
import {
23-
PaperActions,
24-
PaperContent,
25-
PaperHeader,
26-
PaperNav,
27-
PaperTitle,
28-
} from "../../../components/layout/Paper";
29-
import {
30-
LabelWithValue,
31-
SpacedDivider,
32-
} from "../../../components/typography/TypographyHelpers";
33-
import { Debug } from "../../../components/utils/Debug";
34-
import { WalletStatus } from "../../../components/utils/types";
35-
import { WalletConnectionProgress } from "../../../components/wallet/WalletHelpers";
36-
import { usePageTitle } from "../../../hooks/usePageTitle";
37-
import { usePaperTitle } from "../../../pages/MainPage";
38-
import { paths } from "../../../pages/routes";
39-
import { useSelectedChainWallet } from "../../../providers/multiwallet/multiwalletHooks";
40-
import { getChainConfigByRentxName } from "../../../utils/assetConfigs";
41-
import { $exchangeRates } from "../../marketData/marketDataSlice";
42-
import { findExchangeRate } from "../../marketData/marketDataUtils";
43-
import { TransactionFees } from "../../transactions/components/TransactionFees";
44-
import {
45-
BookmarkPageWarning,
46-
ProgressStatus,
47-
} from "../../transactions/components/TransactionsHelpers";
48-
import {
49-
createTxQueryString,
50-
getTxPageTitle,
51-
TxType,
52-
useTxParam,
53-
} from "../../transactions/transactionsUtils";
54-
import {
55-
$chain,
56-
setChain,
57-
setWalletPickerOpened,
58-
} from "../../wallet/walletSlice";
59-
import {
60-
ReleaseCompletedStatus,
61-
ReleaseProgressStatus,
62-
} from "../components/ReleaseStatuses";
63-
import {
64-
getBurnAndReleaseParams,
65-
useBurnMachine,
66-
useReleaseTransactionPersistence,
67-
} from "../releaseUtils";
1+
import { Divider, IconButton } from '@material-ui/core'
2+
import { BurnMachineSchema, GatewaySession } from '@renproject/ren-tx'
3+
import React, { FunctionComponent, useCallback, useEffect, useState, } from 'react'
4+
import { useDispatch, useSelector } from 'react-redux'
5+
import { RouteComponentProps, useHistory } from 'react-router-dom'
6+
import { ActionButton, ToggleIconButton, } from '../../../components/buttons/Buttons'
7+
import { NumberFormatText } from '../../../components/formatting/NumberFormatText'
8+
import { BackArrowIcon } from '../../../components/icons/RenIcons'
9+
import { CenteringSpacedBox, PaperSpacerWrapper, } from '../../../components/layout/LayoutHelpers'
10+
import { PaperActions, PaperContent, PaperHeader, PaperNav, PaperTitle, } from '../../../components/layout/Paper'
11+
import { LabelWithValue, SpacedDivider, } from '../../../components/typography/TypographyHelpers'
12+
import { Debug } from '../../../components/utils/Debug'
13+
import { WalletStatus } from '../../../components/utils/types'
14+
import { WalletConnectionProgress } from '../../../components/wallet/WalletHelpers'
15+
import { usePageTitle } from '../../../hooks/usePageTitle'
16+
import { usePaperTitle } from '../../../pages/MainPage'
17+
import { paths } from '../../../pages/routes'
18+
import { useSelectedChainWallet } from '../../../providers/multiwallet/multiwalletHooks'
19+
import { getChainConfigByRentxName } from '../../../utils/assetConfigs'
20+
import { $exchangeRates } from '../../marketData/marketDataSlice'
21+
import { findExchangeRate } from '../../marketData/marketDataUtils'
22+
import { TransactionFees } from '../../transactions/components/TransactionFees'
23+
import { BookmarkPageWarning, ProgressStatus, } from '../../transactions/components/TransactionsHelpers'
24+
import { createTxQueryString, getTxPageTitle, TxType, useTxParam, } from '../../transactions/transactionsUtils'
25+
import { $chain, setChain, setWalletPickerOpened, } from '../../wallet/walletSlice'
26+
import { ReleaseCompletedStatus, ReleaseProgressStatus, } from '../components/ReleaseStatuses'
27+
import { getBurnAndReleaseParams, useBurnMachine, useReleaseTransactionPersistence, } from '../releaseUtils'
6828

6929
export const ReleaseProcessStep: FunctionComponent<RouteComponentProps> = (
7030
props
7131
) => {
7232
const { history, location } = props;
73-
const [paperTitle] = usePaperTitle();
74-
7533
const dispatch = useDispatch();
7634
const { status } = useSelectedChainWallet();
7735
const walletConnected = status === WalletStatus.CONNECTED;
@@ -81,6 +39,12 @@ export const ReleaseProcessStep: FunctionComponent<RouteComponentProps> = (
8139
const [tx] = useState<GatewaySession>(parsedTx as GatewaySession); // TODO Partial<GatewaySession>
8240

8341
usePageTitle(getTxPageTitle(tx));
42+
const [paperTitle, setPaperTitle] = usePaperTitle();
43+
useEffect(() => {
44+
if (!walletConnected) {
45+
setPaperTitle("Resume Transaction");
46+
}
47+
}, [walletConnected, setPaperTitle]);
8448

8549
const handlePreviousStepClick = useCallback(() => {
8650
history.goBack();
@@ -133,48 +97,52 @@ export const ReleaseProcessStep: FunctionComponent<RouteComponentProps> = (
13397
<PaperContent bottomPadding>
13498
{walletConnected && <ReleaseTransactionStatus tx={tx} />}
13599
{!walletConnected && (
136-
<BigWrapper>
137-
<MediumWrapper>
100+
<>
101+
<PaperSpacerWrapper>
138102
<CenteringSpacedBox>
139103
<WalletConnectionProgress />
140104
</CenteringSpacedBox>
141-
</MediumWrapper>
105+
</PaperSpacerWrapper>
142106
<ActionButton onClick={handleWalletPickerOpen}>
143107
Connect Wallet
144108
</ActionButton>
145-
</BigWrapper>
109+
</>
146110
)}
147111
</PaperContent>
148-
<Divider />
149-
<PaperContent topPadding bottomPadding>
150-
<LabelWithValue
151-
label="Releasing"
152-
value={
153-
<NumberFormatText
154-
value={amount}
155-
spacedSuffix={burnCurrencyConfig.short}
112+
{walletConnected && (
113+
<>
114+
<Divider />
115+
<PaperContent topPadding bottomPadding>
116+
<LabelWithValue
117+
label="Releasing"
118+
value={
119+
<NumberFormatText
120+
value={amount}
121+
spacedSuffix={burnCurrencyConfig.short}
122+
/>
123+
}
124+
valueEquivalent={
125+
<NumberFormatText
126+
value={amountUsd}
127+
prefix="$"
128+
decimalScale={2}
129+
fixedDecimalScale
130+
/>
131+
}
156132
/>
157-
}
158-
valueEquivalent={
159-
<NumberFormatText
160-
value={amountUsd}
161-
prefix="$"
162-
decimalScale={2}
163-
fixedDecimalScale
133+
<LabelWithValue label="From" value={burnChainConfig.full} />
134+
<LabelWithValue label="To" value={tx.destAddress} />
135+
<SpacedDivider />
136+
<TransactionFees
137+
chain={chain}
138+
amount={amount}
139+
currency={burnCurrencyConfig.symbol}
140+
type={TxType.BURN}
164141
/>
165-
}
166-
/>
167-
<LabelWithValue label="From" value={burnChainConfig.full} />
168-
<LabelWithValue label="To" value={tx.destAddress} />
169-
<SpacedDivider />
170-
<TransactionFees
171-
chain={chain}
172-
amount={amount}
173-
currency={burnCurrencyConfig.symbol}
174-
type={TxType.BURN}
175-
/>
176-
<Debug it={{ parsedTx, txState: txState }} />
177-
</PaperContent>
142+
<Debug it={{ parsedTx, txState: txState }} />
143+
</PaperContent>
144+
</>
145+
)}
178146
{txState?.newTx && (
179147
<BookmarkPageWarning onClosed={onBookmarkWarningClosed} />
180148
)}

‎src/features/transactions/components/TransactionFees.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export const TransactionFees: FunctionComponent<TransactionFeesProps> = ({
8787
const targetNetworkFeeLabel = `${feeInGwei} Gwei`;
8888

8989
if (status !== WalletStatus.CONNECTED) {
90-
return <span>Connect a wallet to view fees</span>;
90+
return null;
9191
}
9292
if (pending) {
9393
return <CenteredProgress />;

‎src/theme/typography.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@ export const typography: TypographyOptions = {
88
},
99
h1: {
1010
fontSize: 48,
11-
fontWeight: "bold"
11+
fontWeight: "bold",
1212
},
1313
h5: {
14-
fontSize: 22
14+
fontSize: 22,
1515
},
1616
h6: {
17-
fontSize: 18
17+
fontSize: 18,
18+
lineHeight: 1.4,
1819
},
1920
subtitle2: {
20-
fontSize: 13
21-
}
21+
fontSize: 13,
22+
},
2223
};

0 commit comments

Comments
 (0)