08220f0 · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

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

08220f0Will Galebach5 years ago

src/lib/utils/wallet.tsnew file+7

compare with master

unifiedsplit

@@ -0,0 +1,7 @@

1+import { WALLET_TYPES } from 'lib/constants';

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';

13import { useWallet } from 'store/wallet';

14import { useNetwork } from 'store/network';

15import { useRollerStore } from 'store/rollerStore';

16+import { getStoredInvites } from 'store/storage/roller';

17import { useLocalRouter } from 'lib/LocalRouter';

18import { useLocalRouter } from 'lib/LocalRouter';

18import * as need from 'lib/need';

19import * as need from 'lib/need';

@@ -23,6 +24,18 @@ import {

23 generateCsvLine,

24 generateCsvLine,

24 generateCsvName,

25 generateCsvName,

25} from 'lib/utils/invite';

26} 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';

27import { useIssueChild } from 'views/Point/IssueChild';

40import { useIssueChild } from 'views/Point/IssueChild';

28import View from 'components/View';

41import View from 'components/View';

@@ -36,18 +49,6 @@ import Paginator from 'components/L2/Paginator';

36import InlineEthereumTransaction from 'components/InlineEthereumTransaction';

49import InlineEthereumTransaction from 'components/InlineEthereumTransaction';

38import './Cohort.scss';

51import './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';

52interface L1Invite {

53interface L1Invite {

53 ticket: string;

54 ticket: string;

@@ -56,7 +57,7 @@ interface L1Invite {

57export default function InviteCohort() {

58export default function InviteCohort() {

58 const { pop }: any = useLocalRouter();

59 const { pop }: any = useLocalRouter();

59− const { authToken }: any = useWallet();

60+ const { authToken, walletType }: any = useWallet();

60 const {

61 const {

61 point,

62 point,

62 pendingTransactions,

63 pendingTransactions,

@@ -320,6 +321,7 @@ export default function InviteCohort() {

320

321

321 if (showInviteForm) {

322 if (showInviteForm) {

322 const generateDisabled = loading || overQuota;

323 const generateDisabled = loading || overQuota;

324+ const showTxnNote = isExternalWallet(walletType);

323

325

324 return (

326 return (

325 <View

327 <View

@@ -358,16 +360,20 @@ export default function InviteCohort() {

358 </Box>

360 </Box>

359 )}

361 )}

360 {currentL2 && (

362 {currentL2 && (

361− <>

362− <Box lineHeight="1.4em">

363+ <Box className="mb4" lineHeight="1.4em">

363− You can generate up to

364+ You can generate up to

364− <strong>{` ${point.l2Quota} `}</strong>

365+ <strong>{` ${point.l2Quota} `}</strong>

365− invites. You will be able to generate another

366+ invites. You will be able to generate another

366− <strong>{` ${config?.rollerQuota}`}</strong> invites on

367+ <strong>{` ${config?.rollerQuota}`}</strong> invites on

367− <strong>{` ${ddmmmYYYY(nextQuotaTime)}`}</strong>.

368+ <strong>{` ${ddmmmYYYY(nextQuotaTime)}`}</strong>.

368− </Box>

369+ </Box>

369− <br />

370+ )}

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>

371 )}

377 )}

372 </Box>

378 </Box>

373 {/* <Inviter /> */}

379 {/* <Inviter /> */}

src/views/Point/MigrateL2.scss+1−1

@@ -148,7 +148,7 @@

148 flex-direction: row;

149

150 .transfer {

151− margin: 16px 0px;

151+ margin: 16px 0px 0px;

152 cursor: pointer;

153 padding: 4px 8px;

154 display: flex;

src/views/Point/MigrateL2.tsx+2−2

@@ -220,7 +220,7 @@ export default function MigrateL2() {

220 />

221 ))}

222 </Dropdown>

223− {isStar && !point.isL2Spawn && (

223+ {isStar && !selectedPoint?.isL2Spawn && (

224 <Box className="transfer-spawn-selector">

225 <Row onClick={toggleTransfer} className="transfer">

226 <RadioButton

@@ -243,7 +243,7 @@ export default function MigrateL2() {

243 </Box>

244 )}

245 {isStar && (

246− <Box>

246+ <Box className="mt4">

247 Transferring this point will allow you to conduct all

248 transactions on Layer 2. Setting the spawn proxy of a star to

249 Layer 2 will allow you to create planet invites for free, but

src/views/Point/Point.scss−3

@@ -1,8 +1,5 @@

1@import 'style/shared/variables.scss';

3−.point {

4−}

5−

6.network-keys-modal {

3.network-keys-modal {

7 background-color: white;

4 background-color: white;

8 border-radius: $medium-border-radius;

5 border-radius: $medium-border-radius;

src/views/Point/Point.tsx+7−15

@@ -145,21 +145,13 @@ export default function Point() {

145 }>

146 <Greeting point={point.value} />

147 {!!spawnedPending && (

148− <div className="transaction">

148+ <PendingTransaction

149− <Row className="title-row">

149+ layer={2}

150− <div className="title">

150+ nextRoll={nextRoll}

151− {spawnedPending} Planet{spawnedPending > 1 ? 's' : ''} Spawned

151+ title={`${spawnedPending} Planet${

152− </div>

152+ spawnedPending > 1 ? 's' : ''

153− <div className="rollup-timer">

153+ } Spawned`}

154− <Icon icon="Clock" />

154+ />

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>

163 )}

155 )}

164 {!!otherPending.length &&

156 {!!otherPending.length &&

165 otherPending.map((pendingTx, ind) => (

157 otherPending.map((pendingTx, ind) => (