1ac970d · bridge · git.iko.soy

git.iko.soy/bridge

PR updates

commit1ac970dbb592f39d506992ca2e7f7daab9c0ea54 authorWill Galebach <willbach@gmail.com> dateTue 7 Sep 2021, 18:03 (5 years ago) parent2573c01

22 files changed+110−178

compare with master

unifiedsplit

src/components/L2/Card.tsx+3−3 src/components/L2/Dropdowns/AccountsDropdown.tsx+14−14 src/components/L2/Dropdowns/Dropdown.tsx+9−9 src/components/L2/Dropdowns/FeeDropdown.scss−24 src/components/L2/Dropdowns/FeeDropdown.tsx−54 src/components/L2/Headers/L2BackHeader.tsx+8−5 src/components/L2/Headers/L2PointHeader.tsx+7−4 src/components/L2/LayerIndicator.tsx+2−1 src/components/L2/LoadingOverlay.tsx+3−3 src/components/L2/Paginator.tsx+9−9 src/components/L2/Points/IncomingPoint.tsx+11−10 src/components/L2/Window/BodyPane.tsx+6−3 src/components/L2/Window/HeaderPane.tsx+6−3 src/components/L2/Window/Window.tsx+6−3 src/lib/constants.ts+5 src/lib/useInviter.js−2 src/lib/useRoller.ts+8−4 src/views/Invite/Cohort.js+1−2 src/views/IssueChild.js−1 src/views/Point.js−9 src/views/Points.js+3−6 src/views/TransactionHistory.tsx+9−9

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

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

88 title?: string;

99 subtitle?: string;

1010 onClick?: () => void;

11− children: any[];

11+ children: React.ReactNode;

1212}

1313

1414export default function Card({

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

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

2424 <Row>

2525 {!!icon && icon}

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

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

2727 </Row>

2828 )}

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

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

3030 {children}

3131 </Box>

3232 );

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

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

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

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

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

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

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

66import Sigil from 'components/Sigil';

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

1414import Dropdown from './Dropdown';

1515

1616import './AccountsDropdown.scss';

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

1718

1819const AccountsDropdown = () => {

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

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

3031 ) || [];

3132

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

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

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

34+ const displayAddress = abbreviateAddress(currentAddress);

3535

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

3737 setPointCursor(Just(point));

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

4949 <Dropdown

5050 className="accounts-dropdown"

5151 open={open}

52− value={addressLeadingFive}

52+ value={displayAddress}

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

5454 <CopiableAddressWrap className="current-address">

5555 {displayAddress}

5656 </CopiableAddressWrap>

57− <div className="divider" />

58− <div className="points">

57+ <Box className="divider" />

58+ <Box className="points">

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

6060 const patp = ob.patp(point);

6161

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

6464 className="entry"

6565 onClick={selectPoint(point)}

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

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

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

6868 <Row>

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

70− <div className="sigil">

70+ <Box className="sigil">

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

72− </div>

72+ </Box>

7373 </Row>

7474 </Row>

7575 );

7676 })}

77− </div>

78− <div className="divider" />

77+ </Box>

78+ <Box className="divider" />

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

80− <div>Migrate</div>

80+ <Box>Migrate</Box>

8181 <Row className="layer-migration">

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

8383 <Icon icon="ArrowEast" />

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

8686 </Row>

8787 {canBitcoin && (

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

89− <div>Bitcoin</div>

89+ <Box>Bitcoin</Box>

9090 <Icon icon="Bitcoin" />

9191 </Row>

9292 )}

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

94− <div>Logout</div>

94+ <Box>Logout</Box>

9595 <Icon icon="LogOut" />

9696 </Row>

9797 </Dropdown>

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

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

11import React from 'react';

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

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

44import './Dropdown.scss';

66export interface DropdownProps {

77 className: string;

8− children: any;

8+ children: React.ReactNode;

99 value: string;

1010 open: boolean;

1111 toggleOpen: () => void;

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

1919 className,

2020}: DropdownProps) => {

2121 return (

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

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

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

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

2424 {value}

2525 <Icon icon="ChevronSouth" />

26− </div>

26+ </Box>

2727 {open && (

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

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

30− </div>

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

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

30+ </Box>

3131 )}

32− </div>

32+ </Box>

3333 );

3434};

3535

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 @@

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

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

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

44import useRoller from 'lib/useRoller';

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

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

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

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

1212import BN from 'bn.js';

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

1314

1415export interface L2BackHeaderProps {

1516 back?: () => void;

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

3435 }, [back, pop]);

3536

3637 useEffect(() => {

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

38+ if (isDevelopment) {

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

40+ }

3841 }, [config]);

3942

4043 useEffect(() => {

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

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

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

5962 {currentL2 ? (

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

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

6164 <Icon icon="Clock" />

6265 {nextRoll}

63− </div>

66+ </Row>

6467 ) : (

6568 !hideBalance && (

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

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

6770 )

6871 )}

6972 </Row>

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

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

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

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

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

44import useRoller from 'lib/useRoller';

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

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

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

1010

1111import './L2PointHeader.scss';

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

1213

1314export interface L2PointHeaderProps {

1415 numInvites: number;

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

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

2627

2728 useEffect(() => {

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

29+ if (isDevelopment) {

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

31+ }

2932 }, [config]);

3033

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

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

5053 </Row>

5154 )}

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

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

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

5457 {nextRoll}

55− </div>

58+ </Box>

5659 )}

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

5861 </Row>

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

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

11import React from 'react';

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

34import './LayerIndicator.scss';

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

89}

910

1011const 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>;

1213};

1314

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

33import './LoadingOverlay.scss';

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

88 }

1010 return (

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

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

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

13− </div>

13+ </Box>

1414 );

1515};

1616

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

33import './Paginator.scss';

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

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

2121

2222 return (

23− <div className="paginator">

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

23+ <Row className="paginator">

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

2525 {page > 0 && (

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

2727 )}

28− </div>

29− <div className="info">

28+ </Box>

29+ <Box className="info">

3030 {page + 1} of {numPages}

31− </div>

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

31+ </Box>

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

3333 {page + 1 < numPages && (

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

3535 )}

36− </div>

37− </div>

36+ </Box>

37+ </Row>

3838 );

3939};

4040

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

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

11import React from 'react';

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

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

45import LayerIndicator from '../LayerIndicator';

56import './IncomingPoint.scss';

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

1213

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

1415 return (

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

16− <div className="top">

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

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

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

17+ <Box className="top">

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

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

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

2021 Accept

2122 </button>

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

2324 Reject

2425 </button>

25− </div>

26− </div>

27− <div className="bottom">

26+ </Box>

27+ </Box>

28+ <Box className="bottom">

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

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

30− </div>

31− </div>

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

31+ </Box>

32+ </Box>

3233 );

3334};

3435

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

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

11import React from 'react';

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

34import './BodyPane.scss';

5−export interface BodyPaneProps {}

6+export interface BodyPaneProps {

7+ children: React.ReactNode;

8+}

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

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

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

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

912};

1013

1114export default BodyPane;

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

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

11import React from 'react';

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

34import './HeaderPane.scss';

5−export interface HeaderPaneProps {}

6+export interface HeaderPaneProps {

7+ children: React.ReactNode;

8+}

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

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

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

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

912};

1013

1114export default HeaderPane;

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

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

11import React from 'react';

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

23import './Window.scss';

4−export interface WindowProps {}

5+export interface WindowProps {

6+ children: React.ReactNode;

7+}

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

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

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

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

811};

912

1013export default Window;

src/lib/constants.ts+5

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

7878const ETH_ZERO_ADDR = '0x0000000000000000000000000000000000000000';

7979const ETH_ZERO_ADDR_SHORT = '0x0';

8080

81+const LINEAR_STAR_RELEASE = '0x86cd9cd0992f04231751e3761de45cecea5d1801';

82+const CONDITIONAL_STAR_RELEASE = '0x8c241098c3d3498fe1261421633fd57986d74aea';

83+

8184const WALLET_TYPES = {

8285 MNEMONIC: Symbol('MNEMONIC'),

8386 TICKET: Symbol('TICKET'),

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

109112 DEFAULT_HD_PATH,

110113 ETH_ZERO_ADDR,

111114 ETH_ZERO_ADDR_SHORT,

115+ LINEAR_STAR_RELEASE,

116+ CONDITIONAL_STAR_RELEASE,

112117 MAX_GAS_PRICE_GWEI,

113118 GAS_LIMITS,

114119 GEN_STATES,

src/lib/useInviter.js−2

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

193193 };

194194 }

195195

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

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

198196 return { invites: confirmedInvites };

199197 },

200198 [

src/lib/useRoller.ts+8−4

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

130130

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

132132

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

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

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

135135

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

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

143143

144144 const from = {

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

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

146+ proxy,

147147 };

148148

149149 const data = {

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

229229 const availableInvites = invites.available;

230230

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

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

232+ if (isDevelopment) {

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

234+ }

233235 setPendingTransactions(pendingTransactions);

234236

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

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

290292

291293 // Iterate over all spawned and controlled planets

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

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

295+ if (isDevelopment) {

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

297+ }

294298

295299 const newClaimed = availableInvites.filter(

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

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

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

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

166166 setLoading(true);

167167 try {

168− const invites = await generateInviteCodes(numInvites);

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

168+ await generateInviteCodes(numInvites);

170169 getPendingTransactions(point);

171170 pop();

172171 } catch (error) {

src/views/IssueChild.js−1

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

4343 return useEthereumTransaction(

4444 useCallback(

4545 (spawnedPoint, owner) => {

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

4746 setSpawnedPoint(spawnedPoint);

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

4948 },

src/views/Point.js−9

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

291291 disabled={!canManage}

292292 />

293293 </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> */}

303294 {isParent && (

304295 <>

305296 <Grid.Item

src/views/Points.js+3−6

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

2626import NavHeader from 'components/NavHeader';

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

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

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

2930

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

3132 obj.matchWith({

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

6667};

6768

6869export const isLocked = details =>

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

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

70+ details.owner === LINEAR_STAR_RELEASE ||

71+ details.owner === CONDITIONAL_STAR_RELEASE;

7172

7273const PointList = function({

7374 points,

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

148149 points.matchWith({

149150 Error: () => Nothing(),

150151 Ok: c => {

151− // TODO: how to determine this?

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

153153 getDetails(point).chain(details =>

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

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

375375

376376 {allPoints.length > 0 && (

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

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

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

380− </Grid.Item> */}

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

382379 </Grid.Item>

383380 )}

src/views/TransactionHistory.tsx+9−9

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

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

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

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

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

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

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

99import View from 'components/View';

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

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

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

1212

1313import './TransactionHistory';

1414

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

1717 const { api } = useRoller();

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

1919 const address = need.addressFromWallet(wallet);

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

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

2121

2222 useEffect(() => {

2323 const getTransactionHistory = async () => {

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

3636 className="transaction-history"

3737 header={<L2BackHeader />}>

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

39− <div className="transaction">

39+ <Box className="transaction">

4040 <Row className="title-row">

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

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

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

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

4343 </Row>

4444 <Row className="info-row">

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

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

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

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

4747 </Row>

48− </div>

48+ </Box>

4949 ))}

5050 </View>

5151 );