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

<div class="space-y-4">
  <% items = local_assigns[:binance_items] || @binance_items || Current.family.binance_items.active.ordered %>

  <%= render DS::Alert.new(
        variant: :warning,
        title: t("settings.providers.binance_panel.no_withdraw_title"),
        message: t("settings.providers.binance_panel.no_withdraw_body")
      ) %>

  <div class="space-y-2">
    <%= render "settings/providers/setup_steps",
               steps: [
                 t("settings.providers.binance_panel.step1_html").html_safe,
                 t("settings.providers.binance_panel.step2"),
                 t("settings.providers.binance_panel.step3")
               ] %>

    <div class="bg-surface-inset rounded-xl p-4 text-sm">
      <p class="text-xs font-medium uppercase text-subdued tracking-wider mb-2">
        <%= t("settings.providers.binance_panel.ip_hint_title") %>
      </p>
      <p class="text-secondary"><%= t("settings.providers.binance_panel.ip_hint_body") %></p>
      <% server_ip = ENV["BINANCE_EGRESS_IP"].presence %>
      <% if server_ip %>
        <code class="mt-2 block text-xs bg-container px-2 py-1 rounded font-mono text-primary"><%= server_ip %></code>
      <% else %>
        <p class="mt-1 text-xs text-secondary italic"><%= t("settings.providers.binance_panel.ip_hint_contact_admin") %></p>
      <% end %>
    </div>
  </div>

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

  <% if items.any? %>
    <div class="space-y-3">
      <% items.each do |item| %>
        <div class="flex items-center justify-between p-3 bg-container-inset rounded-lg border border-primary">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full flex items-center justify-center" style="background-color: rgba(240, 185, 11, 0.15);">
              <%= icon "coins", size: "md", class: "text-[#F0B90B]" %>
            </div>
            <div>
              <p class="font-medium text-primary"><%= item.name %></p>
              <p class="text-xs text-secondary">
                <% if item.syncing? %>
                  <%= t("settings.providers.binance_panel.syncing") %>
                <% else %>
                  <%= item.sync_status_summary %>
                <% end %>
              </p>
            </div>
          </div>
          <div class="flex items-center gap-2">
            <% if item.unlinked_accounts_count > 0 %>
              <%= render DS::Link.new(
                text: t("binance_items.binance_item.setup_action"),
                icon: "plus",
                variant: "primary",
                href: setup_accounts_binance_item_path(item),
                frame: :modal
              ) %>
            <% end %>
            <%= button_to sync_binance_item_path(item),
                          method: :post,
                          class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-secondary hover:text-primary border border-secondary rounded-lg hover:border-primary",
                          disabled: item.syncing? do %>
              <%= icon "refresh-cw", size: "sm" %>
              <%= t("settings.providers.binance_panel.sync") %>
            <% end %>
            <%= button_to binance_item_path(item),
                          method: :delete,
                          class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-destructive hover:bg-destructive/10 rounded-lg",
                          data: { turbo_confirm: t("settings.providers.binance_panel.disconnect_confirm") } do %>
              <%= icon "trash-2", size: "sm" %>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>
  <% else %>
    <%
      binance_item = Current.family.binance_items.build(name: "Binance")
    %>

    <%= styled_form_with model: binance_item,
                         url: binance_items_path,
                         scope: :binance_item,
                         method: :post,
                         data: { turbo: true },
                         class: "space-y-3" do |form| %>
      <%= form.text_field :api_key,
                          label: t("settings.providers.binance_panel.api_key_label"),
                          placeholder: t("settings.providers.binance_panel.api_key_placeholder"),
                          type: :password %>

      <%= form.text_field :api_secret,
                          label: t("settings.providers.binance_panel.api_secret_label"),
                          placeholder: t("settings.providers.binance_panel.api_secret_placeholder"),
                          type: :password %>

      <div class="flex justify-end">
        <%= form.submit t("settings.providers.binance_panel.connect_button") %>
      </div>
    <% end %>
  <% end %>

</div>