Refactor: extract CGW types into a package (#57)

* refactor: make prettier config global

* feature: extract store gateway to separate package

I’ve moved the autogenerated gateway API code to a separate package.
This will allow us to reuse it in the web application.

In the process I created 2 more configuration packages:
- config/tsconfig
- config/jest-presets

The goal of those is to offer base tsconfig and jest presets for reuse
across packages.

* fix: improve yarn installation instructions

* fix: tsx & linting issues

.github/workflows/mobile-lint.yml

@@ -6,9 +6,11 @@ on:
       - main
     paths:
       - apps/mobile/**
+      - packages/store/**
   pull_request:
     paths:
       - apps/mobile/**
+      - packages/store/**
 
 jobs:
   lint:

.lintstagedrc.json

@@ -1,5 +1,8 @@
 {
   "*.ts": ["yarn prettier:fix", "yarn eslint"],
   "*.tsx": ["yarn prettier:fix", "yarn eslint"],
-  "apps/mobile/assets/fonts/safe-icons/selection.json": ["node ./apps/mobile/scripts/generateIconTypes.js", "git add ./apps/mobile/src/types/iconTypes.ts"]
+  "apps/mobile/assets/fonts/safe-icons/selection.json": [
+    "node ./apps/mobile/scripts/generateIconTypes.js",
+    "git add ./apps/mobile/src/types/iconTypes.ts"
+  ]
 }

apps/mobile/.prettierignore → .prettierignore

@@ -6,3 +6,5 @@ html
 ios
 android
 /assets
+
+apps/mobile/assets

README.md

@@ -18,12 +18,27 @@ To get started, ensure you have the required tools installed and follow these st
 ### Prerequisites
 
 - **Node.js**: Install the latest stable version from [Node.js](https://nodejs.org/).
-- **Yarn**: Use Yarn version 4.5.3 or later. You can install it globally:
+- **Yarn**: Use Yarn version 4.5.3 or later
+
+to install it with the latest node version you can simply do
+
+```bash
+corepack enable
+```
+
+and then just run
 
 ```bash
-npm install -g yarn
+yarn
 ```
 
+This will install the required version of yarn and resolve all dependencies.
+
+> [!INFO]
+>
+> Corepack is a tool to help with managing versions of your package managers. It exposes binary proxies for each supported package manager that, when called, will identify whatever package manager is
+> configured for the current project, download it if needed, and finally run it.
+
 ### Initial Setup
 
 1. Clone the repository:
@@ -52,7 +67,7 @@ yarn workspace <workspace-name> <script>
 ```
 
 Example:
- 
+
 ```bash
 yarn workspace @safe-global/mobile start
 ```
@@ -64,20 +79,21 @@ yarn workspace <workspace-name> add <package-name>
 ```
 
 - **Remove a dependency from a specific workspace:**
+
 ```bash
 yarn workspace <workspace-name> remove <package-name>
 ```
-  
+
 > [!Note]
-> 
-> Yarn treats commands that contain a semicolon as global commands. For example if you have a 
+>
+> Yarn treats commands that contain a semicolon as global commands. For example if you have a
 > command in a workspace that has a semicolon and there isn't another workspace that has the same command,
->you can run the command without specifying the workspace name. For example:
-> 
+> you can run the command without specifying the workspace name. For example:
+>
 > ```bash
 > yarn start:ios
 > ```
-> 
+>
 > is equivalent to:
 >
 > ```bash
@@ -137,4 +153,3 @@ yarn install
 
 If you have any questions or run into issues, feel free to open a discussion or contact the maintainers. Happy coding!
 🚀
-

apps/mobile/app/_layout.tsx

@@ -5,7 +5,7 @@ import { Provider } from 'react-redux'
 import { persistor, store } from '@/src/store'
 import { PersistGate } from 'redux-persist/integration/react'
 import { isStorybookEnv } from '@/src/config/constants'
-import { apiSliceWithChainsConfig } from '@/src/store/gateway/chains/index'
+import { apiSliceWithChainsConfig } from '@safe-global/store/gateway/chains'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { HeaderBackButton } from '@react-navigation/elements'
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'

apps/mobile/jest.config.js

@@ -1,4 +1,7 @@
+const preset = require('../../config/jest-presets/presets/jest-preset')
+
 module.exports = {
+  ...preset,
   preset: 'jest-expo',
   collectCoverage: true,
   collectCoverageFrom: [

apps/mobile/package.json

@@ -28,7 +28,6 @@
     "storybook-generate": "sb-rn-get-stories",
     "generate:icons": "node ./scripts/generateIconTypes.js",
     "prepare": "husky",
-    "api-generate": " npx @rtk-query/codegen-openapi openapi-config.ts",
     "build-storybook": "STORYBOOK_WEB='true' storybook build",
     "e2e:metro-ios": "EXPO_PUBLIC_ENV=e2e NODE_ENV=test RN_SRC_EXT=e2e.ts,e2e.tsx expo run:ios",
     "e2e:metro-android": "EXPO_PUBLIC_ENV=e2e NODE_ENV=test RN_SRC_EXT=e2e.ts,e2e.tsx expo run:android",
@@ -48,6 +47,7 @@
     "@react-navigation/material-top-tabs": "^7.0.1",
     "@react-navigation/native": "^7.0.0",
     "@reduxjs/toolkit": "^2.4.0",
+    "@safe-global/store": "workspace:^",
     "@storybook/addon-react-native-web": "^0.0.26",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@tamagui/animations-moti": "^1.117.1",
@@ -128,7 +128,6 @@
     "globals": "^15.11.0",
     "jest": "^29.7.0",
     "jest-expo": "~52.0.2",
-    "prettier": "3.3.3",
     "react-native-svg": "15.8.0",
     "redux-devtools-expo-dev-plugin": "^1.0.0",
     "storybook": "^8.4.6",

apps/mobile/src/components/SafeListItem/SafeListItem.tsx

@@ -4,7 +4,7 @@ import { Text, Theme, ThemeName, View } from 'tamagui'
 import { IconProps, SafeFontIcon } from '../SafeFontIcon/SafeFontIcon'
 import { ellipsis } from '@/src/utils/formatters'
 import { isMultisigExecutionInfo } from '@/src/utils/transaction-guards'
-import { Transaction } from '@/src/store/gateway/AUTO_GENERATED/transactions'
+import { Transaction } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
 import { Badge } from '../Badge'
 
 interface SafeListItemProps {

apps/mobile/src/components/TxInfo/TxInfo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { TransactionInfoType } from '@/src/store/gateway/types'
-import { type Transaction } from '@/src/store/gateway/AUTO_GENERATED/transactions'
+import { TransactionInfoType } from '@safe-global/store/gateway/types'
+import { type Transaction } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
 import { useTransactionType } from '@/src/hooks/useTransactionType'
 import { TxTokenCard } from '@/src/components/transactions-list/Card/TxTokenCard'
 import { TxSettingsCard } from '@/src/components/transactions-list/Card/TxSettingsCard'

apps/mobile/src/components/transactions-list/Card/TxBatchCard/TxBatchCard.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { TxBatchCard } from '@/src/components/transactions-list/Card/TxBatchCard'
 import { mockTransferWithInfo } from '@/src/tests/mocks'
-import { MultiSend, TransactionInfoType } from '@/src/store/gateway/types'
+import { MultiSend, TransactionInfoType } from '@safe-global/store/gateway/types'
 
 const meta: Meta<typeof TxBatchCard> = {
   title: 'TransactionsList/TxBatchCard',

apps/mobile/src/components/transactions-list/Card/TxBatchCard/TxBatchCard.test.tsx

@@ -1,7 +1,7 @@
 import { render } from '@/src/tests/test-utils'
 import { TxBatchCard } from '.'
 import { mockTransferWithInfo } from '@/src/tests/mocks'
-import { MultiSend, TransactionInfoType } from '@/src/store/gateway/types'
+import { MultiSend, TransactionInfoType } from '@safe-global/store/gateway/types'
 
 describe('TxBatchCard', () => {
   it('should render the default markup', () => {

apps/mobile/src/components/transactions-list/Card/TxBatchCard/TxBatchCard.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { Avatar, View } from 'tamagui'
 import { SafeListItem } from '@/src/components/SafeListItem'
 import { SafeFontIcon } from '@/src/components/SafeFontIcon/SafeFontIcon'
-import type { MultiSend } from '@/src/store/gateway/types'
-import type { Transaction } from '@/src/store/gateway/AUTO_GENERATED/transactions'
+import type { MultiSend } from '@safe-global/store/gateway/types'
+import type { Transaction } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
 
 interface TxBatchCardProps {
   txInfo: MultiSend

apps/mobile/src/components/transactions-list/Card/TxConflictingCard/TxConflictingCard.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Theme, View } from 'tamagui'
 import { TxInfo } from '@/src/components/TxInfo'
 import { Alert } from '@/src/components/Alert'
-import { TransactionQueuedItem } from '@/src/store/gateway/AUTO_GENERATED/transactions'
+import { TransactionQueuedItem } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
 
 interface TxConflictingCard {
   transactions: TransactionQueuedItem[]

apps/mobile/src/components/transactions-list/Card/TxContractInteractionCard/TxContractInteractionCard.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { TxContractInteractionCard } from '@/src/components/transactions-list/Card/TxContractInteractionCard'
 import { mockTransferWithInfo } from '@/src/tests/mocks'
-import { CustomTransactionInfo } from '@/src/store/gateway/AUTO_GENERATED/transactions'
-import { TransactionInfoType } from '@/src/store/gateway/types'
+import { CustomTransactionInfo } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
+import { TransactionInfoType } from '@safe-global/store/gateway/types'
 
 const meta: Meta<typeof TxContractInteractionCard> = {
   title: 'TransactionsList/TxContractInteractionCard',

apps/mobile/src/components/transactions-list/Card/TxContractInteractionCard/TxContractInteractionCard.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@/src/tests/test-utils'
 import { TxContractInteractionCard } from '.'
 import { mockTransferWithInfo } from '@/src/tests/mocks'
-import { TransactionInfoType } from '@/src/store/gateway/types'
-import { CustomTransactionInfo } from '@/src/store/gateway/AUTO_GENERATED/transactions'
+import { TransactionInfoType } from '@safe-global/store/gateway/types'
+import { CustomTransactionInfo } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
 
 describe('TxContractInteractionCard', () => {
   it('should render the default markup', () => {

apps/mobile/src/components/transactions-list/Card/TxContractInteractionCard/TxContractInteractionCard.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { Avatar, Text, Theme, View } from 'tamagui'
 import { SafeListItem } from '@/src/components/SafeListItem'
 import { SafeFontIcon } from '@/src/components/SafeFontIcon/SafeFontIcon'
-import { MultiSend } from '@/src/store/gateway/types'
-import { Transaction, CustomTransactionInfo } from '@/src/store/gateway/AUTO_GENERATED/transactions'
+import { MultiSend } from '@safe-global/store/gateway/types'
+import { Transaction, CustomTransactionInfo } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
 
 interface TxContractInteractionCardProps {
   bordered?: boolean

apps/mobile/src/components/transactions-list/Card/TxCreationCard/TxCreationCard.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { TxCreationCard } from '@/src/components/transactions-list/Card/TxCreationCard'
 import { mockTransferWithInfo } from '@/src/tests/mocks'
-import { type CreationTransactionInfo } from '@/src/store/gateway/AUTO_GENERATED/transactions'
-import { TransactionInfoType } from '@/src/store/gateway/types'
+import { type CreationTransactionInfo } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
+import { TransactionInfoType } from '@safe-global/store/gateway/types'
 
 const meta: Meta<typeof TxCreationCard> = {
   title: 'TransactionsList/TxCreationCard',

apps/mobile/src/components/transactions-list/Card/TxCreationCard/TxCreationCard.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@/src/tests/test-utils'
 import { TxCreationCard } from '.'
 import { mockTransferWithInfo } from '@/src/tests/mocks'
-import { TransactionInfoType } from '@/src/store/gateway/types'
-import { CreationTransactionInfo } from '@/src/store/gateway/AUTO_GENERATED/transactions'
+import { TransactionInfoType } from '@safe-global/store/gateway/types'
+import { CreationTransactionInfo } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
 
 describe('TxCreationCard', () => {
   it('should render the default markup', () => {

apps/mobile/src/components/transactions-list/Card/TxCreationCard/TxCreationCard.tsx

@@ -3,7 +3,7 @@ import { Theme, View } from 'tamagui'
 import { SafeListItem } from '@/src/components/SafeListItem'
 import { SafeFontIcon } from '@/src/components/SafeFontIcon/SafeFontIcon'
 import { shortenAddress } from '@/src/utils/formatters'
-import type { Transaction, CreationTransactionInfo } from '@/src/store/gateway/AUTO_GENERATED/transactions'
+import type { Transaction, CreationTransactionInfo } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
 
 interface TxCreationCardProps {
   txInfo: CreationTransactionInfo

apps/mobile/src/components/transactions-list/Card/TxGroupedCard/TxGroupedCard.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { mockERC20Transfer, mockListItemByType, mockNFTTransfer } from '@/src/tests/mocks'
-import { TransactionItem } from '@/src/store/gateway/AUTO_GENERATED/transactions'
-import { TransactionListItemType, TransactionStatus } from '@/src/store/gateway/types'
+import { TransactionItem } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
+import { TransactionListItemType, TransactionStatus } from '@safe-global/store/gateway/types'
 import { TxGroupedCard } from '.'
 
 const meta: Meta<typeof TxGroupedCard> = {

apps/mobile/src/components/transactions-list/Card/TxGroupedCard/TxGroupedCard.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@/src/tests/test-utils'
 import { TxGroupedCard } from '.'
 import { mockERC20Transfer, mockListItemByType, mockNFTTransfer, mockSwapTransfer } from '@/src/tests/mocks'
-import { TransactionListItemType, TransactionStatus } from '@/src/store/gateway/types'
-import { TransactionItem } from '@/src/store/gateway/AUTO_GENERATED/transactions'
+import { TransactionListItemType, TransactionStatus } from '@safe-global/store/gateway/types'
+import { TransactionItem } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
 
 describe('TxGroupedCard', () => {
   it('should render the default markup', () => {

apps/mobile/src/components/transactions-list/Card/TxGroupedCard/TxGroupedCard.tsx

@@ -5,8 +5,8 @@ import { SafeFontIcon } from '@/src/components/SafeFontIcon/SafeFontIcon'
 import { TxInfo } from '@/src/components/TxInfo'
 import { getOrderClass } from '@/src/hooks/useTransactionType'
 import { isSwapTransferOrderTxInfo } from '@/src/utils/transaction-guards'
-import { OrderTransactionInfo } from '@/src/store/gateway/types'
-import { TransactionQueuedItem, TransactionItem } from '@/src/store/gateway/AUTO_GENERATED/transactions'
+import { OrderTransactionInfo } from '@safe-global/store/gateway/types'
+import { TransactionQueuedItem, TransactionItem } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
 
 interface TxGroupedCard {
   transactions: (TransactionItem | TransactionQueuedItem)[]

apps/mobile/src/components/transactions-list/Card/TxRejectionCard/TxRejectionCard.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { TxRejectionCard } from '@/src/components/transactions-list/Card/TxRejectionCard'
 import { mockTransferWithInfo } from '@/src/tests/mocks'
-import { Cancellation } from '@/src/store/gateway/types'
+import { Cancellation } from '@safe-global/store/gateway/types'
 
 const meta: Meta<typeof TxRejectionCard> = {
   title: 'TransactionsList/TxRejectionCard',

apps/mobile/src/components/transactions-list/Card/TxRejectionCard/TxRejectionCard.test.tsx

@@ -1,7 +1,7 @@
 import { render } from '@/src/tests/test-utils'
 import { TxRejectionCard } from '.'
 import { mockTransferWithInfo } from '@/src/tests/mocks'
-import { Cancellation } from '@/src/store/gateway/types'
+import { Cancellation } from '@safe-global/store/gateway/types'
 
 describe('TxRejectionCard', () => {
   it('should render the default markup', () => {

apps/mobile/src/components/transactions-list/Card/TxRejectionCard/TxRejectionCard.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { View } from 'tamagui'
 import { SafeListItem } from '@/src/components/SafeListItem'
 import { SafeFontIcon } from '@/src/components/SafeFontIcon/SafeFontIcon'
-import type { Cancellation } from '@/src/store/gateway/types'
-import type { Transaction } from '@/src/store/gateway/AUTO_GENERATED/transactions'
+import type { Cancellation } from '@safe-global/store/gateway/types'
+import type { Transaction } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
 
 interface TxRejectionCardProps {
   bordered?: boolean

apps/mobile/src/components/transactions-list/Card/TxSafeAppCard/TxSafeAppCard.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { TxSafeAppCard } from '@/src/components/transactions-list/Card/TxSafeAppCard'
 import { mockTransferWithInfo } from '@/src/tests/mocks'
-import { MultiSend } from '@/src/store/gateway/types'
+import { MultiSend } from '@safe-global/store/gateway/types'
 
 const meta: Meta<typeof TxSafeAppCard> = {
   title: 'TransactionsList/TxSafeAppCard',

apps/mobile/src/components/transactions-list/Card/TxSafeAppCard/TxSafeAppCard.test.tsx

@@ -1,7 +1,7 @@
 import { render } from '@/src/tests/test-utils'
 import { TxSafeAppCard } from '.'
 import { mockTransferWithInfo } from '@/src/tests/mocks'
-import { MultiSend } from '@/src/store/gateway/types'
+import { MultiSend } from '@safe-global/store/gateway/types'
 
 describe('TxSafeAppCard', () => {
   it('should render the default markup', () => {

apps/mobile/src/components/transactions-list/Card/TxSafeAppCard/TxSafeAppCard.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { Avatar, Text, View } from 'tamagui'
 import { SafeListItem } from '@/src/components/SafeListItem'
 import { SafeFontIcon } from '@/src/components/SafeFontIcon/SafeFontIcon'
-import type { MultiSend } from '@/src/store/gateway/types'
-import type { SafeAppInfo, Transaction } from '@/src/store/gateway/AUTO_GENERATED/transactions'
+import type { MultiSend } from '@safe-global/store/gateway/types'
+import type { SafeAppInfo, Transaction } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
 
 interface TxSafeAppCardProps {
   safeAppInfo: SafeAppInfo

apps/mobile/src/components/transactions-list/Card/TxSettingsCard/TxSettingCard.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { TxSettingsCard } from '@/src/components/transactions-list/Card/TxSettingsCard'
 import { mockTransferWithInfo } from '@/src/tests/mocks'
-import { SettingsChangeTransaction } from '@/src/store/gateway/AUTO_GENERATED/transactions'
-import { TransactionInfoType } from '@/src/store/gateway/types'
+import { SettingsChangeTransaction } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
+import { TransactionInfoType } from '@safe-global/store/gateway/types'
 
 const meta: Meta<typeof TxSettingsCard> = {
   title: 'TransactionsList/TxSettingsCard',

apps/mobile/src/components/transactions-list/Card/TxSettingsCard/TxSettingCard.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@/src/tests/test-utils'
 import { TxSettingsCard } from '.'
 import { mockTransferWithInfo } from '@/src/tests/mocks'
-import { TransactionInfoType } from '@/src/store/gateway/types'
-import { SettingsChangeTransaction } from '@/src/store/gateway/AUTO_GENERATED/transactions'
+import { TransactionInfoType } from '@safe-global/store/gateway/types'
+import { SettingsChangeTransaction } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
 
 describe('TxSettingCard', () => {
   it('should render the default markup', () => {

apps/mobile/src/components/transactions-list/Card/TxSettingsCard/TxSettingsCard.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { Theme, View } from 'tamagui'
 import { SafeListItem } from '@/src/components/SafeListItem'
 import { SafeFontIcon } from '@/src/components/SafeFontIcon/SafeFontIcon'
-import { SettingsInfoType } from '@/src/store/gateway/types'
-import { SettingsChangeTransaction, Transaction } from '@/src/store/gateway/AUTO_GENERATED/transactions'
+import { SettingsInfoType } from '@safe-global/store/gateway/types'
+import { SettingsChangeTransaction, Transaction } from '@safe-global/store/gateway/AUTO_GENERATED/transactions'
 
 interface TxSettingsCardProps {
   txInfo: SettingsChangeTransaction

apps/mobile/src/components/transactions-list/Card/TxSwapCard/TxSwapCard.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { TxSwapCard } from '@/src/components/transactions-list/Card/TxSwapCard'
 import { mockSwapTransfer } from '@/src/tests/mocks'
-import { OrderTransactionInfo } from '@/src/store/gateway/types'
+import { OrderTransactionInfo } from '@safe-global/store/gateway/types'
 
 const meta: Meta<typeof TxSwapCard> = {
   title: 'TransactionsList/TxSwapCard',