[ENG-3370] feat: improve get address screen (#715)

* init getAddress screen revamp

* update ui

* update btc address select request

* update stx screen and add btcAddress to stacks connect response

* ui fixes

* minor fixes

* disable account actions on connection requests

* added icon borderRadius

* remove debug log

* Fix typing between sats connect and extension for providers (#768)

* Fix typing between sats connect and extension for providers

* update sats-connect version

---------

Co-authored-by: Mahmoud Aboelenein <[email protected]>

---------

Co-authored-by: Victor Kirov <[email protected]>

package.json

@@ -62,7 +62,7 @@
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "redux-state-sync": "^3.1.4",
-    "sats-connect": "1.3.0",
+    "sats-connect": "1.4.0",
     "stream-browserify": "^3.0.0",
     "string-to-color": "^2.2.2",
     "styled-components": "^5.3.5",

src/app/hooks/useBtcAddressRequest.ts

@@ -2,15 +2,30 @@ import { ExternalSatsMethods, MESSAGE_SOURCE } from '@common/types/message-types
 import useWalletSelector from '@hooks/useWalletSelector';
 import { decodeToken } from 'jsontokens';
 import { useLocation } from 'react-router-dom';
-import { Address, AddressPurpose, GetAddressOptions, GetAddressResponse } from 'sats-connect';
+import {
+  Address,
+  AddressPurpose,
+  AddressType,
+  GetAddressOptions,
+  GetAddressResponse,
+} from 'sats-connect';
 
 const useBtcAddressRequest = () => {
-  const { btcAddress, ordinalsAddress, btcPublicKey, ordinalsPublicKey } = useWalletSelector();
+  const {
+    btcAddress,
+    ordinalsAddress,
+    btcPublicKey,
+    ordinalsPublicKey,
+    stxAddress,
+    stxPublicKey,
+    selectedAccount,
+  } = useWalletSelector();
   const { search } = useLocation();
   const params = new URLSearchParams(search);
   const requestToken = params.get('addressRequest') ?? '';
   const request = decodeToken(requestToken) as any as GetAddressOptions;
   const tabId = params.get('tabId') ?? '0';
+  const origin = params.get('origin') ?? '';
 
   const approveBtcAddressRequest = () => {
     const addressesResponse: Address[] = request.payload.purposes.map((purpose: AddressPurpose) => {
@@ -19,12 +34,23 @@ const useBtcAddressRequest = () => {
           address: ordinalsAddress,
           publicKey: ordinalsPublicKey,
           purpose: AddressPurpose.Ordinals,
+          addressType: AddressType.p2tr,
+        };
+      }
+      if (purpose === AddressPurpose.Stacks) {
+        return {
+          address: stxAddress,
+          publicKey: stxPublicKey,
+          purpose: AddressPurpose.Stacks,
+          addressType: AddressType.stacks,
         };
       }
       return {
         address: btcAddress,
         publicKey: btcPublicKey,
         purpose: AddressPurpose.Payment,
+        addressType:
+          selectedAccount?.accountType === 'ledger' ? AddressType.p2wpkh : AddressType.p2sh,
       };
     });
     const response: GetAddressResponse = {
@@ -50,6 +76,7 @@ const useBtcAddressRequest = () => {
   return {
     payload: request.payload,
     tabId,
+    origin,
     requestToken,
     approveBtcAddressRequest,
     cancelAddressRequest,

src/app/routes/index.tsx

@@ -4,10 +4,8 @@ import OnboardingGuard from '@components/guards/onboarding';
 import { SingleTabGuard } from '@components/guards/singleTab';
 import ScreenContainer from '@components/screenContainer';
 import AccountList from '@screens/accountList';
-import AuthenticationRequest from '@screens/authenticationRequest';
 import BackupWallet from '@screens/backupWallet';
 import BackupWalletSteps from '@screens/backupWalletSteps';
-import BtcSelectAddressScreen from '@screens/btcSelectAddressScreen';
 import BtcSendScreen from '@screens/btcSendScreen';
 import Buy from '@screens/buy';
 import CoinDashboard from '@screens/coinDashboard';
@@ -18,6 +16,8 @@ import ConfirmInscriptionRequest from '@screens/confirmInscriptionRequest';
 import ConfirmNftTransaction from '@screens/confirmNftTransaction';
 import ConfirmOrdinalTransaction from '@screens/confirmOrdinalTransaction';
 import ConfirmStxTransaction from '@screens/confirmStxTransaction';
+import AuthenticationRequest from '@screens/connect/authenticationRequest';
+import BtcSelectAddressScreen from '@screens/connect/btcSelectAddressScreen';
 import CreateInscription from '@screens/createInscription';
 import CreatePassword from '@screens/createPassword';
 import CreateWalletSuccess from '@screens/createWalletSuccess';
@@ -61,9 +61,9 @@ import ChangePasswordScreen from '@screens/settings/changePassword';
 import FiatCurrencyScreen from '@screens/settings/fiatCurrency';
 import LockCountdown from '@screens/settings/lockCountdown';
 import PrivacyPreferencesScreen from '@screens/settings/privacyPreferences';
-import SignatureRequest from '@screens/signatureRequest';
 import SignBatchPsbtRequest from '@screens/signBatchPsbtRequest';
 import SignPsbtRequest from '@screens/signPsbtRequest';
+import SignatureRequest from '@screens/signatureRequest';
 import SpeedUpTransactionScreen from '@screens/speedUpTransaction';
 import Stacking from '@screens/stacking';
 import SwapScreen from '@screens/swap';

src/app/screens/accountList/index.tsx

@@ -12,7 +12,7 @@ import { Plus } from '@phosphor-icons/react';
 import { Account } from '@secretkeylabs/xverse-core';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 export const Container = styled.div({
@@ -57,10 +57,14 @@ const Title = styled.div((props) => ({
 function AccountList(): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'ACCOUNT_SCREEN' });
   const navigate = useNavigate();
+  const { search } = useLocation();
+  const params = new URLSearchParams(search);
   const { network, accountsList, selectedAccount, ledgerAccountsList } = useWalletSelector();
   const { createAccount, switchAccount } = useWalletReducer();
   const { enqueueFetchBalances } = useAccountBalance();
 
+  const hideListActions = Boolean(params.get('hideListActions')) || false;
+
   const displayedAccountsList = useMemo(() => {
     const networkLedgerAccounts = filterLedgerAccounts(ledgerAccountsList, network.type);
     return [...networkLedgerAccounts, ...accountsList];
@@ -112,20 +116,22 @@ function AccountList(): JSX.Element {
           ))}
         </AccountContainer>
       </div>
-      <ButtonsWrapper>
-        <ActionButton
-          icon={<Plus size={16} fill="white" />}
-          onPress={onCreateAccount}
-          text={t('NEW_ACCOUNT')}
-          transparent
-        />
-        <ActionButton
-          icon={<img src={ConnectLedger} width={16} height={16} alt="" />}
-          onPress={onImportLedgerAccount}
-          text={t('LEDGER_ACCOUNT')}
-          transparent
-        />
-      </ButtonsWrapper>
+      {!hideListActions ? (
+        <ButtonsWrapper>
+          <ActionButton
+            icon={<Plus size={16} fill="white" />}
+            onPress={onCreateAccount}
+            text={t('NEW_ACCOUNT')}
+            transparent
+          />
+          <ActionButton
+            icon={<img src={ConnectLedger} width={16} height={16} alt="" />}
+            onPress={onImportLedgerAccount}
+            text={t('LEDGER_ACCOUNT')}
+            transparent
+          />
+        </ButtonsWrapper>
+      ) : null}
     </Container>
   );
 }