Merge branch 'development' into TW-1108-migrate-redux-persist-storage…

…-to-unlimited

e2e/src/utils/search.utils.ts

@@ -18,7 +18,7 @@ export const findElement = async (
 };
 
 export const findElementBySelectors = async (selectors: string, timeout = MEDIUM_TIMEOUT, errorTitle?: string) => {
-  const element = await BrowserContext.page.waitForSelector(selectors, { timeout }).catch(error => {
+  const element = await BrowserContext.page.waitForSelector(selectors, { visible: true, timeout }).catch(error => {
     if (errorTitle && error instanceof Error) {
       error.message = `${errorTitle}\n` + error.message;
     }

src/app/atoms/AssetField.tsx

@@ -4,14 +4,14 @@ import BigNumber from 'bignumber.js';
 
 import { FormField } from 'app/atoms';
 
-type AssetFieldProps = Omit<ComponentProps<typeof FormField>, 'onChange'> & {
+interface AssetFieldProps extends Omit<ComponentProps<typeof FormField>, 'onChange'> {
   value?: number | string;
   min?: number;
   max?: number;
   assetSymbol?: ReactNode;
   assetDecimals?: number;
   onChange?: (v?: string) => void;
-};
+}
 
 const AssetField = forwardRef<HTMLInputElement, AssetFieldProps>(
   (

src/app/atoms/FormField.tsx

@@ -218,10 +218,10 @@ const ExtraInner: React.FC<ExtraInnerProps> = ({ useDefaultWrapper, innerCompone
       <div
         className={classNames(
           'absolute flex items-center justify-end inset-y-0 right-0 w-32',
-          'opacity-50 pointer-events-none overflow-hidden'
+          'opacity-50 pointer-events-none'
         )}
       >
-        <span className="mx-4 text-lg font-light text-gray-900">{innerComponent}</span>
+        <div className="mx-4 text-lg font-light text-gray-900">{innerComponent}</div>
       </div>
     );
   return <>{innerComponent}</>;

src/app/store/collectibles-metadata/state.ts

@@ -1,3 +1,5 @@
+import { cloneDeep } from 'lodash';
+
 import type { TokenMetadata } from 'lib/metadata';
 
 /**
@@ -16,6 +18,9 @@ export const collectiblesMetadataInitialState: SliceState = {
   isLoading: false
 };
 
+/** Cannot use initial value during migrations - object is frozen & forbids mutations. */
+export const collectiblesMetadataInitialStateClone = cloneDeep(collectiblesMetadataInitialState);
+
 export const sanitizeCollectiblesMetadataForDevTools = <S extends SliceState>(state: S): S => ({
   ...state,
   records: Array.from(state.records.values()) as unknown as MetadataMap

src/app/store/index.ts

@@ -12,13 +12,15 @@ import { epicMiddleware, rootEpic } from './root-state.epics';
 import { rootReducer } from './root-state.reducer';
 import type { RootState } from './root-state.type';
 
-const persistConfigBlacklist: (keyof RootState)[] = [
-  'buyWithCreditCard',
-  'collectibles',
-  'assets',
-  'collectiblesMetadata'
+export const SLICES_BLACKLIST = [
+  'buyWithCreditCard' as const,
+  'collectibles' as const,
+  'assets' as const,
+  'collectiblesMetadata' as const
 ];
 
+const persistConfigBlacklist: (keyof RootState)[] = SLICES_BLACKLIST;
+
 const persistedReducer = persistReducer<RootState>(
   {
     key: 'temple-root',

src/app/store/migrations.ts

@@ -3,16 +3,30 @@ import type { MigrationManifest, PersistedState } from 'redux-persist';
 import { toTokenSlug } from 'lib/assets';
 import { isCollectible } from 'lib/metadata';
 
+import { collectiblesMetadataInitialStateClone } from './collectibles-metadata/state';
 import type { RootState } from './root-state.type';
 
-type TypedPersistedRootState = Exclude<PersistedState, undefined> & RootState;
+import type { SLICES_BLACKLIST } from './index';
+
+type MakePropertiesOptional<T, K extends keyof T> = {
+  [P in keyof T]: P extends K ? T[P] | undefined : T[P];
+};
+
+/** Blacklisted slices are not rehydrated */
+type TypedPersistedRootState = Exclude<PersistedState, undefined> &
+  MakePropertiesOptional<RootState, typeof SLICES_BLACKLIST[number]>;
 
 export const MIGRATIONS: MigrationManifest = {
   '2': (persistedState: PersistedState) => {
     if (!persistedState) return persistedState;
     const typedPersistedState = persistedState as TypedPersistedRootState;
     const allTokensMetadata = typedPersistedState.tokensMetadata.metadataRecord;
 
+    // `collectiblesMetadata` slice data is absent. Setting initial value here.
+    // It is safe as it is blacklisted & won't be persisted in this (root) slice.
+    // @ts-expect-error // Due to the absence of `_persist` property yet
+    const collectiblesMetadata = (typedPersistedState.collectiblesMetadata = collectiblesMetadataInitialStateClone);
+
     for (const slug of Object.keys(allTokensMetadata)) {
       const metadata = allTokensMetadata[slug];
       if (!metadata) {
@@ -34,7 +48,7 @@ export const MIGRATIONS: MigrationManifest = {
       const newSlug = toTokenSlug(metadata.address, tokenId);
 
       if (isCollectible(metadata)) {
-        typedPersistedState.collectiblesMetadata.records.set(newSlug, {
+        collectiblesMetadata.records.set(newSlug, {
           ...metadata,
           id: tokenId
         });

src/app/templates/AssetSelect.tsx

@@ -93,7 +93,7 @@ const AssetSelectTitle: FC = () => (
   </h2>
 );
 
-const AssetFieldContent: FC<{ slug: string } & TestIDProperty> = ({ slug, testID }) => {
+const AssetFieldContent = memo<{ slug: string } & TestIDProperty>(({ slug, testID }) => {
   const account = useAccount();
   const metadata = useAssetMetadata(slug);
 
@@ -125,7 +125,7 @@ const AssetFieldContent: FC<{ slug: string } & TestIDProperty> = ({ slug, testID
       </Balance>
     </div>
   );
-};
+});
 
 const AssetOptionContent: FC<{ slug: string; selected: boolean }> = ({ slug, selected }) => (
   <div

tailwind.config.js

@@ -588,6 +588,7 @@ module.exports = {
         18: '4.5rem',
         25: '6.25rem',
         29: '7.25rem',
+        63: '15.75rem'
       },
       height: theme => theme('spacing'),
       minHeight: theme => theme('height'),