on master help sign in
migrate: add notice to Points view

Based on early user feedback, the Migration UX can be unsettling when a star seemingly disappears from the Family view after migration. This change adds a brief notice that will hopefully assuage this feeling until we can come up with a better experience. Also, some dead code is removed.

commit4ef3536eb657958793609b7e53dc9152a0eae78a authortomholford <tomholford@users.noreply.github.com> dateSun 13 Feb 2022, 15:01 (5 years ago) parentbded3d6
2 files changed+28−13
src/views/Points.scss+11 src/views/Points.tsx+17−13
src/views/Points.scss+11
@@ -15,3 +15,14 @@
1515 font-family: 'Inter';
1616 }
1717}
18+
19+div.migrated-info-box {
20+ margin-top: 30px;
21+ font-size: 14px;
22+ display: flex;
23+ flex-flow: row nowrap;
24+
25+ span.message {
26+ padding-left: 5px;
27+ }
28+}
src/views/Points.tsx+17−13
@@ -28,11 +28,12 @@ import L2PointHeader from 'components/L2/Headers/L2PointHeader';
2828import IncomingPoint from 'components/L2/Points/IncomingPoint';
2929import LoadingOverlay from 'components/L2/LoadingOverlay';
3030import PointList from 'components/L2/PointList';
31−import { Box, Text } from '@tlon/indigo-react';
31+import { Box, Icon, Text } from '@tlon/indigo-react';
3232
3333import './Points.scss';
3434import { StarReleaseButton } from './Points/StarReleaseButton';
3535import { maybeGetResult } from 'lib/maybeGetResult';
36+import { isGalaxy, isStar } from 'lib/utils/point';
3637
3738export const isLocked = (details: any, contracts: any) =>
3839 details.owner === contracts.linearSR ||
@@ -172,6 +173,11 @@ export default function Points() {
172173 const displayEmptyState =
173174 !loading && incomingPoints.length === 0 && allPoints.length === 0;
174175
176+ // If the user has any stars or galaxies, give a polite heads up that
177+ // it can take some time for the roller be aware of L1 TXs
178+ const showMigrateNotice = !displayEmptyState &&
179+ allPoints.some(p => isStar(p.value) || isGalaxy(p.value));
180+
175181 const starReleasing = starReleaseDetails
176182 .map((s: any) => (s ? s.total > 0 : false))
177183 .getOrElse(false);
@@ -324,19 +330,17 @@ export default function Points() {
324330 </Grid.Item>
325331 )}
326332
327− {/* {processingPoints.length > 0 && (
328− <Grid.Item full as={Grid} gap={1} className="mv6">
329− <Grid.Item full as={H5}>
330− Awaiting L2 Rollup
331− </Grid.Item>
332− <Grid.Item
333− full
334− as={PointList}
335− points={processingPoints}
336− processing
337− />
333+ {showMigrateNotice && (
334+ <Grid.Item full as={Box} className={'migrated-info-box'}>
335+ <span className={'icon'}>
336+ <Icon icon="Info" />
337+ </span>
338+ <span className={'message'}>
339+ Not seeing a recently-migrated Layer 2 point? It may take a few
340+ minutes for the public roller to be aware of the transaction.
341+ </span>
338342 </Grid.Item>
339− )} */}
343+ )}
340344
341345 <Footer>
342346 <Grid>