wallet-ext: token view sort tokens by symbol (MystenLabs#10544)

* to avoid showing tokens in random order that updates on every request
sort the list by symbol
* ideally we should move this to api

before



https://user-images.githubusercontent.com/10210143/230660789-cb79e213-7a5f-4867-beee-07ac431ef55c.mov


after




https://user-images.githubusercontent.com/10210143/230660808-00da28f0-6205-4f11-a0a5-b00627e9610a.mov



closes APPS-732

apps/wallet/src/ui/app/hooks/useGetAllBalances.ts

@@ -3,7 +3,7 @@
 
 import { useFeatureValue } from '@growthbook/growthbook-react';
 import { useRpcClient } from '@mysten/core';
-import { type SuiAddress } from '@mysten/sui.js';
+import { Coin, type SuiAddress } from '@mysten/sui.js';
 import { useQuery } from '@tanstack/react-query';
 
 import { FEATURES } from '_src/shared/experimentation/features';
@@ -17,7 +17,11 @@ export function useGetAllBalances(address?: SuiAddress | null) {
 
     return useQuery(
         ['get-all-balance', address],
-        () => rpc.getAllBalances({ owner: address! }),
+        async () =>
+            (await rpc.getAllBalances({ owner: address! })).sort(
+                ({ coinType: a }, { coinType: b }) =>
+                    Coin.getCoinSymbol(a).localeCompare(Coin.getCoinSymbol(b))
+            ),
         { enabled: !!address, refetchInterval }
     );
 }