feat(Vaults): replace device

easily replace device from vault config

apps/frontend/src/pages/Setup/NewVault/index.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useRef, useContext } from 'react';
+import React, { useState, useRef, useContext, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import { decode } from 'bs58check';
 import BarcodeScannerComponent from 'react-webcam-barcode-scanner';
@@ -54,6 +55,20 @@ const NewVaultScreen = ({ setStep, newAccount, setNewAccount }: Props) => {
   const [importedDevices, setImportedDevices] = useState<ExtendedPublicKey[]>(
     newAccount.extendedPublicKeys
   );
+  const location = useLocation();
+
+  useEffect(() => {
+    const paramObject = new URLSearchParams(location.search);
+    const fingerprint = paramObject.get('fingerprint');
+    if (fingerprint) {
+      const configCopy = { ...newAccount };
+      configCopy.extendedPublicKeys = newAccount.extendedPublicKeys.filter(
+        (item) => item.parentFingerprint !== fingerprint
+      );
+      setImportedDevices(configCopy.extendedPublicKeys);
+      setNewAccount(configCopy);
+    }
+  }, [location.search]);
 
   const { platform } = useContext(PlatformContext);
   const { currentBitcoinNetwork } = useContext(ConfigContext);

apps/frontend/src/pages/Setup/index.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import { Transition } from '@headlessui/react';
-import { Network } from 'bitcoinjs-lib';
+import { useLocation } from 'react-router-dom';
 
 import TransitionSlideLeft from './TransitionSlideLeft';
 
@@ -13,12 +13,15 @@ import NewHardwareWalletScreen from './NewHardwareWalletScreen';
 import NewLightningScreen from './NewLightningScreen';
 import StepGroups from './Steps';
 
+import { AccountMapContext } from 'src/context';
+
 import {
   VaultConfig,
   AddressType,
   OnChainConfig,
   OnChainConfigWithoutId,
-  LightningConfig
+  LightningConfig,
+  LilyOnchainAccount
 } from '@lily/types';
 import { ChannelBalanceResponse, GetInfoResponse } from '@lily-technologies/lnrpc';
 
@@ -45,6 +48,8 @@ const Setup = ({ currentBlockHeight }: Props) => {
   const [tempLightningState, setTempLightningState] = useState<
     GetInfoResponse & ChannelBalanceResponse
   >();
+  const { currentAccount } = useContext(AccountMapContext);
+  const location = useLocation();
 
   const [newAccount, setNewAccount] = useState<OnChainConfigWithoutId | LightningConfig>(
     EMPTY_NEW_VAULT
@@ -57,6 +62,14 @@ const Setup = ({ currentBlockHeight }: Props) => {
     }
   }, [step]);
 
+  useEffect(() => {
+    if (location.search) {
+      setSetupOption(1);
+      setNewAccount(currentAccount.config);
+      setStep(2);
+    }
+  }, [location.search]);
+
   const importAccountFromFile = (vaultConfig: VaultConfig) => {
     if (vaultConfig.type === 'onchain' && vaultConfig.quorum.totalSigners > 1) {
       try {
@@ -75,7 +88,7 @@ const Setup = ({ currentBlockHeight }: Props) => {
   return (
     <div className='md:pl-64 flex flex-col flex-1 h-full'>
       <main className='flex flex-1 z-10 bg-gray-100 dark:bg-gray-900 relative overflow-x-hidden'>
-        <div className='max-w-4xl w-full flex flex-col items-center mx-auto px-4 sm:px-6 lg:px-8'>
+        <div className='max-w-4xl w-full flex flex-col items-center mx-auto px-4 sm:px-6 lg:px-8 pb-36'>
           <Transition
             show={step === 0}
             appear={true}

apps/frontend/src/pages/Vault/Settings/Devices/DeviceDetailsHeader.tsx

@@ -1,7 +1,7 @@
-import { Fragment, useState } from 'react';
-import { Dialog, Menu, Transition } from '@headlessui/react';
-import { XIcon } from '@heroicons/react/outline';
+import { Fragment } from 'react';
+import { Menu, Transition } from '@headlessui/react';
 import { DotsVerticalIcon } from '@heroicons/react/solid';
+import { useHistory } from 'react-router-dom';
 
 import { DeviceImage } from 'src/components';
 
@@ -17,6 +17,7 @@ interface Props {
 }
 
 const DeviceDetailsHeader = ({ extendedPublicKey, hideActionButtons }: Props) => {
+  const history = useHistory();
   return (
     <div className='pb-6 border-b border-gray-200'>
       <div className='h-24 bg-yellow-400 sm:h-20 lg:h-28' />
@@ -59,6 +60,12 @@ const DeviceDetailsHeader = ({ extendedPublicKey, hideActionButtons }: Props) =>
               <button
                 type='button'
                 className='inline-flex w-full flex-shrink-0 items-center justify-center rounded-md border border-transparent bg-green-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 sm:flex-1'
+                onClick={() =>
+                  history.push({
+                    pathname: '/setup',
+                    search: `?fingerprint=${extendedPublicKey.parentFingerprint}`
+                  })
+                }
               >
                 Replace device
               </button>