Merge pull request #7 from DakaiGroup/ledger-network-switch

Ledger network switch
secretkeylabs · Apr 26, 2023 · 44ad7c5 · 44ad7c5
2 parents 0145386 + a54095e
commit 44ad7c5
Show file tree

Hide file tree

Showing 18 changed files with 407 additions and 49 deletions.
diff --git a/src/app/components/accountRow/index.tsx b/src/app/components/accountRow/index.tsx
@@ -156,7 +156,7 @@ function AccountRow({
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'DASHBOARD_SCREEN' });
   const { showBtcReceiveAlert } = useWalletSelector();
-  const gradient = getAccountGradient(account?.stxAddress!);
+  const gradient = getAccountGradient(account?.stxAddress || account?.btcAddress!);
   const [onStxCopied, setOnStxCopied] = useState(false);
   const [onBtcCopied, setOnBtcCopied] = useState(false);
   const dispatch = useDispatch();

diff --git a/src/app/components/confirmStxTransactionComponent/index.tsx b/src/app/components/confirmStxTransactionComponent/index.tsx
@@ -101,6 +101,7 @@ interface Props {
   onConfirmClick: (transactions: StacksTransaction[]) => void;
   children: ReactNode;
   isSponsored?: boolean;
+  skipModal?: boolean;
 }
 
 function ConfirmStxTransationComponent({
@@ -110,6 +111,7 @@ function ConfirmStxTransationComponent({
   children,
   onConfirmClick,
   onCancelClick,
+  skipModal = false,
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
   const selectedNetwork = useNetworkSelector();
@@ -152,6 +154,10 @@ function ConfirmStxTransationComponent({
   };
 
   const onConfirmButtonClick = async () => {
+    if (skipModal) {
+      onConfirmClick(initialStxTransactions);
+      return;
+    }
     if (selectedAccount?.isLedgerAccount) {
       setIsModalVisible(true);
       return;

diff --git a/src/app/components/ledger/fullScreenHeader/index.tsx b/src/app/components/ledger/fullScreenHeader/index.tsx
@@ -2,6 +2,8 @@ import styled from 'styled-components';
 
 import XverseLogoSVG from '@assets/img/full_logo_horizontal.svg';
 
+declare const VERSION: string;
+
 const HeaderRow = styled.div((props) => ({
   position: 'absolute',
   width: '100%',
@@ -28,7 +30,7 @@ function FullScreenHeader() {
   return (
     <HeaderRow>
       <XverseLogo src={XverseLogoSVG} />
-      <VersionText>V1.0.0</VersionText>
+      <VersionText>V{VERSION}</VersionText>
     </HeaderRow>
   );
 }

diff --git a/src/app/routes/index.tsx b/src/app/routes/index.tsx
@@ -53,6 +53,8 @@ import ConfirmLedgerTransaction from '@screens/ledger/confirmLedgerTransaction';
 import LedgerSendBtcScreen from '@screens/ledger/ledgerSendBtc';
 import LedgerSendStxScreen from '@screens/ledger/ledgerSendStx';
 import ReviewLedgerStxTransaction from '@screens/ledger/reviewLedgerStxTransaction';
+import LedgerSendFtScreen from '@screens/ledger/ledgerSendFt';
+import ReviewLedgerFtTransaction from '@screens/ledger/reviewLedgerFtTransaction';
 
 const router = createHashRouter([
   {
@@ -116,6 +118,10 @@ const router = createHashRouter([
         path: 'send-stx-ledger',
         element: <LedgerSendStxScreen />,
       },
+      {
+        path: 'send-ft-ledger',
+        element: <LedgerSendFtScreen />,
+      },
       {
         path: 'confirm-stx-tx',
         element: <ConfirmStxTransaction />,
@@ -136,6 +142,10 @@ const router = createHashRouter([
         path: 'review-ledger-stx-tx',
         element: <ReviewLedgerStxTransaction />,
       },
+      {
+        path: 'review-ledger-ft-tx',
+        element: <ReviewLedgerFtTransaction />,
+      },
       {
         path: 'confirm-ledger-tx',
         element: <ConfirmLedgerTransaction />,

diff --git a/src/app/screens/accountList/index.tsx b/src/app/screens/accountList/index.tsx
@@ -4,12 +4,14 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import Plus from '@assets/img/dashboard/plus.svg';
+import ConnectLedger from '@assets/img/dashboard/connect_ledger.svg';
 import { useDispatch } from 'react-redux';
 import { selectAccount } from '@stores/wallet/actions/actionCreators';
 import Seperator from '@components/seperator';
 import { Account } from '@secretkeylabs/xverse-core/types';
 import useWalletSelector from '@hooks/useWalletSelector';
 import useWalletReducer from '@hooks/useWalletReducer';
+import { useMemo } from 'react';
 
 const Container = styled.div`
   display: flex;
@@ -64,6 +66,13 @@ function AccountList(): JSX.Element {
   const { network, accountsList, selectedAccount, ledgerAccountsList } = useWalletSelector();
   const { createAccount } = useWalletReducer();
 
+  const displayedAccountsList = useMemo(() => {
+    if (network.type === 'Mainnet') {
+      return [...accountsList, ...ledgerAccountsList];
+    }
+    return accountsList;
+  }, [accountsList, ledgerAccountsList, network]);
+
   const handleAccountSelect = (account: Account) => {
     dispatch(
       selectAccount(
@@ -106,7 +115,7 @@ function AccountList(): JSX.Element {
     <Container>
       <TopRow title={t('CHANGE_ACCOUNT')} onClick={handleBackButtonClick} />
       <AccountContainer>
-        {[...accountsList, ...ledgerAccountsList].map((account) => (
+        {displayedAccountsList.map((account) => (
           <>
             <AccountRow
               key={account.stxAddress + account.btcAddress}
@@ -123,12 +132,14 @@ function AccountList(): JSX.Element {
           </AddAccountContainer>
           <AddAccountText>{t('NEW_ACCOUNT')}</AddAccountText>
         </RowContainer>
-        <RowContainer onClick={onImportLedgerAccount}>
-          <AddAccountContainer>
-            <ButtonImage src={Plus} />
-          </AddAccountContainer>
-          <AddAccountText>{t('LEDGER_ACCOUNT')}</AddAccountText>
-        </RowContainer>
+        {network.type === 'Mainnet' && (
+          <RowContainer onClick={onImportLedgerAccount}>
+            <AddAccountContainer>
+              <ButtonImage src={ConnectLedger} />
+            </AddAccountContainer>
+            <AddAccountText>{t('LEDGER_ACCOUNT')}</AddAccountText>
+          </RowContainer>
+        )}
       </AccountContainer>
     </Container>
   );

diff --git a/src/app/screens/btcSelectAddressScreen/accountView.tsx b/src/app/screens/btcSelectAddressScreen/accountView.tsx
@@ -75,7 +75,7 @@ interface Props {
   isBitcoinTx: boolean;
 }
 function AccountView({ account, isBitcoinTx }: Props) {
-  const gradient = getAccountGradient(account?.stxAddress!);
+  const gradient = getAccountGradient(account?.stxAddress || account?.btcAddress!);
   const { t } = useTranslation('translation', { keyPrefix: 'DASHBOARD_SCREEN' });
 
   function getName() {

diff --git a/src/app/screens/coinDashboard/coinHeader.tsx b/src/app/screens/coinDashboard/coinHeader.tsx
@@ -338,6 +338,12 @@ export default function CoinHeader(props: CoinBalanceProps) {
         });
         return;
       }
+      if (coin === 'FT') {
+        await chrome.tabs.create({
+          url: chrome.runtime.getURL(`options.html#/send-ft-ledger?coin=${fungibleToken?.name}`),
+        });
+        return;
+      }
     }
     if (coin === 'STX' || coin === 'BTC') {
       navigate(`/send-${coin}`);

diff --git a/src/app/screens/home/balanceCard/index.tsx b/src/app/screens/home/balanceCard/index.tsx
@@ -61,8 +61,6 @@ function BalanceCard(props: BalanceCardProps) {
 
   function calculateTotalBalance() {
     let totalBalance = new BigNumber(0);
-    console.log(stxAddress);
-    console.log(btcAddress);
     if (stxAddress) {
       const stxFiatEquiv = microstacksToStx(new BigNumber(stxBalance))
         .multipliedBy(new BigNumber(stxBtcRate))

diff --git a/src/app/screens/home/index.tsx b/src/app/screens/home/index.tsx
@@ -202,7 +202,13 @@ function Home() {
     navigate('/receive/STX');
   };
 
-  const onSendFtSelect = (coin: FungibleToken) => {
+  const onSendFtSelect = async (coin: FungibleToken) => {
+    if (isLedgerAccount) {
+      await chrome.tabs.create({
+        url: chrome.runtime.getURL(`options.html#/send-ft-ledger?coin=${coin.name}`),
+      });
+      return;
+    }
     navigate('send-ft', {
       state: {
         fungibleToken: coin,

diff --git a/src/app/screens/ledger/importLedgerAccount/index.tsx b/src/app/screens/ledger/importLedgerAccount/index.tsx
@@ -213,7 +213,7 @@ function ImportLedger(): JSX.Element {
   const [accountName, setAccountName] = useState<string>('');
   const { t } = useTranslation('translation', { keyPrefix: 'LEDGER_IMPORT_SCREEN' });
   const { addLedgerAccount, updateLedgerAccounts } = useWalletReducer();
-  const { ledgerAccountsList, selectedAccount } = useWalletSelector();
+  const { ledgerAccountsList, network } = useWalletSelector();
   const transition = useTransition(currentStepIndex, {
     from: {
       x: 24,
@@ -227,7 +227,6 @@ function ImportLedger(): JSX.Element {
 
   const importBtcAccounts = async () => {
     const transport = await Transport.create();
-    const network: NetworkType = 'Testnet';
     const newAddressIndex = ledgerAccountsList.filter(
       (account) => account.btcAddress !== ''
     ).length;
@@ -236,7 +235,7 @@ function ImportLedger(): JSX.Element {
       // Bitcoin
       const bitcoinAccount = await importNestedSegwitAccountFromLedger(
         transport,
-        network,
+        network.type,
         0,
         newAddressIndex,
         false
@@ -248,7 +247,7 @@ function ImportLedger(): JSX.Element {
       // Ordinals
       const ordinalsAccount = await importTaprootAccountFromLedger(
         transport,
-        network,
+        network.type,
         0,
         newAddressIndex,
         false
@@ -263,18 +262,20 @@ function ImportLedger(): JSX.Element {
 
   const importStxAccounts = async () => {
     const transport = await Transport.create();
-    const network: NetworkType = 'Testnet';
     const newAddressIndex = ledgerAccountsList.filter(
       (account) => account.stxAddress !== ''
     ).length;
     setAddressIndex(newAddressIndex);
     const { address, publicKey, testnetAddress } = await importStacksAccountFromLedger(
       transport,
-      network,
+      network.type,
       0,
       newAddressIndex
     );
-    setStacksCredentials({ address: testnetAddress, publicKey });
+    setStacksCredentials({
+      address: network.type === 'Mainnet' ? address : testnetAddress,
+      publicKey,
+    });
     await transport.close();
   };
 

diff --git a/src/app/screens/ledger/ledgerSendBtc/index.tsx b/src/app/screens/ledger/ledgerSendBtc/index.tsx
@@ -14,6 +14,7 @@ import { validateBtcAddress } from '@secretkeylabs/xverse-core/wallet';
 import { BITCOIN_DUST_AMOUNT_SATS } from '@utils/constants';
 import { Recipient, SignedBtcTx } from '@secretkeylabs/xverse-core/transactions/btc';
 import { ErrorCodes, ResponseError } from '@secretkeylabs/xverse-core';
+import FullScreenHeader from '@components/ledger/fullScreenHeader';
 
 function LedgerSendBtcScreen() {
   const location = useLocation();
@@ -119,6 +120,7 @@ function LedgerSendBtcScreen() {
 
   return (
     <>
+      <FullScreenHeader />
       <TopRow title={t('SEND')} onClick={() => {}} showBackButton={false} />
       <SendForm
         currencyType="BTC"