Loader syncing chain

package.json

@@ -37,7 +37,8 @@
     "react-art": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-native-web": "^0.6.0",
-    "react-scripts": "^1.1.1"
+    "react-scripts": "^1.1.1",
+    "svgs": "^3.2.1"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^3.3.15",

src/component/spinner.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  View,
+  ViewPropTypes,
+} from 'react-native';
+import PropTypes from 'prop-types';
+import { color } from './style';
+import Icon from './icon';
+import Svg, { Path, Circle, Defs, Stop, LinearGradient } from './svg';
+
+//
+// Small Spinner
+//
+
+const smallStyles = StyleSheet.create({
+  spinner: {
+    transform: [{ scale: 1.42 }],
+  },
+});
+export const SmallSpinner = ({ ...props }) => (
+  <ActivityIndicator
+    size="small"
+    color={color.purple}
+    style={smallStyles.spinner}
+    {...props}
+  />
+);
+
+//
+// ResizeableSpinner
+//
+
+const resizeableStyles = StyleSheet.create({
+  iconWrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export const ResizeableSpinner = ({
+  percentage,
+  size,
+  gradient,
+  progressWidth,
+  icon,
+  iconStyles,
+}) => (
+  <View style={{ width: size, height: size }}>
+    <Svg width={size} height={size}>
+      <Gradients />
+      <SpinnerProgress
+        width={size}
+        percentage={percentage}
+        color={`url(#${gradient})`}
+      />
+      {
+        <SpinnerFill
+          spinnerWidth={size}
+          progressWidth={progressWidth}
+          color={color.blackDark}
+        />
+      }
+    </Svg>
+    <View style={resizeableStyles.iconWrapper}>
+      <Icon image={icon} style={iconStyles} />
+    </View>
+  </View>
+);
+
+ResizeableSpinner.propTypes = {
+  percentage: PropTypes.number.isRequired,
+  size: PropTypes.number.isRequired,
+  progressWidth: PropTypes.number.isRequired,
+  gradient: PropTypes.string.isRequired,
+  icon: PropTypes.string.isRequired,
+  iconStyles: ViewPropTypes.style,
+};
+
+//
+// Loading Network Gradient
+//
+const Gradients = () => (
+  <Defs>
+    <LinearGradient id="loadNetworkGrad" x1="0" y1="0" x2="1" y2="1">
+      <Stop offset="0%" stopColor={color.loadNetworkLightPurple} />
+      <Stop offset="50%" stopColor={color.loadNetworkMedPurple} />
+      <Stop offset="70%" stopColor={color.loadNetworkMedDarkPurple} />
+      <Stop offset="100%" stopColor={color.purple} />
+    </LinearGradient>
+    <LinearGradient id="openChannelsGrad" x1="0" y1="0" x2="1" y2="1">
+      <Stop offset="0%" stopColor={color.openChansLightPurple} />
+      <Stop offset="50%" stopColor={color.openChansDarkPurple} />
+    </LinearGradient>
+  </Defs>
+);
+
+//
+// Spinner Progress Path
+//
+const SpinnerProgress = ({ width, percentage, color }) => (
+  <Path
+    d={`M${width / 2} ${width / 2} L${width / 2} 0 ${generateArc(
+      percentage,
+      width / 2
+    )} Z`}
+    fill={color}
+  />
+);
+
+SpinnerProgress.propTypes = {
+  width: PropTypes.number.isRequired,
+  percentage: PropTypes.number.isRequired,
+  color: PropTypes.string.isRequired,
+};
+
+//
+// Spinner Fill
+//
+const SpinnerFill = ({ spinnerWidth, progressWidth, color }) => (
+  <Circle
+    cx={spinnerWidth / 2}
+    cy={spinnerWidth / 2}
+    r={spinnerWidth / 2 - progressWidth}
+    fill={color}
+  />
+);
+
+SpinnerFill.propTypes = {
+  spinnerWidth: PropTypes.number.isRequired,
+  progressWidth: PropTypes.number.isRequired,
+  color: PropTypes.string.isRequired,
+};
+
+const generateArc = (percentage, radius) => {
+  if (percentage === 0) {
+    percentage = 1;
+  } else if (percentage === 100) {
+    percentage = 99.999;
+  }
+  const a = percentage * 2 * Math.PI / 100; // angle (in radian) depends on percentage
+  const r = radius; // radius of the circle
+  var rx = r,
+    ry = r,
+    xAxisRotation = 0,
+    largeArcFlag = 1,
+    sweepFlag = 1,
+    x = r + r * Math.sin(a),
+    y = r - r * Math.cos(a);
+  if (percentage <= 50) {
+    largeArcFlag = 0;
+  } else {
+    largeArcFlag = 1;
+  }
+
+  return `A${rx} ${ry} ${xAxisRotation} ${largeArcFlag} ${sweepFlag} ${x} ${y}`;
+};

src/component/style.js

@@ -11,6 +11,11 @@ export const color = {
   greyLight: '#D7D4D4',
   purple: '#57038D',
   lightPurple: '#A540CD',
+  loadNetworkLightPurple: '#A95BDC',
+  loadNetworkMedPurple: '#651399',
+  loadNetworkMedDarkPurple: '#610F96',
+  openChansLightPurple: '#A540CD',
+  openChansDarkPurple: '#6B249C',
   orange: '#F66B1C',
   blackDark: '#252F4A',
   blackText: '#4A4A4A',

src/component/svg.js

@@ -0,0 +1,3 @@
+import SvgJS from 'svgs';
+export default SvgJS;
+export * from 'svgs';

src/computed/loader-msg.js

@@ -0,0 +1,42 @@
+import { computed, extendObservable } from 'mobx';
+
+const ComputedLoaderMsg = store => {
+  extendObservable(store, {
+    loadingMsg: computed(() => {
+      const { percentSynced: percent } = store;
+      return getLoadingMsg(percent);
+    }),
+  });
+};
+
+export const LOADING_COPY_START = 'Loading network...';
+export const LOADING_COPY_MID = 'Almost done...';
+export const LOADING_COPY_END = 'Just a few seconds...';
+export const LOADING_PERCENT_MID = 50;
+export const LOADING_PERCENT_END = 95;
+
+/**
+ * Retrieve the loading message corresponding to the percent
+ * @param  {number} percent The percentage the network is synced.
+ * @return {string}         The message corresponding to the percent.
+ */
+// TODO: error handling for network error
+export const getLoadingMsg = percent => {
+  percent = Number(percent);
+  if (isNaN(percent)) {
+    percent = 0;
+  } else if (percent < 0) {
+    percent = 0;
+  } else if (percent > 100) {
+    percent = 100;
+  }
+  if (percent < LOADING_PERCENT_MID) {
+    return LOADING_COPY_START;
+  } else if (percent < LOADING_PERCENT_END) {
+    return LOADING_COPY_MID;
+  } else {
+    return LOADING_COPY_END;
+  }
+};
+
+export default ComputedLoaderMsg;

src/store.js

@@ -1,4 +1,5 @@
 import { extendObservable } from 'mobx';
+import ComputedLoaderMsg from './computed/loader-msg';
 import ComputedWallet from './computed/wallet';
 import ComputedTransaction from './computed/transaction';
 import ComputedChannel from './computed/channel';
@@ -17,6 +18,7 @@ export class Store {
       walletUnlocked: false, // Is the wallet unlocked
       lndReady: false, // Is lnd process running
       syncedToChain: false, // Is lnd synced to blockchain
+      percentSynced: 0, // Expects 0-100 range
       route: DEFAULT_ROUTE,
       blockHeight: null,
       balanceSatoshis: 0,
@@ -72,6 +74,7 @@ export class Store {
   }
 
   init() {
+    ComputedLoaderMsg(this);
     ComputedWallet(this);
     ComputedTransaction(this);
     ComputedChannel(this);

src/view/loader-syncing.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import PropTypes from 'prop-types';
+import Background from '../component/background';
+import { Text, H1Text, CopyText } from '../component/text';
+import MainContent from '../component/main-content';
+import { ResizeableSpinner } from '../component/spinner';
+import { DownButton } from '../component/button';
+import { color, font } from '../component/style';
+
+const styles = StyleSheet.create({
+  content: {
+    alignItems: 'center',
+  },
+  downBtn: {
+    margin: 25,
+  },
+});
+
+const LoaderSyncingView = ({ store }) => (
+  <Background color={color.blackDark}>
+    <MainContent style={styles.content}>
+      <LoadNetworkSpinner
+        percentage={store.percentSynced}
+        msg={store.loadingMsg}
+      />
+      <CopySection />
+      <DownButton onPress={() => {}} style={styles.downBtn}>
+        Learn More
+      </DownButton>
+    </MainContent>
+  </Background>
+);
+
+LoaderSyncingView.propTypes = {
+  store: PropTypes.object.isRequired,
+};
+
+//
+// Load Network Spinner
+//
+
+const size = 121;
+const progressWidth = 5;
+
+const loadNetworkStyles = StyleSheet.create({
+  spinner: {
+    margin: 20,
+    marginTop: 60,
+  },
+  bolt: {
+    height: 32,
+    width: 16,
+  },
+  copy: {
+    fontSize: font.sizeS,
+    marginTop: 10,
+    color: color.white,
+    textAlign: 'center',
+  },
+});
+
+export const LoadNetworkSpinner = ({ percentage, msg }) => (
+  <View style={loadNetworkStyles.spinner}>
+    <ResizeableSpinner
+      percentage={percentage}
+      size={size}
+      progressWidth={progressWidth}
+      gradient="loadNetworkGrad"
+      icon="lightning-bolt"
+      iconStyles={loadNetworkStyles.bolt}
+    />
+    <Text style={loadNetworkStyles.copy}>{msg}</Text>
+  </View>
+);
+
+LoadNetworkSpinner.propTypes = {
+  percentage: PropTypes.number.isRequired,
+  msg: PropTypes.string.isRequired,
+};
+
+//
+// Copy Section
+//
+
+const copyStyles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    textAlign: 'center',
+    marginTop: 60,
+  },
+  copyTxt: {
+    textAlign: 'center',
+    marginTop: 10,
+    maxWidth: 450,
+    paddingBottom: 100,
+  },
+});
+
+const CopySection = () => (
+  <View style={copyStyles.wrapper}>
+    <H1Text style={copyStyles.title}>Almost there</H1Text>
+    <CopyText style={copyStyles.copyTxt}>
+      {
+        "Why not learn more about what we're doing at Lightning Labs? Or grab a coffee. This could take about 30 minutes."
+      }
+    </CopyText>
+  </View>
+);
+
+export default LoaderSyncingView;

stories/component/spinner.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import MainContent from '../../src/component/main-content';
+import { SmallSpinner } from '../../src/component/spinner';
+import { LoadNetworkSpinner } from '../../src/view/loader-syncing';
+import { color } from '../../src/component/style';
+import Background from '../../src/component/background';
+
+storiesOf('Spinner', module)
+  .addDecorator(story => (
+    <MainContent style={{ justifyContent: 'center' }}>{story()}</MainContent>
+  ))
+  .add('SmallSpinner', () => <SmallSpinner />)
+  .add('LoadNetworkSpinner', () => (
+    <Background
+      color={color.blackDark}
+      style={{ flexDirection: 'row', width: '100%' }}
+    >
+      <LoadNetworkSpinner percentage={30} msg="Loading network..." />
+      <LoadNetworkSpinner percentage={50} msg="Almost done..." />
+      <LoadNetworkSpinner percentage={100} msg="Just a few seconds..." />
+    </Background>
+  ));