git.iko.soy/bridge
on d760cbf help sign in
bridge/src/views/CreateGalaxy.js
198 lines 5.6 kB history raw
1import React from 'react';
2import { Just, Nothing } from 'folktale/maybe';
3import * as azimuth from 'azimuth-js';
4import * as ob from 'urbit-ob';
5import * as need from '../lib/need';
7import { Button } from '../components/old/Base';
8import { H1, P, Anchor } from '../components/old/Base';
9import {
10 InnerLabel,
11 GalaxyInput,
12 AddressInput,
13 ValidatedSigil,
14 ShowBlockie,
15} from '../components/old/Base';
16import StatelessTransaction from '../components/old/StatelessTransaction';
18import { NETWORK_TYPES } from '../lib/network';
19import { canDecodePatp } from '../lib/txn';
21import { isValidAddress, isZeroAddress } from '../lib/wallet';
23import { isValidGalaxy, compose } from '../lib/lib';
24import { withNetwork } from '../store/network';
25import { withWallet } from '../store/wallet';
26import View from 'components/View';
28const buttonTriState = status => {
29 if (status === null) return 'blue';
30 if (status === false) return 'yellow';
31 if (status === true) return 'green';
32};
34const buttonTriStateText = status => {
35 if (status === null) return 'Confirm Galaxy Availablility';
36 if (status === false) return 'Galaxy is Not Available';
37 if (status === true) return 'Galaxy is Available';
38};
40class CreateGalaxy extends React.Component {
41 constructor(props) {
42 super(props);
44 const galaxyOwner = need.addressFromWallet(props.wallet);
46 this.state = {
47 galaxyOwner: galaxyOwner,
48 galaxyName: '',
49 isAvailable: null,
50 };
52 this.handleAddressInput = this.handleAddressInput.bind(this);
53 this.handleGalaxyNameInput = this.handleGalaxyNameInput.bind(this);
54 this.confirmAvailability = this.confirmAvailability.bind(this);
55 this.createUnsignedTxn = this.createUnsignedTxn.bind(this);
56 this.statelessRef = React.createRef();
57 }
59 handleGalaxyNameInput = galaxyName => {
60 this.setState({ galaxyName, isAvailable: null });
61 this.statelessRef.current.clearTxn();
62 };
64 handleAddressInput = galaxyOwner => {
65 this.setState({ galaxyOwner });
66 this.statelessRef.current.clearTxn();
67 };
69 createUnsignedTxn = () => {
70 const { state, props } = this;
71 if (isValidAddress(state.galaxyOwner) === false) return Nothing();
72 if (state.isAvailable === false) return Nothing();
73 if (canDecodePatp(state.galaxyName) === false) return Nothing();
74 if (isValidGalaxy(state.galaxyName) === false) return Nothing();
76 const validContracts = need.contracts(props.contracts);
78 const galaxyDec = ob.patp2dec(state.galaxyName);
80 const txn = azimuth.ecliptic.createGalaxy(
81 validContracts,
82 galaxyDec,
83 state.galaxyOwner
84 );
86 return Just(txn);
87 };
89 confirmAvailability = async () => {
90 const { state, props } = this;
92 if (canDecodePatp(state.galaxyName) === false) {
93 this.setState({ isAvailable: false });
94 return;
95 }
97 const validContracts = need.contracts(props.contracts);
99 const galaxyDec = ob.patp2dec(state.galaxyName);
101 const currentOwner = await azimuth.azimuth.getOwner(
102 validContracts,
103 galaxyDec
104 );
106 const available = isZeroAddress(currentOwner);
108 this.setState({ isAvailable: available });
109 };
111 render() {
112 const { props, state } = this;
114 const validAddress = isValidAddress(state.galaxyOwner);
115 const validGalaxy = isValidGalaxy(state.galaxyName);
117 const canGenerate =
118 validAddress === true &&
119 validGalaxy === true &&
120 state.isAvailable === true;
122 const esvisible =
123 props.networkType === NETWORK_TYPES.ROPSTEN ||
124 props.networkType === NETWORK_TYPES.MAINNET;
126 const esdomain =
127 props.networkType === NETWORK_TYPES.ROPSTEN
128 ? 'ropsten.etherscan.io'
129 : 'etherscan.io';
131 return (
132 <View>
133 <H1> {'Create a Galaxy'} </H1>
135 <P>
136 {'Enter the galaxy to create and the address that will own ' +
137 'it (defaulting to this account, if not provided).'}
138 </P>
140 <GalaxyInput
141 className="mono"
142 prop-size="lg"
143 prop-format="innerLabel"
144 autoFocus
145 placeholder="e.g. ~zod"
146 value={state.galaxyName}
147 onChange={v => this.handleGalaxyNameInput(v)}>
148 <InnerLabel>{'Galaxy Name'}</InnerLabel>
149 <ValidatedSigil
150 className="tr-0 mt-05 mr-0 abs"
151 patp={state.galaxyName}
152 size={68}
153 margin={8}
154 />
155 </GalaxyInput>
157 <AddressInput
158 className="mono mt-8"
159 prop-size="lg"
160 prop-format="innerLabel"
161 value={state.galaxyOwner}
162 onChange={v => this.handleAddressInput(v)}>
163 <InnerLabel>{'Address that will own this galaxy'}</InnerLabel>
164 <ShowBlockie className={'mt-1'} address={state.galaxyOwner} />
165 </AddressInput>
167 <Anchor
168 className={'mt-1'}
169 prop-size={'sm'}
170 prop-disabled={!validAddress || !esvisible}
171 target={'_blank'}
172 href={`https://${esdomain}/address/${state.galaxyOwner}`}>
173 {'View on Etherscan ↗'}
174 </Anchor>
176 <Button
177 prop-size="lg wide"
178 className="mt-8"
179 prop-color={buttonTriState(state.isAvailable)}
180 disabled={!validGalaxy}
181 onClick={() => this.confirmAvailability()}>
182 {buttonTriStateText(state.isAvailable)}
183 </Button>
185 <StatelessTransaction
186 ref={this.statelessRef}
187 canGenerate={canGenerate}
188 createUnsignedTxn={this.createUnsignedTxn}
189 />
190 </View>
191 );
192 }
195export default compose(
196 withNetwork,
197 withWallet
198)(CreateGalaxy);