fix(suite): allow for N screens to be shown on suite (not just hardcoded 2)

packages/suite/src/components/suite/DeviceDisplay.tsx

@@ -8,8 +8,9 @@ import {
 } from '@suite-common/wallet-core';
 import { DeviceModelInternal } from '@trezor/connect';
 import { Icon, variables } from '@trezor/components';
+import { splitStringEveryNCharacters } from '@trezor/utils';
 import { Translation } from './Translation';
-import { ClipboardEvent, ReactElement, ReactNode } from 'react';
+import { ClipboardEvent, Fragment, ReactElement, ReactNode } from 'react';
 import { MAX_CHARACTERS_ON_SCREEN } from 'src/constants/suite/device';
 
 const Display = styled.div`
@@ -112,12 +113,14 @@ export const DeviceDisplay = ({ address, network, valueDataTest }: DeviceDisplay
 
     const isPaginated =
         MAX_CHARACTERS_ON_SCREEN[selectedDeviceInternalModel] <= processedAddress.length;
+
     const areChunksUsed =
         addressDisplayType === AddressDisplayOptions.CHUNKED &&
         !unavailableCapabilities?.chunkify &&
         valueDataTest !== '@xpub-modal/xpub-field' &&
         network !== 'cardano' &&
         (network !== 'solana' || valueDataTest === '@modal/confirm-address/address-field');
+
     const isPixelType = selectedDeviceInternalModel !== DeviceModelInternal.T2T1;
     const iconNextName = isPixelType ? 'ADDRESS_PIXEL_NEXT' : 'ADDRESS_NEXT';
     const iconContinuesName = isPixelType ? 'ADDRESS_PIXEL_CONTINUES' : 'ADDRESS_CONTINUES';
@@ -173,28 +176,49 @@ export const DeviceDisplay = ({ address, network, valueDataTest }: DeviceDisplay
         if (isPaginated) {
             const breakpoint = isPixelType ? 70 : 81;
 
-            return (
-                <>
-                    <Text isPixelType={isPixelType} data-test={valueDataTest}>
-                        {address.slice(0, breakpoint)}
-                    </Text>
-                    <StyledNextIcon {...iconConfig} isPixelType={isPixelType} icon={iconNextName} />
-                    <Wrapper>
-                        <Divider areChunksUsed={areChunksUsed} />
-                        <AddressLabel areChunksUsed={areChunksUsed}>
-                            <Translation id="NEXT_PAGE" />
-                        </AddressLabel>
-                    </Wrapper>
-                    <StyledContinuesIcon
-                        {...iconConfig}
+            const slices = splitStringEveryNCharacters(address, breakpoint);
+
+            const components = [];
+
+            for (let i = 0; i < slices.length; i++) {
+                const isFirst = i === 0;
+                const isLast = i === slices.length - 1;
+
+                components.push(
+                    <Text
+                        key={`text-${i}`}
                         isPixelType={isPixelType}
-                        icon={iconContinuesName}
-                    />
-                    <Text isPixelType={isPixelType} isWithIndentation>
-                        {address.slice(breakpoint)}
-                    </Text>
-                </>
-            );
+                        data-test={isFirst ? valueDataTest : undefined}
+                    >
+                        {slices[i]}
+                    </Text>,
+                );
+
+                if (!isLast) {
+                    components.push(
+                        <Fragment key={`separator-${i}`}>
+                            <StyledNextIcon
+                                {...iconConfig}
+                                isPixelType={isPixelType}
+                                icon={iconNextName}
+                            />
+                            <Wrapper>
+                                <Divider areChunksUsed={areChunksUsed} />
+                                <AddressLabel areChunksUsed={areChunksUsed}>
+                                    <Translation id="NEXT_PAGE" />
+                                </AddressLabel>
+                            </Wrapper>
+                            <StyledContinuesIcon
+                                {...iconConfig}
+                                isPixelType={isPixelType}
+                                icon={iconContinuesName}
+                            />
+                        </Fragment>,
+                    );
+                }
+            }
+
+            return components;
         }
 
         return <Text isPixelType={isPixelType}>{address}</Text>;

packages/utils/src/index.ts

@@ -1,8 +1,12 @@
+export * as bufferUtils from './bufferUtils';
+export * as enumUtils from './enumUtils';
+export * as versionUtils from './versionUtils';
+export * as xssFilters from './xssFilters';
+export * from './addDashesToSpaces';
 export * from './arrayDistinct';
 export * from './arrayPartition';
 export * from './arrayShuffle';
 export * from './arrayToDictionary';
-export * as bufferUtils from './bufferUtils';
 export * from './bytesToHumanReadable';
 export * from './capitalizeFirstLetter';
 export * from './cloneObject';
@@ -11,7 +15,7 @@ export * from './createCooldown';
 export * from './createDeferred';
 export * from './createDeferredManager';
 export * from './createTimeoutPromise';
-export * as enumUtils from './enumUtils';
+export * from './getLocaleSeparators';
 export * from './getNumberFromPixelString';
 export * from './getRandomNumberInRange';
 export * from './getSynchronize';
@@ -28,12 +32,9 @@ export * from './parseHostname';
 export * from './promiseAllSequence';
 export * from './redactUserPath';
 export * from './scheduleAction';
+export * from './splitStringEveryNCharacters';
 export * from './throwError';
-export * from './truncateMiddle';
 export * from './topologicalSort';
-export * from './urlToOnion';
-export * as versionUtils from './versionUtils';
-export * as xssFilters from './xssFilters';
-export * from './getLocaleSeparators';
-export * from './addDashesToSpaces';
+export * from './truncateMiddle';
 export * from './typedEventEmitter';
+export * from './urlToOnion';

packages/utils/src/splitStringEveryNCharacters.ts

@@ -0,0 +1,9 @@
+export function splitStringEveryNCharacters(value: string, n: number): string[] {
+    if (n === 0) {
+        return [];
+    }
+
+    const regex = new RegExp(`.{1,${n}}`, 'g');
+
+    return value.match(regex) ?? [];
+}

packages/utils/tests/splitStringEveryNCharacters.test.ts

@@ -0,0 +1,13 @@
+import { splitStringEveryNCharacters } from '../src/splitStringEveryNCharacters';
+
+describe(splitStringEveryNCharacters.name, () => {
+    it('splits string into parts of N characters', () => {
+        expect(splitStringEveryNCharacters('123456789', 0)).toStrictEqual([]);
+
+        const expectedFor1 = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+        expect(splitStringEveryNCharacters('123456789', 1)).toStrictEqual(expectedFor1);
+
+        const expectedFor2 = ['12', '34', '56', '78', '9'];
+        expect(splitStringEveryNCharacters('123456789', 2)).toStrictEqual(expectedFor2);
+    });
+});