btc: settings page

pkg/arvo/app/btc-wallet.hoon

@@ -217,12 +217,15 @@
     ?~  provider.comm
       ?~  prov  `state
       :_  state(prov ~)
-      [(leave-provider host.u.prov)]~
+      :~  (leave-provider host.u.prov)
+          (give-update %change-provider ~)
+      ==
     :_  state(prov [~ u.provider.comm %.n])
     ?~  prov
       [(watch-provider u.provider.comm)]~
     :~  (leave-provider host.u.prov)
         (watch-provider u.provider.comm)
+        (give-update %change-provider `[u.provider.comm %.n])
     ==
     ::
     ++  watch-provider

pkg/btc-wallet/src/js/components/lib/body.js

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import {
+  Box,
+  Icon,
+  Row,
+  Text,
+  LoadingSpinner,
+  Col,
+} from '@tlon/indigo-react';
+import {
+  Switch,
+  Route,
+} from 'react-router-dom';
+import Balance      from './balance.js';
+import Transactions from './transactions.js';
+import Warning      from './warning.js';
+import Header       from './header.js';
+import Settings     from './settings.js';
+
+export default class Body extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    if (!this.props.loaded) {
+      return (
+        <Box display="flex" width="100%" height="100%" alignItems="center" justifyContent="center">
+          <LoadingSpinner
+            width={7}
+            height={7}
+            background="midOrange"
+            foreground="orange"
+          />
+        </Box>
+      );
+    } else {
+      return (
+        <Switch>
+          <Route path="/~btc/settings">
+            <Col
+             display='flex'
+             flexDirection='column'
+             width='400px'
+            >
+              <Header settings={true}/>
+              <Settings state={this.props.state}
+                api={this.props.api}
+                network={this.props.network}
+              />
+            </Col>
+          </Route>
+          <Route path="/~btc">
+            <Col
+             display='flex'
+             flexDirection='column'
+             width='400px'
+            >
+              <Header settings={false}/>
+              { (!this.props.warning) ? null : <Warning api={this.props.api}/>}
+              <Balance api={this.props.api} state={this.props.state} network={this.props.network}/>
+              <Transactions state={this.props.state} network={this.props.network}/>
+            </Col>
+          </Route>
+        </Switch>
+      );
+    }
+  }
+}

pkg/btc-wallet/src/js/components/lib/header.js

@@ -5,6 +5,7 @@ import {
   Row,
   Text,
 } from '@tlon/indigo-react';
+import { Link } from 'react-router-dom';
 
 export default class Header extends Component {
   constructor(props) {
@@ -13,6 +14,9 @@ export default class Header extends Component {
 
 
   render() {
+    let icon      = this.props.settings ? "X" : "Adjust";
+    let iconColor = this.props.settings ? "black" : "orange";
+    let iconLink  = this.props.settings ? "/~btc" : "/~btc/settings";
     return (
       <Row
         height={8}
@@ -36,14 +40,16 @@ export default class Header extends Component {
             Bitcoin
           </Text>
         </Row>
-        <Box backgroundColor="white"
-          borderRadius={4}
-          width={5}
-          height={5}
-          p={2}
-        >
-          <Icon icon="Adjust" color="orange" />
-        </Box>
+        <Link to={iconLink}>
+          <Box backgroundColor="white"
+            borderRadius={4}
+            width={5}
+            height={5}
+            p={2}
+          >
+            <Icon icon={icon} color={iconColor} />
+          </Box>
+        </Link>
       </Row>
     );
   }

pkg/btc-wallet/src/js/components/lib/settings.js

@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+import {
+  Box,
+  Icon,
+  Row,
+  Text,
+  Button,
+  Col,
+} from '@tlon/indigo-react';
+
+export default class Settings extends Component {
+  constructor(props) {
+    super(props);
+    this.changeProvider = this.changeProvider.bind(this);
+    this.replaceWallet  = this.replaceWallet.bind(this);
+  }
+
+  changeProvider(){
+    this.props.api.btcWalletCommand({'set-provider': null});
+  }
+
+  replaceWallet(){
+    this.props.api.btcWalletCommand({
+      'delete-wallet': this.props.state.wallet,
+    });
+  }
+
+  render() {
+    let conn = 'Not Connected'
+    let host = '';
+    if (this.props.state.provider){
+      if (this.props.state.provider.connected) conn = 'Connected';
+      if (this.props.state.provider.host) host = this.props.state.provider.host;
+    }
+
+    return (
+      <Col
+        display="flex"
+        width="100%"
+        p={5}
+        mb={5}
+        borderRadius="48px"
+        backgroundColor="white"
+      >
+        <Row mb="12px">
+          <Text fontSize={1} fontWeight="bold" color="black">
+            XPub Derivation
+          </Text>
+        </Row>
+        <Row borderRadius="12px"
+          backgroundColor="veryLightGray"
+          py={5}
+          px="36px"
+          mb="12px"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Text mono
+            fontSize={1}
+            style={{wordBreak: "break-all"}}
+            color="gray"
+          >
+            {this.props.state.wallet}
+          </Text>
+        </Row>
+        <Row width="100%" mb={5}>
+          <Button children="Replace Wallet"
+            width="100%"
+            fontSize={1}
+            fontWeight="bold"
+            backgroundColor="gray"
+            color="white"
+            borderColor="none"
+            borderRadius="12px"
+            p={4}
+            onClick={this.replaceWallet}
+          />
+        </Row>
+        <Row mb="12px">
+          <Text fontSize={1} fontWeight="bold" color="black">
+            BTC Node Provider
+          </Text>
+        </Row>
+        <Col mb="12px"
+          py={5}
+          px="36px"
+          borderRadius="12px"
+          backgroundColor="lightOrange"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Text fontSize={1} color="orange" mono>
+            ~{host}
+          </Text>
+          <Text fontSize={0} color="orange">
+            {conn}
+          </Text>
+        </Col>
+        <Row width="100%">
+          <Button children="Change Provider"
+            width="100%"
+            fontSize={1}
+            fontWeight="bold"
+            backgroundColor="orange"
+            color="white"
+            borderColor="none"
+            borderRadius="12px"
+            p={4}
+            onClick={this.changeProvider}
+          />
+        </Row>
+      </Col>
+    );
+  }
+}

pkg/btc-wallet/src/js/components/root.js

@@ -19,6 +19,7 @@ import Header from './lib/header.js'
 import Balance from './lib/balance.js'
 import Transactions from './lib/transactions.js'
 import Warning from './lib/warning.js'
+import Body from './lib/body.js'
 import { subscription } from '../subscription.js'
 
 const network = "testnet" // bitcoin
@@ -50,39 +51,24 @@ export class Root extends Component {
         <ThemeProvider theme={light}>
         <Reset/>
         { (loaded) ? <StartupModal api={api} state={this.state} network={network}/> : null }
-        <Box display="flex"
-          flexDirection='column'
-          position='absolute'
-          alignItems='center'
-          backgroundColor='lightOrange'
-          width='100%'
-          minHeight={loaded ? '100%' : 'none'}
-          height={loaded ? 'none' : '100%'}
-          style={{filter: (blur ? 'blur(8px)' : 'none')}}
-          px={[0,4]}
-          pb={[0,4]}
-        >
-          { (loaded) ?
-              <Col
-               display='flex'
-               flexDirection='column'
-               width='400px'
-              >
-                <Header />
-                { (!warning) ? null : <Warning api={api}/>}
-                <Balance api={api} state={this.state} network={network}/>
-                <Transactions state={this.state} network={network}/>
-              </Col>
-            :  <Box display="flex" width="100%" height="100%" alignItems="center" justifyContent="center">
-                 <LoadingSpinner
-                   width={7}
-                   height={7}
-                   background="midOrange"
-                   foreground="orange"
-                 />
-               </Box>
-          }
-        </Box>
+          <Box display="flex"
+            flexDirection='column'
+            position='absolute'
+            alignItems='center'
+            backgroundColor='lightOrange'
+            width='100%'
+            minHeight={loaded ? '100%' : 'none'}
+            height={loaded ? 'none' : '100%'}
+            style={{filter: (blur ? 'blur(8px)' : 'none')}}
+            px={[0,4]}
+            pb={[0,4]}
+          >
+            <Body loaded={loaded}
+              state={this.state}
+              api={api} network={network}
+              warning={warning}
+            />
+          </Box>
         </ThemeProvider>
       </BrowserRouter>
     )

pkg/btc-wallet/src/js/reducers/update.js

@@ -12,7 +12,7 @@ export class UpdateReducer {
     if (json.checkPayee) {
       this.reduceCheckPayee(json.checkPayee, state);
     }
-    if (json["change-provider"]) {
+    if ("change-provider" in json) {
       this.reduceChangeProvider(json["change-provider"], state);
     }
     if (json["change-wallet"]) {