@@ -1,6 +1,7 @@
11import React, { useState, useEffect, useCallback } from 'react';
22import { Grid } from 'indigo-react';
33import * as azimuth from 'azimuth-js';
4+import * as ob from 'urbit-ob';
45
56import View from 'components/View';
67import L2BackHeader from 'components/L2/Headers/L2BackHeader';
@@ -25,9 +26,31 @@ import { useNetwork } from 'store/network';
2526import { usePointCache } from 'store/pointCache';
2627import useEthereumTransaction from 'lib/useEthereumTransaction';
2728import { 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';
2832
2933const DUMMY_L2_ADDRESS = '0x1111111111111111111111111111111111111111';
3034
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+
3154const useMigrate = () => {
3255 const { contracts }: any = useNetwork();
3356 const { syncDates }: any = usePointCache();
@@ -55,13 +78,25 @@ const useMigrate = () => {
5578
5679export default function MigrateL2() {
5780 const { pop }: any = useLocalRouter();
81+ const { pointCursor }: any = usePointCursor();
82+ const point = need.point(pointCursor);
83+ const { controlledPoints }: any = usePointCache();
5884
5985 const [proceed, setProceed] = useState(false);
6086 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+ );
6298
63− const { pointCursor }: any = usePointCursor();
64− const point = need.point(pointCursor);
99+ const hideInfo = getHideMigrationMessage();
65100
66101 const { construct, unconstruct, completed, bind } = useMigrate();
67102
@@ -95,6 +130,15 @@ export default function MigrateL2() {
95130 setProceed(true);
96131 }, [hideMessage]);
97132
133+ const selectPoint = useCallback(
134+ (point: number) => {
135+ setSelectedPoint(point);
136+ setShowDropdown(false);
137+ construct(point);
138+ },
139+ [setSelectedPoint, setShowDropdown, construct]
140+ );
141+
98142 const getContent = () => {
99143 if (proceed) {
100144 return (
@@ -102,7 +146,19 @@ export default function MigrateL2() {
102146 <Box className="ship-selector">
103147 <Box>Ship</Box>
104148 <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>
106162 </Box>
107163 <Grid.Item
108164 full