Maybe/app/javascript/controllers/trade_form_controller.js

import {Controller} from "@hotwired/stimulus"

const TRADE_TYPES = {
  BUY: "buy",
  SELL: "sell",
  TRANSFER_IN: "transfer_in",
  TRANSFER_OUT: "transfer_out",
  INTEREST: "interest"
}

const FIELD_VISIBILITY = {
  [TRADE_TYPES.BUY]: {ticker: true, qty: true, price: true},
  [TRADE_TYPES.SELL]: {ticker: true, qty: true, price: true},
  [TRADE_TYPES.TRANSFER_IN]: {amount: true, transferAccount: true},
  [TRADE_TYPES.TRANSFER_OUT]: {amount: true, transferAccount: true},
  [TRADE_TYPES.INTEREST]: {amount: true}
}

// Connects to data-controller="trade-form"
export default class extends Controller {
  static targets = ["typeInput", "tickerInput", "amountInput", "transferAccountInput", "qtyInput", "priceInput"]

  connect() {
    this.handleTypeChange = this.handleTypeChange.bind(this)
    this.typeInputTarget.addEventListener("change", this.handleTypeChange)
    this.updateFields(this.typeInputTarget.value || TRADE_TYPES.BUY)
  }

  disconnect() {
    this.typeInputTarget.removeEventListener("change", this.handleTypeChange)
  }

  handleTypeChange(event) {
    this.updateFields(event.target.value)
  }

  updateFields(type) {
    const visibleFields = FIELD_VISIBILITY[type] || {}

    Object.entries(this.fieldTargets).forEach(([field, target]) => {
      const isVisible = visibleFields[field] || false

      // Update visibility
      target.hidden = !isVisible

      // Update required status based on visibility
      if (isVisible) {
        target.setAttribute('required', '')
      } else {
        target.removeAttribute('required')
      }
    })
  }

  get fieldTargets() {
    return {
      ticker: this.tickerInputTarget,
      amount: this.amountInputTarget,
      transferAccount: this.transferAccountInputTarget,
      qty: this.qtyInputTarget,
      price: this.priceInputTarget
    }
  }
}