1ac970d · bridge · git.iko.soy

src/components/L2/Card.tsx+3−3

compare with master

unifiedsplit

@@ -8,7 +8,7 @@ export interface CardProps {

8 title?: string;

9 subtitle?: string;

10 onClick?: () => void;

11− children: any[];

11+ children: React.ReactNode;

12}

13

14export default function Card({

@@ -23,10 +23,10 @@ export default function Card({

23 {(!!icon || !!title) && (

24 <Row>

25 {!!icon && icon}

26− {!!title && <div className="card-title">{title}</div>}

26+ {!!title && <Box className="card-title">{title}</Box>}

27 </Row>

28 )}

29− {!!subtitle && <div className="card-subtitle">{subtitle}</div>}

29+ {!!subtitle && <Box className="card-subtitle">{subtitle}</Box>}

30 {children}

31 </Box>

32 );

src/components/L2/Dropdowns/AccountsDropdown.tsx+14−14

@@ -1,6 +1,6 @@

1import React, { useState } from 'react';

2import * as ob from 'urbit-ob';

3−import { Icon, Row } from '@tlon/indigo-react';

3+import { Icon, Row, Box } from '@tlon/indigo-react';

4import { Just } from 'folktale/maybe';

5

6import Sigil from 'components/Sigil';

@@ -14,6 +14,7 @@ import CopiableAddressWrap from 'components/copiable/CopiableAddressWrap';

14import Dropdown from './Dropdown';

15

16import './AccountsDropdown.scss';

17+import { abbreviateAddress } from 'lib/utils/address';

17

18

18const AccountsDropdown = () => {

19const AccountsDropdown = () => {

19 const [open, setOpen] = useState<boolean>(false);

20 const [open, setOpen] = useState<boolean>(false);

@@ -30,8 +31,7 @@ const AccountsDropdown = () => {

30 ) || [];

31 ) || [];

31

32

32 const currentAddress = walletInfo?.wallet?.value?.address || '';

33 const currentAddress = walletInfo?.wallet?.value?.address || '';

33− const addressLeadingFive = currentAddress.slice(0, 5);

34+ const displayAddress = abbreviateAddress(currentAddress);

34− const displayAddress = `${addressLeadingFive}...${currentAddress.slice(-4)}`;

35

36 const selectPoint = (point: number) => () => {

37 setPointCursor(Just(point));

@@ -49,13 +49,13 @@ const AccountsDropdown = () => {

49 <Dropdown

50 className="accounts-dropdown"

51 open={open}

52− value={addressLeadingFive}

52+ value={displayAddress}

53 toggleOpen={() => setOpen(!open)}>

54 <CopiableAddressWrap className="current-address">

55 {displayAddress}

56 </CopiableAddressWrap>

57− <div className="divider" />

57+ <Box className="divider" />

58− <div className="points">

58+ <Box className="points">

59 {points.map((point: number) => {

60 const patp = ob.patp(point);

61

@@ -64,20 +64,20 @@ const AccountsDropdown = () => {

64 className="entry"

65 onClick={selectPoint(point)}

66 key={`point-${point}`}>

67− <div>{patp}</div>

67+ <Box>{patp}</Box>

68 <Row>

69 <LayerIndicator layer={1} size="md" />

70− <div className="sigil">

70+ <Box className="sigil">

71 <Sigil patp={patp} size={1} colors={['#000000', '#FFFFFF']} />

72− </div>

72+ </Box>

73 </Row>

74 </Row>

75 );

76 })}

77− </div>

77+ </Box>

78− <div className="divider" />

78+ <Box className="divider" />

79 <Row className="entry" onClick={goToMigrate}>

80− <div>Migrate</div>

80+ <Box>Migrate</Box>

81 <Row className="layer-migration">

82 <LayerIndicator layer={1} size="sm" />

83 <Icon icon="ArrowEast" />

@@ -86,12 +86,12 @@ const AccountsDropdown = () => {

86 </Row>

87 {canBitcoin && (

88 <Row className="entry" onClick={goToBitcoin}>

89− <div>Bitcoin</div>

89+ <Box>Bitcoin</Box>

90 <Icon icon="Bitcoin" />

91 </Row>

92 )}

93 <Row className="entry" onClick={onLogout}>

94− <div>Logout</div>

94+ <Box>Logout</Box>

95 <Icon icon="LogOut" />

96 </Row>

97 </Dropdown>

src/components/L2/Dropdowns/Dropdown.tsx+9−9

@@ -1,11 +1,11 @@

1import React from 'react';

2−import { Icon } from '@tlon/indigo-react';

2+import { Box, Icon } from '@tlon/indigo-react';

3

4import './Dropdown.scss';

5

6export interface DropdownProps {

7 className: string;

8− children: any;

8+ children: React.ReactNode;

9 value: string;

10 open: boolean;

11 toggleOpen: () => void;

@@ -19,17 +19,17 @@ const Dropdown = ({

19 className,

20}: DropdownProps) => {

21 return (

22− <div className={`dropdown ${className}`}>

22+ <Box className={`dropdown ${className}`}>

23− <div className={`selector ${open ? 'open' : ''}`} onClick={toggleOpen}>

23+ <Box className={`selector ${open ? 'open' : ''}`} onClick={toggleOpen}>

24 {value}

25 <Icon icon="ChevronSouth" />

26− </div>

26+ </Box>

27 {open && (

28− <div className="content-border">

28+ <Box className="content-border">

29− <div className="content">{children}</div>

29+ <Box className="content">{children}</Box>

30− </div>

30+ </Box>

31 )}

32− </div>

32+ </Box>

33 );

34};

35

src/components/L2/Dropdowns/FeeDropdown.scssdeleted−24

@@ -1,24 +0,0 @@

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

2−

3−.fee-dropdown {

4− font-size: 14px;

5− position: relative;

6− width: 180px;

7−

8− .content-border {

9− .content {

10− .entry {

11− display: flex;

12− flex-direction: row;

13− justify-content: space-between;

14− align-items: center;

15− cursor: pointer;

16− padding: 8px;

17−

18− &:hover {

19− background-color: $washedGray;

20− }

21− }

22− }

23− }

24−}

src/components/L2/Dropdowns/FeeDropdown.tsxdeleted−54

@@ -1,54 +0,0 @@

1−import React, { useState } from 'react';

2−

3−import Dropdown from './Dropdown';

4−

5−import './FeeDropdown.scss';

6−

7−interface Fee {

8− amount: number;

9− display: string;

10−}

11−

12−const FeeDropdown = () => {

13− const [open, setOpen] = useState<boolean>(false);

14− const [fee, setFee] = useState<Fee>({

15− amount: 0.0002,

16− display: '0.0002 ETH (15 min)',

17− });

18−

19− const fees = [

20− {

21− amount: 0.0004,

22− display: '0.0004 ETH (10 min)',

23− },

24− {

25− amount: 0.0002,

26− display: '0.0002 ETH (15 min)',

27− },

28− {

29− amount: 0.0002,

30− display: '0.0001 ETH (1 hour)',

31− },

32− ];

33−

34− const selectFee = (fee: Fee) => () => {

35− setFee(fee);

36− setOpen(false);

37− };

38−

39− return (

40− <Dropdown

41− className="fee-dropdown"

42− open={open}

43− value={fee.display}

44− toggleOpen={() => setOpen(!open)}>

45− {fees.map(fee => (

46− <div className="entry" key={fee.display} onClick={selectFee(fee)}>

47− {fee.display}

48− </div>

49− ))}

50− </Dropdown>

51− );

52−};

53−

54−export default FeeDropdown;

src/components/L2/Headers/L2BackHeader.tsx+8−5

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

1import React, { useCallback, useEffect, useState } from 'react';

2−import { Row, Icon } from '@tlon/indigo-react';

2+import { Row, Icon, Box } from '@tlon/indigo-react';

3

4import useRoller from 'lib/useRoller';

5import { useHistory } from 'store/history';

@@ -10,6 +10,7 @@ import { useNetwork } from 'store/network';

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

11import { toBN } from 'web3-utils';

12import BN from 'bn.js';

13+import { isDevelopment } from 'lib/flags';

13

14

14export interface L2BackHeaderProps {

15export interface L2BackHeaderProps {

15 back?: () => void;

16 back?: () => void;

@@ -34,7 +35,9 @@ const L2BackHeader = ({ back, hideBalance = false }: L2BackHeaderProps) => {

34 }, [back, pop]);

35 }, [back, pop]);

35

36

36 useEffect(() => {

37 useEffect(() => {

38+ if (isDevelopment) {

37− console.log('loaded config in L2BackHeader:', config);

39+ console.log('loaded config in L2BackHeader:', config);

40+ }

38 }, [config]);

41 }, [config]);

39

42

40 useEffect(() => {

43 useEffect(() => {

@@ -57,13 +60,13 @@ const L2BackHeader = ({ back, hideBalance = false }: L2BackHeaderProps) => {

57 <Row className="l2-back-header">

60 <Row className="l2-back-header">

58 <Icon className="back-button" icon="ChevronWest" onClick={goBack} />

61 <Icon className="back-button" icon="ChevronWest" onClick={goBack} />

59 {currentL2 ? (

62 {currentL2 ? (

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

63+ <Row className="rollup-timer">

61 <Icon icon="Clock" />

64 <Icon icon="Clock" />

62 {nextRoll}

65 {nextRoll}

63− </div>

66+ </Row>

64 ) : (

67 ) : (

65 !hideBalance && (

68 !hideBalance && (

66− <div className="eth-balance">Balance: {Number(ethBalance)} ETH</div>

69+ <Box className="eth-balance">Balance: {Number(ethBalance)} ETH</Box>

67 )

70 )

68 )}

71 )}

69 </Row>

72 </Row>

src/components/L2/Headers/L2PointHeader.tsx+7−4

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

1import React, { useEffect, useCallback } from 'react';

2−import { Row } from '@tlon/indigo-react';

2+import { Box, Row } from '@tlon/indigo-react';

3

4import useRoller from 'lib/useRoller';

5import { useHistory } from 'store/history';

@@ -9,6 +9,7 @@ import AccountsDropdown from '../Dropdowns/AccountsDropdown';

9import { useRollerStore } from 'store/roller';

10

11import './L2PointHeader.scss';

12+import { isDevelopment } from 'lib/flags';

12

13

13export interface L2PointHeaderProps {

14export interface L2PointHeaderProps {

14 numInvites: number;

15 numInvites: number;

@@ -25,7 +26,9 @@ const L2PointHeader = ({

25 const { nextRoll, currentL2, pendingTransactions } = useRollerStore();

26 const { nextRoll, currentL2, pendingTransactions } = useRollerStore();

26

27

27 useEffect(() => {

28 useEffect(() => {

29+ if (isDevelopment) {

28− console.log('loaded config in L2PointHeader:', config);

30+ console.log('loaded config in L2PointHeader:', config);

31+ }

29 }, [config]);

32 }, [config]);

30

33

31 const { push, names }: any = useHistory();

34 const { push, names }: any = useHistory();

@@ -50,9 +53,9 @@ const L2PointHeader = ({

50 </Row>

53 </Row>

51 )}

54 )}

52 {!hideTimer && currentL2 && !pendingTransactions.length && (

55 {!hideTimer && currentL2 && !pendingTransactions.length && (

53− <div className="rollup-timer" onClick={goToHistory}>

56+ <Box className="rollup-timer" onClick={goToHistory}>

54 {nextRoll}

57 {nextRoll}

55− </div>

58+ </Box>

56 )}

59 )}

57 {currentL2 && <HistoryIcon className="history" onClick={goToHistory} />}

60 {currentL2 && <HistoryIcon className="history" onClick={goToHistory} />}

58 </Row>

61 </Row>

src/components/L2/LayerIndicator.tsx+2−1

@@ -1,4 +1,5 @@

1import React from 'react';

2+import { Box } from '@tlon/indigo-react';

2

3

3import './LayerIndicator.scss';

4import './LayerIndicator.scss';

4

5

@@ -8,7 +9,7 @@ export interface LayerIndicatorProps {

8}

9}

9

10

10const LayerIndicator = ({ layer, size }: LayerIndicatorProps) => {

11const LayerIndicator = ({ layer, size }: LayerIndicatorProps) => {

11− return <div className={`layer-indicator ${size} l${layer}`}>L{layer}</div>;

12+ return <Box className={`layer-indicator ${size} l${layer}`}>L{layer}</Box>;

12};

13};

13

14

14export default LayerIndicator;

15export default LayerIndicator;

src/components/L2/LoadingOverlay.tsx+3−3

@@ -1,4 +1,4 @@

1−import { LoadingSpinner } from '@tlon/indigo-react';

1+import { Box, LoadingSpinner } from '@tlon/indigo-react';

2

3import './LoadingOverlay.scss';

4

@@ -8,9 +8,9 @@ const LoadingOverlay = ({ loading = false }: { loading: boolean }) => {

8 }

9

10 return (

11− <div className="loading-overlay">

11+ <Box className="loading-overlay">

12 <LoadingSpinner foreground="white" background="rgba(0,0,0,0.3)" />

13− </div>

13+ </Box>

14 );

15};

16

src/components/L2/Paginator.tsx+9−9

@@ -1,4 +1,4 @@

1−import { Icon } from '@tlon/indigo-react';

1+import { Row, Box, Icon } from '@tlon/indigo-react';

2

3import './Paginator.scss';

4

@@ -20,21 +20,21 @@ const Paginator = ({

20 const numPages = Math.ceil(numElements / numPerPage);

21

22 return (

23− <div className="paginator">

23+ <Row className="paginator">

24− <div className="chevron-button">

24+ <Box className="chevron-button">

25 {page > 0 && (

26 <Icon icon="ChevronWest" className="previous" onClick={goPrevious} />

27 )}

28− </div>

28+ </Box>

29− <div className="info">

29+ <Box className="info">

30 {page + 1} of {numPages}

31− </div>

31+ </Box>

32− <div className="chevron-button">

32+ <Box className="chevron-button">

33 {page + 1 < numPages && (

34 <Icon icon="ChevronEast" className="next" onClick={goNext} />

35 )}

36− </div>

36+ </Box>

37− </div>

37+ </Row>

38 );

39};

40

src/components/L2/Points/IncomingPoint.tsx+11−10

@@ -1,5 +1,6 @@

1import React from 'react';

2import * as ob from 'urbit-ob';

3+import { Box } from '@tlon/indigo-react';

3

4

4import LayerIndicator from '../LayerIndicator';

5import LayerIndicator from '../LayerIndicator';

5import './IncomingPoint.scss';

6import './IncomingPoint.scss';

@@ -12,23 +13,23 @@ export interface IncomingPointProps {

12

13

13const IncomingPoint = ({ point, accept, reject }: IncomingPointProps) => {

14const IncomingPoint = ({ point, accept, reject }: IncomingPointProps) => {

14 return (

15 return (

15− <div className="incoming-point" key={`incoming-${point}`}>

16+ <Box className="incoming-point" key={`incoming-${point}`}>

16− <div className="top">

17+ <Box className="top">

17− <div className="title">Incoming Point: {ob.patp(point)}</div>

18+ <Box className="title">Incoming Point: {ob.patp(point)}</Box>

18− <div className="button-row">

19+ <Box className="button-row">

19 <button className="accept" onClick={accept}>

20 <button className="accept" onClick={accept}>

20 Accept

21 Accept

21 </button>

22 </button>

22 <button className="reject" onClick={reject}>

23 <button className="reject" onClick={reject}>

23 Reject

24 Reject

24 </button>

25 </button>

25− </div>

26+ </Box>

26− </div>

27+ </Box>

27− <div className="bottom">

28+ <Box className="bottom">

28 <LayerIndicator layer={1} size="sm" />

29 <LayerIndicator layer={1} size="sm" />

29− <div className="date"></div>

30+ <Box className="date"></Box>

30− </div>

31+ </Box>

31− </div>

32+ </Box>

32 );

33 );

33};

34};

34

35

src/components/L2/Window/BodyPane.tsx+6−3

@@ -1,11 +1,14 @@

1import React from 'react';

2+import { Box } from '@tlon/indigo-react';

2

3

3import './BodyPane.scss';

4import './BodyPane.scss';

4

5

5−export interface BodyPaneProps {}

6+export interface BodyPaneProps {

7+ children: React.ReactNode;

8+}

6

9

7−const BodyPane = ({ children }: any) => {

10+const BodyPane = ({ children }: BodyPaneProps) => {

8− return <div className="body-pane">{children}</div>;

11+ return <Box className="body-pane">{children}</Box>;

9};

12};

10

13

11export default BodyPane;

14export default BodyPane;

src/components/L2/Window/HeaderPane.tsx+6−3

@@ -1,11 +1,14 @@

1import React from 'react';

2+import { Box } from '@tlon/indigo-react';

2

3

3import './HeaderPane.scss';

4import './HeaderPane.scss';

4

5

5−export interface HeaderPaneProps {}

6+export interface HeaderPaneProps {

7+ children: React.ReactNode;

8+}

6

9

7−const HeaderPane = ({ children }: any) => {

10+const HeaderPane = ({ children }: HeaderPaneProps) => {

8− return <div className="header-pane">{children}</div>;

11+ return <Box className="header-pane">{children}</Box>;

9};

12};

10

13

11export default HeaderPane;

14export default HeaderPane;

src/components/L2/Window/Window.tsx+6−3

@@ -1,10 +1,13 @@

1import React from 'react';

2+import { Box } from '@tlon/indigo-react';

2import './Window.scss';

3import './Window.scss';

3

4

4−export interface WindowProps {}

5+export interface WindowProps {

6+ children: React.ReactNode;

7+}

5

8

6−const Window = ({ children }: any) => {

9+const Window = ({ children }: WindowProps) => {

7− return <div className="window">{children}</div>;

10+ return <Box className="window">{children}</Box>;

8};

11};

9

12

10export default Window;

13export default Window;

src/lib/constants.ts+5

@@ -78,6 +78,9 @@ const DEFAULT_HD_PATH = "m/44'/60'/0'/0/0";

78const ETH_ZERO_ADDR = '0x0000000000000000000000000000000000000000';

79const ETH_ZERO_ADDR_SHORT = '0x0';

80

81+const LINEAR_STAR_RELEASE = '0x86cd9cd0992f04231751e3761de45cecea5d1801';

82+const CONDITIONAL_STAR_RELEASE = '0x8c241098c3d3498fe1261421633fd57986d74aea';

83+

81const WALLET_TYPES = {

84const WALLET_TYPES = {

82 MNEMONIC: Symbol('MNEMONIC'),

85 MNEMONIC: Symbol('MNEMONIC'),

83 TICKET: Symbol('TICKET'),

86 TICKET: Symbol('TICKET'),

@@ -109,6 +112,8 @@ export {

109 DEFAULT_HD_PATH,

112 DEFAULT_HD_PATH,

110 ETH_ZERO_ADDR,

113 ETH_ZERO_ADDR,

111 ETH_ZERO_ADDR_SHORT,

114 ETH_ZERO_ADDR_SHORT,

115+ LINEAR_STAR_RELEASE,

116+ CONDITIONAL_STAR_RELEASE,

112 MAX_GAS_PRICE_GWEI,

117 MAX_GAS_PRICE_GWEI,

113 GAS_LIMITS,

118 GAS_LIMITS,

114 GEN_STATES,

119 GEN_STATES,

src/lib/useInviter.js−2

@@ -193,8 +193,6 @@ const useInviter = () => {

193 };

194 }

195

196− console.log('INVITES', confirmedInvites);

197− // TODO: store these locally, and also handle the situation

198 return { invites: confirmedInvites };

196 return { invites: confirmedInvites };

199 },

197 },

200 [

198 [

src/lib/useRoller.ts+8−4

@@ -130,7 +130,7 @@ export default function useRoller() {

130

131 const { proxy, nonce } = getProxyAndNonce(starInfo, _wallet.address);

132

133− if (proxy === undefined || nonce === undefined)

133+ if (!(proxy === 'own' || proxy === 'spawn') || nonce === undefined)

134 throw new Error("Error: Address doesn't match proxy");

135

136 for (let i = 0; i < numInvites && planets[i]; i++) {

@@ -143,7 +143,7 @@ export default function useRoller() {

143

144 const from = {

145 ship: _point, //ship that is spawning the planet

146− proxy, // TODO: check that this is either "own" or "spawn"

146+ proxy,

147 };

148

149 const data = {

@@ -229,7 +229,9 @@ export default function useRoller() {

229 const availableInvites = invites.available;

230

231 const pendingTransactions = await api.getPendingByShip(curPoint);

232+ if (isDevelopment) {

232− console.log('PENDING', pendingTransactions);

233+ console.log('PENDING', pendingTransactions);

234+ }

233 setPendingTransactions(pendingTransactions);

235 setPendingTransactions(pendingTransactions);

234

236

235 const stillPending = invites.pending.filter(invite => {

237 const stillPending = invites.pending.filter(invite => {

@@ -290,7 +292,9 @@ export default function useRoller() {

290

292

291 // Iterate over all spawned and controlled planets

293 // Iterate over all spawned and controlled planets

292 // If the planet is not in available invites, generate the ticket and add it

294 // If the planet is not in available invites, generate the ticket and add it

295+ if (isDevelopment) {

293− console.log('POSSIBLE MISSING', possibleMissingInvites);

296+ console.log('POSSIBLE MISSING', possibleMissingInvites);

297+ }

294

298

295 const newClaimed = availableInvites.filter(

299 const newClaimed = availableInvites.filter(

296 ({ planet }) => !possibleMissingInvites.includes(planet)

300 ({ planet }) => !possibleMissingInvites.includes(planet)

src/views/Invite/Cohort.js+1−2

@@ -165,8 +165,7 @@ export default function InviteCohort() {

165 const createInvites = useCallback(async () => {

166 setLoading(true);

167 try {

168− const invites = await generateInviteCodes(numInvites);

168+ await generateInviteCodes(numInvites);

169− console.log('L2 INVITES', invites);

170 getPendingTransactions(point);

169 getPendingTransactions(point);

171 pop();

170 pop();

172 } catch (error) {

171 } catch (error) {

src/views/IssueChild.js−1

@@ -43,7 +43,6 @@ export function useIssueChild() {

43 return useEthereumTransaction(

44 useCallback(

45 (spawnedPoint, owner) => {

46− console.log(5, spawnedPoint, owner);

47 setSpawnedPoint(spawnedPoint);

46 setSpawnedPoint(spawnedPoint);

48 return azimuth.ecliptic.spawn(_contracts, spawnedPoint, owner);

47 return azimuth.ecliptic.spawn(_contracts, spawnedPoint, owner);

49 },

48 },

src/views/Point.js−9

@@ -291,15 +291,6 @@ export default function Point() {

291 disabled={!canManage}

292 />

293 </Grid.Item>

294− {/* <Grid.Item

295− full

296− as={ForwardButton}

297− disabled={!canBitcoin}

298− className="mt1"

299− detail="Bitcoin management"

300− onClick={goBitcoin}>

301− Bitcoin

302− </Grid.Item> */}

303 {isParent && (

294 {isParent && (

304 <>

295 <>

305 <Grid.Item

296 <Grid.Item

src/views/Points.js+3−6

@@ -26,6 +26,7 @@ import CopiableAddress from 'components/copiable/CopiableAddress';

26import NavHeader from 'components/NavHeader';

27import L2PointHeader from 'components/L2/Headers/L2PointHeader';

28import IncomingPoint from 'components/L2/Points/IncomingPoint';

29+import { CONDITIONAL_STAR_RELEASE, LINEAR_STAR_RELEASE } from 'lib/constants';

29

30

30export const maybeGetResult = (obj, key, defaultValue) =>

31export const maybeGetResult = (obj, key, defaultValue) =>

31 obj.matchWith({

32 obj.matchWith({

@@ -66,8 +67,8 @@ export const getOutgoingPoints = (controlledPoints, getDetails) => {

66};

67};

67

68

68export const isLocked = details =>

69export const isLocked = details =>

69− details.owner === '0x86cd9cd0992f04231751e3761de45cecea5d1801' ||

70+ details.owner === LINEAR_STAR_RELEASE ||

70− details.owner === '0x8c241098c3d3498fe1261421633fd57986d74aea';

71+ details.owner === CONDITIONAL_STAR_RELEASE;

71

72

72const PointList = function({

73const PointList = function({

73 points,

74 points,

@@ -148,7 +149,6 @@ export default function Points() {

148 points.matchWith({

149 points.matchWith({

149 Error: () => Nothing(),

150 Error: () => Nothing(),

150 Ok: c => {

151 Ok: c => {

151− // TODO: how to determine this?

152 const points = c.value.ownedPoints.map(point =>

153 getDetails(point).chain(details =>

154 Just({ point, has: isLocked(details) })

@@ -375,9 +375,6 @@ export default function Points() {

375

376 {allPoints.length > 0 && (

377 <Grid.Item full as={Grid} gap={1}>

378− {/* <Grid.Item full as={H5}>

379− {pluralize(allPoints.length, 'ID')}

380− </Grid.Item> */}

381 <Grid.Item full as={PointList} points={allPoints} />

378 <Grid.Item full as={PointList} points={allPoints} />

382 </Grid.Item>

379 </Grid.Item>

383 )}

380 )}

src/views/TransactionHistory.tsx+9−9

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

1import React, { useEffect, useState } from 'react';

2−import { Row } from '@tlon/indigo-react';

2+import { Row, Box } from '@tlon/indigo-react';

3

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

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

@@ -8,7 +8,7 @@ import { useLocalRouter } from 'lib/LocalRouter';

8

9import View from 'components/View';

10import L2BackHeader from 'components/L2/Headers/L2BackHeader';

11−import { AddressHistory } from '@urbit/roller-api';

11+import { RollerTransaction } from '@urbit/roller-api';

12

13import './TransactionHistory';

14

@@ -17,7 +17,7 @@ const TransactionHistory = () => {

17 const { api } = useRoller();

18 const { wallet }: any = useWallet();

19 const address = need.addressFromWallet(wallet);

20− const [transactions, setTransactions] = useState<AddressHistory>([]);

20+ const [transactions, setTransactions] = useState<RollerTransaction[]>([]);

21

22 useEffect(() => {

23 const getTransactionHistory = async () => {

@@ -36,16 +36,16 @@ const TransactionHistory = () => {

36 className="transaction-history"

37 header={<L2BackHeader />}>

38 {transactions.map(({ ship, status, type, hash }) => (

39− <div className="transaction">

39+ <Box className="transaction">

40 <Row className="title-row">

41− <div className="title">{type}</div>

41+ <Box className="title">{type}</Box>

42− <div className="hash">{hash}</div>

42+ <Box className="hash">{hash}</Box>

43 </Row>

44 <Row className="info-row">

45− <div className="status">{status}</div>

45+ <Box className="status">{status}</Box>

46− <div className="date"></div>

46+ <Box className="date"></Box>

47 </Row>

48− </div>

48+ </Box>

49 ))}

50 </View>

51 );