{"id":48,"date":"2026-04-05T06:58:49","date_gmt":"2026-04-05T06:58:49","guid":{"rendered":"https:\/\/dev.koin.locker\/swap26\/?page_id=48"},"modified":"2026-04-05T09:08:31","modified_gmt":"2026-04-05T09:08:31","slug":"swap","status":"publish","type":"page","link":"https:\/\/dev.koin.locker\/swap26\/","title":{"rendered":"Swap"},"content":{"rendered":"<style>.elementor-48 .elementor-element.elementor-element-4a0f8ef{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:185px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-48 .elementor-element.elementor-element-ba495fe .kts-title{text-align:center;color:#fff;}.elementor-48 .elementor-element.elementor-element-ba495fe #kts-vault{background-color:#121214;max-width:500px;border-radius:24px;}.elementor-48 .elementor-element.elementor-element-ba495fe .kts-rate-btn{background-color:#1b1b1f;}.elementor-48 .elementor-element.elementor-element-ba495fe.elementor-element{--align-self:center;}<\/style>\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"48\" class=\"elementor elementor-48\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a0f8ef e-flex e-con-boxed e-con e-parent\" data-id=\"4a0f8ef\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ba495fe elementor-widget elementor-widget-kointool_swap\" data-id=\"ba495fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"kointool_swap.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <style>\r\n            \/* --- BASE WIDGET STYLES --- *\/\r\n            #kts-vault { font-family: 'Inter', sans-serif; position: relative; max-width: 500px; margin: auto; background: #121214; border-radius: 24px; padding: 30px; color: #fff; border: 1px solid #2d2d33; }\r\n\r\n            \/* Phase 2: Toggle Buttons *\/\r\n            .kts-rate-toggle-wrap { \r\n                display: flex; \r\n                justify-content: center; \r\n                align-items: center; \r\n                gap: 12px; \r\n                margin-top: 5px;   \/* Adjusted to play nice with vault padding *\/\r\n                margin-bottom: 20px; \r\n                width: 100%; \r\n            }\r\n\r\n            .kts-rate-btn { \r\n                background: #1b1b1f; \r\n                color: #fff; \r\n                border: 1px solid #2d2d33; \r\n                padding: 8px 18px; \r\n                border-radius: 20px; \r\n                cursor: pointer; \r\n                font-size: 13px; \r\n                font-weight: 600; \r\n                transition: 0.3s; \r\n            }\r\n\r\n            .kts-rate-btn.active { \r\n                background: linear-gradient(90deg, #5ea4f3, #9e7cf1); \r\n                border-color: transparent; \r\n            }\r\n            .kts-input-box { background: #1b1b1f; border-radius: 16px; padding: 18px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; border: 1px solid transparent; }\r\n            .kts-input-box input { background: transparent; border: none; color: #fff; font-size: 24px; outline: none; width: 60%; font-weight: 600; }\r\n            .kts-coin-sel { background: #2d2d33; padding: 10px 15px; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 700; border: 1px solid #3d3d44; transition: 0.2s; white-space: nowrap; display: flex; align-items: center; gap: 8px; }\r\n            .kts-main-btn { background: #3377ff; color: #fff; width: 100%; padding: 20px; border-radius: 18px; border: none; font-weight: 800; font-size: 18px; cursor: pointer; margin-top: 15px; }\r\n            .kts-main-btn:disabled { background: #2d2d33; color: #666; cursor: not-allowed; }\r\n\r\n            \/* Phase 5: Divider Arrow & Status Row *\/\r\n            .kts-divider-arrow {\r\n                text-align: center;\r\n                display: block;\r\n                margin: 5px 0;\r\n                line-height: 1;\r\n                transition: all 0.3s ease;\r\n            }\r\n\r\n            .kts-status-row {\r\n                display: flex;\r\n                justify-content: space-between; \r\n                align-items: center;\r\n                width: 100%;\r\n                margin-top: 15px;\r\n                padding: 0 5px;\r\n            }\r\n\r\n            .kts-rate-summary {\r\n                flex: 1;\r\n                text-align: left;\r\n            }\r\n\r\n            .kts-rate-label {\r\n                text-decoration: none;\r\n                white-space: nowrap;\r\n                margin-left: 10px;\r\n            }\r\n\r\n            \/* --- GLOBAL COIN PICKER MODAL --- *\/\r\n#coin-modal { display: none; position: absolute; top: 5%; left: 5%; width: 90%; background: #1b1b1f; border: 1px solid #3d3d44; border-radius: 20px; z-index: 100001; padding: 20px; box-shadow: 0 15px 50px rgba(0,0,0,0.9); color: #fff; }\r\n\r\n\/* Force Search Input Text *\/\r\n#coin-search, .kts-search { width: 100%; box-sizing: border-box; background: #121214; border: 1px solid #333; padding: 12px; border-radius: 12px; color: #ffffff !important; margin-bottom: 15px; outline: none; }\r\n#coin-search::placeholder { color: #888 !important; }\r\n\r\n.kts-coin-list { max-height: 250px; overflow-y: auto; }\r\n\r\n\/* Force List Item Text (Names and Tickers) *\/\r\n.kts-coin-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; cursor: pointer; color: #ffffff !important; }\r\n.kts-coin-item span, .kts-coin-item b { color: #ffffff !important; }\r\n\r\n.kts-coin-item:hover { background: #2d2d33; }\r\n.kts-coin-item img { width: 24px; height: 24px; border-radius: 50%; }\r\n\r\n            \/* --- OVERLAY & BASE MODAL STYLES --- *\/\r\n            .kts-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 99999; backdrop-filter: blur(5px); justify-content: center; align-items: center; }\r\n            .kts-modal-content {\r\n                font-family: 'Inter', sans-serif;\r\n                position: relative;\r\n                max-width: 1000px; \/* The \"Golden\" width you preferred *\/\r\n                width: 95%;\r\n                background: #fff;\r\n                color: #333;\r\n                border-radius: 24px;\r\n                padding: 30px; \/* Increased padding for the \"high-end\" look *\/\r\n                box-shadow: 0 40px 100px rgba(0,0,0,0.4);\r\n                display: flex;\r\n                flex-direction: column;\r\n                overflow: visible; \/* CRITICAL: Allows the Header\/Close button to sit \"outside\" later *\/\r\n                                                  }\r\n            .kts-modal-header  { display: flex; align-items: center; gap: 20px; margin-bottom: 10px; }\r\n             \r\n            .kts-modal-circle { width: 45px; height: 45px; background: #000; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; flex-shrink: 0; }\r\n            .kts-modal-title { margin:0; font-size:24px; font-weight:900; }\r\n            .kts-modal-close { position: absolute; top: 30px; right: 40px; cursor: pointer; font-size: 30px; color: #64748b; }\r\n\r\n            \/* --- MODAL 1: PRE-STEP --- *\/\r\n            #kts-modal-1 .kts-ps-pair-row { display: flex; flex-direction: column; gap: 15px; margin-bottom: 10px; }\r\n            #kts-modal-1 .kts-ps-field { border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px 5px; display: flex; justify-content: space-between; align-items: center; }\r\n            #kts-modal-1 .kts-ps-label { font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; margin-bottom: 4px; }\r\n            #kts-modal-1 .kts-ps-amount { font-size: 20px; font-weight: 700; color: #1e293b; border: none; outline: none; width: 50%; }\r\n            #kts-modal-1 .kts-ps-coin-trigger { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 800; font-size: 16px; color: #1e293b; }\r\n            #kts-modal-1 .kts-ps-warning { background: #f8fafc; padding: 8px; border-radius: 12px; color: #64748b; font-size: 14px; display: flex; align-items: stretch; gap: 10px; margin-bottom: 10px; border: 1px solid #edf2f7; }\r\n            #kts-modal-1 .kts-ps-input-title { font-size: 18px; font-weight: 800; color: #475569; margin-bottom: 2px; }\r\n            #kts-modal-1 .kts-ps-wallet-box { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #cbd5e1; border-radius: 12px; font-size: 16px; font-family: monospace; outline: none; transition: 0.2s; }\r\n            #kts-modal-1 .kts-ps-wallet-box:focus { border-color: #3377ff; box-shadow: 0 0 0 4px rgba(51, 119, 255, 0.1); }\r\n            #kts-refund-container { display: none; padding-top: 10px; margin-top: 20px; border-top: 1px solid #f1f5f9; }\r\n            #kts-modal-1 .kts-ps-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f5f9; }\r\n            #kts-modal-1 .kts-ps-next { background: #c3dafe; color: #4a5568; padding: 18px 60px; border-radius: 8px; border: none; font-weight: 800; font-size: 18px; cursor: not-allowed; transition: 0.3s; }\r\n            #kts-modal-1 .kts-ps-next.active { background: #3377ff; color: #fff; cursor: pointer; box-shadow: 0 5px 20px rgba(51, 119, 255, 0.3); }\r\n            #kts-modal-1 .kts-refund-toggle { color: #3377ff; font-weight: 800; cursor: pointer; font-size: 15px; border-bottom: 2px solid rgba(51, 119, 255, 0.1); }\r\n            \r\n            \/* --- MODAL 2: CONFIRM --- *\/\r\n            #kts-modal-2 .kts-confirm-summary { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 25px; margin-bottom: 20px; font-size: 16px; }\r\n            #kts-modal-2 .kts-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f1f5f9; }\r\n            #kts-modal-2 .kts-summary-row:last-child { border-bottom: none; }\r\n            #kts-modal-2 .kts-summary-label { color: #64748b; font-weight: 600; }\r\n            #kts-modal-2 .kts-summary-value { color: #1e293b; font-weight: 700; }\r\n            #kts-modal-2 .kts-terms { margin: 25px 0; font-size: 14px; color: #64748b; text-align: left; }\r\n            #kts-modal-2 .kts-terms input { margin-right: 10px; }\r\n            #kts-modal-2 .kts-confirm-payment-btn { background: #c3dafe; color: #4a5568; padding: 18px 60px; border-radius: 8px; border: none; font-weight: 800; font-size: 18px; cursor: not-allowed; transition: 0.3s; width: 100%; }\r\n            #kts-modal-2 .kts-confirm-payment-btn.active { background: #3377ff; color: #fff; cursor: pointer; }\r\n\r\n            \/* ###########################################################################\r\n            ########## SECTION: MODAL 3 \"AMAZING\" LAYOUT ###############################\r\n            ###########################################################################\r\n            *\/\r\n#kts-modal-3 .kts-m3-grid { display: flex; gap: 30px; align-items: flex-start; text-align: left; margin-top: 20px; }\r\n#kts-modal-3 .kts-m3-left { flex: 1; }\r\n#kts-modal-3 .kts-m3-right { flex-shrink: 0; }\r\n\r\n#kts-modal-3 .kts-m3-hero-label { font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; margin-bottom: 4px; }\r\n#kts-modal-3 .kts-m3-hero-amount { font-size: 28px; font-weight: 900; color: #1e293b; margin-bottom: 20px; line-height: 1.1; }\r\n#kts-modal-3 .kts-m3-hero-amount span { color: #3377ff; }\r\n\r\n#kts-modal-3 .kts-address-hero { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 15px; position: relative; }\r\n#kts-modal-3 .kts-address-display { font-family: monospace; font-size: 14px; color: #1e293b; word-break: break-all; line-height: 1.5; margin-bottom: 12px; display: block; }\r\n#kts-modal-3 .kts-copy-btn-new { background: #3377ff; color: #fff; border: none; padding: 10px; border-radius: 8px; font-weight: 700; cursor: pointer; width: 100%; font-size: 14px; }\r\n\r\n#kts-success-bar { display: none; background: #dcfce7; color: #166534; padding: 12px; border-radius: 8px; margin-top: 15px; font-weight: 700; font-size: 13px; border: 1px solid #bbf7d0; }\r\n\r\n\/* The Clock Animation Logic *\/\r\n#kts-modal-3 .kts-status-tracker { display: flex; justify-content: space-between; align-items: center; list-style-type: none; padding: 0; margin: 30px 0; position: relative; }\r\n#kts-modal-3 .kts-status-step { flex: 1; text-align: center; color: #94a3b8; font-weight: 700; font-size: 14px; z-index: 2; transition: 0.3s; }\r\n#kts-modal-3 .kts-status-step::before { content: ''; display: block; width: 30px; height: 30px; background: #e2e8f0; border: 3px solid #fff; border-radius: 50%; margin: 0 auto 10px; transition: 0.3s; }\r\n#kts-modal-3 .kts-status-step.active { color: #22c55e !important; }\r\n#kts-modal-3 .kts-status-step.active::before { background: #22c55e !important; border-color: #dcfce7 !important; }\r\n#kts-modal-3 .kts-status-tracker::after { content: ''; position: absolute; top: 15px; left: 0; right: 0; height: 4px; background: #e2e8f0; z-index: 1; }\r\n#kts-modal-3 .kts-tx-info { background: #f8fafc; padding: 20px; border-radius: 12px; font-size: 14px; text-align: center; margin-top: 10px; }\r\n        <\/style>\r\n\r\n        <!-- MAIN WIDGET -->\r\n        <div id=\"kts-vault\">\r\n    <h3 class=\"kts-title\">KoinTool Swap<\/h3>\r\n\r\n    <div class=\"kts-rate-toggle-wrap\">\r\n        <button type=\"button\" class=\"kts-rate-btn active\" id=\"toggle-market\" data-rate-type=\"standard\">Exchange now<\/button>\r\n        <button type=\"button\" class=\"kts-rate-btn\" id=\"toggle-fixed\" data-rate-type=\"fixed\">Fixed Rate<\/button>\r\n    <\/div>\r\n    \r\n    <div class=\"kts-input-box\">\r\n        <input type=\"number\" id=\"pay-amt\" value=\"1\" step=\"any\">\r\n        <div class=\"kts-coin-sel\" id=\"btn-pay\" data-ticker=\"btc\">\r\n            <img decoding=\"async\" src=\"https:\/\/changenow.io\/images\/coins\/btc.svg\" style=\"width:20px; vertical-align:middle; margin-right:5px;\"> BTC \u25bc\r\n        <\/div>\r\n    <\/div>\r\n\r\n   <div class=\"kts-divider-arrow\">\u2193<\/div>\r\n\r\n    <div class=\"kts-input-box\">\r\n        <input type=\"text\" id=\"get-amt\" readonly placeholder=\"Fetching...\">\r\n        <div class=\"kts-coin-sel\" id=\"btn-get\" data-ticker=\"eth\">\r\n            <img decoding=\"async\" src=\"https:\/\/changenow.io\/images\/coins\/eth.svg\" style=\"width:20px; vertical-align:middle; margin-right:5px;\"> ETH \u25bc\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"kts-status-row\">\r\n        <span id=\"kts-rate-summary\">1 BTC ~ 30.569647 ETH<\/span>\r\n        <a href=\"https:\/\/kointool.com\" target=\"_blank\" class=\"kts-rate-label\" id=\"kts-rate-type-label\">\r\n            Expected rate <i class=\"eicon-editor-external-link\"><\/i>\r\n        <\/a>\r\n    <\/div>\r\n\r\n    <button class=\"kts-main-btn\" id=\"open-prestep\" disabled>Exchange<\/button>\r\n<\/div>\r\n\r\n        <!-- MODAL 1: PRE-STEP -->\r\n        <div id=\"kts-modal-1\" class=\"kts-overlay\">\r\n    <div class=\"kts-modal-content\">\r\n        <span class=\"kts-modal-close\" data-target=\"kts-modal-1\">\u2715<\/span>\r\n        <div class=\"kts-modal-header\">\r\n            <div class=\"kts-modal-circle\">1<\/div>\r\n            <h2 class=\"kts-modal-title\">Pre-Step<\/h2>\r\n        <\/div>\r\n\r\n        <div class=\"kts-rate-toggle-wrap\">\r\n            <button type=\"button\" class=\"kts-rate-btn active\" id=\"ps-toggle-market\" data-rate-type=\"standard\">Exchange now<\/button>\r\n            <button type=\"button\" class=\"kts-rate-btn\" id=\"ps-toggle-fixed\" data-rate-type=\"fixed\">Fixed Rate<\/button>\r\n        <\/div>\r\n\r\n        <div class=\"kts-ps-pair-row\">\r\n            <div class=\"kts-ps-field\">\r\n                <div><div class=\"kts-ps-label\">You Send<\/div><input type=\"number\" class=\"kts-ps-amount\" id=\"ps-pay-val\" value=\"1\"><\/div>\r\n                <div class=\"kts-ps-coin-trigger\" id=\"ps-btn-pay\">BTC<\/div>\r\n            <\/div>\r\n            <div class=\"kts-ps-field\">\r\n                <div><div class=\"kts-ps-label\" id=\"ps-get-label\">You Get (Estimated)<\/div><input type=\"text\" class=\"kts-ps-amount\" id=\"ps-get-val\" readonly><\/div>\r\n                <div class=\"kts-ps-coin-trigger\" id=\"ps-btn-get\">ETH<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"kts-dynamic-line-wrap\">\r\n            <span id=\"ps-rate-summary\">1 BTC ~ 30.569647 ETH<\/span>\r\n            <a href=\"https:\/\/changenow.io\/faq\/what-is-the-difference-between-fixed-and-floating-exchange-rates\" target=\"_blank\" class=\"kts-rate-label\" id=\"ps-rate-type-label\">\r\n                Expected rate <i class=\"eicon-editor-external-link\"><\/i>\r\n            <\/a>\r\n        <\/div>\r\n\r\n        <div class=\"kts-ps-warning\"><span>\u26a0\ufe0f<\/span> <span>Please do not provide a smart-contract address as the recipient.<\/span><\/div>\r\n        \r\n        <div>\r\n            <div class=\"kts-ps-input-title\">Enter the recipient's address<\/div>\r\n            <input type=\"text\" id=\"ps-wallet-input\" class=\"kts-ps-wallet-box\" placeholder=\"Enter destination address\">\r\n        <\/div>\r\n        \r\n        <div id=\"kts-refund-container\">\r\n            <div class=\"kts-ps-input-title\">Enter refund address<\/div>\r\n            <input type=\"text\" id=\"ps-refund-input\" class=\"kts-ps-wallet-box\" placeholder=\"Optional: For failed exchanges\">\r\n        <\/div>\r\n\r\n        <div class=\"kts-ps-footer\">\r\n            <button class=\"kts-ps-next\" id=\"ps-final-next\" disabled>Next<\/button>\r\n            <span class=\"kts-refund-toggle\" id=\"toggle-refund-link\">+ Add refund address<\/span>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n        <!-- MODAL 2: CONFIRM -->\r\n        <div id=\"kts-modal-2\" class=\"kts-overlay\">\r\n            <div class=\"kts-modal-content\">\r\n                 <span class=\"kts-modal-close\" data-target=\"kts-modal-2\">\u2715<\/span>\r\n                 <div class=\"kts-modal-header\">\r\n                    <div class=\"kts-modal-circle\">2<\/div>\r\n                    <h2 class=\"kts-modal-title\">Confirm<\/h2>\r\n                <\/div>\r\n                <div class=\"kts-confirm-summary\">\r\n                    <div class=\"kts-summary-row\"><span class=\"kts-summary-label\">You Send<\/span><span class=\"kts-summary-value\" id=\"summary-send\"><\/span><\/div>\r\n                    <div class=\"kts-summary-row\"><span class=\"kts-summary-label\">You Get (Est.)<\/span><span class=\"kts-summary-value\" id=\"summary-get\"><\/span><\/div>\r\n                    <div class=\"kts-summary-row\"><span class=\"kts-summary-label\">Recipient Address<\/span><span class=\"kts-summary-value\" id=\"summary-recipient\"><\/span><\/div>\r\n                <\/div>\r\n                <div class=\"kts-terms\">\r\n                    <label><input type=\"checkbox\" id=\"kts-terms-agree\">I have read and agree to the Terms of Use.<\/label>\r\n                <\/div>\r\n                <button class=\"kts-confirm-payment-btn\" id=\"kts-confirm-payment-btn\">Confirm & Make Payment<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n      <!--########################################################################\r\n        ################# MODAL 3: SENDING \/ STATUS #################\r\n        #####################################################################-->\r\n        <div id=\"kts-modal-3\" class=\"kts-overlay\">\r\n            <div class=\"kts-modal-content\">\r\n                <span class=\"kts-modal-close\" data-target=\"kts-modal-3\">\u2715<\/span>\r\n                \r\n                <div class=\"kts-modal-header\">\r\n                    <div class=\"kts-modal-circle\">3<\/div>\r\n                    <h2 class=\"kts-modal-title\" id=\"kts-status-title\">Awaiting Payment<\/h2>\r\n                <\/div>\r\n                \r\n                <div id=\"kts-status-deposit\">\r\n                    <div class=\"kts-m3-grid\">\r\n                        <div class=\"kts-m3-left\">\r\n                            <div class=\"kts-m3-hero-label\">You Send<\/div>\r\n                            <div class=\"kts-m3-hero-amount\" id=\"deposit-amount-new\">-- --<\/div>\r\n                            \r\n                            <div class=\"kts-m3-hero-label\">Deposit Address<\/div>\r\n                            <div class=\"kts-address-hero\">\r\n                                <span class=\"kts-address-display\" id=\"deposit-address-text-new\">Waiting for API...<\/span>\r\n                                <button class=\"kts-copy-btn-new\" id=\"copy-address-btn-new\">Copy Address<\/button>\r\n                            <\/div>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"kts-m3-right\">\r\n                            <canvas id=\"kts-qr-canvas-new\"><\/canvas>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div id=\"kts-status-live\">\r\n                    <ul class=\"kts-status-tracker\">\r\n                        <li class=\"kts-status-step\" id=\"status-step-confirming\">Awaiting payment<\/li>\r\n                        <li class=\"kts-status-step\" id=\"status-step-exchanging\">Waiting for exchange<\/li>\r\n                        <li class=\"kts-status-step\" id=\"status-step-sending\">Sent to your wallet<\/li>\r\n                    <\/ul>\r\n                    \r\n                    <div id=\"kts-success-bar\">\r\n                        \u2713 Exchange completed. Funds are on the way to your wallet.\r\n                    <\/div>\r\n\r\n                    <div class=\"kts-tx-info\">\r\n                        Transaction ID: <strong id=\"kts-tx-id-new\">---<\/strong>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"kts-status-final\" style=\"display:none;\">\r\n                    <button id=\"kts-new-exchange-btn\" class=\"kts-new-exchange-btn\">Create a new exchange<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- COIN PICKER MODAL -->\r\n        <div id=\"coin-modal\">\r\n            <div style=\"display:flex; justify-content:space-between; margin-bottom:15px; font-weight:bold;\">Select Asset <span id=\"close-coin-modal\" style=\"cursor:pointer;\">\u2715<\/span><\/div>\r\n            <input type=\"text\" id=\"coin-search\" class=\"kts-search\" placeholder=\"Search...\">\r\n            <div class=\"kts-coin-list\" id=\"coin-list\"><\/div>\r\n        <\/div>\r\n\r\n        <script>\r\n        (function(){\r\n            \/\/ --- CONFIG & STATE (v2.6) ---\r\n            const KTS_CONFIG = {\r\n                apiKey: 'fd2b84dbb68e7753ddb77ecda3859e42b3b913d5ca606d8d7853a8f85cff98db',\r\n                fromCoin: 'btc',\r\n                toCoin: 'eth',\r\n                rateType: 'standard'\r\n            };\r\n\r\n            const apiKey = KTS_CONFIG.apiKey;\r\n            let currentPayCoin = KTS_CONFIG.fromCoin;\r\n            let currentGetCoin = KTS_CONFIG.toCoin;\r\n            \r\n            let allCoins = [];\r\n            let activeCoinPickerTarget = 'pay';\r\n            let exchangeData = {}; \/\/ Holds data between modals\r\n            let currentTransaction = {};\r\n            let statusPollingInterval = null;\r\n            let estimateDebounce = null;\r\n\r\n             \/* ###########################################################################\r\n                ########## SECTION: JS \/ SELECTORS (THE MAP) ###############################\r\n                ###########################################################################\r\n                *\/\r\n        const UIElements = {\r\n            payAmt: document.getElementById('pay-amt'),\r\n            getAmt: document.getElementById('get-amt'),\r\n            btnPay: document.getElementById('btn-pay'),\r\n            btnGet: document.getElementById('btn-get'),\r\n            openModalBtn: document.getElementById('open-prestep'),\r\n            coinModal: document.getElementById('coin-modal'),\r\n            coinList: document.getElementById('coin-list'),\r\n            coinSearch: document.getElementById('coin-search'),\r\n            closeCoinModalBtn: document.getElementById('close-coin-modal'),\r\n            modal1: document.getElementById('kts-modal-1'),\r\n            psPayVal: document.getElementById('ps-pay-val'),\r\n            psGetVal: document.getElementById('ps-get-val'),\r\n            psBtnPay: document.getElementById('ps-btn-pay'),\r\n            psBtnGet: document.getElementById('ps-btn-get'),\r\n            psWalletInput: document.getElementById('ps-wallet-input'),\r\n            psRefundInput: document.getElementById('ps-refund-input'),\r\n            refundContainer: document.getElementById('kts-refund-container'),\r\n            toggleRefundLink: document.getElementById('toggle-refund-link'),\r\n            psFinalNextBtn: document.getElementById('ps-final-next'),\r\n            modal2: document.getElementById('kts-modal-2'),\r\n            summarySend: document.getElementById('summary-send'),\r\n            summaryGet: document.getElementById('summary-get'),\r\n            summaryRecipient: document.getElementById('summary-recipient'),\r\n            termsAgree: document.getElementById('kts-terms-agree'),\r\n            confirmPaymentBtn: document.getElementById('kts-confirm-payment-btn'),\r\n            modal3: document.getElementById('kts-modal-3'),\r\n            statusTitle: document.getElementById('kts-status-title'),\r\n            statusDeposit: document.getElementById('kts-status-deposit'),\r\n            depositAmount: document.getElementById('deposit-amount-new'), \r\n            qrCanvas: document.getElementById('kts-qr-canvas-new'),        \r\n            depositAddressText: document.getElementById('deposit-address-text-new'), \r\n            copyAddressBtn: document.getElementById('copy-address-btn-new'),          \r\n            statusLive: document.getElementById('kts-status-live'),\r\n            statusFinal: document.querySelector('.kts-status-final'),\r\n            txId: document.getElementById('kts-tx-id-new'),              \r\n            successBar: document.getElementById('kts-success-bar'),      \r\n            newExchangeBtn: document.getElementById('kts-new-exchange-btn'),\r\n            statusSteps: {\r\n                confirming: document.getElementById('status-step-confirming'),\r\n                exchanging: document.getElementById('status-step-exchanging'),\r\n                sending: document.getElementById('status-step-sending'),\r\n            },\r\n            \/\/ PHASE 2: RATE TOGGLES & STATUS LINES\r\n            rateToggles: document.querySelectorAll('.kts-rate-btn'),\r\n            mainRateSummary: document.getElementById('kts-rate-summary'),\r\n            mainRateLabel: document.getElementById('kts-rate-type-label'),\r\n            psRateSummary: document.getElementById('ps-rate-summary'),\r\n            psRateLabel: document.getElementById('ps-rate-type-label'),\r\n            psGetLabel: document.getElementById('ps-get-label')\r\n        };\r\n\r\n            \/\/ --- API CALLS ---\r\n            const api = {\r\n                fetchCurrencies: async () => {\r\n                    if (!apiKey) { console.error(\"KoinTool Swap: API Key is missing.\"); return []; }\r\n                    try {\r\n                        const res = await fetch('https:\/\/api.changenow.io\/v2\/exchange\/currencies?active=true', { headers: { 'x-changenow-api-key': apiKey } });\r\n                        if (!res.ok) throw new Error(`API Error: ${res.statusText}`);\r\n                        return await res.json();\r\n                    } catch (e) { console.error(\"Failed to fetch currencies:\", e); return []; }\r\n                },\r\n                getEstimated: async (from, to, amount, flow = 'standard') => {\r\n            if (!apiKey || !from || !to || !amount || amount <= 0) return null;\r\n            try {\r\n                const res = await fetch(`https:\/\/api.changenow.io\/v2\/exchange\/estimated-amount?fromCurrency=${from}&toCurrency=${to}&fromAmount=${amount}&type=direct&flow=${flow}`, { \r\n                    headers: { 'x-changenow-api-key': apiKey } \r\n                });\r\n                if (!res.ok) return null;\r\n                return await res.json();\r\n            } catch (e) { return null; }\r\n        },\r\n                \r\n                createTransaction: async (payload) => {\r\n                     try {\r\n                        const res = await fetch(`https:\/\/api.changenow.io\/v2\/exchange`, { method: 'POST', headers: { 'x-changenow-api-key': apiKey, 'Content-Type': 'application\/json' }, body: JSON.stringify(payload) });\r\n                        return await res.json();\r\n                    } catch (e) { return { message: \"Network error. Please check your connection.\" }; }\r\n                },\r\n                getTransactionStatus: async (txId) => {\r\n                    try {\r\n                        const res = await fetch(`https:\/\/api.changenow.io\/v1\/transactions\/${txId}\/${apiKey}`);\r\n                        if (!res.ok) return null;\r\n                        return await res.json();\r\n                    } catch (e) { return null; }\r\n                }\r\n            };\r\n\r\n            \/\/ --- LOGIC ---\r\n            function openCoinPicker(target) {\r\n                activeCoinPickerTarget = target;\r\n                UIElements.coinModal.style.display = 'block';\r\n                UIElements.coinSearch.value = '';\r\n                renderCoins();\r\n                UIElements.coinSearch.focus();\r\n            }\r\n            function renderCoins(filter = '') {\r\n                const normalizedFilter = filter.toLowerCase();\r\n                const filtered = allCoins.filter(c => c.name.toLowerCase().includes(normalizedFilter) || c.ticker.toLowerCase().includes(normalizedFilter)).slice(0, 100);\r\n                UIElements.coinList.innerHTML = filtered.map(c => `<div class=\"kts-coin-item\" data-ticker=\"${c.ticker}\" data-image=\"${c.image || ''}\"><img decoding=\"async\" src=\"${c.image || ''}\" alt=\"${c.name}\"> <span>${c.name}<\/span> <b>${c.ticker.toUpperCase()}<\/b><\/div>`).join('');\r\n            }\r\n\r\n                    function updateEstimatedAmount(isModalContext = false) {\r\n            clearTimeout(estimateDebounce);\r\n            estimateDebounce = setTimeout(async () => {\r\n                const from = (isModalContext ? UIElements.psBtnPay : UIElements.btnPay).dataset.ticker;\r\n                const to = (isModalContext ? UIElements.psBtnGet : UIElements.btnGet).dataset.ticker;\r\n                const amount = parseFloat((isModalContext ? UIElements.psPayVal : UIElements.payAmt).value) || 0;\r\n                const targetEl = isModalContext ? UIElements.psGetVal : UIElements.getAmt;\r\n                \r\n                \/\/ Detect current Rate Type from the active toggle\r\n                const activeBtn = document.querySelector('.kts-rate-btn.active');\r\n                const rateType = activeBtn ? activeBtn.dataset.rateType : 'standard';\r\n                const isFixed = (rateType === 'fixed');\r\n\r\n                targetEl.value = \"Fetching...\";\r\n\r\n                \/\/ 1. Fetch the Estimate (The \"You Get\" value)\r\n                \/\/ Note: For Fixed, ChangeNOW usually requires flow=fixed-rate\r\n                const flow = isFixed ? 'fixed-rate' : 'standard';\r\n                const data = await api.getEstimated(from, to, amount, flow); \r\n                const formatted = (data && data.toAmount) ? parseFloat(data.toAmount).toFixed(8) : \"N\/A\";\r\n                \r\n                UIElements.getAmt.value = formatted;\r\n                UIElements.psGetVal.value = formatted;\r\n\r\n                \/\/ 2. Update the Dynamic Summary Line (The \"Line\" above the button)\r\n                if (isFixed) {\r\n                    \/\/ Fetch Min\/Max Range for Fixed Rate\r\n                    try {\r\n                        const rangeRes = await fetch(`https:\/\/api.changenow.io\/v2\/exchange\/range?fromCurrency=${from}&toCurrency=${to}&flow=fixed-rate`, { \r\n                            headers: { 'x-changenow-api-key': apiKey } \r\n                        });\r\n                        const range = await rangeRes.json();\r\n                        \r\n                        if (range && range.minAmount) {\r\n                            const rangeText = `Deposit from ${range.minAmount} to ${range.maxAmount || 'No Max'} ${from.toUpperCase()}`;\r\n                            UIElements.mainRateSummary.innerText = rangeText;\r\n                            UIElements.psRateSummary.innerText = rangeText;\r\n                            \r\n                            \/\/ Validation: Disable button if out of range\r\n                            const outOfRange = amount < range.minAmount || (range.maxAmount && amount > range.maxAmount);\r\n                            UIElements.openModalBtn.disabled = outOfRange;\r\n                            UIElements.psFinalNextBtn.disabled = outOfRange;\r\n                            UIElements.psFinalNextBtn.classList.toggle('active', !outOfRange);\r\n                        }\r\n                    } catch (e) {\r\n                        console.error(\"Range fetch failed\", e);\r\n                    }\r\n                } else {\r\n                    \/\/ Market Mode: Show 1 [FROM] ~ [RATIO] [TO]\r\n                    if (data && data.toAmount && amount > 0) {\r\n                        const ratio = (parseFloat(data.toAmount) \/ amount).toFixed(8);\r\n                        const ratioText = `1 ${from.toUpperCase()} ~ ${ratio} ${to.toUpperCase()}`;\r\n                        UIElements.mainRateSummary.innerText = ratioText;\r\n                        UIElements.psRateSummary.innerText = ratioText;\r\n                    }\r\n                    UIElements.openModalBtn.disabled = false; \/\/ Standard validation applies elsewhere\r\n                }\r\n            }, 400);\r\n        }\r\n\r\n                        function selectCoin(ticker, image) {\r\n                const isPay = activeCoinPickerTarget.includes('pay');\r\n                \r\n                \/\/ Determine which buttons to update based on the target\r\n                const btn = isPay ? UIElements.btnPay : UIElements.btnGet;\r\n                const psBtn = isPay ? UIElements.psBtnPay : UIElements.psBtnGet;\r\n                \r\n                \/\/ Create the HTML for the button\r\n                const icon = image ? `<img decoding=\"async\" src=\"${image}\" style=\"width:16px; height:16px; border-radius:50%;\">` : '';\r\n                const text = `${ticker.toUpperCase()} \u25bc`;\r\n\r\n                \/\/ Update ONLY the targeted buttons\r\n                btn.innerHTML = `${icon} ${text}`;\r\n                btn.dataset.ticker = ticker;\r\n                psBtn.innerHTML = `${icon} ${text}`;\r\n                psBtn.dataset.ticker = ticker;\r\n\r\n                \/\/ Hide the modal and update the rate\r\n                UIElements.coinModal.style.display = 'none';\r\n                updateEstimatedAmount(activeCoinPickerTarget.includes('ps'));\r\n            }\r\n\r\n\r\n            function showModal(modalElement) {\r\n                modalElement.style.display = 'flex';\r\n                document.body.style.overflow = 'hidden';\r\n            }\r\n\r\n            function hideModal(modalElement) {\r\n                modalElement.style.display = 'none';\r\n                if (document.querySelectorAll('.kts-overlay[style*=\"flex\"]').length === 0) {\r\n                     document.body.style.overflow = 'auto';\r\n                }\r\n            }\r\n            \r\n                        function handleModal1Next() {\r\n                if (UIElements.psFinalNextBtn.disabled) return;\r\n                \r\n                \/\/ PHASE 2: Detect flow for summary labels\r\n                const activeBtn = document.querySelector('.kts-rate-btn.active');\r\n                const isFixed = activeBtn && activeBtn.dataset.rateType === 'fixed';\r\n                const rateLabel = isFixed ? ' (Fixed)' : ' (Est.)';\r\n\r\n                \/\/ Store data\r\n                exchangeData = {\r\n                    fromCurrency: UIElements.psBtnPay.dataset.ticker,\r\n                    toCurrency: UIElements.psBtnGet.dataset.ticker,\r\n                    fromAmount: UIElements.psPayVal.value,\r\n                    toAmount: UIElements.psGetVal.value,\r\n                    recipientAddress: UIElements.psWalletInput.value,\r\n                    refundAddress: UIElements.psRefundInput.value\r\n                };\r\n                \r\n                \/\/ Populate Modal 2 summary\r\n                UIElements.summarySend.innerText = `${exchangeData.fromAmount} ${exchangeData.fromCurrency.toUpperCase()}`;\r\n                UIElements.summaryGet.innerText = `${exchangeData.toAmount} ${exchangeData.toCurrency.toUpperCase()}${rateLabel}`;\r\n                UIElements.summaryRecipient.innerText = `${exchangeData.recipientAddress.substring(0, 6)}...${exchangeData.recipientAddress.substring(exchangeData.recipientAddress.length - 4)}`;\r\n                \r\n                hideModal(UIElements.modal1);\r\n                showModal(UIElements.modal2);\r\n            }\r\n                    async function handleModal2Confirm() {\r\n            const btn = UIElements.confirmPaymentBtn;\r\n            if(btn.disabled) return;\r\n            btn.disabled = true;\r\n            btn.innerText = \"Processing...\";\r\n\r\n            \/\/ Detect the active flow from the UI state (Market vs Fixed)\r\n            const activeBtn = document.querySelector('.kts-rate-btn.active');\r\n            const selectedFlow = activeBtn ? activeBtn.dataset.rateType : 'standard';\r\n\r\n            const payload = {\r\n                fromCurrency: exchangeData.fromCurrency,\r\n                toCurrency: exchangeData.toCurrency,\r\n                fromAmount: exchangeData.fromAmount,\r\n                address: exchangeData.recipientAddress,\r\n                flow: selectedFlow,\r\n                type: 'direct'\r\n            };\r\n                if(exchangeData.refundAddress.length > 20) {\r\n                    payload.refundAddress = exchangeData.refundAddress;\r\n                }\r\n\r\n                const data = await api.createTransaction(payload);\r\n                if(data.id) {\r\n                    currentTransaction = data;\r\n                    hideModal(UIElements.modal2);\r\n                    showStatusModal();\r\n                    startStatusPolling();\r\n                } else {\r\n                    alert(\"Error: \" + (data.message || \"Could not create transaction.\"));\r\n                    btn.disabled = false;\r\n                    btn.innerText = \"Confirm & Make Payment\";\r\n                }\r\n            }\r\n            \r\n            \/* ###########################################################################\r\n                ########## SECTION: JS \/ SHOW MODAL 3 (GRID LOGIC) #########################\r\n                ###########################################################################\r\n                *\/\r\nfunction showStatusModal() {\r\n    \/\/ 1. Populate the Left-Side Data (Hero Amount)\r\n    const ticker = currentTransaction.fromCurrency.toUpperCase();\r\n    const amount = currentTransaction.fromAmount;\r\n    \r\n    if(UIElements.depositAmount) {\r\n        UIElements.depositAmount.innerHTML = `${amount} <span>${ticker}<\/span>`;\r\n    }\r\n    \r\n    \/\/ 2. Set the Monospaced Address\r\n    if(UIElements.depositAddressText) {\r\n        UIElements.depositAddressText.innerText = currentTransaction.payinAddress;\r\n    }\r\n\r\n    \/\/ 3. Render QR Code on the Right-Side Canvas\r\n    if(UIElements.qrCanvas) {\r\n        new QRious({ \r\n            element: UIElements.qrCanvas, \r\n            value: currentTransaction.payinAddress, \r\n            size: 180,\r\n            level: 'H' \r\n        });\r\n    }\r\n\r\n    \/\/ 4. Set the Transaction ID in the footer\r\n    if(UIElements.txId) {\r\n        UIElements.txId.innerText = currentTransaction.id;\r\n    }\r\n    \r\n    showModal(UIElements.modal3);\r\n}\r\n\r\n            function startStatusPolling() {\r\n                if(statusPollingInterval) clearInterval(statusPollingInterval);\r\n                const checkStatus = async () => {\r\n                    const statusData = await api.getTransactionStatus(currentTransaction.id);\r\n                    if(statusData) {\r\n                         if (statusData.status !== 'waiting') {\r\n                            UIElements.statusDeposit.style.display = 'none';\r\n                            UIElements.statusLive.style.display = 'block';\r\n                        }\r\n                        updateStatusVisuals(statusData);\r\n                        if (['finished', 'failed', 'refunded'].includes(statusData.status)) {\r\n                            clearInterval(statusPollingInterval);\r\n                        }\r\n                    }\r\n                };\r\n                checkStatus(); \/\/ Initial check\r\n                statusPollingInterval = setInterval(checkStatus, 15000); \/\/ Poll every 15 seconds\r\n            }\r\n\r\n            function updateStatusVisuals(statusData) {\r\n                const status = statusData.status;\r\n                UIElements.statusTitle.innerText = `Status: ${status.charAt(0).toUpperCase() + status.slice(1)}`;\r\n                const steps = UIElements.statusSteps;\r\n                steps.confirming.classList.toggle('active', ['confirming', 'exchanging', 'sending', 'finished'].includes(status));\r\n                steps.exchanging.classList.toggle('active', ['exchanging', 'sending', 'finished'].includes(status));\r\n                steps.sending.classList.toggle('active', ['sending', 'finished'].includes(status));\r\n\r\n                if(['finished', 'failed', 'refunded'].includes(status)) {\r\n                    UIElements.statusLive.style.display = 'none';\r\n                    UIElements.statusFinal.style.display = 'block';\r\n                    if (status === 'finished') {\r\n                        UIElements.statusTitle.innerText = \"Exchange Finished\";\r\n                        UIElements.finalToAmount.innerText = statusData.amountTo;\r\n                        UIElements.finalToTicker.innerText = statusData.toCurrency.toUpperCase();\r\n                        UIElements.txLink.href = statusData.payoutHash ? `https:\/\/changenow.io\/exchange\/txs\/${statusData.payoutHash}` : '#';\r\n                        UIElements.txLink.style.display = statusData.payoutHash ? 'inline' : 'none';\r\n                    } else {\r\n                        const finalMessage = status === 'failed' ? (statusData.message || 'The exchange could not be completed.') : 'Your exchange has been refunded.';\r\n                        UIElements.statusFinal.innerHTML = `<div style=\"font-size:80px\">\u26a0\ufe0f<\/div><h2>${status.charAt(0).toUpperCase() + status.slice(1)}<\/h2><p>${finalMessage}<\/p><button id=\"kts-new-exchange-btn-fail\" class=\"kts-new-exchange-btn\">Create a new exchange<\/button>`;\r\n                        document.getElementById('kts-new-exchange-btn-fail').addEventListener('click', resetWidget);\r\n                    }\r\n                }\r\n            }\r\n\r\n            function resetWidget() {\r\n                \/\/ Hide all modals and clear intervals\r\n                [UIElements.modal1, UIElements.modal2, UIElements.modal3].forEach(hideModal);\r\n                if(statusPollingInterval) clearInterval(statusPollingInterval);\r\n                \r\n                \/\/ Reset state objects\r\n                exchangeData = {};\r\n                currentTransaction = {};\r\n\r\n                \/\/ Reset forms\r\n                [UIElements.payAmt, UIElements.psPayVal].forEach(el => el.value = \"1\");\r\n                [UIElements.psWalletInput, UIElements.psRefundInput].forEach(el => el.value = \"\");\r\n                UIElements.termsAgree.checked = false;\r\n\r\n                \/\/ Reset buttons\r\n                UIElements.psFinalNextBtn.disabled = true;\r\n                UIElements.psFinalNextBtn.classList.remove('active');\r\n                UIElements.confirmPaymentBtn.disabled = true;\r\n                UIElements.confirmPaymentBtn.classList.remove('active');\r\n                UIElements.confirmPaymentBtn.innerText = \"Confirm & Make Payment\";\r\n                \r\n                \/\/ Reset visuals\r\n                UIElements.refundContainer.style.display = 'none';\r\n                UIElements.toggleRefundLink.innerText = '+ Add refund address';\r\n                UIElements.statusDeposit.style.display = 'block';\r\n                UIElements.statusLive.style.display = 'none';\r\n                UIElements.statusFinal.style.display = 'none';\r\n                Object.values(UIElements.statusSteps).forEach(step => step.classList.remove('active'));\r\n\r\n                updateEstimatedAmount();\r\n            }\r\n\r\n                        function setupEventListeners() {\r\n                \/\/ PHASE 2: RATE TOGGLE SYNC & UI SWAP\r\n                UIElements.rateToggles.forEach(btn => {\r\n                    btn.addEventListener('click', (e) => {\r\n                        const type = e.currentTarget.dataset.rateType;\r\n                        const isFixed = (type === 'fixed');\r\n\r\n                        \/\/ Sync All Toggle Buttons (Widget + Modal)\r\n                        UIElements.rateToggles.forEach(t => t.classList.toggle('active', t.dataset.rateType === type));\r\n\r\n                        if (isFixed) {\r\n                            const minStr = \"Deposit from -- --\"; \r\n                            UIElements.mainRateSummary.innerText = minStr;\r\n                            UIElements.psRateSummary.innerText = minStr;\r\n                            UIElements.mainRateLabel.innerHTML = `Fixed rate <i class=\"eicon-editor-external-link\"><\/i>`;\r\n                            UIElements.psRateLabel.innerHTML = `Fixed rate <i class=\"eicon-editor-external-link\"><\/i>`;\r\n                            UIElements.psGetLabel.innerText = \"You Get (Fixed)\";\r\n                            UIElements.mainRateSummary.classList.add('limit-mode');\r\n                            UIElements.psRateSummary.classList.add('limit-mode');\r\n                        } else {\r\n                            UIElements.mainRateLabel.innerHTML = `Expected rate <i class=\"eicon-editor-external-link\"><\/i>`;\r\n                            UIElements.psRateLabel.innerHTML = `Expected rate <i class=\"eicon-editor-external-link\"><\/i>`;\r\n                            UIElements.psGetLabel.innerText = \"You Get (Estimated)\";\r\n                            UIElements.mainRateSummary.classList.remove('limit-mode');\r\n                            UIElements.psRateSummary.classList.remove('limit-mode');\r\n                        }\r\n                        updateEstimatedAmount(UIElements.modal1.style.display === 'flex');\r\n                    });\r\n                });\r\n\r\n                \/\/ OPEN MODAL LOGIC (With Sync)\r\n                UIElements.openModalBtn.addEventListener('click', () => {\r\n                    UIElements.psPayVal.value = UIElements.payAmt.value;\r\n                    UIElements.psGetVal.value = UIElements.getAmt.value;\r\n                    UIElements.psBtnPay.innerHTML = UIElements.btnPay.innerHTML;\r\n                    UIElements.psBtnPay.dataset.ticker = UIElements.btnPay.dataset.ticker;\r\n                    UIElements.psBtnGet.innerHTML = UIElements.btnGet.innerHTML;\r\n                    UIElements.psBtnGet.dataset.ticker = UIElements.btnGet.dataset.ticker;\r\n                    \r\n                    \/\/ Ensure Modal Toggle matches Widget state on open\r\n                    const activeBtn = document.querySelector('#kts-vault .kts-rate-btn.active');\r\n                    const currentType = activeBtn ? activeBtn.dataset.rateType : 'standard';\r\n                    UIElements.rateToggles.forEach(t => t.classList.toggle('active', t.dataset.rateType === currentType));\r\n                    \r\n                    showModal(UIElements.modal1);\r\n                });\r\n\r\n                \/\/ CLOSE MODAL LOGIC\r\n                document.querySelectorAll('.kts-modal-close').forEach(btn => \r\n                    btn.addEventListener('click', (e) => hideModal(document.getElementById(e.target.dataset.target)))\r\n                );\r\n\r\n                \r\n                \/\/ Coin Picker\r\n                UIElements.btnPay.addEventListener('click', () => openCoinPicker('pay'));\r\n                UIElements.btnGet.addEventListener('click', () => openCoinPicker('get'));\r\n                UIElements.psBtnPay.addEventListener('click', () => openCoinPicker('ps-pay'));\r\n                UIElements.psBtnGet.addEventListener('click', () => openCoinPicker('ps-get'));\r\n                UIElements.closeCoinModalBtn.addEventListener('click', () => UIElements.coinModal.style.display = 'none');\r\n                UIElements.coinSearch.addEventListener('input', (e) => renderCoins(e.target.value));\r\n                UIElements.coinList.addEventListener('click', (e) => {\r\n                    const item = e.target.closest('.kts-coin-item');\r\n                    if (item) selectCoin(item.dataset.ticker, item.dataset.image);\r\n                });\r\n\r\n                \/\/ Amount inputs\r\n                UIElements.payAmt.addEventListener('input', () => updateEstimatedAmount(false));\r\n                UIElements.psPayVal.addEventListener('input', () => updateEstimatedAmount(true));\r\n                \r\n                \/\/ Modal 1\r\n                UIElements.toggleRefundLink.addEventListener('click', () => {\r\n                    const isHidden = UIElements.refundContainer.style.display === 'none';\r\n                    UIElements.refundContainer.style.display = isHidden ? 'block' : 'none';\r\n                    UIElements.toggleRefundLink.innerText = isHidden ? '- Remove refund address' : '+ Add refund address';\r\n                    if(!isHidden) UIElements.psRefundInput.value = '';\r\n                });\r\n                UIElements.psWalletInput.addEventListener('input', (e) => {\r\n                    const isValid = e.target.value.length > 20;\r\n                    UIElements.psFinalNextBtn.disabled = !isValid;\r\n                    UIElements.psFinalNextBtn.classList.toggle('active', isValid);\r\n                });\r\n                UIElements.psFinalNextBtn.addEventListener('click', handleModal1Next);\r\n                \r\n                \/\/ Modal 2\r\n                UIElements.termsAgree.addEventListener('change', (e) => {\r\n                    const isChecked = e.target.checked;\r\n                    UIElements.confirmPaymentBtn.disabled = !isChecked;\r\n                    UIElements.confirmPaymentBtn.classList.toggle('active', isChecked);\r\n                });\r\n                UIElements.confirmPaymentBtn.addEventListener('click', handleModal2Confirm);\r\n\r\n                \/* ###########################################################################\r\n                    ########## SECTION: JS \/ COPY BUTTON LOGIC #################################\r\n                    ###########################################################################\r\n                *\/\r\nUIElements.copyAddressBtn.addEventListener('click', () => {\r\n    navigator.clipboard.writeText(UIElements.depositAddressText.innerText).then(() => {\r\n        UIElements.copyAddressBtn.innerText = \"Copied!\";\r\n        \/\/ We update the timer to say \"Copy Address\" to match your new layout\r\n        setTimeout(() => UIElements.copyAddressBtn.innerText = \"Copy Address\", 2000);\r\n    });\r\n});\r\n                UIElements.newExchangeBtn.addEventListener('click', resetWidget);\r\n            }\r\n\r\n            async function init() {\r\n                if (!apiKey) { UIElements.openModalBtn.innerText = \"API Key Missing\"; return; }\r\n                \r\n                UIElements.openModalBtn.innerText = \"Initializing...\";\r\n                allCoins = await api.fetchCurrencies();\r\n\r\n                if (allCoins.length > 0) {\r\n                    const btc = allCoins.find(c => c.ticker === 'btc');\r\n                    const eth = allCoins.find(c => c.ticker === 'eth');\r\n\r\n                    \/\/ \ud83d\udd3c Set TOP (pay)\r\n                    activeCoinPickerTarget = 'pay';\r\n                    if (btc) selectCoin('btc', btc.image);\r\n\r\n                    \/\/ \ud83d\udd3d Set BOTTOM (get)\r\n                    activeCoinPickerTarget = 'get';\r\n                    if (eth) selectCoin('eth', eth.image);\r\n\r\n                    \/\/ Now fetch rate\r\n                    updateEstimatedAmount();\r\n\r\n                    UIElements.openModalBtn.disabled = false;\r\n                    UIElements.openModalBtn.innerText = \"Exchange\";\r\n                } else {\r\n                    UIElements.openModalBtn.innerText = \"API Error\";\r\n                }\r\n\r\n                setupEventListeners();\r\n            }\r\n\r\n            init();\r\n        })();\r\n        <\/script>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>KoinTool Swap Exchange now Fixed Rate BTC \u25bc \u2193 ETH \u25bc 1 BTC ~ 30.569647 ETH Expected rate Exchange \u2715 1 Pre-Step Exchange now Fixed Rate You Send BTC You Get (Estimated) ETH 1 BTC ~ 30.569647 ETH Expected rate \u26a0\ufe0f Please do not provide a smart-contract address as the recipient. Enter the recipient&#8217;s address [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-48","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/pages\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/comments?post=48"}],"version-history":[{"count":20,"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/pages\/48\/revisions"}],"predecessor-version":[{"id":91,"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/pages\/48\/revisions\/91"}],"wp:attachment":[{"href":"https:\/\/dev.koin.locker\/swap26\/wp-json\/wp\/v2\/media?parent=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}