SdkV2MarketList.tsx

const App: React.FC = () => {
  const [sdk, setSdk] = useState<Partial<Sdk<Context>>>()
  const [markets, setMarkets] = useState<Array<RpcMarket | IndexedMarket>>([])

  const loadMarkets = async (sdk: Sdk<Context>) => {
    const markets = await sdk.model.markets.list()
    setMarkets(markets)
  }

  useEffect(() => {
    web3Enable('sdkv2')
    builder(batterystation()).subscribe(sdk => {
      setSdk(sdk)
    })
  }, [])

  useEffect(() => {
    if (isRpcSdk(sdk) || isIndexedSdk(sdk)) {
      loadMarkets(sdk)
    }
  }, [sdk])

  return (
    <div style={{ display: 'grid', columnGap: '50px' }}>
      {markets.map((market, index) => (
        <Market key={index} market={market} />
      ))}
    </div>
  )
}

const Market = (props: { market: RpcMarket | IndexedMarket }) => {
  return (
    <div>
      {isRpcMarket(props.market) ? (
        <div>rpc: {props.market.marketId.toHuman()}</div>
      ) : (
        <div>indexer: {props.market.marketId}</div>
      )}
    </div>
  )
}