fix: accounts transaction loading [web-archway] (forbole#1306)

## Description

Closes: #XXXX

<!-- Add a description of the changes that this PR introduces and the
files that
are the most critical to review. -->

---

### Author Checklist

_All items are required. Please add a note to the item if the item is
not applicable and
please add links to any relevant follow up issues._

I have...

- [ ] ran linting via `yarn lint`
- [ ] wrote tests where necessary
- [ ] included the correct [type
prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json)
in the PR title
- [ ] targeted the correct branch
- [ ] provided a link to the relevant issue or specification
- [ ] reviewed "Files changed" and left comments if necessary
- [ ] confirmed all CI checks have passed
- [ ] added a changeset via [`yarn && yarn
changeset`](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)

---------

Co-authored-by: Ignacio <[email protected]>

.changeset/fuzzy-baboons-compete.md

@@ -0,0 +1,5 @@
+---
+'ui': patch
+---
+
+fix: accounts transaction loading

.github/workflows/preview.yml

@@ -61,7 +61,7 @@ jobs:
         env:
           PROJECT_NAME: ${{ matrix.project }}
           NEXT_PUBLIC_CHAIN_TYPE: ${{ github.event.inputs.chain_type }}
-      - name: Insall Vercel CLI
+      - name: Install Vercel CLI
         run: npm i -g vercel
       - name: Generate vercel.json
         run: |

apps/web-emoney/src/screens/account_details/index.tsx

@@ -53,7 +53,7 @@ const AccountDetails = () => {
             />
             <OtherTokens className={classes.otherTokens} otherTokens={state.otherTokens} />
             <Staking className={classes.staking} rewards={state.rewards} />
-            <Transactions className={classes.transactions} />
+            <Transactions className={classes.transactions} loading={state.balanceLoading} />
           </span>
         </LoadAndExist>
       </Layout>

apps/web-evmos/src/screens/account_details/index.tsx

@@ -53,7 +53,7 @@ const AccountDetails = () => {
             />
             <OtherTokens className={classes.otherTokens} otherTokens={state.otherTokens} />
             <Staking className={classes.staking} rewards={state.rewards} />
-            <Transactions className={classes.transactions} />
+            <Transactions className={classes.transactions} loading={state.balanceLoading} />
           </span>
         </LoadAndExist>
       </Layout>

apps/web-osmosis/src/screens/account_details/hooks.ts

@@ -27,6 +27,7 @@ const defaultTokenUnit: TokenUnit = {
 
 const initialState: AccountDetailState = {
   loading: true,
+  balanceLoading: true,
   exists: true,
   desmosProfile: null,
   overview: {
@@ -125,7 +126,7 @@ const formatBalance = (data?: Data) => {
 // ==========================
 const formatAllBalance = (data?: Data) => {
   const stateChange: Partial<AccountDetailState> = {
-    loading: false,
+    balanceLoading: false,
   };
 
   stateChange.rewards = formatRewards(data);
@@ -177,7 +178,7 @@ const formatOtherTokens = (data?: Data) => {
     const availableAmount = formatToken(availableRawAmount.amount, x);
     const rewardsRawAmount = rewards.reduce((a, b) => {
       if (!b) return a;
-      const coins = R.pathOr<NonNullable<typeof b['coins']>>([], ['coins'], b);
+      const coins = R.pathOr<NonNullable<(typeof b)['coins']>>([], ['coins'], b);
       const denom = getDenom(coins, x);
       return Big(a).plus(denom.amount).toPrecision();
     }, '0');
@@ -263,6 +264,7 @@ export const useAccountDetails = () => {
   useEffect(() => {
     handleSetState((prevState) => ({
       ...prevState,
+      loading: false,
       overview: {
         address: address ?? '',
         withdrawalAddress: withdrawalAddress.withdrawalAddress?.address ?? '',

apps/web-osmosis/src/screens/account_details/index.tsx

@@ -53,7 +53,7 @@ const AccountDetails = () => {
             />
             <OtherTokens className={classes.otherTokens} otherTokens={state.otherTokens} />
             <Staking className={classes.staking} rewards={state.rewards} />
-            <Transactions className={classes.transactions} />
+            <Transactions className={classes.transactions} loading={state.balanceLoading} />
           </span>
         </LoadAndExist>
       </Layout>

apps/web-persistence/src/screens/account_details/index.tsx

@@ -53,7 +53,7 @@ const AccountDetails = () => {
             />
             <OtherTokens className={classes.otherTokens} otherTokens={state.otherTokens} />
             <Staking className={classes.staking} rewards={state.rewards} />
-            <Transactions className={classes.transactions} />
+            <Transactions className={classes.transactions} loading={state.balanceLoading} />
           </span>
         </LoadAndExist>
       </Layout>

apps/web-stride/src/screens/account_details/hooks.ts

@@ -171,7 +171,7 @@ const formatOtherTokens = (data: Data) => {
     const availableRawAmount = getDenom(available, x);
     const availableAmount = formatToken(availableRawAmount.amount, x);
     const rewardsRawAmount = rewards.reduce((a, b) => {
-      const coins = R.pathOr<NonNullable<typeof b['coins']>>([], ['coins'], b);
+      const coins = R.pathOr<NonNullable<(typeof b)['coins']>>([], ['coins'], b);
       const denom = getDenom(coins, x);
       return Big(a).plus(denom.amount).toPrecision();
     }, '0');
@@ -308,6 +308,7 @@ export const useAccountDetails = () => {
   useEffect(() => {
     handleSetState((prevState) => ({
       ...prevState,
+      loading: false,
       overview: {
         address: address ?? '',
         withdrawalAddress: address ?? withdrawalAddress?.withdrawalAddress?.address ?? '',

package.json

@@ -48,13 +48,17 @@
     "eslint-plugin-turbo": "^1.9.3",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
+    "next": "^13.4.1",
     "prettier": "2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "turbo": "^1.9.3",
     "typescript": "^5.0.4"
   },
   "packageManager": "[email protected]",
   "engines": {
-    "yarn": ">=1.22"
+    "yarn": ">=3.5",
+    "node": ">=18.17.1"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,mjs,cjs,css,md}": "npx prettier --write"

packages/ui/src/screens/account_details/hooks.ts

@@ -100,7 +100,7 @@ const formatBalance = (data: Data): BalanceType => {
   const rewardsAmount = formatToken(rewards, primaryTokenUnit);
 
   const commission = getDenom(
-    R.pathOr<NonNullable<NonNullable<typeof data['commission']>['coins']>>(
+    R.pathOr<NonNullable<NonNullable<(typeof data)['commission']>['coins']>>(
       [],
       ['commission', 'coins'],
       data
@@ -170,7 +170,7 @@ const formatOtherTokens = (data: Data) => {
     const availableRawAmount = getDenom(available, x);
     const availableAmount = formatToken(availableRawAmount.amount, x);
     const rewardsRawAmount = rewards.reduce((a, b) => {
-      const coins = R.pathOr<NonNullable<typeof b['coins']>>([], ['coins'], b);
+      const coins = R.pathOr<NonNullable<(typeof b)['coins']>>([], ['coins'], b);
       const denom = getDenom(coins, x);
       return Big(a).plus(denom.amount).toPrecision();
     }, '0');
@@ -248,11 +248,11 @@ export const useAccountDetails = () => {
 
   useEffect(() => {
     const formattedRawData: {
-      commission?: typeof commission['commission'];
-      accountBalances?: typeof available['accountBalances'];
-      delegationBalance?: typeof delegation['delegationBalance'];
-      unbondingBalance?: typeof unbonding['unbondingBalance'];
-      delegationRewards?: typeof rewards['delegationRewards'];
+      commission?: (typeof commission)['commission'];
+      accountBalances?: (typeof available)['accountBalances'];
+      delegationBalance?: (typeof delegation)['delegationBalance'];
+      unbondingBalance?: (typeof unbonding)['unbondingBalance'];
+      delegationRewards?: (typeof rewards)['delegationRewards'];
     } = {};
     formattedRawData.commission = R.pathOr({ coins: [] }, ['commission'], commission);
     formattedRawData.accountBalances = R.pathOr({ coins: [] }, ['accountBalances'], available);
@@ -270,6 +270,7 @@ export const useAccountDetails = () => {
   useEffect(() => {
     handleSetState((prevState) => ({
       ...prevState,
+      loading: false,
       overview: {
         address: address ?? '',
         withdrawalAddress: withdrawalAddress.withdrawalAddress?.address ?? '',

yarn.lock

@@ -6275,7 +6275,10 @@ __metadata:
     eslint-plugin-turbo: ^1.9.3
     husky: ^8.0.3
     lint-staged: ^13.2.2
+    next: ^13.4.1
     prettier: 2.8.8
+    react: ^18.2.0
+    react-dom: ^18.2.0
     turbo: ^1.9.3
     typescript: ^5.0.4
   languageName: unknown