sure/app/views/settings/providers/_snaptrade_panel.html.erb

<div class="space-y-4">
  <%= render DS::Alert.new(message: t("providers.snaptrade.free_tier_warning"), variant: :warning) %>

  <% error_msg = local_assigns[:error_message] || @error_message %>
  <% if error_msg.present? %>
    <%= render DS::Alert.new(message: error_msg, variant: :error) %>
  <% end %>

  <%
    items = local_assigns[:snaptrade_items] || @snaptrade_items || Current.family.snaptrade_items.active.ordered
    snaptrade_item = items.reject(&:scheduled_for_deletion?).first
    oauth_env_configured = Provider::Snaptrade.oauth_configured?
    oauth_active = snaptrade_item&.oauth_token_active?
  %>

  <% if !oauth_env_configured %>
    <%= render "settings/providers/setup_steps",
               steps: [
                 t("providers.snaptrade.oauth_setup_step_1_html").html_safe,
                 t("providers.snaptrade.oauth_setup_step_2_html", callback_url: oauth_callback_snaptrade_items_url).html_safe,
                 t("providers.snaptrade.oauth_setup_step_3")
               ] %>
  <% else %>
    <div class="bg-surface-inset rounded-xl p-4 space-y-3">
      <div class="flex items-start gap-3">
        <span class="w-9 h-9 rounded-lg bg-success/10 flex items-center justify-center shrink-0">
          <%= icon "key-round", class: "w-4 h-4 text-success" %>
        </span>
        <div class="min-w-0">
          <p class="text-sm font-medium text-primary"><%= t("providers.snaptrade.oauth_title") %></p>
          <p class="text-sm text-secondary">
            <% if oauth_active %>
              <%= t("providers.snaptrade.oauth_status_authorized") %>
            <% else %>
              <%= t("providers.snaptrade.oauth_status_ready") %>
            <% end %>
          </p>
        </div>
      </div>

      <%= render DS::Link.new(
        text: oauth_active ? t("providers.snaptrade.oauth_reauthorize_button") : t("providers.snaptrade.oauth_connect_button"),
        icon: "external-link",
        variant: :primary,
        full_width: true,
        href: snaptrade_item&.persisted? ?
          oauth_authorize_snaptrade_items_path(item_id: snaptrade_item.id) :
          oauth_authorize_snaptrade_items_path
      ) %>
    </div>

    <% if snaptrade_item&.persisted? && snaptrade_item.oauth_configured? %>
      <div class="border-t border-primary pt-4 mt-4">
        <%= render DS::Disclosure.new(
          variant: :inline,
          data: {
            controller: "lazy-load",
            action: "toggle->lazy-load#toggled",
            lazy_load_url_value: connections_snaptrade_item_path(snaptrade_item),
            lazy_load_auto_open_param_value: "manage"
          }
        ) do |disclosure| %>
          <% disclosure.with_summary_content do %>
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <p class="text-sm text-secondary">
                  <%= t("providers.snaptrade.status_connected", count: snaptrade_item.snaptrade_accounts.count) %>
                  <% if snaptrade_item.unlinked_accounts_count > 0 %>
                    <span class="text-warning">(<%= t("providers.snaptrade.needs_setup", count: snaptrade_item.unlinked_accounts_count) %>)</span>
                  <% end %>
                </p>
              </div>
              <span class="flex items-center gap-1 text-sm text-secondary hover:text-primary">
                <%= t("providers.snaptrade.manage_connections") %>
                <%= icon "chevron-right", class: "w-3 h-3 group-open:rotate-90 motion-safe:transition-transform motion-safe:duration-150" %>
              </span>
            </div>
          <% end %>

          <div class="mt-3 space-y-3" data-lazy-load-target="content">
            <div data-lazy-load-target="loading" class="flex items-center gap-2 text-sm text-secondary py-2">
              <%= icon "loader-2", class: "w-4 h-4 animate-spin" %>
              <%= t("providers.snaptrade.loading_connections") %>
            </div>

            <div data-lazy-load-target="frame">
            </div>
          </div>
        <% end %>
      </div>
    <% end %>
  <% end %>
</div>