separate factory reset flow

src/components/L2/Window/BodyPane.scss

@@ -26,6 +26,9 @@
     &.error-text {
       color: $warning-red;
     }
+    &.maxwidth {
+      max-width: 300px;
+    }
   }
 
   .arrow-button {
@@ -67,6 +70,12 @@
     &:hover {
       opacity: 0.8;
     }
+
+    &.warning {
+      color: $warning-red;
+      background-color: $warning-red-bg-tsp;
+      min-width: 75px;
+    }
   }
 
   .copy-button {

src/lib/usetSetNetworkKeys.ts

@@ -0,0 +1,115 @@
+import { useCallback, useRef } from 'react';
+import { Just } from 'folktale/maybe';
+import * as azimuth from 'azimuth-js';
+import { randomHex } from 'web3-utils';
+
+import { usePointCache } from 'store/pointCache';
+import { useNetwork } from 'store/network';
+import { useWallet } from 'store/wallet';
+import { useRollerStore } from 'store/rollerStore';
+
+import * as need from 'lib/need';
+import {
+  attemptNetworkSeedDerivation,
+  deriveNetworkKeys,
+  CRYPTO_SUITE_VERSION,
+} from 'lib/keys';
+import useEthereumTransaction from 'lib/useEthereumTransaction';
+import { GAS_LIMITS } from 'lib/constants';
+import { addHexPrefix } from 'lib/utils/address';
+import { useSingleKeyfileGenerator } from 'lib/useKeyfileGenerator';
+
+export function useSetNetworkKeys(
+  manualNetworkSeed: string,
+  setManualNetworkSeed: (seed: string) => void
+) {
+  const { urbitWallet, wallet, authMnemonic, authToken }: any = useWallet();
+  const { point } = useRollerStore();
+  const { syncDetails, syncRekeyDate }: any = usePointCache();
+  const { contracts }: any = useNetwork();
+
+  const _contracts = need.contracts(contracts);
+
+  const networkRevision = Number(point.keyRevisionNumber);
+  const randomSeed = useRef<string | null>();
+
+  const {
+    generating: keyfileGenerating,
+    filename,
+    bind: keyfileBind,
+  } = useSingleKeyfileGenerator({ seed: manualNetworkSeed });
+
+  const buildNetworkSeed = useCallback(
+    async manualSeed => {
+      if (manualSeed !== undefined) {
+        setManualNetworkSeed(manualSeed);
+        return manualSeed;
+      } else {
+        const newNetworkRevision = networkRevision + 1;
+        console.log(`deriving seed with revision ${newNetworkRevision}`);
+
+        const networkSeed = await attemptNetworkSeedDerivation({
+          urbitWallet,
+          wallet,
+          authMnemonic,
+          details: point,
+          point: point.value,
+          authToken,
+          revision: newNetworkRevision,
+        });
+
+        if (Just.hasInstance(networkSeed)) {
+          return networkSeed.value;
+        }
+
+        randomSeed.current = randomSeed.current || randomHex(32); // 32 bytes
+        setManualNetworkSeed(randomSeed.current);
+
+        return randomSeed.current;
+      }
+    },
+    [
+      authMnemonic,
+      setManualNetworkSeed,
+      networkRevision,
+      urbitWallet,
+      wallet,
+      point,
+      authToken,
+    ]
+  );
+
+  const { completed: _completed, ...rest } = useEthereumTransaction(
+    useCallback(
+      async (manualSeed: string, isDiscontinuity: boolean) => {
+        const seed = await buildNetworkSeed(manualSeed);
+        const pair = deriveNetworkKeys(seed);
+
+        return azimuth.ecliptic.configureKeys(
+          _contracts,
+          point.value,
+          addHexPrefix(pair.crypt.public),
+          addHexPrefix(pair.auth.public),
+          CRYPTO_SUITE_VERSION,
+          isDiscontinuity
+        );
+      },
+      [_contracts, point, buildNetworkSeed]
+    ),
+    useCallback(
+      () => Promise.all([syncDetails(point.value), syncRekeyDate(point.value)]),
+      [point, syncDetails, syncRekeyDate]
+    ),
+    GAS_LIMITS.CONFIGURE_KEYS
+  );
+
+  // only treat the transaction as completed once we also have keys to download
+  const completed = _completed && !keyfileGenerating;
+
+  return {
+    completed,
+    filename,
+    keyfileBind,
+    ...rest,
+  };
+}

src/style/shared/variables.scss

@@ -10,6 +10,7 @@ $dark-gray: rgba(102, 102, 102, 1);
 $rollup-yellow: rgba(255, 199, 0, 1);
 $accept-green: rgba(0, 159, 101, 1);
 $warning-red: rgb(242, 33, 33);
+$warning-red-bg-tsp: rgba(242, 33, 33, 0.15);
 $light-gray-border: 1px solid $light-gray;
 $activate-blue: rgba(33, 157, 255, 1);
 $light-blue: rgba(33, 157, 255, 0.3);

src/views/Point/UrbitOS.jsx

@@ -11,17 +11,20 @@ import L2BackHeader from 'components/L2/Headers/L2BackHeader';
 import UrbitOSHome from '../UrbitOS/Home';
 import UrbitOSNetworkKeys from '../UrbitOS/NetworkKeys.tsx';
 import UrbitOSChangeSponsor from '../UrbitOS/ChangeSponsor.tsx';
+import UrbitOSFactoryReset from '../UrbitOS/FactoryReset.tsx';
 
 const NAMES = {
   HOME: 'HOME',
   CHANGE_SPONSOR: 'CHANGE_SPONSOR',
   NETWORKING_KEYS: 'NETWORKING_KEYS',
+  FACTORY_RESET: 'FACTORY_RESET',
 };
 
 const VIEWS = {
   [NAMES.HOME]: UrbitOSHome,
   [NAMES.CHANGE_SPONSOR]: UrbitOSChangeSponsor,
   [NAMES.NETWORKING_KEYS]: UrbitOSNetworkKeys,
+  [NAMES.FACTORY_RESET]: UrbitOSFactoryReset,
 };
 
 export default function UrbitOS() {

src/views/UrbitOS/FactoryReset.scss

@@ -0,0 +1,59 @@
+@import 'style/shared/variables.scss';
+
+.network-keys {
+  font-size: 14px;
+
+  .body-pane {
+    height: 360px;
+
+    .download {
+      height: 24px;
+      width: 24px;
+      margin: 0 auto 22px;
+    }
+
+    .download-message {
+      align-items: center;
+      width: 350px;
+      //styleName: Sans/UI + Control;
+      font-family: Inter;
+      line-height: 16px;
+      letter-spacing: 0em;
+      text-align: center;
+      margin: 90px auto 40px;
+    }
+
+    .contents {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .check-row {
+        margin-top: 8px;
+        font-weight: 500;
+
+        .checkbox {
+          border-radius: $medium-border-radius;
+          height: 16px;
+          width: 16px;
+          margin-right: 14px;
+
+          svg {
+            height: 18px;
+            width: 18px;
+          }
+        }
+      }
+
+      .info-text {
+        color: $dark-gray;
+        margin: 8px 0px 24px 32px;
+      }
+    }
+  }
+  .center > span {
+    margin: auto;
+  }
+}