on master help sign in
Merge pull request #837 from willbach/pending-display-fix

Fixing UI issues, including pending L2 invites, migrate screen, and external wallet message on cohort screen

commit5fbe909bec6c5776ed3ff5a054af8e0df4e6eb6e authortomholford <16504501+tomholford@users.noreply.github.com> dateThu 9 Dec 2021, 15:20 (5 years ago) parent795ad6008220f0
6 files changed+46−44
src/lib/utils/wallet.ts+7 src/views/Invite/Cohort.tsx+29−23 src/views/Point/MigrateL2.scss+1−1 src/views/Point/MigrateL2.tsx+2−2 src/views/Point/Point.scss−3 src/views/Point/Point.tsx+7−15
src/lib/utils/wallet.tsnew file+7
@@ -0,0 +1,7 @@
1+import { WALLET_TYPES } from 'lib/constants';
2+
3+export const isExternalWallet = (walletType: symbol) =>
4+ walletType === WALLET_TYPES.METAMASK ||
5+ walletType === WALLET_TYPES.WALLET_CONNECT ||
6+ walletType === WALLET_TYPES.LEDGER ||
7+ walletType === WALLET_TYPES.TREZOR;
src/views/Invite/Cohort.tsx+29−23
@@ -13,6 +13,7 @@ import { usePointCache } from 'store/pointCache';
1313import { useWallet } from 'store/wallet';
1414import { useNetwork } from 'store/network';
1515import { useRollerStore } from 'store/rollerStore';
16+import { getStoredInvites } from 'store/storage/roller';
1617
1718import { useLocalRouter } from 'lib/LocalRouter';
1819import * as need from 'lib/need';
@@ -23,6 +24,18 @@ import {
2324 generateCsvLine,
2425 generateCsvName,
2526} from 'lib/utils/invite';
27+import {
28+ DEFAULT_NUM_INVITES,
29+ ETH_ZERO_ADDR,
30+ INVITES_PER_PAGE,
31+ DEFAULT_CSV_NAME,
32+} from 'lib/constants';
33+import { isPlanet } from 'lib/utils/point';
34+import { generateInviteWallet } from 'lib/utils/roller';
35+import { useTimerStore } from 'store/timerStore';
36+import { Invite } from 'lib/types/Invite';
37+import { ddmmmYYYY } from 'lib/utils/date';
38+import { isExternalWallet } from 'lib/utils/wallet';
2639
2740import { useIssueChild } from 'views/Point/IssueChild';
2841import View from 'components/View';
@@ -36,18 +49,6 @@ import Paginator from 'components/L2/Paginator';
3649import InlineEthereumTransaction from 'components/InlineEthereumTransaction';
3750
3851import './Cohort.scss';
39−import { getStoredInvites } from 'store/storage/roller';
40−import {
41− DEFAULT_NUM_INVITES,
42− ETH_ZERO_ADDR,
43− INVITES_PER_PAGE,
44− DEFAULT_CSV_NAME,
45−} from 'lib/constants';
46−import { isPlanet } from 'lib/utils/point';
47−import { generateInviteWallet } from 'lib/utils/roller';
48−import { useTimerStore } from 'store/timerStore';
49−import { Invite } from 'lib/types/Invite';
50−import { ddmmmYYYY } from 'lib/utils/date';
5152
5253interface L1Invite {
5354 ticket: string;
@@ -56,7 +57,7 @@ interface L1Invite {
5657
5758export default function InviteCohort() {
5859 const { pop }: any = useLocalRouter();
59− const { authToken }: any = useWallet();
60+ const { authToken, walletType }: any = useWallet();
6061 const {
6162 point,
6263 pendingTransactions,
@@ -320,6 +321,7 @@ export default function InviteCohort() {
320321
321322 if (showInviteForm) {
322323 const generateDisabled = loading || overQuota;
324+ const showTxnNote = isExternalWallet(walletType);
323325
324326 return (
325327 <View
@@ -358,16 +360,20 @@ export default function InviteCohort() {
358360 </Box>
359361 )}
360362 {currentL2 && (
361− <>
362− <Box lineHeight="1.4em">
363− You can generate up to
364− <strong>{` ${point.l2Quota} `}</strong>
365− invites. You will be able to generate another
366− <strong>{` ${config?.rollerQuota}`}</strong> invites on
367− <strong>{` ${ddmmmYYYY(nextQuotaTime)}`}</strong>.
368− </Box>
369− <br />
370− </>
363+ <Box className="mb4" lineHeight="1.4em">
364+ You can generate up to
365+ <strong>{` ${point.l2Quota} `}</strong>
366+ invites. You will be able to generate another
367+ <strong>{` ${config?.rollerQuota}`}</strong> invites on
368+ <strong>{` ${ddmmmYYYY(nextQuotaTime)}`}</strong>.
369+ </Box>
370+ )}
371+ {showTxnNote && (
372+ <Box className="mb6" lineHeight="1.4em">
373+ Note: you will have to sign <strong>4</strong> transactions
374+ per invite, for a total of <strong>{4 * numInvites}</strong>{' '}
375+ signatures
376+ </Box>
371377 )}
372378 </Box>
373379 {/* <Inviter /> */}
src/views/Point/MigrateL2.scss+1−1
@@ -148,7 +148,7 @@
148148 flex-direction: row;
149149
150150 .transfer {
151− margin: 16px 0px;
151+ margin: 16px 0px 0px;
152152 cursor: pointer;
153153 padding: 4px 8px;
154154 display: flex;
src/views/Point/MigrateL2.tsx+2−2
@@ -220,7 +220,7 @@ export default function MigrateL2() {
220220 />
221221 ))}
222222 </Dropdown>
223− {isStar && !point.isL2Spawn && (
223+ {isStar && !selectedPoint?.isL2Spawn && (
224224 <Box className="transfer-spawn-selector">
225225 <Row onClick={toggleTransfer} className="transfer">
226226 <RadioButton
@@ -243,7 +243,7 @@ export default function MigrateL2() {
243243 </Box>
244244 )}
245245 {isStar && (
246− <Box>
246+ <Box className="mt4">
247247 Transferring this point will allow you to conduct all
248248 transactions on Layer 2. Setting the spawn proxy of a star to
249249 Layer 2 will allow you to create planet invites for free, but
src/views/Point/Point.scss−3
@@ -1,8 +1,5 @@
11@import 'style/shared/variables.scss';
22
3−.point {
4−}
5−
63.network-keys-modal {
74 background-color: white;
85 border-radius: $medium-border-radius;
src/views/Point/Point.tsx+7−15
@@ -145,21 +145,13 @@ export default function Point() {
145145 }>
146146 <Greeting point={point.value} />
147147 {!!spawnedPending && (
148− <div className="transaction">
149− <Row className="title-row">
150− <div className="title">
151− {spawnedPending} Planet{spawnedPending > 1 ? 's' : ''} Spawned
152− </div>
153− <div className="rollup-timer">
154− <Icon icon="Clock" />
155− {nextRoll}
156− </div>
157− </Row>
158− <Row className="info-row">
159− <LayerIndicator layer={2} size="sm" />
160− <div className="date"></div>
161− </Row>
162− </div>
148+ <PendingTransaction
149+ layer={2}
150+ nextRoll={nextRoll}
151+ title={`${spawnedPending} Planet${
152+ spawnedPending > 1 ? 's' : ''
153+ } Spawned`}
154+ />
163155 )}
164156 {!!otherPending.length &&
165157 otherPending.map((pendingTx, ind) => (