Fix isFetchingTokenMetadata flag

Oh it wasn't working at all! Now it's fixed and tested.

Author: mondoreale

src/features/flag/flag.test.ts

@@ -0,0 +1,15 @@
+import { Flag } from '$/features/flag/types'
+
+describe('Flag', () => {
+    describe('isFetchingTokenMetadata', () => {
+        it('formats proper flag key', () => {
+            expect(Flag.isFetchingTokenMetadata('0x1AB', [])).toEqual(
+                '["isFetchingTokenMetadata","0x1ab"]'
+            )
+
+            expect(Flag.isFetchingTokenMetadata('0x1AB', ['1', '3', '2'])).toEqual(
+                '["isFetchingTokenMetadata","0x1ab","1","2","3"]'
+            )
+        })
+    })
+})

src/features/misc/index.ts

@@ -107,7 +107,8 @@ const reducer = createReducer(initialState, (b) => {
     b.addCase(
         MiscAction.cacheTokenMetadata,
         (state, { payload: { tokenAddress, tokenIds, tokenMetadata } }) => {
-            state.tokenMetadatas[tokenMetadataCacheKey(tokenAddress, tokenIds)] = tokenMetadata
+            state.tokenMetadatas[JSON.stringify(tokenMetadataCacheKey(tokenAddress, tokenIds))] =
+                tokenMetadata
         }
     )
 })

src/hooks/useTokenMetadata.ts

@@ -2,15 +2,16 @@ import { Address, OptionalAddress, State } from '$/types'
 import { useSelector } from 'react-redux'
 
 export function tokenMetadataCacheKey(tokenAddress: Address, tokenIds: string[]) {
-    return JSON.stringify([tokenAddress.toLowerCase(), ...[...tokenIds].sort()])
+    return [tokenAddress.toLowerCase(), ...[...tokenIds].sort()]
 }
 
 export function selectTokenMetadata(tokenAddress: OptionalAddress, tokenIds: string[]) {
     if (!tokenAddress) {
         return () => undefined
     }
 
-    return ({ misc }: State) => misc.tokenMetadatas[tokenMetadataCacheKey(tokenAddress, tokenIds)]
+    return ({ misc }: State) =>
+        misc.tokenMetadatas[JSON.stringify(tokenMetadataCacheKey(tokenAddress, tokenIds))]
 }
 
 export default function useTokenMetadata(tokenAddress: OptionalAddress, tokenIds: string[]) {