From a4e024bf04acfe5ecc3d635922f9f3cd0eb881fc Mon Sep 17 00:00:00 2001
From: Nguyen Van Viet <vietnv1304@gmail.com>
Date: Wed, 24 Jan 2024 09:12:35 +0700
Subject: [PATCH] feat: EX-141 support button, EX-152 dexscreener
 prefferredTokens (#2465)

* feat: EX-141 support button, EX-152 dexscreener prefferredTokens

* fix: onMouseEnter instead of onHover

* fix: chargeFeeBy
---
 index.html                                    |  29 ----
 public/libs/zenddesk.js                       |   1 -
 src/assets/svg/discord_color.svg              |   4 +
 src/assets/svg/email_color.svg                |   7 +
 src/assets/svg/tele_color.svg                 |  12 ++
 src/components/SupportButton.tsx              | 162 ++++++++++++++++++
 .../SwapForm/hooks/useGetFeeConfig.tsx        |  23 ++-
 src/pages/App.tsx                             |   2 +
 8 files changed, 202 insertions(+), 38 deletions(-)
 delete mode 100644 public/libs/zenddesk.js
 create mode 100644 src/assets/svg/discord_color.svg
 create mode 100644 src/assets/svg/email_color.svg
 create mode 100644 src/assets/svg/tele_color.svg
 create mode 100644 src/components/SupportButton.tsx

diff --git a/index.html b/index.html
index b1f54a4c35..fc957827ad 100644
--- a/index.html
+++ b/index.html
@@ -223,35 +223,6 @@
       </div>
     </div>
     <script src="/charting_library/charting_library.standalone.js"></script>
-    <script>
-      // customer support widget
-      window.zESettings = {
-        webWidget: {
-          offset: {
-            vertical: window.innerWidth > 1200 ? '0px' : '75px',
-            mobile: {
-              vertical: '65px',
-              horizontal: '-5px',
-            },
-          },
-          zIndex: 3,
-        },
-      }
-    </script>
-
-    <script>
-      ;(function () {
-        const isPartnerSwap = window.location.pathname.startsWith('/partner-swap')
-        if (!isPartnerSwap) {
-          const script = document.createElement('script')
-          script.async = true
-          script.id = 'ze-snippet'
-          script.src = '/libs/zenddesk.js?key=a73faacd-ba50-493a-8bf5-4b6878035346&v=1'
-
-          document.body.appendChild(script)
-        }
-      })()
-    </script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/public/libs/zenddesk.js b/public/libs/zenddesk.js
deleted file mode 100644
index 237439c028..0000000000
--- a/public/libs/zenddesk.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){var e,t,n={271:function(e){function t(e){var t=document.createElement("a");return t.href=e,t.search.split("?")[1]||""}e.exports={getQueryParamsString:t,parseUrlParams:function(e){var n=t(e);return""===n?{}:n.split("&").reduce((function(e,t){var n=t.split("=");return e[n[0]]=decodeURIComponent(n[1]),e}),{})},loadScript:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:function(){},n=document.createElement("script");n.type="text/javascript",n.onerror=function(){t(new Error("Script failed to load"))},n.readyState?n.onreadystatechange=function(){"loaded"!==n.readyState&&"complete"!==n.readyState||(n.onreadystatechange=null,t())}:n.onload=function(){t()},n.src=e,document.getElementsByTagName("head")[0].appendChild(n)}}}},r={};function o(e){var t=r[e];if(void 0!==t)return t.exports;var i=r[e]={id:e,loaded:!1,exports:{}};return n[e](i,i.exports,o),i.loaded=!0,i.exports}o.m=n,o.d=function(e,t){for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.f={},o.e=function(e){return Promise.all(Object.keys(o.f).reduce((function(t,n){return o.f[n](e,t),t}),[]))},o.u=function(e){return"sentry-browser.min.js"},o.hmd=function(e){return(e=Object.create(e)).children||(e.children=[]),Object.defineProperty(e,"exports",{enumerable:!0,set:function(){throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+e.id)}}),e},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},e={},t="asset_composer:",o.l=function(n,r,i,u){if(e[n])e[n].push(r);else{var c,a;if(void 0!==i)for(var f=document.getElementsByTagName("script"),s=0;s<f.length;s++){var l=f[s];if(l.getAttribute("src")==n||l.getAttribute("data-webpack")==t+i){c=l;break}}c||(a=!0,(c=document.createElement("script")).charset="utf-8",c.timeout=120,o.nc&&c.setAttribute("nonce",o.nc),c.setAttribute("data-webpack",t+i),c.src=n),e[n]=[r];var p=function(t,r){c.onerror=c.onload=null,clearTimeout(d);var o=e[n];if(delete e[n],c.parentNode&&c.parentNode.removeChild(c),o&&o.forEach((function(e){return e(r)})),t)return t(r)},d=setTimeout(p.bind(null,void 0,{type:"timeout",target:c}),12e4);c.onerror=p.bind(null,c.onerror),c.onload=p.bind(null,c.onload),a&&document.head.appendChild(c)}},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.p="https://static.zdassets.com/ekr/",function(){var e={11:0};o.f.j=function(t,n){var r=o.o(e,t)?e[t]:void 0;if(0!==r)if(r)n.push(r[2]);else{var i=new Promise((function(n,o){r=e[t]=[n,o]}));n.push(r[2]=i);var u=o.p+o.u(t),c=new Error;o.l(u,(function(n){if(o.o(e,t)&&(0!==(r=e[t])&&(e[t]=void 0),r)){var i=n&&("load"===n.type?"missing":n.type),u=n&&n.target&&n.target.src;c.message="Loading chunk "+t+" failed.\n("+i+": "+u+")",c.name="ChunkLoadError",c.type=i,c.request=u,r[1](c)}}),"chunk-"+t,t)}};var t=function(t,n){var r,i,u=n[0],c=n[1],a=n[2],f=0;if(u.some((function(t){return 0!==e[t]}))){for(r in c)o.o(c,r)&&(o.m[r]=c[r]);a&&a(o)}for(t&&t(n);f<u.length;f++)i=u[f],o.o(e,i)&&e[i]&&e[i][0](),e[i]=0},n=self.zEWebpackACJsonp=self.zEWebpackACJsonp||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),function(){"use strict";var e=setTimeout;function t(e){return Boolean(e&&void 0!==e.length)}function n(){}function r(e){if(!(this instanceof r))throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=0,this._handled=!1,this._value=void 0,this._deferreds=[],s(e,this)}function i(e,t){for(;3===e._state;)e=e._value;0!==e._state?(e._handled=!0,r._immediateFn((function(){var n=1===e._state?t.onFulfilled:t.onRejected;if(null!==n){var r;try{r=n(e._value)}catch(e){return void c(t.promise,e)}u(t.promise,r)}else(1===e._state?u:c)(t.promise,e._value)}))):e._deferreds.push(t)}function u(e,t){try{if(t===e)throw new TypeError("A promise cannot be resolved with itself.");if(t&&("object"==typeof t||"function"==typeof t)){var n=t.then;if(t instanceof r)return e._state=3,e._value=t,void a(e);if("function"==typeof n)return void s((o=n,i=t,function(){o.apply(i,arguments)}),e)}e._state=1,e._value=t,a(e)}catch(t){c(e,t)}var o,i}function c(e,t){e._state=2,e._value=t,a(e)}function a(e){2===e._state&&0===e._deferreds.length&&r._immediateFn((function(){e._handled||r._unhandledRejectionFn(e._value)}));for(var t=0,n=e._deferreds.length;t<n;t++)i(e,e._deferreds[t]);e._deferreds=null}function f(e,t,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.promise=n}function s(e,t){var n=!1;try{e((function(e){n||(n=!0,u(t,e))}),(function(e){n||(n=!0,c(t,e))}))}catch(e){if(n)return;n=!0,c(t,e)}}r.prototype.catch=function(e){return this.then(null,e)},r.prototype.then=function(e,t){var r=new this.constructor(n);return i(this,new f(e,t,r)),r},r.prototype.finally=function(e){var t=this.constructor;return this.then((function(n){return t.resolve(e()).then((function(){return n}))}),(function(n){return t.resolve(e()).then((function(){return t.reject(n)}))}))},r.all=function(e){return new r((function(n,r){if(!t(e))return r(new TypeError("Promise.all accepts an array"));var o=Array.prototype.slice.call(e);if(0===o.length)return n([]);var i=o.length;function u(e,t){try{if(t&&("object"==typeof t||"function"==typeof t)){var c=t.then;if("function"==typeof c)return void c.call(t,(function(t){u(e,t)}),r)}o[e]=t,0==--i&&n(o)}catch(e){r(e)}}for(var c=0;c<o.length;c++)u(c,o[c])}))},r.allSettled=function(e){return new this((function(t,n){if(!e||void 0===e.length)return n(new TypeError(typeof e+" "+e+" is not iterable(cannot read property Symbol(Symbol.iterator))"));var r=Array.prototype.slice.call(e);if(0===r.length)return t([]);var o=r.length;function i(e,n){if(n&&("object"==typeof n||"function"==typeof n)){var u=n.then;if("function"==typeof u)return void u.call(n,(function(t){i(e,t)}),(function(n){r[e]={status:"rejected",reason:n},0==--o&&t(r)}))}r[e]={status:"fulfilled",value:n},0==--o&&t(r)}for(var u=0;u<r.length;u++)i(u,r[u])}))},r.resolve=function(e){return e&&"object"==typeof e&&e.constructor===r?e:new r((function(t){t(e)}))},r.reject=function(e){return new r((function(t,n){n(e)}))},r.race=function(e){return new r((function(n,o){if(!t(e))return o(new TypeError("Promise.race accepts an array"));for(var i=0,u=e.length;i<u;i++)r.resolve(e[i]).then(n,o)}))},r._immediateFn="function"==typeof setImmediate&&function(e){setImmediate(e)}||function(t){e(t,0)},r._unhandledRejectionFn=function(e){"undefined"!=typeof console&&console&&console.warn("Possible Unhandled Promise Rejection:",e)};var l=r,p=200;function d(e){return new l((function(t,n){var r=new XMLHttpRequest;r.open("GET",e,!0),r.responseType="json",r.onload=function(){if(r.status===p){var e=r.response,o="string"==typeof e?JSON.parse(e):e;t(o)}else{var i=new Error(r.statusText);i.status=r.status,n(i)}},r.onerror=function(){n(Error("Network error"))},r.send()}))}function y(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function h(e,t,n){return t&&y(e.prototype,t),n&&y(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}var v=h((function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length>2&&void 0!==arguments[2]&&arguments[2];!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.message=t,this.props=n,this.error=Error(this.message),this.isUserError=r,this.fingerprint=this.message})),b={},m={},w={};function g(e){return g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},g(e)}function j(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var O=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.name=t.name,this.id=t.id,this.features=t.features,this.bootstrap=t.bootstrap,this.win=n,this.doc=n.document}var t,n;return t=e,n=[{key:"ready",value:function(){var e=this;return new l((function(t,n){e.createIframeElement().then((function(r){r.addEventListener("load",(function(){var o=r.contentWindow;o&&o.document?(o.ACFetch=d,t(o.document)):n(e.error())})),r.src="about:blank",e.doc.body.appendChild(r)}))}))}},{key:"injectMetadata",value:function(e,t){var n,r,o;e&&(e.zendesk=(n={},r=this.name,o={id:this.id,features:this.features,bootstrap:this.bootstrap},r in n?Object.defineProperty(n,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):n[r]=o,n),Object&&Object.freeze&&this.deepFreeze(e.zendesk),e.zEQueue=t)}},{key:"deepFreeze",value:function(e){var t=this;return Object.freeze(e),void 0===e||Object.getOwnPropertyNames(e).forEach((function(n){null===e[n]||"object"!==g(e[n])&&"function"!=typeof e[n]||Object.isFrozen(e[n])||t.deepFreeze(e[n])})),e}},{key:"injectAssets",value:function(e,t){var n=this;if(e){var r=e.getElementsByTagName("head")[0];t.scripts.forEach((function(t){r.appendChild(n.createScriptElement(e,t.src))}))}}},{key:"parentDocumentReady",value:function(){var e=this;return new l((function(t,n){"loading"!==e.doc.readyState&&e.doc.body?t():e.doc.addEventListener("DOMContentLoaded",(function(){e.doc.body?t():n(new v("host page document.body not available"))}))}))}},{key:"createIframeElement",value:function(){var e=this;return this.parentDocumentReady().then((function(){var t=e.doc.createElement("iframe");return t.dataset.product=e.name,t.title="No content",t.role="presentation",t.tabIndex=-1,t.allow="microphone *",t.setAttribute("aria-hidden",!0),t.style.cssText="width: 0; height: 0; border: 0; position: absolute; top: -9999px",t}))}},{key:"createScriptElement",value:function(e,t){if(!e)return null;var n=e.createElement("script");return n.type="text/javascript",n.src=t,n}},{key:"error",value:function(){var e={product:this.name,id:this.id,features:this.features};return new v("iframe document not available to load product",e)}}],n&&j(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function P(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var E=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.product=t,this.productIframe=new O(this.product,n)}var t,n;return t=e,n=[{key:"getProductAssets",value:function(){return arguments.length>0&&void 0!==arguments[0]&&arguments[0]?w[this.product.name].assets:this.product.assets}},{key:"load",value:function(e,t){var n=this;return this.productIframe.ready().then((function(r){n.productIframe.injectMetadata(r,t),n.productIframe.injectAssets(r,e)})).catch((function(){return l.reject(n.loadProductError())}))}},{key:"loadProductError",value:function(){var e=this.product,t=e.name,n=e.id,r=e.features;return new v("failed to load product",{product:t,id:n,features:r})}}],n&&P(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}(),k=o(271);function _(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var S=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.zopimKey=t,this.win=n,this.doc=n.document}var t,n;return t=e,n=[{key:"getProductAssets",value:function(){return{zopimSrc:"".concat("https://v2.zopim.com/w","?").concat(this.zopimKey)}}},{key:"load",value:function(e){return new l((function(t,n){try{(0,k.loadScript)(e.zopimSrc),t()}catch(e){n(e)}}))}}],n&&_(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function z(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var T="__zE_ac_version",R=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.version=this.getVersion(t),this.baseUrl="".concat("https://ekr.zdassets.com/","compose/").concat(n),this.snippetKey=n}var t,n;return t=e,(n=[{key:"resolveComposeUrl",value:function(){var e=this.baseUrl;return this.version&&(e+="?".concat(this.getSerializedVersionQueryParam()),this.displayWarning()),decodeURI(e)}},{key:"displayWarning",value:function(){console.warn("You are loading ".concat(this.version.name," version ").concat(this.version.string))}},{key:"getSerializedVersionQueryParam",value:function(){return"".concat(T,"=").concat(this.version.name,"/").concat(this.version.string)}},{key:"getVersion",value:function(e){var t;try{t=e.localStorage.getItem("ZD-ac-version")}catch(e){}var n=(0,k.parseUrlParams)(e.location.href)[T]||t;if(n){var r=n.split("/");if(this.validVersion(r[1]))return{name:r[0],string:r[1]}}return null}},{key:"validVersion",value:function(e){return e&&/^\w+$/.test(e)}}])&&z(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function C(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var x=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.snippet=t}var t,n;return t=e,n=[{key:"getProducts",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return new l((function(r,o){var i=t.snippet.getParentWindow();if(n)i.zEACLoaded=!0,i.$zopim?r(m.products):r(b.products);else{var u=new R(i,e),c=function(e){var t=e.products;i.zEACLoaded=!0,r(t)},a=u.resolveComposeUrl();d(a).then(c).catch((function(n){404!==n.status&&400!==n.status?d(a).then((function(e){return c(e)})).catch((function(){return o(t.error(e))})):o(t.error(e))}))}}))}},{key:"loadProducts",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return e.map((function(e){var r=e.getProductAssets(n);return e.load(r,t.snippet.getZEQueue()).catch((function(e){return l.reject(e)}))}))}},{key:"getProductLoaders",value:function(e){var t=this.snippet.getParentWindow();return e.map((function(e){return"zopim_chat"===e.name?new S(e.id,t):new E(e,t)}))}},{key:"error",value:function(e){return new v("compose request failed",{key:e})}}],n&&C(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function A(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var F=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.win=t,this.doc=t.document}var t,n;return t=e,n=[{key:"getKey",value:function(){return new l((function(e,t){return t(new v("Key is missing from snippet",{},!0))}))}},{key:"getZEQueue",value:function(){return null}},{key:"getParentWindow",value:function(){return this.win}}],n&&A(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function I(e){return I="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},I(e)}function B(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function U(e,t){return U=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},U(e,t)}function D(e){return D=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},D(e)}var L=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&U(e,t)}(u,e);var t,n,r,o,i=(r=u,o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=D(r);if(o){var n=D(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"===I(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function u(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,u),i.apply(this,arguments)}return t=u,n=[{key:"getKey",value:function(){var e=this;return new l((function(t,n){var r=e.doc.zendeskHost;return r?e._isHostMapped(r)?d("https://".concat(r,"/embeddable/zendesk_host")).then((function(e){return t("web_widget/".concat(e.zendesk_host))})).catch((function(e){return n(new v(e.message))})):t("web_widget/".concat(r)):n(Error("Zendesk host is not defined"))}))}},{key:"getZEQueue",value:function(){return this.doc.zEQueue}},{key:"getParentWindow",value:function(){return this.win.parent}},{key:"_isHostMapped",value:function(e){return-1===e.indexOf(".zendesk.com")&&-1===e.indexOf(".zendesk-staging.com")}}],n&&B(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),u}(F);function Q(e){return Q="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Q(e)}function K(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function M(e,t){return M=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},M(e,t)}function N(e){return N=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},N(e)}var W=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&M(e,t)}(c,e);var t,n,r,o,i,u=(o=c,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=N(o);if(i){var n=N(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"===Q(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function c(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,c),u.apply(this,arguments)}return t=c,n=[{key:"getKey",value:function(){var e=this;return new l((function(t,n){var r=e._getScript(e.win.zE);if(r){var o=(0,k.parseUrlParams)(r.src);if(o&&o.key)return t(o.key)}return n(new v("Key is missing from snippet",{},!0))}))}},{key:"getZEQueue",value:function(){return this.win.zE._}},{key:"_getScript",value:function(e){return c.isSnippetPresent(this.win)||(e&&e.s?e.s:void 0)}}],r=[{key:"isSnippetPresent",value:function(e){return e.document.getElementById("ze-snippet")}}],n&&K(t.prototype,n),r&&K(t,r),Object.defineProperty(t,"prototype",{writable:!1}),c}(F);function H(e){return H="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},H(e)}function V(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function Z(e,t){return Z=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},Z(e,t)}function $(e){return $=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},$(e)}var q=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&Z(e,t)}(c,e);var t,n,r,o,i,u=(o=c,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=$(o);if(i){var n=$(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"===H(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function c(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,c),u.apply(this,arguments)}return t=c,n=[{key:"getKey",value:function(){var e=this;return new l((function(t,n){var r=(0,k.getQueryParamsString)(c.getScriptSrc(e.win));return t("zopim_chat/".concat(r))}))}}],r=[{key:"getScriptSrc",value:function(e){if(e.$zopim&&e.$zopim.s)return e.$zopim.s.src;for(var t,n=document.getElementsByTagName("script"),r=/.*zopim.(com|net|org)\//,o=0,i=n.length;o<i;o++)if(t=n[o].src||"",r.test(t))return t}},{key:"isSnippetPresent",value:function(e){return!!c.getScriptSrc(e)}}],n&&V(t.prototype,n),r&&V(t,r),Object.defineProperty(t,"prototype",{writable:!1}),c}(F);function J(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function G(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?J(Object(n),!0).forEach((function(t){X(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):J(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function X(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var Y=null,ee={autoSessionTracking:!1,enabled:!window.zESettings||void 0===window.zESettings.errorReporting||Boolean(window.zESettings.errorReporting),dsn:void 0,environment:void 0,release:"asset-composer@v59",sampleRate:1,defaultIntegrations:!1},te=function(){return new l((function(e){Y?e(Y):o.e(996).then(o.bind(o,858)).then((function(t){var n=t.BrowserClient,r=t.makeFetchTransport,o=t.defaultStackParser,i=t.Hub,u=t.Integrations,c=new n(G(G({},ee),{},{integrations:[new u.InboundFilters,new u.FunctionToString,new u.HttpContext],transport:r,stackParser:o}));Y=new i(c),e(Y)}))}))};function ne(e){return e&&e instanceof v?te().then((function(t){t.withScope((function(n){e.fingerprint&&n.setFingerprint(e.fingerprint),n.setLevel("warning"),t.captureException(e.error)})),window.console&&e.isUserError&&window.console.error(e.message)})):te().then((function(t){t.captureException(e)}))}!function(){try{if("function"!=typeof window.zE){var e=function(){var e=[],t=function(){e.push(arguments)};return t._=e,t.t=Date.now(),t}();window.zE=e,window.zEmbed=e}if(window.zEACLoaded)return;var t=function(e){return W.isSnippetPresent(e)?new W(e):e.document.zendeskHost&&e.document.zEQueue?new L(e):q.isSnippetPresent(e)?new q(e):new W(e)}(window),n=new x(t);t.getKey().then((function(e){return n.getProducts(e,!1)})).then((function(e){if(e&&e.length)return l.all(n.loadProducts(n.getProductLoaders(e),!1))})).catch((function(e){return ne(e)}))}catch(e){ne(e)}}()}()}();
\ No newline at end of file
diff --git a/src/assets/svg/discord_color.svg b/src/assets/svg/discord_color.svg
new file mode 100644
index 0000000000..9282819d66
--- /dev/null
+++ b/src/assets/svg/discord_color.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#5566E3"/>
+<path d="M16.8888 7.66076C15.9279 7.22916 14.9135 6.92296 13.8715 6.75C13.729 7.00008 13.5999 7.25738 13.485 7.52082C12.3751 7.35673 11.2464 7.35673 10.1365 7.52082C10.0215 7.25741 9.89252 7.00011 9.74999 6.75C8.70734 6.92442 7.69228 7.23135 6.73043 7.66302C4.82092 10.4348 4.30329 13.1378 4.56211 15.8023C5.68036 16.613 6.93201 17.2294 8.26264 17.625C8.56226 17.2296 8.82739 16.8102 9.0552 16.3711C8.6225 16.2126 8.20486 16.017 7.80712 15.7865C7.9118 15.7121 8.01418 15.6353 8.1131 15.5608C9.27042 16.0948 10.5336 16.3717 11.8125 16.3717C13.0914 16.3717 14.3546 16.0948 15.5119 15.5608C15.612 15.641 15.7143 15.7177 15.8179 15.7865C15.4194 16.0173 15.0009 16.2133 14.5675 16.3723C14.795 16.8111 15.0602 17.2302 15.36 17.625C16.6918 17.231 17.9444 16.6148 19.0629 15.8035C19.3666 12.7134 18.5441 10.0353 16.8888 7.66076ZM9.38304 14.1636C8.6618 14.1636 8.06594 13.5215 8.06594 12.7315C8.06594 11.9415 8.64109 11.2937 9.38074 11.2937C10.1204 11.2937 10.7116 11.9415 10.699 12.7315C10.6863 13.5215 10.1181 14.1636 9.38304 14.1636ZM14.2419 14.1636C13.5195 14.1636 12.926 13.5215 12.926 12.7315C12.926 11.9415 13.5011 11.2937 14.2419 11.2937C14.9827 11.2937 15.5694 11.9415 15.5567 12.7315C15.5441 13.5215 14.977 14.1636 14.2419 14.1636Z" fill="white"/>
+</svg>
diff --git a/src/assets/svg/email_color.svg b/src/assets/svg/email_color.svg
new file mode 100644
index 0000000000..53da6bf52b
--- /dev/null
+++ b/src/assets/svg/email_color.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.53125 8.78125V15.9688C5.53125 16.7594 6.17812 17.4062 6.96875 17.4062H17.0312C17.8219 17.4062 18.4688 16.7594 18.4688 15.9688V8.78125" fill="#AAE2F5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.53125 8.6375C5.53125 9.06875 5.74688 9.42813 6.10625 9.71563L10.4188 12.6625C11.425 13.3094 12.6469 13.3094 13.6531 12.6625L17.9656 9.7875C18.2531 9.42813 18.4688 9.06875 18.4688 8.6375C18.4688 7.91875 17.8938 7.34375 17.175 7.34375H6.825C6.10625 7.34375 5.53125 7.91875 5.53125 8.6375Z" fill="#E4F8FF"/>
+<path d="M6.375 16.75L10.375 12.75" stroke="#D7F1FA" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.375 12.75L17.375 16.75" stroke="#D7F1FA" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/svg/tele_color.svg b/src/assets/svg/tele_color.svg
new file mode 100644
index 0000000000..cbeeadf225
--- /dev/null
+++ b/src/assets/svg/tele_color.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="url(#paint0_linear_424_21620)"/>
+<path d="M8.12447 12.8764L9.54847 16.8177C9.54847 16.8177 9.72625 17.1857 9.91647 17.1857C10.1067 17.1857 12.9422 14.2364 12.9422 14.2364L16.0943 8.14746L8.17425 11.8595L8.1227 12.8764H8.12447Z" fill="#C8DAEA"/>
+<path d="M10.0107 13.8862L9.73692 16.7911C9.73692 16.7911 9.62314 17.6818 10.512 16.7911C11.4027 15.9004 12.2543 15.2142 12.2543 15.2142L10.0107 13.8862Z" fill="#A9C6D8"/>
+<path d="M8.14934 13.017L5.22134 12.0624C5.22134 12.0624 4.87112 11.9201 4.9849 11.5984C5.00801 11.5326 5.05423 11.4757 5.19468 11.3779C5.84356 10.9264 17.2053 6.84103 17.2053 6.84103C17.2053 6.84103 17.5253 6.73258 17.7156 6.80547C17.8027 6.83747 17.8578 6.8748 17.904 7.01169C17.9218 7.06146 17.9307 7.16635 17.9289 7.26947C17.9289 7.34413 17.9182 7.41524 17.9111 7.52369C17.8418 8.64013 15.7707 16.9726 15.7707 16.9726C15.7707 16.9726 15.6462 17.4597 15.2036 17.4775C15.0418 17.4828 14.8445 17.4508 14.6098 17.2481C13.7387 16.4979 10.7271 14.4748 10.0622 14.0304C10.0249 14.0055 10.0142 13.9735 10.0071 13.9415C9.99823 13.8952 10.048 13.8366 10.048 13.8366C10.048 13.8366 15.2907 9.17702 15.4293 8.68813C15.44 8.6508 15.3991 8.63124 15.344 8.64724C14.9956 8.77524 8.96001 12.5868 8.29334 13.0081C8.25423 13.033 8.14579 13.017 8.14579 13.017H8.14934Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_424_21620" x1="12" y1="24" x2="12" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1D93D2"/>
+<stop offset="1" stop-color="#38B0E3"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/SupportButton.tsx b/src/components/SupportButton.tsx
new file mode 100644
index 0000000000..34d1e98981
--- /dev/null
+++ b/src/components/SupportButton.tsx
@@ -0,0 +1,162 @@
+import { Trans } from '@lingui/macro'
+import { motion } from 'framer-motion'
+import { useState } from 'react'
+import { HelpCircle } from 'react-feather'
+import { useMedia } from 'react-use'
+import { Flex, Text } from 'rebass'
+import styled from 'styled-components'
+
+import { ReactComponent as DiscordIcon } from 'assets/svg/discord_color.svg'
+import { ReactComponent as EmailIcon } from 'assets/svg/email_color.svg'
+import { ReactComponent as TeleIcon } from 'assets/svg/tele_color.svg'
+import useTheme from 'hooks/useTheme'
+import { ExternalLink, MEDIA_WIDTHS } from 'theme'
+
+const SubMenu = styled(motion.div)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translateY(-100%) !important;
+  padding-bottom: 10px;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    right: -10px;
+  `}
+`
+const SubMenuBackground = styled.div`
+  border-radius: 12px;
+  position: absolute;
+  top: -10px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  z-index: -1;
+`
+
+const SubMenuContent = styled(Flex)`
+  background: ${({ theme }) => theme.tableHeader};
+  padding: 12px 24px;
+  border-radius: 12px;
+  margin-bottom: -10px;
+
+  :after {
+    bottom: 100%;
+    right: 20px;
+    top: calc(100% - 10px);
+    border: solid transparent;
+    content: '';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-bottom-color: ${({ theme }) => theme.tableHeader};
+    border-width: 10px;
+    margin-left: -10px;
+    border-top-color: ${({ theme }) => theme.tableHeader};
+    border-bottom-color: transparent;
+    border-width: 10px;
+    margin-left: -10px;
+  }
+`
+
+const Wrapper = styled(motion.div)`
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 1;
+
+  ${({ theme }) => theme.mediaWidth.upToLarge`
+    bottom: 75px;
+  `};
+`
+
+export default function SupportButton() {
+  const [isHover, setIsHover] = useState(false)
+  const theme = useTheme()
+  const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
+
+  const subMenuAnimate = {
+    enter: {
+      opacity: 1,
+      rotateX: 0,
+      transition: {
+        duration: 0.3,
+      },
+      display: 'block',
+    },
+    exit: {
+      opacity: 0,
+      rotateX: -15,
+      transition: {
+        duration: 0.3,
+        delay: 0.2,
+      },
+      transitionEnd: {
+        display: 'none',
+      },
+    },
+  }
+
+  if (window.location.href.includes('/partner-swap')) return null
+
+  return (
+    <Wrapper onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
+      <Flex
+        backgroundColor={theme.primary}
+        alignItems="center"
+        justifyContent="center"
+        sx={{
+          height: '36px',
+          width: upToSmall ? '36px' : 'max-content',
+          padding: upToSmall ? 0 : '0 12px',
+          borderRadius: '999px',
+          color: theme.textReverse,
+          fontSize: '14px',
+          fontWeight: '500',
+          cursor: 'pointer',
+        }}
+      >
+        <HelpCircle size={18} />
+        {!upToSmall && (
+          <Text marginLeft="0.5rem">
+            <Trans>Support</Trans>
+          </Text>
+        )}
+      </Flex>
+
+      <SubMenu initial="exit" animate={isHover ? 'enter' : 'exit'} variants={subMenuAnimate}>
+        <SubMenuContent flexDirection="column" sx={{ gap: '1rem' }}>
+          <ExternalLink
+            href="https://discord.com/channels/608934314960224276/1192426056183972010"
+            style={{ textDecoration: 'none' }}
+          >
+            <Flex alignItems="center" sx={{ gap: '6px' }}>
+              <DiscordIcon />
+              <Text fontSize="14px" fontWeight="500" color={theme.text}>
+                Discord
+              </Text>
+            </Flex>
+          </ExternalLink>
+          <ExternalLink href="https://t.me/kybernetwork" style={{ textDecoration: 'none' }}>
+            <Flex alignItems="center" sx={{ gap: '6px' }}>
+              <TeleIcon />
+              <Text fontSize="14px" fontWeight="500" color={theme.text}>
+                Telegram
+              </Text>
+            </Flex>
+          </ExternalLink>
+          <a href="mailto:support@kyberswap.com">
+            <Flex alignItems="center" sx={{ gap: '6px' }}>
+              <EmailIcon />
+              <Text fontSize="14px" fontWeight="500" color={theme.text}>
+                Email Us
+              </Text>
+            </Flex>
+          </a>
+        </SubMenuContent>
+        <SubMenuBackground />
+      </SubMenu>
+    </Wrapper>
+  )
+}
diff --git a/src/components/SwapForm/hooks/useGetFeeConfig.tsx b/src/components/SwapForm/hooks/useGetFeeConfig.tsx
index ec7f49f30f..44db45837f 100644
--- a/src/components/SwapForm/hooks/useGetFeeConfig.tsx
+++ b/src/components/SwapForm/hooks/useGetFeeConfig.tsx
@@ -31,17 +31,24 @@ const useGetFeeConfig = () => {
   const native = NativeCurrencies[expectedChainId as ChainId]
 
   const inputCurrency =
-    searchParams.get('inputCurrency')?.toLowerCase() === native.symbol
+    searchParams.get('inputCurrency')?.toLowerCase() === native.symbol?.toLowerCase()
       ? native.wrapped.address.toLowerCase()
       : searchParams.get('inputCurrency')?.toLowerCase()
 
-  const chargeFeeBy =
-    chargeFeeByFromParam ||
-    (preferredFeeTokens.length
-      ? preferredFeeTokens.includes(inputCurrency)
-        ? ChargeFeeBy.CURRENCY_IN
-        : ChargeFeeBy.CURRENCY_OUT
-      : ChargeFeeBy.NONE)
+  const outputCurrency =
+    searchParams.get('outputCurrency')?.toLowerCase() === native.symbol?.toLowerCase()
+      ? native.wrapped.address.toLowerCase()
+      : searchParams.get('outputCurrency')?.toLowerCase()
+
+  let chargeFeeBy = ChargeFeeBy.NONE
+
+  if (preferredFeeTokens?.includes(inputCurrency)) {
+    chargeFeeBy = ChargeFeeBy.CURRENCY_IN
+  } else if (preferredFeeTokens?.includes(outputCurrency)) {
+    chargeFeeBy = ChargeFeeBy.CURRENCY_OUT
+  } else {
+    chargeFeeBy = chargeFeeByFromParam
+  }
 
   const enableTip = convertStringToBoolean(searchParams.get('enableTip') || '')
   const isInBps = searchParams.get('isInBps') || ''
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index e899335a0c..4d4c2c8be9 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -16,6 +16,7 @@ import Loader from 'components/LocalLoader'
 import ModalsGlobal from 'components/ModalsGlobal'
 import ProtectedRoute from 'components/ProtectedRoute'
 import Snowfall from 'components/Snowflake/Snowfall'
+import SupportButton from 'components/SupportButton'
 import Web3ReactManager from 'components/Web3ReactManager'
 import { APP_PATHS, CHAINS_SUPPORT_CROSS_CHAIN } from 'constants/index'
 import { CLASSIC_NOT_SUPPORTED, ELASTIC_NOT_SUPPORTED, NETWORKS_INFO, SUPPORTED_NETWORKS } from 'constants/networks'
@@ -243,6 +244,7 @@ export default function App() {
         <ModalsGlobal />
         {!isPartnerSwap && <TopBanner />}
         <HeaderWrapper>
+          <SupportButton />
           <Header />
         </HeaderWrapper>
         <Suspense fallback={<Loader />}>