4ca54bd · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

New invite system

4ca54bdWill Galebach5 years ago

src/components/L2/Headers/L2PointHeader.scss+6

compare with master

unifiedsplit

@@ -41,6 +41,12 @@

42 svg {

43 margin-right: 4px;

44+

45+ &:nth-child(2) {

46+ margin: 2px 0 0 4px;

47+ width: 12px;

48+ height: 12px;

49+ }

44 }

50 }

45 }

51 }

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

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

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

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

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

4import { isStar } from 'lib/utils/point';

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

15import './L2PointHeader.scss';

17export interface L2PointHeaderProps {

18− numInvites: number;

18+ numInvites?: number;

19 hideHome?: boolean;

20 hideTimer?: boolean;

21 hideInvites?: boolean;

@@ -23,7 +23,7 @@ export interface L2PointHeaderProps {

23}

25const L2PointHeader = ({

26− numInvites = 0,

26+ numInvites,

27 hideHome = false,

28 hideTimer = false,

29 hideInvites = false,

@@ -63,7 +63,11 @@ const L2PointHeader = ({

63 {showInvites && point.showInvites && (

64 <Row onClick={goToInvites} className="invites">

65 <InviteIcon />

66− {numInvites}

66+ {numInvites === undefined ? (

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

68+ ) : (

69+ numInvites

70+ )}

67 </Row>

71 </Row>

68 )}

72 )}

69 {!hideTimer && point.isL2Spawn && !pendingTransactions.length && (

73 {!hideTimer && point.isL2Spawn && !pendingTransactions.length && (

src/lib/types/Invite.ts+4

@@ -6,5 +6,9 @@ export interface Invite {

8export interface Invites {

9+ [key: number]: Invite[];

10+}

11+

12+export interface InviteTickets {

9 [key: number]: Invite;

13 [key: number]: Invite;

10}

14}

src/lib/useRoller.ts+26−74

@@ -40,7 +40,7 @@ import {

40 detach,

41 reject,

42} from './utils/roller';

43−import { ROLLER_HOSTS } from './constants';

43+import { ETH_ZERO_ADDR, ROLLER_HOSTS } from './constants';

45import {

46 Config,

@@ -89,12 +89,9 @@ export default function useRoller() {

89 const {

90 nextBatchTime,

91 point,

92− invitePoints,

93− removeInvite,

94 setNextBatchTime,

92 setNextBatchTime,

95 setPendingTransactions,

93 setPendingTransactions,

96 setInvites,

94 setInvites,

97− setInvitePoints,

98 setInviteGeneratingNum,

95 setInviteGeneratingNum,

99 setPoints,

96 setPoints,

100 updateInvite,

97 updateInvite,

@@ -319,17 +316,19 @@ export default function useRoller() {

319 };

316 };

320

317

321 const getInvites = useCallback(

318 const getInvites = useCallback(

322− async (isL2: boolean, getAll = false) => {

319+ async (isL2: boolean) => {

323 try {

320 try {

324 const curPoint: number = Number(need.point(pointCursor));

321 const curPoint: number = Number(need.point(pointCursor));

325− setInvites(invitePoints.map(p => inviteTemplate(p)));

326−

327 const _authToken = authToken.getOrElse(null);

322 const _authToken = authToken.getOrElse(null);

328 const _contracts = contracts.getOrElse(null);

323 const _contracts = contracts.getOrElse(null);

329

324

330 if (_authToken && _contracts) {

325 if (_authToken && _contracts) {

331 const spawnedPoints = isL2 ? await api.getSpawned(curPoint) : [];

326 const spawnedPoints = isL2 ? await api.getSpawned(curPoint) : [];

332

327

328+ const newPending = await api.getPendingByShip(curPoint);

329+ setPendingTransactions(newPending);

330+ const pendingSpawns = getPendingSpawns(newPending);

331+

333 const availablePoints = await azimuth.azimuth.getUnspawnedChildren(

332 const availablePoints = await azimuth.azimuth.getUnspawnedChildren(

334 _contracts,

333 _contracts,

335 curPoint

334 curPoint

@@ -340,9 +339,11 @@ export default function useRoller() {

340 getDetails

339 getDetails

341 ).filter((p: number) => isPlanet(p) && availablePoints.includes(p));

340 ).filter((p: number) => isPlanet(p) && availablePoints.includes(p));

342

341

343− const invitePlanets = spawnedPoints.concat(

342+ const invitePlanets = spawnedPoints

343+ .concat(

344− outgoingPoints.filter((p: number) => !spawnedPoints.includes(p))

344+ outgoingPoints.filter((p: number) => !spawnedPoints.includes(p))

345− );

345+ )

346+ .filter((p: number) => !pendingSpawns.has(p));

346

347

347 const newInvites: Invite[] = [];

348 const newInvites: Invite[] = [];

348 // Iterate over all of the stored invites, generating wallet info as necessary

349 // Iterate over all of the stored invites, generating wallet info as necessary

@@ -351,22 +352,28 @@ export default function useRoller() {

351 for (let i = 0; i < invitePlanets.length; i++) {

352 for (let i = 0; i < invitePlanets.length; i++) {

352 setInviteGeneratingNum(i + 1);

353 setInviteGeneratingNum(i + 1);

353 const planet = invitePlanets[i];

354 const planet = invitePlanets[i];

355+ const storedInvite = storedInvites[planet];

354 const invite =

356 const invite =

355− storedInvites[planet] ||

356− (await generateInviteInfo(planet, _authToken));

357+ storedInvite || (await generateInviteInfo(planet, _authToken));

357

358

358 // TODO: check if the invite point's owner still matches the deterministic wallet address

359 // TODO: check if the invite point's owner still matches the deterministic wallet address

359 const planetInfo = await api.getPoint(planet);

360 const planetInfo = await api.getPoint(planet);

361+ setStoredInvite(ls, invite);

362+

363+ if (

364+ invite.owner.toLowerCase() ===

365+ planetInfo.ownership?.owner?.address ||

360− if (invite.owner === planetInfo.ownership?.transferProxy?.address) {

366+ planetInfo.ownership?.transferProxy?.address !== ETH_ZERO_ADDR

367+ ) {

361 newInvites.push(invite);

368 newInvites.push(invite);

362− updateInvite(invite);

369+ updateInvite(curPoint, invite);

370+ }

371+

372+ if (storedInvite) {

363 setStoredInvite(ls, invite);

373 setStoredInvite(ls, invite);

364− } else {

365− removeInvite(planet);

366 }

374 }

367 }

375 }

368− setStoredInvites(ls, newInvites);

376+ setInvites(curPoint, newInvites);

369− setInvites(newInvites);

370

377

371 return newInvites;

378 return newInvites;

372 }

379 }

@@ -381,64 +388,11 @@ export default function useRoller() {

381 controlledPoints,

388 controlledPoints,

382 getDetails,

389 getDetails,

383 pointCursor,

390 pointCursor,

384− invitePoints,

385 ls,

391 ls,

386− removeInvite,

387 setInvites,

392 setInvites,

388 setInviteGeneratingNum,

393 setInviteGeneratingNum,

389− updateInvite,

390− ]

391− );

392−

393− const getNumInvites = useCallback(

394− async (isL2: boolean) => {

395− try {

396− const curPoint: number = Number(need.point(pointCursor));

397− const _authToken = authToken.getOrElse(null);

398− const _contracts = contracts.getOrElse(null);

399−

400− if (_authToken && _contracts) {

401− let spawnedPoints = isL2 ? await api.getSpawned(curPoint) : [];

402−

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

404− _contracts,

405− curPoint

406− );

407−

408− const newPending = await api.getPendingByShip(curPoint);

409− const pendingSpawns = getPendingSpawns(newPending);

410−

411− const outgoingPoints = getOutgoingPoints(

412− controlledPoints,

413− getDetails

414− ).filter((p: number) => isPlanet(p) && availablePoints.includes(p));

415−

416− const invitePoints = spawnedPoints

417− .concat(

418− outgoingPoints.filter((p: number) => !spawnedPoints.includes(p))

419− )

420− .filter((p: number) => !pendingSpawns.has(p));

421−

422− setPendingTransactions(newPending);

423− setInvitePoints(invitePoints);

424−

425− return invitePoints;

426− }

427− } catch (e) {

428− if (isDevelopment) {

429− console.warn(e);

430− }

431− }

432− },

433− [

434− api,

435− pointCursor,

436− authToken,

437− contracts,

438− controlledPoints,

439− getDetails,

440− setInvitePoints,

441 setPendingTransactions,

394 setPendingTransactions,

395+ updateInvite,

442 ]

396 ]

443 );

397 );

444

398

@@ -851,7 +805,6 @@ export default function useRoller() {

851 if (nextBatchTime - ONE_SECOND <= new Date().getTime()) {

805 if (nextBatchTime - ONE_SECOND <= new Date().getTime()) {

852 api.getRollerConfig().then(response => {

806 api.getRollerConfig().then(response => {

853 setNextBatchTime(response.nextBatch);

807 setNextBatchTime(response.nextBatch);

854− getNumInvites(!!point?.isL2);

855 });

808 });

856 }

809 }

857 }, 10000000);

810 }, 10000000);

@@ -866,7 +819,6 @@ export default function useRoller() {

866 config,

819 config,

867 configureNetworkingKeys,

820 configureNetworkingKeys,

868 getInvites,

821 getInvites,

869− getNumInvites,

870 getPoints,

822 getPoints,

871 getPointDetails,

823 getPointDetails,

872 getPendingTransactions,

824 getPendingTransactions,

src/lib/walletgen.js−1

@@ -83,7 +83,6 @@ export const generateWallet = async (point, ticket, boot) => {

84 return new Promise(async resolve => {

85 // Use a web worker to process the data

86− console.log(1, config)

87 const processed = await worker.generateWallet(JSON.stringify(config));

86 const processed = await worker.generateWallet(JSON.stringify(config));

89 resolve(processed);

88 resolve(processed);

src/store/rollerStore.ts+18−20

@@ -2,7 +2,7 @@ import create from 'zustand';

2import { PendingTransaction } from '@urbit/roller-api';

4import { HOUR } from 'lib/utils/roller';

5−import { Invite } from 'lib/types/Invite';

5+import { Invite, Invites } from 'lib/types/Invite';

6import Point, { Points, Relationship } from 'lib/types/Point';

7import { toL1Details } from 'lib/utils/point';

@@ -14,19 +14,16 @@ export interface RollerStore {

14 point: Point;

15 points: Points;

16 pointList: Point[];

17− invitePoints: number[];

18− invites: Invite[];

17+ invites: Invites;

19 recentlyCompleted: number;

18 recentlyCompleted: number;

20 inviteGeneratingNum: number;

19 inviteGeneratingNum: number;

21− removeInvite: (point: number) => void;

22 setNextBatchTime: (nextBatchTime: number) => void;

20 setNextBatchTime: (nextBatchTime: number) => void;

23 setPendingTransactions: (pendingTransactions: PendingTransaction[]) => void;

21 setPendingTransactions: (pendingTransactions: PendingTransaction[]) => void;

24 setPoint: (point: number) => void;

22 setPoint: (point: number) => void;

25 setPoints: (points: Points) => void;

23 setPoints: (points: Points) => void;

26− setInvitePoints: (points: number[]) => void;

27− setInvites: (invites: Invite[]) => void;

24+ setInvites: (points: number, invites: Invite[]) => void;

28 setInviteGeneratingNum: (numGenerating: number) => void;

25 setInviteGeneratingNum: (numGenerating: number) => void;

29− updateInvite: (invite: Invite) => void;

26+ updateInvite: (point: number, invite: Invite) => void;

30}

27}

32export const useRollerStore = create<RollerStore>(set => ({

29export const useRollerStore = create<RollerStore>(set => ({

@@ -35,14 +32,9 @@ export const useRollerStore = create<RollerStore>(set => ({

35 point: EMPTY_POINT,

32 point: EMPTY_POINT,

36 pointList: [],

33 pointList: [],

37 points: {},

34 points: {},

38− invitePoints: [],

39− invites: [],

35+ invites: {},

40 recentlyCompleted: 0,

36 recentlyCompleted: 0,

41 inviteGeneratingNum: 0,

37 inviteGeneratingNum: 0,

42− removeInvite: (point: number) =>

43− set(state => ({

44− invites: state.invites.filter(({ planet }) => point !== planet),

45− })),

46 setNextBatchTime: (nextBatchTime: number) => set(() => ({ nextBatchTime })),

38 setNextBatchTime: (nextBatchTime: number) => set(() => ({ nextBatchTime })),

47 setPendingTransactions: (pendingTransactions: PendingTransaction[]) =>

39 setPendingTransactions: (pendingTransactions: PendingTransaction[]) =>

48 set(state => {

40 set(state => {

@@ -60,14 +52,20 @@ export const useRollerStore = create<RollerStore>(set => ({

60 set(state => ({ point: state.points[point] || EMPTY_POINT })),

52 set(state => ({ point: state.points[point] || EMPTY_POINT })),

61 setPoints: (points: Points) =>

53 setPoints: (points: Points) =>

62 set(() => ({ points, pointList: Object.values(points) })),

54 set(() => ({ points, pointList: Object.values(points) })),

63− setInvitePoints: (invitePoints: number[]) => set(() => ({ invitePoints })),

55+ setInvites: (point: number, invites: Invite[]) =>

64− setInvites: (invites: Invite[]) => set(() => ({ invites })),

56+ set(state => {

57+ const newInvites: Invites = {};

58+ newInvites[point] = invites;

59+ return { invites: Object.assign(state.invites, newInvites) };

60+ }),

65 setInviteGeneratingNum: (inviteGeneratingNum: number) =>

61 setInviteGeneratingNum: (inviteGeneratingNum: number) =>

66 set(() => ({ inviteGeneratingNum })),

62 set(() => ({ inviteGeneratingNum })),

67− updateInvite: (invite: Invite) =>

63+ updateInvite: (point: number, invite: Invite) =>

68− set(state => ({

64+ set(state => {

65+ const newInvites: Invites = {};

69− invites: state.invites.map(i =>

66+ newInvites[point] = state.invites[point]?.map(i =>

70 i.planet === invite.planet ? invite : i

67 i.planet === invite.planet ? invite : i

71− ),

68+ );

69+ return { invites: Object.assign(state.invites, newInvites) };

72− })),

70+ }),

73}));

71}));

src/store/storage/roller.ts+4−4

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

1import SecureLS from 'secure-ls';

2−import { Invite, Invites } from 'lib/types/Invite';

2+import { Invite, InviteTickets } from 'lib/types/Invite';

4const INVITES_KEY = 'invites';

5const HIDE_MIGRATION_MESSAGE_KEY = 'hide_migration_message';

7−export const getStoredInvites = (ls: SecureLS): Invites => {

7+export const getStoredInvites = (ls: SecureLS): InviteTickets => {

8 let invites = {};

9 try {

10 invites = ls.get(INVITES_KEY);

@@ -13,7 +13,7 @@ export const getStoredInvites = (ls: SecureLS): Invites => {

13};

15export const setStoredInvites = (ls: SecureLS, newInvites: Invite[]) => {

16− let invites: Invites = {};

16+ let invites: InviteTickets = {};

17 try {

18 invites = ls.get(INVITES_KEY) || {};

19 } catch (e) {}

@@ -25,7 +25,7 @@ export const setStoredInvites = (ls: SecureLS, newInvites: Invite[]) => {

25};

27export const setStoredInvite = (ls: SecureLS, newInvite: Invite) => {

28− let invites: Invites = {};

28+ let invites: InviteTickets = {};

29 try {

30 invites = ls.get(INVITES_KEY) || {};

31 } catch (e) {}

src/views/Invite/Cohort.tsx+16−19

@@ -59,7 +59,6 @@ export default function InviteCohort() {

59 point,

60 pendingTransactions,

61 invites,

62− invitePoints,

63 inviteGeneratingNum,

62 inviteGeneratingNum,

64 setInviteGeneratingNum,

63 setInviteGeneratingNum,

65 setInvites,

64 setInvites,

@@ -75,7 +74,7 @@ export default function InviteCohort() {

75 } = useRoller();

74 } = useRoller();

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

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

77 const { syncControlledPoints }: any = usePointCache();

76 const { syncControlledPoints }: any = usePointCache();

78− const currentL2 = Boolean(point?.isL2Spawn);

77+ const currentL2 = Boolean(point.isL2Spawn);

80 const _contracts = need.contracts(contracts);

79 const _contracts = need.contracts(contracts);

@@ -90,12 +89,7 @@ export default function InviteCohort() {

90 const [page, setPage] = useState(0);

89 const [page, setPage] = useState(0);

92 const { construct, unconstruct, completed, bind } = useIssueChild();

91 const { construct, unconstruct, completed, bind } = useIssueChild();

93−

94− useEffect(() => {

95− if (invitePoints.length > 0) {

92+ const invitePoints = invites[point.value] || [];

96− getInvites(currentL2, true);

97− }

98− }, []); // eslint-disable-line react-hooks/exhaustive-deps

100 // Set up the invite spawn if on L1

94 // Set up the invite spawn if on L1

101 useEffect(() => {

95 useEffect(() => {

@@ -116,7 +110,7 @@ export default function InviteCohort() {

116 for (let i = 0; i < possiblePoints.length; i++) {

110 for (let i = 0; i < possiblePoints.length; i++) {

117 const p = possiblePoints[i];

111 const p = possiblePoints[i];

118 if (

112 if (

119− !invites.find(({ planet }) => planet === p) &&

113+ !invitePoints.find(({ planet }) => planet === p) &&

120 isPlanet(p) &&

114 isPlanet(p) &&

121 (await azimuth.azimuth.getOwner(_contracts, p)) === ETH_ZERO_ADDR

115 (await azimuth.azimuth.getOwner(_contracts, p)) === ETH_ZERO_ADDR

122 ) {

116 ) {

@@ -153,7 +147,7 @@ export default function InviteCohort() {

153 construct,

147 construct,

154 showInviteForm,

148 showInviteForm,

155 unconstruct,

149 unconstruct,

156− invites,

150+ invitePoints,

157 ]);

151 ]);

158

152

159 useEffect(() => {

153 useEffect(() => {

@@ -169,20 +163,23 @@ export default function InviteCohort() {

169 }

163 }

170

164

171 syncControlledPoints();

165 syncControlledPoints();

166+ setInvites(point.value, [

167+ ...invitePoints,

172− setInvites([...invites, { ...l1Invite, hash: '', owner: '' }]);

168+ { ...l1Invite, hash: '', owner: '' },

169+ ]);

173 setShowInviteForm(false);

170 setShowInviteForm(false);

174 setL1Invite(null);

171 setL1Invite(null);

175 unconstruct();

172 unconstruct();

176 pop();

173 pop();

177− }, [completed, currentL2]); // eslint-disable-line react-hooks/exhaustive-deps

174+ }, [completed, currentL2, point]); // eslint-disable-line react-hooks/exhaustive-deps

178

175

179− const invitesToDisplay = invites.slice(

176+ const invitesToDisplay = invitePoints.slice(

180 page * INVITES_PER_PAGE,

177 page * INVITES_PER_PAGE,

181 (page + 1) * INVITES_PER_PAGE

178 (page + 1) * INVITES_PER_PAGE

182 );

179 );

183

180

184 const hasPending = Boolean(pendingTransactions.length);

181 const hasPending = Boolean(pendingTransactions.length);

185− const hasInvites = Boolean(invites.length);

182+ const hasInvites = Boolean(invitePoints.length);

186

183

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

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

188 setLoading(true);

185 setLoading(true);

@@ -208,7 +205,7 @@ export default function InviteCohort() {

208 const downloadCsv = useCallback(() => {

205 const downloadCsv = useCallback(() => {

209 const generateAndDownload = async () => {

206 const generateAndDownload = async () => {

210 setLoading(true);

207 setLoading(true);

211− const invites = await getInvites(currentL2, true);

208+ const invites = await getInvites(currentL2);

212 if (invites) {

209 if (invites) {

213 const csv = invites.reduce(

210 const csv = invites.reduce(

214 (csvData, { ticket, planet }, ind) =>

211 (csvData, { ticket, planet }, ind) =>

@@ -224,7 +221,7 @@ export default function InviteCohort() {

224 //provide the name for the CSV file to be downloaded

221 //provide the name for the CSV file to be downloaded

225 hiddenElement.download = generateCsvName(

222 hiddenElement.download = generateCsvName(

226 DEFAULT_CSV_NAME,

223 DEFAULT_CSV_NAME,

227− point?.patp?.slice(1) || 'bridge'

224+ point.patp?.slice(1) || 'bridge'

228 );

225 );

229 hiddenElement.click();

226 hiddenElement.click();

230 } else {

227 } else {

@@ -313,8 +310,8 @@ export default function InviteCohort() {

313 const header = (

310 const header = (

314 <h5>

311 <h5>

315 You have

312 You have

316− <span className="number-emphasis"> {invites.length} </span>

313+ <span className="number-emphasis"> {invitePoints.length} </span>

317− Planet Code{invites.length === 1 ? '' : 's'}

314+ Planet Code{invitePoints.length === 1 ? '' : 's'}

318 </h5>

315 </h5>

319 );

316 );

320

317

@@ -435,7 +432,7 @@ export default function InviteCohort() {

435 <Paginator

432 <Paginator

436 page={page}

433 page={page}

437 numPerPage={INVITES_PER_PAGE}

434 numPerPage={INVITES_PER_PAGE}

438− numElements={invites.length}

435+ numElements={invitePoints.length}

439 goPrevious={() => setPage(page - 1)}

436 goPrevious={() => setPage(page - 1)}

440 goNext={goNextPage}

437 goNext={goNextPage}

441 />

438 />

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

@@ -33,7 +33,7 @@ export default function Point() {

33 const { pop, push, names }: any = useLocalRouter();

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

35 const { syncExtras }: any = usePointCache();

36− const { getNumInvites, getPendingTransactions } = useRoller();

36+ const { getInvites, getPendingTransactions } = useRoller();

37 const { pendingTransactions, point, invites } = useRollerStore();

38 const { nextRoll } = useTimerStore();

39 const networkKeysSet = useHasNetworkKeysSet();

@@ -69,12 +69,12 @@ export default function Point() {

69 const getTransactions = async () => {

70 setLoading(true);

71 getPendingTransactions();

72− getNumInvites(point.isL2);

72+ getInvites(point.isL2);

73 setTimeout(() => setLoading(false), 100);

74 };

76 await getTransactions();

77− }, [point, getNumInvites, getPendingTransactions, setLoading]);

77+ }, [point, getInvites, getPendingTransactions, setLoading]);

79 useEffect(() => {

80 loadL1Info();

@@ -132,7 +132,7 @@ export default function Point() {

132 header={

133 <L2PointHeader

134 hideTimer={!!spawnedPending}

135− numInvites={invitePoints.length}

135+ numInvites={invites[point.value]?.length}

136 hideInvites={!networkKeysSet}

137 />

138 }>

src/worker/worker.ts−3

@@ -1,12 +1,9 @@

1import kg from 'urbit-key-generation';

3export async function generateWallet(data: string): Promise<string> {

4− console.log(2, data)

5 // Process the data without stalling the UI

4 // Process the data without stalling the UI

6 const config = JSON.parse(data);

5 const config = JSON.parse(data);

7− console.log(3)

8 const wallet = await kg.generateWallet(config);

6 const wallet = await kg.generateWallet(config);

9− console.log(4)

11 return wallet;

8 return wallet;

12}