Update token listing page

ssr/src/component/buttons.rs

@@ -0,0 +1,133 @@
+use leptos::*;
+
+#[component]
+pub fn Button(
+    children: Children,
+    on_click: impl Fn() + 'static,
+    #[prop(optional)] classes: String,
+    #[prop(optional)] alt_style: Signal<bool>,
+    #[prop(optional)] disabled: Signal<bool>,
+) -> impl IntoView {
+    let on_click = move |_| on_click();
+    view! {
+        <button
+            on:click=on_click
+            disabled=disabled.get()
+            class=format!(
+                "w-full px-5 py-3 rounded-lg flex items-center transition-all justify-center gap-8 font-kumbh font-bold {} {}",
+                if disabled.get() {
+                    "text-white/50"
+                } else if alt_style.get() {
+                    "text-[#E2017B]"
+                } else {
+                    "text-white"
+                },
+                classes,
+            )
+            style=format!(
+                "background: linear-gradient(73deg, {} );",
+                if disabled.get() {
+                    "#DE98BE 0%, #E761A9 33%, #7B5369 100%"
+                } else if alt_style.get() {
+                    "#FFF 0%, #FFF 1000%"
+                } else {
+                    "#DA539C 0%, #E2017B 33%, #5F0938 100%"
+                },
+            )
+        >
+            {children()}
+        </button>
+    }
+}
+
+#[component]
+pub fn LinkButton(
+    children: Children,
+    href: String,
+    #[prop(optional)] classes: String,
+    #[prop(optional)] alt_style: Signal<bool>,
+    #[prop(optional)] disabled: Signal<bool>,
+) -> impl IntoView {
+    view! {
+        <a
+            href=href
+            class=format!(
+                "w-full px-5 py-3 rounded-lg flex items-center transition-all justify-center gap-8 font-kumbh font-bold {} {}",
+                if disabled.get() {
+                    "text-white/50"
+                } else if alt_style.get() {
+                    "text-[#E2017B]"
+                } else {
+                    "text-white"
+                },
+                classes,
+            )
+            style=format!(
+                "background: linear-gradient(73deg, {} );",
+                if disabled.get() {
+                    "#DE98BE 0%, #E761A9 33%, #7B5369 100%"
+                } else if alt_style.get() {
+                    "#FFF 0%, #FFF 1000%"
+                } else {
+                    "#DA539C 0%, #E2017B 33%, #5F0938 100%"
+                },
+            )
+        >
+            {children()}
+        </a>
+    }
+}
+
+#[component]
+pub fn SecondaryLinkButton(
+    children: Children,
+    href: String,
+    #[prop(optional)] classes: String,
+    #[prop(optional)] alt_style: Signal<bool>,
+) -> impl IntoView {
+    view! {
+        <a
+            href=href
+            class=format!(
+                "rounded-full border border-white text-sm font-bold font-kumbh px-5 py-2 {} {}",
+                if alt_style.get() {
+                    "bg-transparent text-white hover:bg-white/10 active:bg-white/5"
+                } else {
+                    "bg-white text-black"
+                },
+                classes,
+            )
+        >
+            {children()}
+        </a>
+    }
+}
+
+#[component]
+pub fn SecondaryButton(
+    children: Children,
+    disabled: Signal<bool>,
+    alt_style: Signal<bool>,
+    classes: String,
+    on_click: impl Fn() + 'static,
+) -> impl IntoView {
+    let on_click = move |_| on_click();
+    view! {
+        <button
+            disabled=disabled.get()
+            on:click=on_click
+            class=format!(
+                "rounded-full border border-white text-sm font-bold font-kumbh px-5 py-2 {} {}",
+                if alt_style.get() {
+                    "bg-transparent text-white hover:bg-white/10 active:bg-white/5"
+                } else {
+                    "bg-white text-black"
+                },
+                classes,
+            )
+        >
+
+            {children()}
+        </button>
+    }
+}

ssr/src/component/icons/airdrop_icon.rs

@@ -0,0 +1,36 @@
+use crate::utils::icon::icon_gen;
+
+icon_gen!(
+    AirdropIcon,
+    view_box = "0 0 30 30",
+    r###"<mask
+                id="mask0_694_2577"
+                style="mask-type:alpha"
+                maskUnits="userSpaceOnUse"
+                x="0"
+                y="0"
+                width="30"
+                height="30"
+            >
+                <rect width="30" height="30" fill="currentColor" />
+            </mask>
+            <g mask="url(#mask0_694_2577)">
+                <mask
+                    id="mask1_694_2577"
+                    style="mask-type:alpha"
+                    maskUnits="userSpaceOnUse"
+                    x="4"
+                    y="3"
+                    width="23"
+                    height="24"
+                >
+                    <rect x="4.375" y="3.75" width="22.5" height="22.5" fill="currentColor" />
+                </mask>
+                <g mask="url(#mask1_694_2577)">
+                    <path
+                        d="M9.0859 22.8721C8.77201 23.1863 8.26178 23.1941 7.9652 22.8635C7.23408 22.0486 6.63724 21.1253 6.17468 20.0935C5.59989 18.8112 5.3125 17.43 5.3125 15.9498C5.3125 14.5214 5.58316 13.1791 6.12447 11.9229C6.66579 10.6668 7.40042 9.5741 8.32836 8.64495C9.25631 7.71581 10.3475 6.98015 11.602 6.43798C12.8565 5.89599 14.1969 5.625 15.6231 5.625C17.0495 5.625 18.3902 5.89599 19.6452 6.43798C20.9003 6.97997 21.992 7.71553 22.9203 8.64468C23.8486 9.57383 24.5836 10.6664 25.1253 11.9224C25.6668 13.1784 25.9375 14.5204 25.9375 15.9485C25.9375 17.4281 25.6501 18.8121 25.0753 20.1006C24.6119 21.1394 24.0138 22.0637 23.2808 22.8735C22.9864 23.1988 22.4823 23.1884 22.1736 22.8766C21.8559 22.5557 21.8663 22.039 22.1618 21.6976C22.733 21.0377 23.2046 20.2914 23.5765 19.4587C24.065 18.365 24.3092 17.1943 24.3092 15.9468C24.3092 13.5203 23.4679 11.465 21.7854 9.7809C20.1028 8.09681 18.0493 7.25476 15.625 7.25476C13.2007 7.25476 11.1472 8.09681 9.46464 9.7809C7.78207 11.465 6.94079 13.5203 6.94079 15.9468C6.94079 17.1963 7.18503 18.3643 7.67352 19.4508C8.04358 20.2739 8.51746 21.0139 9.09518 21.6707C9.39975 22.017 9.41184 22.5459 9.0859 22.8721ZM12.1455 19.8098C11.8341 20.1214 11.3268 20.1343 11.0456 19.7952C10.7014 19.3801 10.412 18.9177 10.1776 18.4081C9.82892 17.65 9.65461 16.8296 9.65461 15.9468C9.65461 14.2868 10.2348 12.8759 11.3952 11.7141C12.5557 10.552 13.9648 9.97104 15.6226 9.97104C17.2803 9.97104 18.6903 10.5524 19.8523 11.7152C21.0144 12.8779 21.5954 14.2898 21.5954 15.9509C21.5954 16.8313 21.4211 17.6532 21.0724 18.4165C20.8382 18.9293 20.5493 19.3912 20.2055 19.8022C19.9236 20.1392 19.4181 20.1236 19.1075 19.8128C18.777 19.4819 18.7956 18.9459 19.076 18.5717C19.2686 18.3147 19.4345 18.0373 19.5736 17.7396C19.8359 17.1782 19.9671 16.5806 19.9671 15.9468C19.9671 14.7517 19.5419 13.7285 18.6916 12.8774C17.8413 12.0263 16.8191 11.6008 15.625 11.6008C14.4309 11.6008 13.4087 12.0263 12.5584 12.8774C11.7081 13.7285 11.2829 14.7517 11.2829 15.9468C11.2829 16.5987 11.4141 17.2008 11.6764 17.7532C11.8158 18.0467 11.9821 18.3211 12.1752 18.5762C12.456 18.9473 12.4744 19.4806 12.1455 19.8098ZM15.625 17.5766C15.181 17.5766 14.7986 17.4161 14.4779 17.095C14.1571 16.7739 13.9967 16.3912 13.9967 15.9468C13.9967 15.5025 14.1571 15.1197 14.4779 14.7987C14.7986 14.4776 15.181 14.3171 15.625 14.3171C16.069 14.3171 16.4514 14.4776 16.7721 14.7987C17.0929 15.1197 17.2533 15.5025 17.2533 15.9468C17.2533 16.3912 17.0929 16.7739 16.7721 17.095C16.4514 17.4161 16.069 17.5766 15.625 17.5766Z"
+                        fill="currentColor"
+                    />
+                </g>
+            </g>"###
+);

ssr/src/component/icons/arrow_left_right_icon.rs

@@ -0,0 +1,23 @@
+use crate::utils::icon::icon_gen;
+
+icon_gen!(
+    ArrowLeftRightIcon,
+    view_box = "0 0 31 30",
+    r###"<mask
+                id="mask0_500_15031"
+                style="mask-type:alpha"
+                maskUnits="userSpaceOnUse"
+                x="0"
+                y="0"
+                width="31"
+                height="30"
+            >
+                <rect x="0.75" width="30" height="30" fill="currentColor" />
+            </mask>
+            <g mask="url(#mask0_500_15031)">
+                <path
+                    d="M10.9024 22.3831C10.6176 22.6398 10.1854 22.6413 9.8988 22.3866L6.27834 19.1684C5.83082 18.7706 5.83082 18.0714 6.27834 17.6736L9.89869 14.4555C10.1853 14.2007 10.6177 14.2023 10.9024 14.4591C11.2354 14.7593 11.2335 15.2824 10.8984 15.5802L8.50245 17.7098H17.8106C18.2034 17.7098 18.5218 18.0282 18.5218 18.421C18.5218 18.8138 18.2034 19.1322 17.8106 19.1322H8.50245L10.8984 21.262C11.2336 21.5599 11.2354 22.0829 10.9024 22.3831ZM21.6013 16.9979C21.3147 17.2527 20.8823 17.2511 20.5975 16.9943C20.2646 16.6941 20.2664 16.1711 20.6015 15.8732L22.9976 13.7434H13.6893C13.2966 13.7434 12.9782 13.425 12.9782 13.0323C12.9782 12.6396 13.2966 12.3212 13.6893 12.3212H22.9976L20.6016 10.1914C20.2664 9.89355 20.2646 9.37054 20.5975 9.07027C20.8823 8.81346 21.3147 8.81192 21.6013 9.06669L25.2217 12.2848C25.6692 12.6826 25.6692 13.3818 25.2217 13.7796L21.6013 16.9979Z"
+                    fill="currentColor"
+                />
+            </g>"###
+);

ssr/src/component/icons/chevron_right_icon.rs

@@ -0,0 +1,10 @@
+use crate::utils::icon::icon_gen;
+
+icon_gen!(
+    ChevronRightIcon,
+    view_box = "0 0 30 30",
+    r###"<path
+                d="M12.1224 24.0156C11.7522 24.3858 11.1518 24.3858 10.7815 24.0156V24.0156C10.4113 23.6453 10.4113 23.0449 10.7815 22.6746L17.891 15.5652L10.7815 8.45569C10.4113 8.08541 10.4113 7.48507 10.7815 7.11479V7.11479C11.1518 6.74451 11.7522 6.74451 12.1224 7.11479L19.8657 14.8581C20.2562 15.2486 20.2562 15.8818 19.8657 16.2723L12.1224 24.0156Z"
+                fill="currentColor"
+            />"###
+);

ssr/src/component/icons/eye_hide_icon.rs

@@ -0,0 +1,24 @@
+use leptos::*;
+
+#[component]
+pub fn EyeHiddenIcon(
+    #[prop(optional, default = "w-full h-full".to_string())] classes: String,
+) -> impl IntoView {
+    view! {
+        <svg
+            class=format!("{}", classes)
+            viewBox="0 0 37 23"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M13.83 16.4851L13.8288 16.4828L24.9494 9.17546L31.3754 4.95298L31.3743 4.95183L34.1739 3.11239C34.3262 3.01147 34.4315 2.85436 34.4693 2.67661C34.5048 2.49771 34.4693 2.31193 34.3708 2.15826L33.8682 1.3922C33.7365 1.19151 33.5166 1.08257 33.2934 1.08257C33.164 1.08257 33.0311 1.11812 32.9155 1.19495L29.4117 3.49771C26.0682 1.24541 22.3456 0 18.5006 0C11.5467 0 4.93757 3.95069 0.370001 10.8383C0.115802 11.2213 0.115802 11.7144 0.370001 12.0975C2.11161 14.7236 4.15665 16.9071 6.39864 18.6216L2.82497 20.9702C2.67268 21.0711 2.56733 21.2282 2.52955 21.406C2.49405 21.5849 2.52955 21.7706 2.62802 21.9243L3.13069 22.6904C3.26237 22.8911 3.48222 23 3.70551 23C3.83489 23 3.96772 22.9644 4.08337 22.8876L8.43567 20.0275C8.43567 20.0287 8.43681 20.0287 8.43681 20.0287L13.83 16.4851ZM11.6292 11.4679C11.6292 7.67316 14.7105 4.58716 18.4994 4.58716C20.659 4.58716 22.5666 5.60436 23.8193 7.17316L12.4525 14.6433C11.9441 13.6904 11.6292 12.6227 11.6292 11.4679Z"
+                fill="currentColor"
+            />
+            <path
+                d="M36.63 10.8383C35.5697 9.23855 34.3891 7.81538 33.1296 6.54474L25.3502 11.6583C25.2483 15.3624 22.2231 18.3486 18.4994 18.3486C17.5937 18.3486 16.7326 18.1629 15.9402 17.8429L10.7624 21.2454C13.2288 22.3463 15.8372 22.9358 18.5005 22.9358C25.4567 22.9358 32.0658 18.9851 36.63 12.0975C36.8842 11.7145 36.8842 11.2213 36.63 10.8383Z"
+                fill="currentColor"
+            />
+        </svg>
+    }
+}

ssr/src/component/icons/mod.rs

@@ -0,0 +1,6 @@
+pub mod airdrop_icon;
+pub mod arrow_left_right_icon;
+pub mod chevron_right_icon;
+pub mod eye_hide_icon;
+pub mod send_icon;
+pub mod share_icon;

ssr/src/component/icons/send_icon.rs

@@ -0,0 +1,25 @@
+use crate::utils::icon::icon_gen;
+
+icon_gen!(
+    SendIcon,
+    view_box = "0 0 31 30",
+    r###"<mask
+                id="mask0_500_15024"
+                style="mask-type:alpha"
+                maskUnits="userSpaceOnUse"
+                x="0"
+                y="0"
+                width="31"
+                height="30"
+            >
+                <rect x="0.5" width="30" height="30" fill="currentColor" />
+            </mask>
+            <g mask="url(#mask0_500_15024)">
+                <path
+                    d="M18.9781 12.0763L18.978 12.0763L18.9776 12.0768L18.9775 12.0769C18.9304 12.1301 16.5743 14.7906 15.5453 15.9467C15.4021 16.1077 15.3455 16.3697 15.4085 16.5726L17.1255 22.1025C17.2376 22.4634 17.7416 22.4819 17.8798 22.1301L24.1026 6.29093C24.2304 5.9658 23.9092 5.64463 23.5841 5.77237L7.74489 11.9952C7.39309 12.1334 7.41156 12.6374 7.77254 12.7495L13.3015 14.4663C13.5048 14.5294 13.7676 14.4726 13.9289 14.329C15.0897 13.296 17.7645 10.9273 17.7986 10.8971L17.7987 10.897L17.7988 10.8969L17.8014 10.8946L18.9781 12.0763ZM18.9781 12.0763L18.9809 12.0731C18.981 12.073 18.981 12.073 18.981 12.0729M18.9781 12.0763L18.981 12.0729M18.0798 11.2806L18.0797 11.2807M18.0798 11.2806L18.08 11.2804L18.0797 11.2807M18.0798 11.2806C18.0798 11.2807 18.0797 11.2807 18.0797 11.2807M18.0798 11.2806L18.0797 11.2807M18.981 12.0729C18.9811 12.0729 18.9811 12.0729 18.9811 12.0729M18.981 12.0729L18.9811 12.0729M18.9811 12.0729C19.3318 11.674 19.1903 11.1832 18.9373 10.933M18.9811 12.0729L18.9373 10.933M18.9373 10.933C18.6877 10.6859 18.1985 10.5451 17.8016 10.8944L18.9373 10.933Z"
+                    stroke=move || format!("{} ", if filled { "none" } else { "currentColor" })
+                    fill=move || format!("{} ", if filled { "currentColor" } else { "none" })
+                    stroke-width="1.2"
+                />
+            </g>"###
+);

ssr/src/component/icons/share_icon.rs

@@ -0,0 +1,36 @@
+use crate::utils::icon::icon_gen;
+
+icon_gen!(
+    ShareIcon,
+    view_box = "0 0 31 30",
+    r###"<mask
+                id="mask0_500_15047"
+                style="mask-type:alpha"
+                maskUnits="userSpaceOnUse"
+                x="0"
+                y="0"
+                width="31"
+                height="30"
+            >
+                <rect x="0.25" width="30" height="30" fill="currentColor" />
+            </mask>
+            <g mask="url(#mask0_500_15047)">
+                <mask
+                    id="mask1_500_15047"
+                    style="mask-type:alpha"
+                    maskUnits="userSpaceOnUse"
+                    x="4"
+                    y="3"
+                    width="24"
+                    height="24"
+                >
+                    <rect x="4.625" y="3.75" width="22.5" height="22.5" fill="currentColor" />
+                </mask>
+                <g mask="url(#mask1_500_15047)">
+                    <path
+                        d="M21.6531 25.3125C20.8276 25.3125 20.1267 25.0284 19.5504 24.4601C18.9743 23.8918 18.6862 23.2018 18.6862 22.39C18.6862 22.2814 18.7244 22.0177 18.8006 21.5986L10.9571 17.0541C10.6913 17.3255 10.3755 17.5381 10.0097 17.6918C9.64384 17.8456 9.25193 17.9225 8.83392 17.9225C8.01204 17.9225 7.31342 17.6372 6.73805 17.0666C6.16268 16.4959 5.875 15.8071 5.875 15C5.875 14.1929 6.16268 13.5041 6.73805 12.9334C7.31342 12.3628 8.01204 12.0775 8.83392 12.0775C9.25193 12.0775 9.64384 12.1544 10.0097 12.3082C10.3755 12.4619 10.6913 12.6745 10.9571 12.9459L18.8006 8.41167C18.7569 8.27815 18.7268 8.14734 18.7105 8.01925C18.6943 7.89116 18.6862 7.75475 18.6862 7.61001C18.6862 6.79822 18.9751 6.10818 19.5528 5.53991C20.1308 4.97164 20.8325 4.6875 21.6581 4.6875C22.4836 4.6875 23.1845 4.97191 23.7606 5.54072C24.3369 6.10936 24.625 6.79993 24.625 7.61245C24.625 8.42497 24.3363 9.11482 23.7589 9.68201C23.1815 10.249 22.4804 10.5325 21.6556 10.5325C21.2356 10.5325 20.8449 10.4539 20.4837 10.2967C20.1223 10.1395 19.8087 9.92516 19.5429 9.65378L11.6994 14.1983C11.7431 14.332 11.7732 14.4628 11.7895 14.5908C11.8057 14.7188 11.8138 14.8553 11.8138 15C11.8138 15.1447 11.8057 15.2812 11.7895 15.4092C11.7732 15.5372 11.7431 15.668 11.6994 15.8017L19.5429 20.3462C19.8087 20.0748 20.1223 19.8605 20.4837 19.7033C20.8449 19.5461 21.2356 19.4675 21.6556 19.4675C22.4804 19.4675 23.1815 19.7518 23.7589 20.3204C24.3363 20.8893 24.625 21.5799 24.625 22.3924C24.625 23.205 24.336 23.8947 23.7581 24.4617C23.1803 25.0289 22.4787 25.3125 21.6531 25.3125ZM21.6556 23.6842C22.0282 23.6842 22.3405 23.5602 22.5926 23.3121C22.8446 23.0641 22.9706 22.7567 22.9706 22.39C22.9706 22.0233 22.8446 21.7159 22.5926 21.4678C22.3405 21.2196 22.0282 21.0955 21.6556 21.0955C21.283 21.0955 20.9707 21.2196 20.7187 21.4678C20.4665 21.7159 20.3403 22.0233 20.3403 22.39C20.3403 22.7567 20.4665 23.0641 20.7187 23.3121C20.9707 23.5602 21.283 23.6842 21.6556 23.6842ZM8.83392 16.2942C9.20947 16.2942 9.52426 16.1702 9.77831 15.9222C10.0325 15.6741 10.1597 15.3667 10.1597 15C10.1597 14.6333 10.0325 14.3259 9.77831 14.0778C9.52426 13.8298 9.20947 13.7058 8.83392 13.7058C8.46425 13.7058 8.15441 13.8298 7.90441 14.0778C7.65441 14.3259 7.52941 14.6333 7.52941 15C7.52941 15.3667 7.65441 15.6741 7.90441 15.9222C8.15441 16.1702 8.46425 16.2942 8.83392 16.2942ZM21.6556 8.9045C22.0282 8.9045 22.3405 8.78039 22.5926 8.53216C22.8446 8.28412 22.9706 7.97674 22.9706 7.61001C22.9706 7.24328 22.8446 6.9359 22.5926 6.68785C22.3405 6.43981 22.0282 6.31579 21.6556 6.31579C21.283 6.31579 20.9707 6.43981 20.7187 6.68785C20.4665 6.9359 20.3403 7.24328 20.3403 7.61001C20.3403 7.97674 20.4665 8.28412 20.7187 8.53216C20.9707 8.78039 21.283 8.9045 21.6556 8.9045Z"
+                        fill="currentColor"
+                    />
+                </g>
+            </g>"###
+);

ssr/src/component/mod.rs

@@ -3,6 +3,7 @@ pub mod auth_providers;
 pub mod back_btn;
 pub mod base_route;
 pub mod bullet_loader;
+pub mod buttons;
 pub mod canisters_prov;
 pub mod coming_soon;
 pub mod connect;
@@ -11,6 +12,7 @@ pub mod dashbox;
 pub mod feed_popup;
 pub mod hn_icons;
 pub mod ic_symbol;
+pub mod icons;
 pub mod infinite_scroller;
 pub mod loading;
 pub mod login_modal;