message: transaction setup uses a selected token symbol
diff: import Component from '@glimmer/component';
  import { action } from '@ember/object';
  -import { equal, and } from 'macro-decorators';
  +import { reads } from 'macro-decorators';
  import { inject as service } from '@ember/service';
  import { taskFor } from 'ember-concurrency-ts';
  import { task } from 'ember-concurrency-decorators';
  @@ -8,7 +8,10 @@ import Layer1Network from '@cardstack/web-client/services/layer1-network';
  import Layer2Network from '@cardstack/web-client/services/layer2-network';
  import WorkflowSession from '../../../../models/workflow/workflow-session';
  import { toBN } from 'web3-utils';
  -import { TokenDisplayInfo } from '@cardstack/web-client/utils/web3-strategies/token-display-info';
  +import {
  + TokenDisplayInfo,
  + TokenSymbol,
  +} from '@cardstack/web-client/utils/web3-strategies/token-display-info';
  interface CardPayDepositWorkflowTransactionSetupComponentArgs {
  workflowSession: WorkflowSession;
  @@ -27,14 +30,8 @@ class CardPayDepositWorkflowTransactionSetupComponent extends Component<CardPayD
  @service declare layer1Network: Layer1Network;
  @service declare layer2Network: Layer2Network;
  - @equal('args.workflowSession.state.depositSourceToken', 'CARD')
  - cardSelected: Boolean | undefined;
  - @equal('args.workflowSession.state.depositSourceToken', 'DAI')
  - daiSelected: Boolean | undefined;
  - @and('cardSelected', 'layer1Network.cardBalance')
  - hasCardBalance: Boolean | undefined;
  - @and('daiSelected', 'layer1Network.daiBalance')
  - hasDaiBalance: Boolean | undefined;
  + @reads('args.workflowSession.state.depositSourceToken')
  + declare selectedTokenSymbol: TokenSymbol;
  constructor(
  owner: unknown,
  @@ -50,19 +47,20 @@ class CardPayDepositWorkflowTransactionSetupComponent extends Component<CardPayD
  }
  get selectedToken() {
  - if (this.daiSelected) {
  - return DAI_TOKEN;
  - } else if (this.cardSelected) {
  - return CARD_TOKEN;
  + if (
  + this.selectedTokenSymbol &&
  + TokenDisplayInfo.isRecognizedSymbol(this.selectedTokenSymbol)
  + ) {
  + return new TokenDisplayInfo(this.selectedTokenSymbol);
  } else {
  return undefined;
  }
  }
  get selectedTokenBalance() {
  - if (this.daiSelected) {
  + if (this.selectedTokenSymbol === 'DAI') {
  return this.layer1Network.daiBalance;
  - } else if (this.cardSelected) {
  + } else if (this.selectedTokenSymbol === 'CARD') {
  return this.layer1Network.cardBalance;
  } else {
  return toBN(0);
  @@ -81,7 +79,10 @@ class CardPayDepositWorkflowTransactionSetupComponent extends Component<CardPayD
  @action toggleComplete() {
  if (this.args.isComplete) {
  this.args.onIncomplete?.();
  - } else if (this.hasCardBalance || this.hasDaiBalance) {
  + } else if (
  + this.selectedTokenSymbol &&
  + this.selectedTokenBalance?.gt(toBN(0))
  + ) {
  this.args.onComplete?.();
  } else {
  // TODO error message
  