feat: settings & solid login

src/routes/home/ServerDropList.js

@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
     .logo {
       width: 24px;
       height: 24px;
+      border-radius: 50%;
     }
     .title {
       white-space: nowrap;

src/routes/home/index.js

@@ -20,10 +20,12 @@ export default function HomePage() {
   const {
     ui: { menuExpand, setting, channelSetting },
     authData: { usersVersion, afterMid },
+    contacts,
   } = useSelector((store) => {
     return {
       authData: store.authData,
       ui: store.ui,
+      contacts: store.contacts,
     };
   });
   const { data, loading, error, success } = usePreload();
@@ -72,7 +74,7 @@ export default function HomePage() {
           <Outlet />
         </div>
       </StyledWrapper>
-      {setting && <SettingModal />}
+      {setting && <SettingModal contacts={contacts} />}
       {channelSetting && <ChannelSettingModal id={channelSetting} />}
     </>
   );

src/routes/login/SolidLoginButton.js

@@ -0,0 +1,38 @@
+/* eslint-disable no-undef */
+import { useEffect } from "react";
+import { useGetOpenidMutation } from "../../app/services/auth";
+export default function SolidLoginButton({ login }) {
+  const [getOpenId, { data, isLoading, isSuccess }] = useGetOpenidMutation();
+
+  const handleSolidLogin = async () => {
+    getOpenId({ issuer_url: "https://solidweb.org" });
+  };
+  useEffect(() => {
+    if (isSuccess) {
+      console.log("wtf", data);
+      const { id, url } = data;
+      window.open(url);
+      login({
+        id,
+        type: "oidc",
+      });
+      // location.href = url;
+    }
+  }, [data, isSuccess]);
+
+  return (
+    <button
+      disabled={isLoading}
+      onClick={handleSolidLogin}
+      href="#"
+      className="btn social"
+    >
+      <img
+        className="icon"
+        src="https://solidproject.org/assets/img/solid-emblem.svg"
+        alt="solid logo icon"
+      />
+      Sign in with Solid
+    </button>
+  );
+}

src/routes/login/index.js

@@ -7,6 +7,7 @@ import toast from "react-hot-toast";
 
 // import web3 from "web3";
 import MetamaskLoginButton from "./MetamaskLoginButton";
+import SolidLoginButton from "./SolidLoginButton";
 
 import GoogleLoginButton from "./GoogleLoginButton";
 import { useLoginMutation } from "../../app/services/auth";
@@ -109,6 +110,7 @@ export default function LoginPage() {
         <hr className="or" />
         <GoogleLoginButton login={login} />
         <MetamaskLoginButton login={login} />
+        <SolidLoginButton login={login} />
       </div>
     </StyledWrapper>
   );