@@ -1,8 +1,9 @@
11import { Nothing, Just } from 'folktale/maybe';
2−import React from 'react';
2+import React, { useState } from 'react';
33import * as azimuth from 'azimuth-js';
44
5−import { H1, Row, Col } from '../components/old/Base';
5+import { H1 } from 'indigo-react';
6+import View from '../components/View';
67import Tabs from '../components/Tabs';
78
89import Ticket from './Login/Ticket';
@@ -10,13 +11,12 @@ import Mnemonic from './Login/Mnemonic';
1011import Advanced from './Login/Advanced';
1112
1213import * as need from '../lib/need';
13−import { compose } from '../lib/lib';
1414import { ROUTE_NAMES } from '../lib/routeNames';
1515
16−import { withHistory } from '../store/history';
17−import { withNetwork } from '../store/network';
18−import { withWallet } from '../store/wallet';
19−import { withPointCursor } from '../store/pointCursor';
16+import { useHistory } from '../store/history';
17+import { useNetwork } from '../store/network';
18+import { useWallet } from '../store/wallet';
19+import { usePointCursor } from '../store/pointCursor';
2020
2121const TABS = {
2222 TICKET: Symbol('TICKET'),
@@ -24,46 +24,39 @@ const TABS = {
2424 ADVANCED: Symbol('ADVANCED'),
2525};
2626
27−class Login extends React.Component {
28− constructor(props) {
29− super(props);
27+export default function Login() {
28+ // globals
29+ const history = useHistory();
30+ const { contracts } = useNetwork();
31+ const { wallet } = useWallet();
32+ const { pointCursor, setPointCursor } = usePointCursor();
3033
31− this.state = {
32− currentTab: TABS.TICKET,
33− };
34+ // inputs
35+ const [currentTab, setCurrentTab] = useState(TABS.TICKET);
3436
35− this.handleTabChange = this.handleTabChange.bind(this);
36− this.continue = this.continue.bind(this);
37− }
37+ //TODO figure out how to do things once
38+ // // we expect wallet and pointCursor to not be set yet
39+ // setUrbitWallet(Nothing());
40+ // setWallet(Nothing());
41+ // setPointCursor(Nothing());
3842
39− componentDidMount() {
40− // we expect wallet and pointCursor to not be set yet
41− this.props.setUrbitWallet(Nothing());
42− this.props.setWallet(Nothing());
43− this.props.setPointCursor(Nothing());
44− }
45−
46− handleTabChange(currentTab) {
47− this.setState({ currentTab });
48− }
49−
50− async continue() {
51− const wallet = need.wallet(this.props);
52− const contracts = need.contracts(this.props);
43+ const doContinue = async () => {
44+ const realWallet = need.wallet(wallet);
45+ const realContracts = need.contracts(contracts);
5346
5447 // if no point cursor set by login logic, try to deduce it
5548 let deduced = Nothing();
5649 if (Nothing.hasInstance(this.props.pointCursor)) {
5750 const owned = await azimuth.azimuth.getOwnedPoints(
58− contracts,
59− wallet.address
51+ realContracts,
52+ realWallet.address
6053 );
6154 if (owned.length === 1) {
6255 deduced = Just(owned[0]);
6356 } else if (owned.length === 0) {
6457 const canOwn = await azimuth.azimuth.getTransferringFor(
65− contracts,
66− wallet.address
58+ realContracts,
59+ realWallet.address
6760 );
6861 if (canOwn.length === 1) {
6962 deduced = Just(canOwn[0]);
@@ -72,51 +65,40 @@ class Login extends React.Component {
7265 }
7366
7467 if (Just.hasInstance(deduced)) {
75− this.props.setPointCursor(deduced);
76− this.props.history.popAndPush(ROUTE_NAMES.POINT_HOME);
77− } else if (Just.hasInstance(this.props.pointCursor)) {
78− this.props.history.popAndPush(ROUTE_NAMES.POINT_HOME);
68+ setPointCursor(deduced);
69+ history.popAndPush(ROUTE_NAMES.POINT_HOME);
70+ } else if (Just.hasInstance(pointCursor)) {
71+ history.popAndPush(ROUTE_NAMES.POINT_HOME);
7972 } else {
8073 //TODO to new overview (maybe should be merged into point home?)
81− this.props.history.popAndPush(ROUTE_NAMES.SHIPS);
74+ history.popAndPush(ROUTE_NAMES.POINTS);
8275 }
83− }
84−
85− render() {
86− const tabOptions = [
87− { title: 'Ticket', value: TABS.TICKET },
88− { title: 'Mnemonic', value: TABS.MNEMONIC },
89− { title: 'Advanced', value: TABS.ADVANCED },
90− ];
91−
92− const tabViews = {
93− [TABS.TICKET]: Ticket,
94− [TABS.MNEMONIC]: Mnemonic,
95− [TABS.ADVANCED]: Advanced,
96− };
97−
98− return (
99− <Row>
100− <Col>
101− <H1>{'Login'}</H1>
102−
103− <Tabs
104− tabViews={tabViews}
105− tabOptions={tabOptions}
106− currentTab={this.state.currentTab}
107− onTabChange={this.handleTabChange}
108− //
109− loginCompleted={this.continue}
110− />
111− </Col>
112− </Row>
113− );
114− }
76+ };
77+
78+ const tabViews = {
79+ [TABS.TICKET]: Ticket,
80+ [TABS.MNEMONIC]: Mnemonic,
81+ [TABS.ADVANCED]: Advanced,
82+ };
83+
84+ const tabOptions = [
85+ { title: 'Ticket', value: TABS.TICKET },
86+ { title: 'Mnemonic', value: TABS.MNEMONIC },
87+ { title: 'Advanced', value: TABS.ADVANCED },
88+ ];
89+
90+ return (
91+ <View>
92+ <H1>Login</H1>
93+
94+ <Tabs
95+ tabViews={tabViews}
96+ tabOptions={tabOptions}
97+ currentTab={currentTab}
98+ onTabChange={setCurrentTab}
99+ //
100+ loginCompleted={doContinue}
101+ />
102+ </View>
103+ );
115104}
116−
117−export default compose(
118− withHistory,
119− withNetwork,
120− withWallet,
121− withPointCursor
122−)(Login);