Dark Mode : Gas fee (#14005)

app/images/curve-high.svg

@@ -1 +1 @@
-<svg width="162" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill="#fff" d="M.813.082h161v31h-161z"/><path d="M117.469 8.638h1.03l2.39 5.65 2.4-5.65h1.01l-3.02 7.1h-.78l-3.03-7.1ZM126.795 15.838c-.386 0-.74-.067-1.06-.2a2.436 2.436 0 0 1-1.35-1.37 2.91 2.91 0 0 1-.18-1.03c0-.367.064-.707.19-1.02.127-.32.304-.597.53-.83.234-.233.51-.417.83-.55.32-.133.67-.2 1.05-.2.327 0 .634.057.92.17.287.107.537.27.75.49.22.213.394.477.52.79.127.307.19.66.19 1.06v.13c0 .033-.003.077-.01.13h-4.1c.007.233.054.45.14.65.094.2.214.373.36.52.154.147.334.263.54.35.214.08.444.12.69.12.387 0 .704-.077.95-.23.254-.16.457-.373.61-.64l.68.47c-.226.367-.53.657-.91.87-.373.213-.82.32-1.34.32Zm1.51-3.13a1.56 1.56 0 0 0-.19-.55c-.086-.16-.2-.297-.34-.41a1.408 1.408 0 0 0-.46-.26 1.636 1.636 0 0 0-.54-.09 1.732 1.732 0 0 0-1.04.35 1.512 1.512 0 0 0-.38.41c-.106.16-.18.343-.22.55h3.17ZM130.406 10.738h.86v.97c.046-.16.12-.303.22-.43s.213-.233.34-.32a1.59 1.59 0 0 1 .4-.2c.146-.047.293-.07.44-.07.133 0 .263.013.39.04v.89a.782.782 0 0 0-.23-.06 1.348 1.348 0 0 0-.24-.02c-.16 0-.32.037-.48.11-.154.067-.294.17-.42.31-.12.14-.22.32-.3.54-.08.213-.12.467-.12.76v2.48h-.86v-5ZM134.438 17.828l1.09-2.35-2.19-4.74h.95l1.72 3.8 1.71-3.8h.96l-3.28 7.09h-.96ZM141.724 15.738v-7.5h.86v3.27c.173-.3.4-.52.68-.66s.583-.21.91-.21c.28 0 .537.047.77.14.233.093.43.23.59.41.167.173.297.387.39.64.093.247.14.523.14.83v3.08h-.85v-2.95c0-.42-.11-.75-.33-.99-.213-.247-.497-.37-.85-.37-.2 0-.39.04-.57.12-.173.08-.327.2-.46.36-.127.153-.23.343-.31.57-.073.227-.11.487-.11.78v2.48h-.86ZM148.053 9.398a.599.599 0 0 1-.62-.61c0-.167.06-.31.18-.43s.266-.18.44-.18c.173 0 .316.06.43.18.113.12.17.263.17.43 0 .173-.057.32-.17.44a.584.584 0 0 1-.43.17Zm-.44 1.34h.86v5h-.86v-5ZM152.283 14.928c.247 0 .473-.043.68-.13.213-.087.393-.207.54-.36a1.7 1.7 0 0 0 .34-.56c.087-.213.13-.447.13-.7a1.81 1.81 0 0 0-.13-.69 1.573 1.573 0 0 0-.34-.56 1.54 1.54 0 0 0-.54-.36 1.632 1.632 0 0 0-.68-.14c-.253 0-.483.047-.69.14a1.554 1.554 0 0 0-.53.36 1.7 1.7 0 0 0-.35.56c-.08.213-.12.443-.12.69 0 .253.04.487.12.7.087.213.203.4.35.56.147.153.323.273.53.36.207.087.437.13.69.13Zm-.05 3c-.54 0-1.013-.1-1.42-.3-.407-.2-.717-.44-.93-.72l.6-.6c.2.253.443.457.73.61.293.153.633.23 1.02.23.213 0 .42-.033.62-.1s.377-.173.53-.32c.16-.14.287-.32.38-.54.093-.213.14-.47.14-.77v-.57a2.015 2.015 0 0 1-.72.63c-.307.167-.647.25-1.02.25-.347 0-.67-.063-.97-.19-.3-.133-.56-.313-.78-.54a2.643 2.643 0 0 1-.52-.81 2.8 2.8 0 0 1-.18-1.01c0-.353.06-.683.18-.99.127-.313.3-.583.52-.81.22-.233.48-.413.78-.54.3-.133.623-.2.97-.2.373 0 .713.083 1.02.25.307.16.547.367.72.62v-.77h.86v4.71c0 .42-.067.783-.2 1.09-.127.313-.303.57-.53.77a2.17 2.17 0 0 1-.8.46c-.307.107-.64.16-1 .16ZM156.382 15.738v-7.5h.86v3.27c.174-.3.4-.52.68-.66s.584-.21.91-.21c.28 0 .537.047.77.14.234.093.43.23.59.41.167.173.297.387.39.64.094.247.14.523.14.83v3.08h-.85v-2.95c0-.42-.11-.75-.33-.99-.213-.247-.496-.37-.85-.37-.2 0-.39.04-.57.12-.173.08-.326.2-.46.36-.126.153-.23.343-.31.57-.073.227-.11.487-.11.78v2.48h-.86Z" fill="#F66A0A"/><path opacity=".3" d="M45.774 22.738c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#037DD6"/><mask id="b" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="26" y="0" width="111" height="31"><path d="M45.774 22.605c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#EAF6FF"/></mask><g mask="url(#b)"><path fill="#F66A0A" stroke="#fff" stroke-width="2" d="M118.254-5.209h20.706v39.25h-20.706z"/></g></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.813 .082)" d="M0 0h161v31H0z"/></clipPath></defs></svg>
+<svg width="162" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill="none" d="M.813.082h161v31h-161z"/><path d="M117.469 8.638h1.03l2.39 5.65 2.4-5.65h1.01l-3.02 7.1h-.78l-3.03-7.1ZM126.795 15.838c-.386 0-.74-.067-1.06-.2a2.436 2.436 0 0 1-1.35-1.37 2.91 2.91 0 0 1-.18-1.03c0-.367.064-.707.19-1.02.127-.32.304-.597.53-.83.234-.233.51-.417.83-.55.32-.133.67-.2 1.05-.2.327 0 .634.057.92.17.287.107.537.27.75.49.22.213.394.477.52.79.127.307.19.66.19 1.06v.13c0 .033-.003.077-.01.13h-4.1c.007.233.054.45.14.65.094.2.214.373.36.52.154.147.334.263.54.35.214.08.444.12.69.12.387 0 .704-.077.95-.23.254-.16.457-.373.61-.64l.68.47c-.226.367-.53.657-.91.87-.373.213-.82.32-1.34.32Zm1.51-3.13a1.56 1.56 0 0 0-.19-.55c-.086-.16-.2-.297-.34-.41a1.408 1.408 0 0 0-.46-.26 1.636 1.636 0 0 0-.54-.09 1.732 1.732 0 0 0-1.04.35 1.512 1.512 0 0 0-.38.41c-.106.16-.18.343-.22.55h3.17ZM130.406 10.738h.86v.97c.046-.16.12-.303.22-.43s.213-.233.34-.32a1.59 1.59 0 0 1 .4-.2c.146-.047.293-.07.44-.07.133 0 .263.013.39.04v.89a.782.782 0 0 0-.23-.06 1.348 1.348 0 0 0-.24-.02c-.16 0-.32.037-.48.11-.154.067-.294.17-.42.31-.12.14-.22.32-.3.54-.08.213-.12.467-.12.76v2.48h-.86v-5ZM134.438 17.828l1.09-2.35-2.19-4.74h.95l1.72 3.8 1.71-3.8h.96l-3.28 7.09h-.96ZM141.724 15.738v-7.5h.86v3.27c.173-.3.4-.52.68-.66s.583-.21.91-.21c.28 0 .537.047.77.14.233.093.43.23.59.41.167.173.297.387.39.64.093.247.14.523.14.83v3.08h-.85v-2.95c0-.42-.11-.75-.33-.99-.213-.247-.497-.37-.85-.37-.2 0-.39.04-.57.12-.173.08-.327.2-.46.36-.127.153-.23.343-.31.57-.073.227-.11.487-.11.78v2.48h-.86ZM148.053 9.398a.599.599 0 0 1-.62-.61c0-.167.06-.31.18-.43s.266-.18.44-.18c.173 0 .316.06.43.18.113.12.17.263.17.43 0 .173-.057.32-.17.44a.584.584 0 0 1-.43.17Zm-.44 1.34h.86v5h-.86v-5ZM152.283 14.928c.247 0 .473-.043.68-.13.213-.087.393-.207.54-.36a1.7 1.7 0 0 0 .34-.56c.087-.213.13-.447.13-.7a1.81 1.81 0 0 0-.13-.69 1.573 1.573 0 0 0-.34-.56 1.54 1.54 0 0 0-.54-.36 1.632 1.632 0 0 0-.68-.14c-.253 0-.483.047-.69.14a1.554 1.554 0 0 0-.53.36 1.7 1.7 0 0 0-.35.56c-.08.213-.12.443-.12.69 0 .253.04.487.12.7.087.213.203.4.35.56.147.153.323.273.53.36.207.087.437.13.69.13Zm-.05 3c-.54 0-1.013-.1-1.42-.3-.407-.2-.717-.44-.93-.72l.6-.6c.2.253.443.457.73.61.293.153.633.23 1.02.23.213 0 .42-.033.62-.1s.377-.173.53-.32c.16-.14.287-.32.38-.54.093-.213.14-.47.14-.77v-.57a2.015 2.015 0 0 1-.72.63c-.307.167-.647.25-1.02.25-.347 0-.67-.063-.97-.19-.3-.133-.56-.313-.78-.54a2.643 2.643 0 0 1-.52-.81 2.8 2.8 0 0 1-.18-1.01c0-.353.06-.683.18-.99.127-.313.3-.583.52-.81.22-.233.48-.413.78-.54.3-.133.623-.2.97-.2.373 0 .713.083 1.02.25.307.16.547.367.72.62v-.77h.86v4.71c0 .42-.067.783-.2 1.09-.127.313-.303.57-.53.77a2.17 2.17 0 0 1-.8.46c-.307.107-.64.16-1 .16ZM156.382 15.738v-7.5h.86v3.27c.174-.3.4-.52.68-.66s.584-.21.91-.21c.28 0 .537.047.77.14.234.093.43.23.59.41.167.173.297.387.39.64.094.247.14.523.14.83v3.08h-.85v-2.95c0-.42-.11-.75-.33-.99-.213-.247-.496-.37-.85-.37-.2 0-.39.04-.57.12-.173.08-.326.2-.46.36-.126.153-.23.343-.31.57-.073.227-.11.487-.11.78v2.48h-.86Z" fill="#F66A0A"/><path opacity=".3" d="M45.774 22.738c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#037DD6"/><mask id="b" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="26" y="0" width="111" height="31"><path d="M45.774 22.605c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#EAF6FF"/></mask><g mask="url(#b)"><path fill="#F66A0A" stroke="#fff" stroke-width="2" d="M118.254-5.209h20.706v39.25h-20.706z"/></g></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.813 .082)" d="M0 0h161v31H0z"/></clipPath></defs></svg>

app/images/curve-low.svg

@@ -1 +1 @@
-<svg width="162" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill="#fff" d="M.813.082h161v31h-161z"/><path d="M26.047 8.638h.93v6.22h3.43v.88h-4.36v-7.1ZM33.46 15.838c-.38 0-.73-.067-1.05-.2a2.573 2.573 0 0 1-1.38-1.38c-.127-.32-.19-.66-.19-1.02s.063-.697.19-1.01c.133-.32.316-.597.55-.83.233-.233.51-.417.83-.55.32-.14.67-.21 1.05-.21.373 0 .72.07 1.04.21.32.133.596.317.83.55.233.233.413.51.54.83.133.313.2.65.2 1.01s-.068.7-.2 1.02a2.438 2.438 0 0 1-.54.82c-.234.233-.51.42-.83.56-.32.133-.667.2-1.04.2Zm0-.8c.26 0 .496-.047.71-.14.212-.093.392-.22.54-.38.152-.167.27-.357.35-.57.086-.22.13-.457.13-.71 0-.247-.044-.48-.13-.7-.08-.22-.198-.41-.35-.57a1.518 1.518 0 0 0-.54-.39 1.752 1.752 0 0 0-.71-.14c-.26 0-.498.047-.71.14a1.62 1.62 0 0 0-.55.39 1.73 1.73 0 0 0-.36.57c-.08.22-.12.453-.12.7 0 .253.04.49.12.71.086.213.206.403.36.57.152.16.336.287.55.38.212.093.45.14.71.14ZM40.284 12.148l-1.23 3.59h-.76l-1.7-5h.9l1.21 3.65 1.25-3.65h.66l1.25 3.65 1.21-3.65h.91l-1.7 5h-.76l-1.24-3.59Z" fill="#F66A0A"/><path opacity=".3" d="M45.774 22.738c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#037DD6"/><mask id="b" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="26" y="0" width="111" height="31"><path d="M45.774 22.605c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#EAF6FF"/></mask><g mask="url(#b)"><path fill="#F66A0A" stroke="#fff" stroke-width="2" d="M24.607 16.738h20.706v17.303H24.607z"/></g></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.813 .082)" d="M0 0h161v31H0z"/></clipPath></defs></svg>
+<svg width="162" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill="none" d="M.813.082h161v31h-161z"/><path d="M26.047 8.638h.93v6.22h3.43v.88h-4.36v-7.1ZM33.46 15.838c-.38 0-.73-.067-1.05-.2a2.573 2.573 0 0 1-1.38-1.38c-.127-.32-.19-.66-.19-1.02s.063-.697.19-1.01c.133-.32.316-.597.55-.83.233-.233.51-.417.83-.55.32-.14.67-.21 1.05-.21.373 0 .72.07 1.04.21.32.133.596.317.83.55.233.233.413.51.54.83.133.313.2.65.2 1.01s-.068.7-.2 1.02a2.438 2.438 0 0 1-.54.82c-.234.233-.51.42-.83.56-.32.133-.667.2-1.04.2Zm0-.8c.26 0 .496-.047.71-.14.212-.093.392-.22.54-.38.152-.167.27-.357.35-.57.086-.22.13-.457.13-.71 0-.247-.044-.48-.13-.7-.08-.22-.198-.41-.35-.57a1.518 1.518 0 0 0-.54-.39 1.752 1.752 0 0 0-.71-.14c-.26 0-.498.047-.71.14a1.62 1.62 0 0 0-.55.39 1.73 1.73 0 0 0-.36.57c-.08.22-.12.453-.12.7 0 .253.04.49.12.71.086.213.206.403.36.57.152.16.336.287.55.38.212.093.45.14.71.14ZM40.284 12.148l-1.23 3.59h-.76l-1.7-5h.9l1.21 3.65 1.25-3.65h.66l1.25 3.65 1.21-3.65h.91l-1.7 5h-.76l-1.24-3.59Z" fill="#F66A0A"/><path opacity=".3" d="M45.774 22.738c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#037DD6"/><mask id="b" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="26" y="0" width="111" height="31"><path d="M45.774 22.605c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#EAF6FF"/></mask><g mask="url(#b)"><path fill="#F66A0A" stroke="#fff" stroke-width="2" d="M24.607 16.738h20.706v17.303H24.607z"/></g></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.813 .082)" d="M0 0h161v31H0z"/></clipPath></defs></svg>

app/images/curve-medium.svg

@@ -1 +1 @@
-<svg width="162" height="47" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M.813.082h161v46h-161z"/><path d="m64.268 1.505 2.63 3.54 2.65-3.54h.84v7.1h-.92v-5.52l-2.56 3.44-2.56-3.44v5.52h-.93v-7.1h.85ZM74.257 8.705a2.73 2.73 0 0 1-1.06-.2 2.432 2.432 0 0 1-1.35-1.37 2.91 2.91 0 0 1-.18-1.03c0-.367.064-.707.19-1.02.127-.32.304-.596.53-.83.234-.233.51-.417.83-.55.32-.133.67-.2 1.05-.2.327 0 .634.057.92.17.287.107.537.27.75.49.22.213.394.477.52.79.127.307.19.66.19 1.06v.13c0 .034-.003.077-.01.13h-4.1c.007.233.054.45.14.65.094.2.214.373.36.52.154.147.334.263.54.35.214.08.444.12.69.12.387 0 .704-.077.95-.23.254-.16.457-.373.61-.64l.68.47c-.226.367-.53.657-.91.87-.373.213-.82.32-1.34.32Zm1.51-3.13a1.58 1.58 0 0 0-.19-.55c-.086-.16-.2-.296-.34-.41a1.42 1.42 0 0 0-.46-.26 1.639 1.639 0 0 0-.54-.09 1.728 1.728 0 0 0-1.04.35 1.498 1.498 0 0 0-.38.41 1.49 1.49 0 0 0-.22.55h3.17ZM79.928 8.705c-.353 0-.68-.066-.98-.2a2.57 2.57 0 0 1-.77-.56 2.732 2.732 0 0 1-.52-.83 2.8 2.8 0 0 1-.18-1.01c0-.36.06-.697.18-1.01.127-.313.3-.587.52-.82a2.36 2.36 0 0 1 1.75-.77c.38 0 .727.087 1.04.26.313.167.553.37.72.61v-3.27h.86v7.5h-.86v-.77c-.167.24-.407.447-.72.62a2.18 2.18 0 0 1-1.04.25Zm.13-.79a1.606 1.606 0 0 0 1.22-.52c.153-.167.27-.36.35-.58.087-.22.13-.457.13-.71 0-.253-.043-.49-.13-.71-.08-.22-.197-.41-.35-.57a1.542 1.542 0 0 0-.53-.39 1.657 1.657 0 0 0-.69-.14c-.253 0-.487.047-.7.14a1.65 1.65 0 0 0-.54.39c-.147.16-.263.35-.35.57-.08.22-.12.457-.12.71 0 .253.04.49.12.71.087.22.203.413.35.58.153.16.333.287.54.38.213.093.447.14.7.14ZM84.607 2.265a.599.599 0 0 1-.62-.61c0-.167.06-.31.18-.43s.266-.18.44-.18c.173 0 .317.06.43.18.113.12.17.263.17.43 0 .173-.057.32-.17.44a.583.583 0 0 1-.43.17Zm-.44 1.34h.86v5h-.86v-5ZM88.427 8.705c-.273 0-.523-.046-.75-.14-.227-.1-.42-.236-.58-.41a1.916 1.916 0 0 1-.38-.63 2.614 2.614 0 0 1-.13-.85v-3.07h.86v2.94c0 .42.1.753.3 1 .207.247.483.37.83.37.193 0 .373-.04.54-.12.173-.087.32-.207.44-.36.127-.16.227-.353.3-.58.073-.227.11-.483.11-.77v-2.48h.86v5h-.86v-.77a1.654 1.654 0 0 1-.66.66c-.267.14-.56.21-.88.21ZM98.888 5.665c0-.407-.083-.737-.25-.99-.166-.253-.413-.38-.74-.38-.4 0-.727.157-.98.47-.247.314-.377.74-.39 1.28v2.56h-.86v-2.94c0-.407-.083-.737-.25-.99-.16-.253-.403-.38-.73-.38-.407 0-.74.163-1 .49-.253.327-.38.774-.38 1.34v2.48h-.86v-5h.86v.77a1.63 1.63 0 0 1 .61-.63c.26-.16.56-.24.9-.24.374 0 .69.097.95.29.267.187.463.447.59.78.133-.327.343-.587.63-.78.293-.193.63-.29 1.01-.29.273 0 .517.05.73.15.22.094.404.23.55.41.153.173.27.387.35.64.08.247.12.524.12.83v3.07h-.86v-2.94Z" fill="#037DD6"/><path opacity=".3" d="M45.774 37.738c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#037DD6"/><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="26" y="15" width="111" height="31"><path d="M45.774 37.605c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#EAF6FF"/></mask><g mask="url(#a)"><path fill="#037DD6" stroke="#fff" stroke-width="2" d="M62.313 9.791h37.343v39.25H62.313z"/></g></svg>
+<svg width="162" height="47" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M.813.082h161v46h-161z"/><path d="m64.268 1.505 2.63 3.54 2.65-3.54h.84v7.1h-.92v-5.52l-2.56 3.44-2.56-3.44v5.52h-.93v-7.1h.85ZM74.257 8.705a2.73 2.73 0 0 1-1.06-.2 2.432 2.432 0 0 1-1.35-1.37 2.91 2.91 0 0 1-.18-1.03c0-.367.064-.707.19-1.02.127-.32.304-.596.53-.83.234-.233.51-.417.83-.55.32-.133.67-.2 1.05-.2.327 0 .634.057.92.17.287.107.537.27.75.49.22.213.394.477.52.79.127.307.19.66.19 1.06v.13c0 .034-.003.077-.01.13h-4.1c.007.233.054.45.14.65.094.2.214.373.36.52.154.147.334.263.54.35.214.08.444.12.69.12.387 0 .704-.077.95-.23.254-.16.457-.373.61-.64l.68.47c-.226.367-.53.657-.91.87-.373.213-.82.32-1.34.32Zm1.51-3.13a1.58 1.58 0 0 0-.19-.55c-.086-.16-.2-.296-.34-.41a1.42 1.42 0 0 0-.46-.26 1.639 1.639 0 0 0-.54-.09 1.728 1.728 0 0 0-1.04.35 1.498 1.498 0 0 0-.38.41 1.49 1.49 0 0 0-.22.55h3.17ZM79.928 8.705c-.353 0-.68-.066-.98-.2a2.57 2.57 0 0 1-.77-.56 2.732 2.732 0 0 1-.52-.83 2.8 2.8 0 0 1-.18-1.01c0-.36.06-.697.18-1.01.127-.313.3-.587.52-.82a2.36 2.36 0 0 1 1.75-.77c.38 0 .727.087 1.04.26.313.167.553.37.72.61v-3.27h.86v7.5h-.86v-.77c-.167.24-.407.447-.72.62a2.18 2.18 0 0 1-1.04.25Zm.13-.79a1.606 1.606 0 0 0 1.22-.52c.153-.167.27-.36.35-.58.087-.22.13-.457.13-.71 0-.253-.043-.49-.13-.71-.08-.22-.197-.41-.35-.57a1.542 1.542 0 0 0-.53-.39 1.657 1.657 0 0 0-.69-.14c-.253 0-.487.047-.7.14a1.65 1.65 0 0 0-.54.39c-.147.16-.263.35-.35.57-.08.22-.12.457-.12.71 0 .253.04.49.12.71.087.22.203.413.35.58.153.16.333.287.54.38.213.093.447.14.7.14ZM84.607 2.265a.599.599 0 0 1-.62-.61c0-.167.06-.31.18-.43s.266-.18.44-.18c.173 0 .317.06.43.18.113.12.17.263.17.43 0 .173-.057.32-.17.44a.583.583 0 0 1-.43.17Zm-.44 1.34h.86v5h-.86v-5ZM88.427 8.705c-.273 0-.523-.046-.75-.14-.227-.1-.42-.236-.58-.41a1.916 1.916 0 0 1-.38-.63 2.614 2.614 0 0 1-.13-.85v-3.07h.86v2.94c0 .42.1.753.3 1 .207.247.483.37.83.37.193 0 .373-.04.54-.12.173-.087.32-.207.44-.36.127-.16.227-.353.3-.58.073-.227.11-.483.11-.77v-2.48h.86v5h-.86v-.77a1.654 1.654 0 0 1-.66.66c-.267.14-.56.21-.88.21ZM98.888 5.665c0-.407-.083-.737-.25-.99-.166-.253-.413-.38-.74-.38-.4 0-.727.157-.98.47-.247.314-.377.74-.39 1.28v2.56h-.86v-2.94c0-.407-.083-.737-.25-.99-.16-.253-.403-.38-.73-.38-.407 0-.74.163-1 .49-.253.327-.38.774-.38 1.34v2.48h-.86v-5h.86v.77a1.63 1.63 0 0 1 .61-.63c.26-.16.56-.24.9-.24.374 0 .69.097.95.29.267.187.463.447.59.78.133-.327.343-.587.63-.78.293-.193.63-.29 1.01-.29.273 0 .517.05.73.15.22.094.404.23.55.41.153.173.27.387.35.64.08.247.12.524.12.83v3.07h-.86v-2.94Z" fill="#037DD6"/><path opacity=".3" d="M45.774 37.738c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#037DD6"/><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="26" y="15" width="111" height="31"><path d="M45.774 37.605c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#EAF6FF"/></mask><g mask="url(#a)"><path fill="#037DD6" stroke="#fff" stroke-width="2" d="M62.313 9.791h37.343v39.25H62.313z"/></g></svg>

ui/components/app/edit-gas-display-education/index.scss

@@ -1,5 +1,5 @@
 .edit-gas-display-education {
   a {
-    color: var(--primary-1);
+    color: var(--color-primary-default);
   }
 }

ui/components/app/edit-gas-display/index.scss

@@ -28,8 +28,8 @@
   button.edit-gas-display__dapp-acknowledgement-button {
     margin: 40px auto 0 auto;
     display: block;
-    color: var(--secondary-1);
+    color: var(--color-secondary-default);
-    border: 1px solid var(--secondary-1);
+    border: 1px solid var(--color-secondary-default);
     text-transform: unset;
     width: auto;
     background: transparent;
@@ -43,7 +43,7 @@
     display: block;
     margin: 0 auto;
     background: transparent;
-    color: var(--primary-1);
+    color: var(--color-primary-default);
     font-weight: bold;
   }
 
@@ -58,7 +58,7 @@
       display: block;
       margin: 0 auto;
       background: transparent;
-      color: var(--primary-1);
+      color: var(--color-primary-default);
     }
   }
 

ui/components/app/edit-gas-fee-button/index.scss

@@ -8,7 +8,7 @@
 
     display: flex;
     align-items: baseline;
-    color: var(--primary-1);
+    color: var(--color-primary-default);
     background: transparent;
     border: 0;
     padding-inline-end: 0;
@@ -16,7 +16,7 @@
   }
 
   i {
-    color: var(--primary-1);
+    color: var(--color-primary-default);
     margin-right: 2px;
   }
 
@@ -37,11 +37,11 @@
 
   &__tooltip {
     p {
-      color: var(--Grey-500);
+      color: var(--color-text-alternative);
     }
 
     b {
-      color: var(--neutral-black);
+      color: var(--color-text-default);
       display: inline-block;
       min-width: 60%;
     }

ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss

@@ -12,7 +12,7 @@
   width: 100%;
 
   &:hover:not([disabled]) {
-    background-color: var(--primary-2);
+    background-color: var(--color-primary-muted);
   }
 
   &--selected {
@@ -83,6 +83,6 @@
 
   &__time-estimate-medium,
   &__time-estimate-high {
-    color: var(--success-3);
+    color: var(--color-success-muted);
   }
 }

ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss

@@ -17,7 +17,7 @@
     }
 
     &__dialog {
-      background-color: var(--Orange-500);
+      background-color: var(--color-secondary-default);
       border-radius: 30px;
       margin: 4px 0;
       text-align: center;

ui/components/app/edit-gas-fee-popover/index.scss

@@ -2,7 +2,7 @@
   height: 500px;
 
   &__wrapper {
-    border-top: 1px solid var(--ui-grey);
+    border-top: 1px solid var(--color-border-default);
     height: 100%;
   }
 
@@ -19,7 +19,7 @@
     }
 
     &__header {
-      color: var(--ui-4);
+      color: var(--color-text-alternative);
       font-size: 10px;
       font-weight: 700;
       margin: 0 12px;
@@ -41,7 +41,7 @@
     }
 
     &__separator {
-      border-top: 1px solid var(--ui-grey);
+      border-top: 1px solid var(--color-border-default);
       margin: 8px 12px;
     }
   }
@@ -51,6 +51,6 @@
   }
 
   &__know-more a {
-    color: var(--primary-1);
+    color: var(--color-primary-default);
   }
 }

ui/components/app/edit-gas-fee-popover/network-statistics/index.scss

@@ -2,8 +2,8 @@
   margin: 24px 12px 12px;
 
   &__info {
-    border-top: 1px solid var(--ui-2);
+    border-top: 1px solid var(--color-border-muted);
-    border-bottom: 1px solid var(--ui-2);
+    border-bottom: 1px solid var(--color-border-muted);
     height: 56px;
     display: flex;
     align-items: center;
@@ -18,7 +18,7 @@
     flex: 1;
 
     &:not(:last-child) {
-      border-right: 1px solid var(--ui-2);
+      border-right: 1px solid var(--color-border-muted);
     }
   }
 

ui/components/app/gas-customization/advanced-gas-inputs/index.scss

@@ -23,12 +23,12 @@
       }
 
       .fa-info-circle {
-        color: var(--silver);
+        color: var(--color-icon-default);
         cursor: pointer;
       }
 
       .fa-info-circle:hover {
-        color: var(--mid-gray);
+        color: var(--color-icon-muted);
       }
     }
 
@@ -53,9 +53,9 @@
       @include Paragraph;
 
       direction: ltr;
-      border: 1px solid var(--dusty-gray);
+      border: 1px solid var(--color-border-muted);
       border-radius: 4px;
-      color: var(--mid-gray);
+      color: var(--color-text-alternative);
       height: 24px;
       width: 100%;
       padding-left: 8px;
@@ -64,11 +64,11 @@
     }
 
     &__input--error {
-      border: 1px solid var(--red);
+      border: 1px solid var(--color-error-default);
     }
 
     &__input--warning {
-      border: 1px solid var(--orange);
+      border: 1px solid var(--color-warning-default);
     }
 
     &__input-arrows {
@@ -98,12 +98,12 @@
       }
 
       &__i-wrap:hover {
-        background: #4eade7;
+        background: var(--color-primary-default);
-        color: var(--white);
+        color: var(--color-primary-inverse);
       }
 
       i:hover {
-        background: #4eade7;
+        background: var(--color-primary-muted);
       }
 
       i {
@@ -116,11 +116,11 @@
     }
 
     &__input-arrows--error {
-      border: 1px solid var(--red);
+      border: 1px solid var(--color-error-default);
     }
 
     &__input-arrows--warning {
-      border: 1px solid var(--orange);
+      border: 1px solid var(--color-warning-default);
     }
 
     input[type="number"] {
@@ -145,7 +145,7 @@
       position: absolute;
       top: 8px;
       right: 10px;
-      color: var(--dusty-gray);
+      color: var(--color-text-muted);
     }
 
     &__custom-text {

ui/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss

@@ -10,7 +10,7 @@
   &__transaction-data-summary {
     display: flex;
     flex-flow: column;
-    color: var(--mid-gray);
+    color: var(--color-text-alternative);
     margin-top: 12px;
     padding-left: 18px;
     padding-right: 18px;
@@ -22,7 +22,7 @@
       display: flex;
       flex-flow: row;
       justify-content: space-between;
-      color: #888ea3;
+      color: var(--color-text-muted);
     }
 
     &__container {
@@ -34,7 +34,7 @@
     &__fee {
       @include Paragraph;
 
-      color: #313a5e;
+      color: var(--color-text-alternative);
     }
 
     &__time-remaining {
@@ -42,7 +42,7 @@
 
       /*rtl:ignore*/
       direction: ltr;
-      color: #313a5e;
+      color: var(--color-text-alternative);
 
       .minutes-num,
       .seconds-num {
@@ -65,15 +65,15 @@
   &__fee-chart {
     margin-top: 8px;
     height: 265px;
-    background: #f8f9fb;
+    background: var(--color-background-alternative);
-    border-bottom: 1px solid #d2d8dd;
+    border-bottom: 1px solid var(--color-border-muted);
-    border-top: 1px solid #d2d8dd;
+    border-top: 1px solid var(--color-border-muted);
     position: relative;
 
     &__title {
       @include H7;
 
-      color: #313a5e;
+      color: var(--color-text-alternative);
       margin-left: 22px;
     }
 
@@ -87,7 +87,7 @@
       padding-left: 20px;
       padding-right: 19px;
       width: 100%;
-      color: #888ea3;
+      color: var(--color-text-alternative);
     }
 
     .loading-overlay {

ui/components/app/gas-customization/gas-modal-page-container/basic-tab-content/index.scss

@@ -11,14 +11,14 @@
     @include Paragraph;
 
     margin-top: 19px;
-    color: var(--black);
+    color: var(--color-text-default);
   }
 
   &__blurb {
     @include H7;
 
     width: 95%;
-    color: var(--black);
+    color: var(--color-text-default);
     margin-top: 5px;
     margin-bottom: 15px;
   }
@@ -27,7 +27,7 @@
     @include H7;
 
     width: 95%;
-    color: #979797;
+    color: var(--color-text-alternative);
     margin-top: 15px;
   }
 }

ui/components/app/gas-customization/gas-modal-page-container/index.scss

@@ -33,7 +33,7 @@
     &__header-close-text {
       @include H6;
 
-      color: #4eade7;
+      color: var(--color-primary-default);
       position: absolute;
       font-size: 0.75rem;
       top: 8px;
@@ -46,7 +46,7 @@
     &__title {
       @include H5;
 
-      color: var(--black);
+      color: var(--color-text-default);
       font-weight: 500;
       display: flex;
       justify-content: center;
@@ -80,7 +80,7 @@
       }
 
       &.tab--active button {
-        color: var(--primary-blue);
+        color: var(--color-primary-default);
       }
     }
   }
@@ -101,11 +101,11 @@
     @include H7;
 
     width: 100%;
-    background: var(--polar);
+    background: var(--color-background-alternative);
     padding: 15px 21px;
     display: flex;
     flex-flow: column;
-    color: var(--scorpion);
+    color: var(--color-text-alternative);
 
     &__send-info,
     &__transaction-info,
@@ -153,8 +153,8 @@
   }
 
   &__info-row--fade {
-    background: white;
+    background: var(--color-background-default);
-    color: var(--dusty-gray);
+    color: var(--color-text-muted);
-    border-top: 1px solid var(--mischka);
+    border-top: 1px solid var(--color-border-muted);
   }
 }

ui/components/app/gas-customization/gas-price-button-group/index.scss

@@ -15,7 +15,7 @@
 
   &__time-estimate {
     margin-top: 5.5px;
-    color: var(--silver-chalice);
+    color: var(--color-text-alternative);
     height: 15.4px;
   }
 
@@ -34,9 +34,9 @@
     display: flex;
     padding-top: 17px;
     border-radius: 4px;
-    border-color: var(--spindle);
+    border-color: var(--color-primary-muted);
-    background: var(--white);
+    background: var(--color-background-default);
-    color: var(--scorpion);
+    color: var(--color-text-alternative);
 
     div {
       display: flex;
@@ -52,13 +52,13 @@
   }
 
   .button-group__button--active {
-    border-color: var(--primary-blue);
+    border-color: var(--color-primary-default);
-    color: var(--scorpion);
+    color: var(--color-text-alternative);
 
     i {
       &:last-child {
         display: flex;
-        color: var(--primary-blue);
+        color: var(--color-primary-default);
         margin-top: 8px;
       }
     }
@@ -114,8 +114,8 @@
 
   .button-group__button,
   .button-group__button--active {
-    background: white;
+    background: var(--color-background-default);
-    color: var(--scorpion);
+    color: var(--color-text-alternative);
     padding: 4px;
 
     div {
@@ -133,13 +133,13 @@
   }
 
   .button-group__button--active {
-    color: var(--white);
+    color: var(--color-background-default);
-    background: var(--dodger-blue);
+    background: var(--color-primary-muted);
 
     i {
       &:last-child {
         display: flex;
-        color: var(--primary-blue);
+        color: var(--color-primary-default);
         margin-top: 10px;
       }
     }
@@ -185,14 +185,14 @@
 
     font-weight: 500;
     margin-top: 4px;
-    color: var(--black);
+    color: var(--color-text-default);
   }
 
   .button-group__button,
   .button-group__button--active {
     height: 78px;
-    background: white;
+    background: var(--color-background-default);
-    color: #2a4055;
+    color: var(--color-text-default);
     width: 108px;
     height: 97px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.151579);
@@ -221,11 +221,11 @@
   }
 
   .button-group__button--active {
-    background: #f7fcff;
+    background: var(--color-background-alternative);
-    border-color: #2c8bdc;
+    border-color: var(--color-primary-default);
 
     &:first-child {
-      border-color: #2c8bdc;
+      border-color: var(--color-primary-default);
     }
 
     .button-check-wrapper {
@@ -235,7 +235,7 @@
       position: absolute;
       top: -11px;
       right: -10px;
-      background: #d5ecfa;
+      background: var(--color-background-alternative);
       display: flex;
       flex-flow: row;
       justify-content: center;
@@ -244,7 +244,7 @@
 
     i {
       display: flex;
-      color: var(--primary-blue);
+      color: var(--color-primary-default);
       font-weight: 900;
     }
   }

ui/components/app/gas-customization/gas-slider/index.scss

@@ -16,7 +16,7 @@
     -webkit-appearance: none !important;
     height: 34px;
     width: 34px;
-    background-color: var(--primary-blue);
+    background-color: var(--color-primary-default);
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
     border-radius: 50%;
     position: relative;
@@ -26,7 +26,7 @@
   &__bar {
     height: 6px;
     width: 322px;
-    background: var(--alto);
+    background: var(--color-background-alternative);
     display: flex;
     justify-content: space-between;
     position: absolute;
@@ -41,7 +41,7 @@
     margin-left: 102px;
     width: 322px;
     z-index: 1;
-    background-color: var(--blizzard-blue);
+    background-color: var(--color-primary-muted);
   }
 
   &__labels {
@@ -50,6 +50,6 @@
     display: flex;
     justify-content: space-between;
     margin-top: -6px;
-    color: var(--mid-gray);
+    color: var(--color-text-alternative);
   }
 }

ui/components/app/gas-details-item/gas-details-item-title/index.scss

@@ -3,7 +3,7 @@
     font-weight: 400;
     font-style: italic;
     font-size: 12px;
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
     line-height: inherit;
   }
 }

ui/components/app/gas-details-item/index.scss

@@ -1,6 +1,6 @@
 .gas-details-item {
   &__gas-fee-warning {
-    color: var(--secondary-1);
+    color: var(--color-secondary-default); //@TODO: revisit when warning color tokens are revisited
   }
 
   &__currency-container,

ui/components/app/gas-timing/index.scss

@@ -1,26 +1,26 @@
 .typography.gas-timing {
-  color: var(--ui-4);
+  color: var(--color-text-alternative);
 
   &--positive {
-    color: var(--success-3);
+    color: var(--color-success-default);
   }
 
   &--positive-V2 {
-    color: var(--success-3);
+    color: var(--color-success-default);
     font-weight: bold;
   }
 
   &--warning {
-    color: var(--alert-3);
+    color: var(--color-warning-default);
   }
 
   &--negative {
-    color: var(--error-1);
+    color: var(--color-error-default);
     font-weight: bold;
   }
 
   &--negative-V2 {
-    color: var(--secondary-1);
+    color: var(--color-secondary-default);
     font-weight: bold;
   }
 
@@ -29,7 +29,7 @@
     margin-inline-start: 4px;
 
     path {
-      fill: var(--error-1);
+      fill: var(--color-error-default);
     }
   }
 }

ui/components/ui/info-tooltip/index.scss

@@ -13,29 +13,29 @@
 
 .tippy-popper[x-placement^=top] .tippy-tooltip-info-theme [x-arrow],
 .tippy-popper[x-placement^=top] .tippy-tooltip-wideInfo-theme [x-arrow] {
-  border-top-color: var(--white);
+  border-top-color: var(--color-background-default);
 }
 
 .tippy-popper[x-placement^=right] .tippy-tooltip-info-theme [x-arrow],
 .tippy-popper[x-placement^=right] .tippy-tooltip-wideInfo-theme [x-arrow] {
-  border-right-color: var(--white);
+  border-right-color: var(--color-background-default);
 }
 
 .tippy-popper[x-placement^=left] .tippy-tooltip-info-theme [x-arrow],
 .tippy-popper[x-placement^=left] .tippy-tooltip-wideInfo-theme [x-arrow] {
-  border-left-color: var(--white);
+  border-left-color: var(--color-background-default);
 }
 
 .tippy-popper[x-placement^=bottom] .tippy-tooltip-info-theme [x-arrow],
 .tippy-popper[x-placement^=bottom] .tippy-tooltip-wideInfo-theme [x-arrow] {
-  border-bottom-color: var(--white);
+  border-bottom-color: var(--color-background-default);
 }
 
 .tippy-tooltip {
   &#{&}-info-theme,
   &#{&}-wideInfo-theme {
-    background: white;
+    background: var(--color-background-default);
-    color: black;
+    color: var(--color-text-default);
     box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
     border-radius: 8px;
     max-width: 203px;
@@ -46,10 +46,10 @@
       @include H7;
 
       text-align: left;
-      color: var(--Grey-500);
+      color: var(--color-text-alternative);
 
       a {
-        color: var(--primary-1);
+        color: var(--color-primary-default);
       }
 
       p {

ui/components/ui/radio-group/index.scss

@@ -36,28 +36,28 @@
   &__column-start-connector {
     width: calc(50% + 0.5px);
     height: 6px;
-    border-left: 1px solid var(--ui-2);
+    border-left: 1px solid var(--color-border-muted);
-    border-bottom: 1px solid var(--ui-2);
+    border-bottom: 1px solid var(--color-border-muted);
     align-self: flex-end;
   }
 
   &__column-end-connector {
     width: calc(50% + 0.5px);
     height: 6px;
-    border-right: 1px solid var(--ui-2);
+    border-right: 1px solid var(--color-border-muted);
-    border-bottom: 1px solid var(--ui-2);
+    border-bottom: 1px solid var(--color-border-muted);
     align-self: flex-start;
   }
 
   &__column-vertical-line {
     width: 1px;
     height: 5px;
-    border-left: 1px solid var(--ui-2);
+    border-left: 1px solid var(--color-border-muted);
   }
 
   &__column-horizontal-line {
     height: 1px;
-    border-bottom: 1px solid var(--ui-2);
+    border-bottom: 1px solid var(--color-border-muted);
     width: 100%;
   }
 

ui/components/ui/radio-group/radio-group.component.js

@@ -69,7 +69,7 @@ export default function RadioGroup({ options, name, selectedValue, onChange }) {
                 isLast={index === options.length - 1}
               />
               <Typography
-                color={checked ? COLORS.BLACK : COLORS.UI4}
+                color={checked ? COLORS.TEXT_DEFAULT : COLORS.TEXT_MUTED}
                 fontWeight={FONT_WEIGHT.BOLD}
                 variant={TYPOGRAPHY.H7}
                 className="radio-group__column-label"

ui/components/ui/tooltip/index.scss

@@ -1,5 +1,5 @@
 .tippy-tooltip.white-theme {
-  background: white;
+  background: var(--color-background-default);
   color: black;
   box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
   padding: 12px 16px;
@@ -9,22 +9,22 @@
     @include H7;
 
     text-align: left;
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
   }
 }
 
 .tippy-popper[x-placement^=top] .white-theme [x-arrow] {
-  border-top-color: var(--white);
+  border-top-color: var(--color-background-default);
 }
 
 .tippy-popper[x-placement^=right] .white-theme [x-arrow] {
-  border-right-color: var(--white);
+  border-right-color: var(--color-background-default);
 }
 
 .tippy-popper[x-placement^=left] .white-theme [x-arrow] {
-  border-left-color: var(--white);
+  border-left-color: var(--color-background-default);
 }
 
 .tippy-popper[x-placement^=bottom] .white-theme [x-arrow] {
-  border-bottom-color: var(--white);
+  border-bottom-color: var(--color-background-default);
 }