wallet-ext: hide decimals in coin balances

* also sort sui-objects by id

wallet/src/ui/app/components/coin-balance/index.tsx

@@ -4,6 +4,8 @@
 import { memo, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 
+import { Coin } from '_redux/slices/sui-objects/Coin';
+
 import st from './CoinBalance.module.scss';
 
 export type CoinProps = {
@@ -12,16 +14,12 @@ export type CoinProps = {
 };
 
 function CoinBalance({ type, balance }: CoinProps) {
-    const symbol = useMemo(
-        () => type.substring(type.lastIndexOf(':') + 1),
-        [type]
-    );
+    const symbol = useMemo(() => Coin.getCoinSymbol(type), [type]);
     const intl = useIntl();
     const balanceFormatted = useMemo(
         () =>
             intl.formatNumber(balance, {
-                minimumFractionDigits: 2,
-                maximumFractionDigits: 2,
+                maximumFractionDigits: 0,
             }),
         [intl, balance]
     );

wallet/src/ui/app/redux/slices/account/index.ts

@@ -1,7 +1,6 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { isSuiMoveObject } from '@mysten/sui.js';
 import {
     createAsyncThunk,
     createSelector,
@@ -10,11 +9,11 @@ import {
 import Browser from 'webextension-polyfill';
 
 import { suiObjectsAdapterSelectors } from '_redux/slices/sui-objects';
+import { Coin } from '_redux/slices/sui-objects/Coin';
 import { generateMnemonic } from '_shared/cryptography/mnemonics';
 
 import type { SuiAddress, SuiMoveObject } from '@mysten/sui.js';
 import type { PayloadAction } from '@reduxjs/toolkit';
-import type { RootState } from '_redux/RootReducer';
 
 export const loadAccountFromStorage = createAsyncThunk(
     'account/loadAccount',
@@ -84,27 +83,20 @@ export const { setMnemonic, setAddress } = accountSlice.actions;
 export default accountSlice.reducer;
 
 export const accountCoinsSelector = createSelector(
-    (state: RootState) =>
-        suiObjectsAdapterSelectors.selectAll(state.suiObjects),
+    suiObjectsAdapterSelectors.selectAll,
     (allSuiObjects) => {
         return allSuiObjects
-            .filter(
-                (anObj) =>
-                    isSuiMoveObject(anObj.data) &&
-                    anObj.data.type.startsWith('0x2::Coin::Coin')
-            )
+            .filter(Coin.isCoin)
             .map((aCoin) => aCoin.data as SuiMoveObject);
     }
 );
 
-const coinRegex = /^0x2::Coin::Coin<(.+)>$/;
 export const accountBalancesSelector = createSelector(
     accountCoinsSelector,
     (coins) => {
         return coins.reduce((acc, aCoin) => {
-            const res = aCoin.type.match(coinRegex);
-            if (res) {
-                const coinType = res[1];
+            const coinType = Coin.getCoinTypeArg(aCoin);
+            if (coinType) {
                 if (typeof acc[coinType] === 'undefined') {
                     acc[coinType] = 0;
                 }

wallet/src/ui/app/redux/slices/sui-objects/Coin.ts

@@ -0,0 +1,25 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { isSuiMoveObject } from '@mysten/sui.js';
+
+import type { SuiObject, SuiMoveObject } from '@mysten/sui.js';
+
+const COIN_TYPE = '0x2::Coin::Coin';
+const COIN_TYPE_ARG_REGEX = /^0x2::Coin::Coin<(.+)>$/;
+
+// TODO use sdk
+export class Coin {
+    public static isCoin(obj: SuiObject) {
+        return isSuiMoveObject(obj.data) && obj.data.type.startsWith(COIN_TYPE);
+    }
+
+    public static getCoinTypeArg(obj: SuiMoveObject) {
+        const res = obj.type.match(COIN_TYPE_ARG_REGEX);
+        return res ? res[1] : null;
+    }
+
+    public static getCoinSymbol(coinTypeArg: string) {
+        return coinTypeArg.substring(coinTypeArg.lastIndexOf(':') + 1);
+    }
+}

wallet/src/ui/app/redux/slices/sui-objects/index.ts

@@ -9,10 +9,13 @@ import {
 } from '@reduxjs/toolkit';
 
 import type { SuiObject } from '@mysten/sui.js';
+import type { RootState } from '_redux/RootReducer';
 import type { AppThunkConfig } from '_store/thunk-extras';
 
 const objectsAdapter = createEntityAdapter<SuiObject>({
     selectId: ({ reference }) => reference.objectId,
+    sortComparer: (a, b) =>
+        a.reference.objectId.localeCompare(b.reference.objectId),
 });
 
 export const fetchAllOwnedObjects = createAsyncThunk<
@@ -81,4 +84,6 @@ const slice = createSlice({
 
 export default slice.reducer;
 
-export const suiObjectsAdapterSelectors = objectsAdapter.getSelectors();
+export const suiObjectsAdapterSelectors = objectsAdapter.getSelectors(
+    (state: RootState) => state.suiObjects
+);