From 6bdf6790a38b8a15152f03e423919cdb44666a7f Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Thu, 28 Jul 2022 01:26:13 +0100
Subject: [PATCH] feat: subscribe buttom

---
 src/components/common/ConnectButton.tsx |  2 +-
 src/components/icons/Crossbell.tsx      |  9 ++++++
 src/components/icons/RSS3.tsx           |  9 ++++++
 src/components/site/SiteHeader.tsx      | 37 +++++++++++++++++++++++--
 src/components/ui/Button.tsx            |  2 +-
 src/css/tailwind.css                    | 12 ++++++++
 src/pages/dashboard/index.tsx           |  2 +-
 7 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 src/components/icons/Crossbell.tsx
 create mode 100644 src/components/icons/RSS3.tsx

diff --git a/src/components/common/ConnectButton.tsx b/src/components/common/ConnectButton.tsx
index 865a4a37..130db6c8 100644
--- a/src/components/common/ConnectButton.tsx
+++ b/src/components/common/ConnectButton.tsx
@@ -72,7 +72,7 @@ export const ConnectButton: React.FC<{
             {(() => {
               if (!mounted || !account || !chain) {
                 return (
-                  <button className="text-indigo-600" onClick={openConnectModal} type="button">
+                  <button className="text-indigo-600" onClick={openConnectModal} type="button" style={{ height: "30px" }}>
                     Connect Wallet
                   </button>
                 );
diff --git a/src/components/icons/Crossbell.tsx b/src/components/icons/Crossbell.tsx
new file mode 100644
index 00000000..f8cbd533
--- /dev/null
+++ b/src/components/icons/Crossbell.tsx
@@ -0,0 +1,9 @@
+import React from "react"
+
+export const CrossbellIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
+  props
+) => {
+  return (
+    <svg width="1em" height="1em" {...props} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11148"><path d="M512 1024c70.64 0 127.94-57.3 127.94-128H384.06c0 70.7 57.3 128 127.94 128z m430.78-299.42c-38.64-41.52-110.94-103.98-110.94-308.58 0-155.4-108.96-279.8-255.88-310.32V64c0-35.34-28.64-64-63.96-64s-63.96 28.66-63.96 64v41.68C301.12 136.2 192.16 260.6 192.16 416c0 204.6-72.3 267.06-110.94 308.58-12 12.9-17.32 28.32-17.22 43.42 0.22 32.8 25.96 64 64.2 64h767.6c38.24 0 64-31.2 64.2-64 0.1-15.1-5.22-30.54-17.22-43.42z" p-id="11149"></path></svg>
+  )
+}
diff --git a/src/components/icons/RSS3.tsx b/src/components/icons/RSS3.tsx
new file mode 100644
index 00000000..be3ab76f
--- /dev/null
+++ b/src/components/icons/RSS3.tsx
@@ -0,0 +1,9 @@
+import React from "react"
+
+export const RSS3Icon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
+  props
+) => {
+  return (
+    <svg width="1em" height="1em" {...props} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6994"><path d="M139.093333 974.336a96.426667 96.426667 0 1 0 0-192.853333 96.426667 96.426667 0 0 0 0 192.853333zM926.122667 971.264c-26.453333 0-46.634667-20.224-46.634667-46.677333 0-433.962667-353.066667-788.608-788.608-788.608-26.453333 0-46.634667-20.224-46.634667-46.634667C44.202667 62.890667 64.426667 42.666667 90.88 42.666667 577.706667 42.666667 972.8 439.296 972.8 924.586667c0 26.453333-20.224 46.634667-46.677333 46.634666z" p-id="6995"></path><path d="M601.045333 972.8c-26.453333 0-46.634667-20.224-46.634666-46.677333 0-255.061333-208.426667-463.488-463.530667-463.488-26.453333 0-46.634667-20.224-46.634667-46.677334 0-26.453333 20.181333-46.634667 46.634667-46.634666 307.968 0 556.842667 250.410667 556.842667 556.8 0 24.917333-21.76 46.677333-46.677334 46.677333z" p-id="6996"></path></svg>
+  )
+}
diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index 531d5fb2..8ee60dc5 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@@ -13,6 +13,9 @@ import { Button } from "../ui/Button"
 import { UniLink } from "../ui/UniLink"
 import { Profile } from "unidata.js"
 import { ConnectButton } from "../common/ConnectButton"
+import { RSS3Icon } from "../icons/RSS3"
+import { CrossbellIcon } from "../icons/Crossbell"
+import { useAccount } from "wagmi"
 
 export type HeaderLinkType = {
   icon?: React.ReactNode
@@ -45,12 +48,12 @@ export const SiteHeader: React.FC<{
   icon: string | null | undefined
   navigation?: HeaderLinkType[]
   subscribed?: boolean
-  viewer?: Profile | null
-}> = ({ siteName, description, icon, navigation, subscribed, viewer }) => {
+}> = ({ siteName, description, icon, navigation, subscribed }) => {
   const setSubscribeModalOpened = useStore(
     (store) => store.setSubscribeModalOpened,
   )
   const setLoginModalOpened = useStore((store) => store.setLoginModalOpened)
+  const { data: viewer } = useAccount()
 
   const handleClickSubscribe = () => {
     setSubscribeModalOpened(true)
@@ -78,6 +81,36 @@ export const SiteHeader: React.FC<{
               {description && (
                 <div className="text-gray-500 text-sm">{description}</div>
               )}
+              <div className="mt-3 text-sm">
+                <Button
+                  rounded="full"
+                  size="sm"
+                  variant="rss3"
+                  onClick={() => window.open(`https://rss3.io/result?search=${viewer?.address}&filter=social`, '_blank')}
+                  className="space-x-1 mr-2"
+                >
+                  <span className="pl-1">
+                    <RSS3Icon />
+                  </span>
+                  <span className="pr-1">
+                    Watch on RSS3
+                  </span>
+                </Button>
+                <Button
+                  rounded="full"
+                  size="sm"
+                  variant="crossbell"
+                  onClick={() => window.open(`https://crossbell.io`, '_blank')}
+                  className="space-x-1"
+                >
+                  <span className="pl-1">
+                    <CrossbellIcon />
+                  </span>
+                  <span className="pr-1">
+                    Follow on Crossbell
+                  </span>
+                </Button>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 38e3e3bc..f085aea0 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -12,7 +12,7 @@ type ButtonProps = {
   isBlock?: boolean
   isDisabled?: boolean
   isAutoWidth?: boolean
-  variant?: "primary" | "secondary" | "text"
+  variant?: "primary" | "secondary" | "text" | "rss3" | "crossbell"
   variantColor?: "green" | "red" | "gray"
   size?: "sm"
   rounded?: "full" | "lg"
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index defbb692..cb12f41c 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -72,6 +72,18 @@ body {
   @apply text-gray-500;
 }
 
+.button.is-rss3 {
+  background-color: #e7f1ff;
+  fill: #1064ff;
+  color: #1064ff;
+}
+
+.button.is-crossbell {
+  background-color: #fff5e1;
+  fill: #e5b65a;
+  color: #e5b65a;
+}
+
 .button.is-text {
   @apply shadow-none;
   @apply text-gray-500;
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index f1833ce9..198f6016 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -19,5 +19,5 @@ export default function Dashboard() {
     }
   }, [userSites, router])
 
-  return <div>Loading...</div>
+  return <div className="flex items-center justify-center w-full h-60">Loading...</div>
 }