ac1828f · bridge · git.iko.soy

src/components/L2/Dropdowns/AccountsDropdown.scss+1−1

compare with master

unifiedsplit

@@ -5,7 +5,7 @@

5 position: relative;

6

7 .content-border {

8− .content {

8+ .dropdown-content {

9 .entry, .current-address {

10 display: flex;

11 flex-direction: row;

src/components/L2/Dropdowns/AccountsDropdown.tsx+1−6

@@ -15,11 +15,7 @@ import Dropdown from './Dropdown';

15

16import './AccountsDropdown.scss';

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

18−

18+import { PointLayer } from 'lib/types/PointLayer';

19−interface PointLayer {

20− point: number;

21− layer: 1 | 2;

22−}

23

19

24const AccountsDropdown = () => {

20const AccountsDropdown = () => {

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

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

@@ -30,7 +26,6 @@ const AccountsDropdown = () => {

30

26

31 const canBitcoin = Just.hasInstance(walletInfo.urbitWallet);

27 const canBitcoin = Just.hasInstance(walletInfo.urbitWallet);

32

28

33− console.log('WHAT', controlledPoints)

34 const points = controlledPoints?.value?.value?.pointsWithLayers || [];

29 const points = controlledPoints?.value?.value?.pointsWithLayers || [];

35

30

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

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

src/components/L2/Dropdowns/Dropdown.scss+1−1

@@ -33,7 +33,7 @@

33 border-radius: $medium-border-radius;

34 z-index: 1;

35

36− .content {

36+ .dropdown-content {

37 border-radius: $medium-border-radius;

38 background-color: white;

39 border: 1px solid $light-gray;

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

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

4import './Dropdown.scss';

5

6export interface DropdownProps {

7− className: string;

7+ className?: string;

8 children: React.ReactNode;

9− value: string;

9+ value: string | React.ReactNode;

10 open: boolean;

11 toggleOpen: () => void;

12}

@@ -16,7 +16,7 @@ const Dropdown = ({

16 value,

17 open,

18 toggleOpen,

19− className,

19+ className = '',

20}: DropdownProps) => {

21 return (

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

@@ -26,7 +26,7 @@ const Dropdown = ({

26 </Box>

27 {open && (

28 <Box className="content-border">

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

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

30 </Box>

31 )}

32 </Box>

src/types/Invite.ts → src/lib/types/Invite.tsrenamed

The content is the same.

src/types/L1Point.ts → src/lib/types/L1Point.tsrenamed

The content is the same.

src/lib/types/PointLayer.tsnew file+4

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

1+export interface PointLayer {

2+ point: number;

3+ layer: 1 | 2;

4+}

src/lib/useRoller.ts+14−17

@@ -269,24 +269,26 @@ export default function useRoller() {

269 azimuth.azimuth.getPointSize(p) ===

270 azimuth.azimuth.PointSize.Planet

271 );

272− } else {

272+ }

273− const outgoingPoints = getOutgoingPoints(

274− controlledPoints,

275− getDetails

276− );

277

273

274+ const outgoingPoints = getOutgoingPoints(

275+ controlledPoints,

276+ getDetails

277+ );

278+

278− const availablePoints = await azimuth.azimuth.getUnspawnedChildren(

279+ const availablePoints = await azimuth.azimuth.getUnspawnedChildren(

279− _contracts,

280+ _contracts,

280− curPoint

281+ curPoint

281− );

282+ );

282

283

284+ possibleMissingInvites = possibleMissingInvites.concat(

283− possibleMissingInvites = outgoingPoints.filter(

285+ outgoingPoints.filter(

284 (p: number) =>

286 (p: number) =>

285 azimuth.azimuth.getPointSize(p) ===

287 azimuth.azimuth.getPointSize(p) ===

286 azimuth.azimuth.PointSize.Planet &&

288 azimuth.azimuth.PointSize.Planet &&

287 availablePoints.includes(p)

289 availablePoints.includes(p)

288− );

290+ )

289− }

291+ );

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

@@ -344,10 +346,6 @@ export default function useRoller() {

344 ]

346 ]

345 );

347 );

346

348

347− const migratePoint = useCallback(async () => {

348− console.log('MIGRATING')

349− }, []);

350−

351 // On load, get initial config

349 // On load, get initial config

352 useEffect(() => {

350 useEffect(() => {

353 if (config) {

351 if (config) {

@@ -381,6 +379,5 @@ export default function useRoller() {

381 getInvites,

379 getInvites,

382 getPendingTransactions,

380 getPendingTransactions,

383 generateInviteCodes,

381 generateInviteCodes,

384− migratePoint,

385 };

382 };

386}

383}

src/store/lib/useControlledPointsStore.js+18−19

@@ -53,25 +53,24 @@ export default function useControlledPointsStore() {

53 azimuth.azimuth.getSpawningFor(_contracts, address),

54 ]);

55

56− console.log(1)

57− const pointsWithLayers = await Promise.all(

56+ // const pointsWithLayers = await Promise.all(

58− ownedPoints.map(async ship => {

57+ // ownedPoints.map(async ship => {

59− console.log(2)

60− try {

58+ // try {

61− const pointInfo = await api.getPoint(Number(ship));

59+ // const pointInfo = await api.getPoint(Number(ship));

62− console.log(3, pointInfo)

63− return {

60+ // return {

64− point: Number(ship),

61+ // point: Number(ship),

65− layer: isL2(pointInfo?.dominion) ? 1 : 2,

62+ // layer: isL2(pointInfo?.dominion) ? 1 : 2,

66− };

63+ // };

67− } catch (error) {

64+ // } catch (error) {

68− console.warn(error)

65+ // console.warn(error);

69− return { point: ship, layer: 1 };

66+ // return { point: ship, layer: 1 };

70− }

67+ // }

71− })

68+ // })

72− );

69+ // );

73−

70+ const pointsWithLayers = ownedPoints.map(point => ({

74− console.log(4, pointsWithLayers)

71+ point: Number(point),

72+ layer: 1,

73+ }));

75

74

76 if (

75 if (

77 ownedPoints === null &&

76 ownedPoints === null &&

src/views/Point/MigrateL2.scss+44

@@ -109,6 +109,50 @@

109 .select-ship {

110 color: $mid-gray;

111 }

112+

113+ .entry {

114+ display: flex;

115+ flex-direction: row;

116+ align-items: center;

117+ cursor: pointer;

118+

119+ padding: 8px 0 8px 6px;

120+

121+ &:hover {

122+ opacity: 0.8;

123+ }

124+

125+ svg {

126+ height: 16px;

127+ width: 16px;

128+ }

129+

130+ .sigil {

131+ margin-right: 8px;

132+ width: 24px;

133+ height: 24px;

134+ border-radius: $small-border-radius;

135+ }

136+

137+ .layer-migration {

138+ svg {

139+ width: 12px;

140+ height: 12px;

141+ margin: 4px 2px;

142+ }

143+ }

144+ }

145+

146+ .dropdown {

147+ margin-top: 4px;

148+ &.migrate-selector .dropdown-content {

149+ max-height: 200px;

150+ }

151+

152+ .selector .entry {

153+ padding: 0;

154+ }

155+ }

112 }

156 }

113 }

157 }

114}

158}

src/views/Point/MigrateL2.tsx+60−4

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

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

2import { Grid } from 'indigo-react';

3import * as azimuth from 'azimuth-js';

4+import * as ob from 'urbit-ob';

4

5

5import View from 'components/View';

6import View from 'components/View';

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

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

@@ -25,9 +26,31 @@ import { useNetwork } from 'store/network';

25import { usePointCache } from 'store/pointCache';

26import { usePointCache } from 'store/pointCache';

26import useEthereumTransaction from 'lib/useEthereumTransaction';

27import useEthereumTransaction from 'lib/useEthereumTransaction';

27import { GAS_LIMITS } from 'lib/constants';

28import { GAS_LIMITS } from 'lib/constants';

29+import Dropdown from 'components/L2/Dropdowns/Dropdown';

30+import { PointLayer } from 'lib/types/PointLayer';

31+import Sigil from 'components/Sigil';

28

32

29const DUMMY_L2_ADDRESS = '0x1111111111111111111111111111111111111111';

33const DUMMY_L2_ADDRESS = '0x1111111111111111111111111111111111111111';

30

34

35+const PointEntry = ({

36+ point,

37+ select,

38+}: {

39+ point: number;

40+ select?: () => void;

41+}) => {

42+ const patp = ob.patp(point);

43+

44+ return (

45+ <Row className="entry" onClick={select}>

46+ <Box className="sigil">

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

48+ </Box>

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

50+ </Row>

51+ );

52+};

53+

31const useMigrate = () => {

54const useMigrate = () => {

32 const { contracts }: any = useNetwork();

55 const { contracts }: any = useNetwork();

33 const { syncDates }: any = usePointCache();

56 const { syncDates }: any = usePointCache();

@@ -55,13 +78,25 @@ const useMigrate = () => {

55

78

56export default function MigrateL2() {

79export default function MigrateL2() {

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

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

81+ const { pointCursor }: any = usePointCursor();

82+ const point = need.point(pointCursor);

83+ const { controlledPoints }: any = usePointCache();

58

84

59 const [proceed, setProceed] = useState(false);

85 const [proceed, setProceed] = useState(false);

60 const [hideMessage, setHideMessage] = useState(false);

86 const [hideMessage, setHideMessage] = useState(false);

61− const hideInfo = getHideMigrationMessage();

87+ const [selectedPoint, setSelectedPoint] = useState(point);

88+ const [showDropdown, setShowDropdown] = useState(false);

89+

90+ const points = controlledPoints?.value?.value?.pointsWithLayers || [

91+ { point, layer: 1 },

92+ ];

93+ const l1Points = points.filter(

94+ ({ point, layer }: PointLayer) =>

95+ layer === 1 &&

96+ azimuth.azimuth.getPointSize(point) === azimuth.azimuth.PointSize.Star

97+ );

62

98

63− const { pointCursor }: any = usePointCursor();

99+ const hideInfo = getHideMigrationMessage();

64− const point = need.point(pointCursor);

65

100

66 const { construct, unconstruct, completed, bind } = useMigrate();

101 const { construct, unconstruct, completed, bind } = useMigrate();

67

102

@@ -95,6 +130,15 @@ export default function MigrateL2() {

95 setProceed(true);

130 setProceed(true);

96 }, [hideMessage]);

131 }, [hideMessage]);

97

132

133+ const selectPoint = useCallback(

134+ (point: number) => {

135+ setSelectedPoint(point);

136+ setShowDropdown(false);

137+ construct(point);

138+ },

139+ [setSelectedPoint, setShowDropdown, construct]

140+ );

141+

98 const getContent = () => {

142 const getContent = () => {

99 if (proceed) {

143 if (proceed) {

100 return (

144 return (

@@ -102,7 +146,19 @@ export default function MigrateL2() {

102 <Box className="ship-selector">

146 <Box className="ship-selector">

103 <Box>Ship</Box>

147 <Box>Ship</Box>

104 <Box className="select-ship">Select one of your ships</Box>

148 <Box className="select-ship">Select one of your ships</Box>

105−

149+ <Dropdown

150+ open={showDropdown}

151+ toggleOpen={() => setShowDropdown(!showDropdown)}

152+ value={<PointEntry point={selectedPoint} />} // change this to include the sigil

153+ className="migrate-selector">

154+ {l1Points.map(({ point }: PointLayer) => (

155+ <PointEntry

156+ point={point}

157+ key={point}

158+ select={() => selectPoint(point)}

159+ />

160+ ))}

161+ </Dropdown>

106 </Box>

162 </Box>

107 <Grid.Item

163 <Grid.Item

108 full

164 full

src/views/Point/Point.js+4

@@ -31,6 +31,7 @@ import useRoller from 'lib/useRoller';

31

32import './Point.scss';

33import { isL2 } from 'lib/utils/roller';

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

34

35

35function InviteForm({

36function InviteForm({

36 showInviteForm,

37 showInviteForm,

@@ -138,6 +139,9 @@ export default function Point() {

138 const loadL2Info = async () => {

139 const loadL2Info = async () => {

139 const getTransactions = async () => {

140 const getTransactions = async () => {

140 const pointInfo = await api.getPoint(Number(point));

141 const pointInfo = await api.getPoint(Number(point));

142+ if (isDevelopment) {

143+ console.log('POINT INFO', pointInfo);

144+ }

141 setCurrentPoint(pointInfo);

145 setCurrentPoint(pointInfo);

142

146

143 getInvites(isL2(pointInfo.dominion));

147 getInvites(isL2(pointInfo.dominion));