BalancesTable.tsx on gnosis safe app tutorial type error

Question

I'm following the Gnosis guide to set a safe app: https://github.com/safe-global/safe-apps-sdk/blob/master/guides/drain-safe-app/02-display-safe-assets.md

when i'm trying to define ETH it gives me this error:

Type '"NATIVE_TOKEN"' is not assignable to type 'TokenType'.ts(2322) common.ts(21, 3): The expected type comes from property 'type' which is declared here on type 'TokenInfo'

this is the definition in BalancesTable:

const ethToken: TokenInfo = {
  address: '0x0000000000000',
  type: 'NATIVE_TOKEN',
  logoUri: '/eth.svg', // will be taken from public/ folder
  symbol: 'ETH',
  name: 'Ether',
  decimals: 18,
}

when I go to common:

export enum TokenType {
  ERC20 = 'ERC20',
  ERC721 = 'ERC721',
  NATIVE_TOKEN = 'NATIVE_TOKEN',
}

/**
 * @see https://github.com/safe-global/safe-client-gateway/blob/main/src/common/models/backend/balances.rs
 */
export type TokenInfo = {
  type: TokenType
  address: string
  decimals: number
  symbol: string
  name: string
  logoUri: string
}

I can't find my issue, maybe a syntax issue? (new to TS)

Answer 1

You need to pass in Token Type the object. Import it first below and then change the type in the TokenInfo object as below.

The following works for me:

import { TokenBalance, TokenInfo, TokenType } from '@gnosis.pm/safe-apps-sdk';

const ethToken: TokenInfo = {
  address: '0x0000000000000',
  type: TokenType.NATIVE_TOKEN,
  logoUri: './eth.svg',
  symbol: 'ETH',
  name: 'Ether',
  decimals: 18,
};