git.iko.soy/bridge
on df0c310 help sign in
bridge/src/components/L2/Dropdowns/AccountsDropdown.tsx
145 lines 4.3 kB history raw
1import { useCallback, useMemo, useState } from 'react';
2import { Icon, Row, Box } from '@tlon/indigo-react';
3import { Just } from 'folktale/maybe';
5import LayerIndicator from 'components/L2/LayerIndicator';
6import CopiableAddressWrap from 'components/copiable/CopiableAddressWrap';
7import { TooltipPosition } from 'components/WithTooltip';
9import { useWallet } from 'store/wallet';
10import { useHistory } from 'store/history';
11import { usePointCursor } from 'store/pointCursor';
12import { clearInvitesStorage } from 'store/storage/roller';
13import { useRollerStore } from 'store/rollerStore';
15import { abbreviateAddress } from 'lib/utils/address';
17import Dropdown from './Dropdown';
18import './AccountsDropdown.scss';
20interface AccountsDropdownProps {
21 showMigrate: boolean;
24const AccountsDropdown = ({ showMigrate = false }: AccountsDropdownProps) => {
25 const [open, setOpen] = useState<boolean>(false);
26 const walletInfo: any = useWallet();
27 const { push, popTo, names, reset }: any = useHistory();
28 const { setPointCursor }: any = usePointCursor();
29 const { point, pointList } = useRollerStore();
31 const canBitcoin = Just.hasInstance(walletInfo.urbitWallet);
33 const currentAddress = walletInfo?.wallet?.value?.address || '';
34 const displayAddress = abbreviateAddress(currentAddress);
36 const selectPoint = useCallback(
37 (point: number) => () => {
38 popTo(names.POINTS);
39 setPointCursor(Just(point));
40 push(names.POINT);
41 setOpen(false);
42 },
43 [push, popTo, names, setOpen, setPointCursor]
44 );
46 const goHome = useCallback(() => popTo(names.POINTS), [names, popTo]);
48 const goMigrate = useCallback(() => push(names.MIGRATE_L2), [
49 names.MIGRATE_L2,
50 push,
51 ]);
53 const goBitcoin = useCallback(() => push(names.BITCOIN), [
54 names.BITCOIN,
55 push,
56 ]);
58 const goSpawn = useCallback(() => {
59 if (point.isL2Spawn && point.isStar) {
60 push(names.INVITE_COHORT);
61 } else {
62 push(names.ISSUE_CHILD);
63 }
64 }, [names, push, point]);
66 const onLogout = () => {
67 clearInvitesStorage();
68 reset();
69 };
71 const hasL1Points = Boolean(pointList.find(({ layer }) => layer === 1));
72 const showMigrateOption = useMemo(() => {
73 return showMigrate || hasL1Points;
74 }, [hasL1Points, showMigrate]);
76 const displayText =
77 point.value >= 0 ? point.patp : currentAddress.slice(0, 6);
79 const displayedPoints = useMemo(
80 () => pointList.filter(({ ownManageSpawn }) => ownManageSpawn),
81 [pointList]
82 );
84 return (
85 <Dropdown
86 className="accounts-dropdown"
87 open={open}
88 value={displayText}
89 toggleOpen={() => setOpen(!open)}>
90 <CopiableAddressWrap
91 className="current-address"
92 position={TooltipPosition.Left}
93 text={currentAddress}>
94 <Box onClick={goHome}>{displayAddress}</Box>
95 </CopiableAddressWrap>
96 <Box className="divider" />
97 <Box className="points">
98 {displayedPoints.map(({ value, layer, patp }) => (
99 <Row
100 className={`entry point ${value === point.value ? 'selected' : ''}`}
101 onClick={selectPoint(value)}
102 key={`point-${value}`}>
103 <Box>{patp}</Box>
104 <Row>
105 <LayerIndicator
106 layer={layer}
107 size="smt"
108 selected={value === point.value}
109 />
110 </Row>
111 </Row>
112 ))}
113 </Box>
114 <Box className="divider" />
115 {showMigrateOption && (
116 <Row className="entry" onClick={goMigrate}>
117 <Box>Migrate</Box>
118 <Row className="layer-migration">
119 <LayerIndicator layer={1} size="sm" />
120 <Icon icon="ArrowEast" />
121 <LayerIndicator layer={2} size="sm" />
122 </Row>
123 </Row>
124 )}
125 {canBitcoin && (
126 <Row className="entry" onClick={goBitcoin}>
127 <Box>Bitcoin</Box>
128 <Icon icon="Bitcoin" />
129 </Row>
130 )}
131 {point.isParent && point.canSpawn && point.isL1 && (
132 <Row className="entry" onClick={goSpawn}>
133 <Box>Spawn{point.isStar ? ' Planets' : ' Stars'}</Box>
134 <Icon icon="Plus" />
135 </Row>
136 )}
137 <Row className="entry" onClick={onLogout}>
138 <Box>Logout</Box>
139 <Icon icon="LogOut" />
140 </Row>
141 </Dropdown>
142 );
143};
145export default AccountsDropdown;