feat: new connect button

components/UI/avatar.tsx

@@ -0,0 +1,47 @@
+import React, {
+  FunctionComponent,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { StarknetIdJsContext } from "../../context/StarknetIdJsProvider";
+import ProfilIcon from "./iconsComponents/icons/profilIcon";
+import theme from "../../styles/theme";
+
+type AvatarProps = {
+  address: string;
+  width?: string;
+};
+
+const Avatar: FunctionComponent<AvatarProps> = ({ address, width = "32" }) => {
+  const { starknetIdNavigator } = useContext(StarknetIdJsContext);
+  const [starknetId, setStarknetId] = useState<string>("");
+
+  useEffect(() => {
+    if (!address) return;
+    (async () => {
+      const domain = await starknetIdNavigator?.getStarkName(address);
+      if (!domain) return;
+      const starknetId = await starknetIdNavigator?.getStarknetId(domain);
+      if (!starknetId) return;
+      setStarknetId(starknetId.toString());
+    })();
+  }, [address]);
+
+  return (
+    <>
+      {starknetId ? (
+        <img
+          src={`${process.env.NEXT_PUBLIC_STARKNET_ID_LINK}/api/identicons/${starknetId}`}
+          width={width}
+          height={width}
+          className="rounded-full"
+        />
+      ) : (
+        <ProfilIcon width={width} color={theme.palette.secondary.main} />
+      )}
+    </>
+  );
+};
+
+export default Avatar;

components/UI/changeWallet.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import styles from "../../styles/components/wallets.module.css";
+import { Connector, useConnectors } from "@starknet-react/core";
+import Button from "./button";
+import { FunctionComponent } from "react";
+import { Modal } from "@mui/material";
+import WalletIcons from "./iconsComponents/icons/walletIcons";
+import getDiscoveryWallets from "get-starknet-core";
+import useGetDiscoveryWallets from "../../hooks/useGetDiscoveryWallets";
+
+type ChangeWalletProps = {
+  closeWallet: () => void;
+  hasWallet: boolean;
+};
+
+const ChangeWallet: FunctionComponent<ChangeWalletProps> = ({
+  closeWallet,
+  hasWallet,
+}) => {
+  const { connect, connectors } = useConnectors();
+  const downloadLinks = useGetDiscoveryWallets(
+    getDiscoveryWallets.getDiscoveryWallets()
+  );
+
+  function connectWallet(connector: Connector): void {
+    connect(connector);
+    closeWallet();
+  }
+
+  return (
+    <Modal
+      disableAutoFocus
+      open={hasWallet}
+      onClose={closeWallet}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <div className={styles.menu}>
+        <button
+          className={styles.menu_close}
+          onClick={() => {
+            closeWallet();
+          }}
+        >
+          <svg viewBox="0 0 24 24">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M6 18L18 6M6 6l12 12"
+            ></path>
+          </svg>
+        </button>
+        <p className={styles.menu_title}>Change wallet</p>
+        {connectors.map((connector) => {
+          if (connector.available()) {
+            return (
+              <div className="mt-5 flex justify-center" key={connector.id}>
+                <Button onClick={() => connectWallet(connector)}>
+                  <div className="flex justify-center items-center">
+                    <WalletIcons id={connector.id} />
+                    {connector.id === "braavos" || connector.id === "argentX"
+                      ? `Connect ${connector.name}`
+                      : "Login with Email"}
+                  </div>
+                </Button>
+              </div>
+            );
+          } else {
+            if (connector.id === "braavos" || connector.id === "argentX") {
+              return (
+                <div className="mt-5 flex justify-center" key={connector.id}>
+                  <Button
+                    onClick={() =>
+                      window.open(
+                        `${
+                          downloadLinks[
+                            connector.id as keyof typeof downloadLinks
+                          ]
+                        }`
+                      )
+                    }
+                  >
+                    <div className="flex justify-center items-center">
+                      <WalletIcons id={connector.id} />
+                      Install {connector.id}
+                    </div>
+                  </Button>
+                </div>
+              );
+            }
+          }
+        })}
+      </div>
+    </Modal>
+  );
+};
+export default ChangeWallet;

components/UI/iconsComponents/icons/profilIcon.tsx

@@ -0,0 +1,24 @@
+import React, { FunctionComponent } from "react";
+
+const ProfilIcon: FunctionComponent<IconProps> = ({ color, width }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 32 32"
+      fill="none"
+    >
+      <path
+        d="M29.3327 15.9998C29.3327 8.65317 23.346 2.6665 15.9993 2.6665C8.65268 2.6665 2.66602 8.65317 2.66602 15.9998C2.66602 19.8665 4.33268 23.3465 6.97268 25.7865C6.97268 25.7998 6.97268 25.7998 6.95935 25.8132C7.09268 25.9465 7.25268 26.0532 7.38602 26.1732C7.46602 26.2398 7.53268 26.3065 7.61268 26.3598C7.85268 26.5598 8.11935 26.7465 8.37268 26.9332C8.46602 26.9998 8.54602 27.0532 8.63935 27.1198C8.89268 27.2932 9.15935 27.4532 9.43935 27.5998C9.53268 27.6532 9.63935 27.7198 9.73268 27.7732C9.99935 27.9198 10.2793 28.0532 10.5727 28.1732C10.6793 28.2265 10.786 28.2798 10.8927 28.3198C11.186 28.4398 11.4793 28.5465 11.7727 28.6398C11.8793 28.6798 11.986 28.7198 12.0927 28.7465C12.4127 28.8398 12.7327 28.9198 13.0527 28.9998C13.146 29.0265 13.2393 29.0532 13.346 29.0665C13.7193 29.1465 14.0927 29.1998 14.4793 29.2398C14.5327 29.2398 14.586 29.2532 14.6393 29.2665C15.0927 29.3065 15.546 29.3332 15.9993 29.3332C16.4527 29.3332 16.906 29.3065 17.346 29.2665C17.3994 29.2665 17.4527 29.2532 17.506 29.2398C17.8927 29.1998 18.266 29.1465 18.6393 29.0665C18.7327 29.0532 18.826 29.0132 18.9327 28.9998C19.2527 28.9198 19.586 28.8532 19.8927 28.7465C19.9993 28.7065 20.106 28.6665 20.2127 28.6398C20.506 28.5332 20.8127 28.4398 21.0927 28.3198C21.1993 28.2798 21.306 28.2265 21.4127 28.1732C21.6927 28.0532 21.9727 27.9198 22.2527 27.7732C22.3594 27.7198 22.4527 27.6532 22.546 27.5998C22.8127 27.4398 23.0793 27.2932 23.346 27.1198C23.4394 27.0665 23.5193 26.9998 23.6127 26.9332C23.8793 26.7465 24.1327 26.5598 24.3727 26.3598C24.4527 26.2932 24.5194 26.2265 24.5993 26.1732C24.746 26.0532 24.8927 25.9332 25.026 25.8132C25.026 25.7998 25.026 25.7998 25.0127 25.7865C27.666 23.3465 29.3327 19.8665 29.3327 15.9998ZM22.586 22.6265C18.9727 20.1998 13.0527 20.1998 9.41268 22.6265C8.82602 23.0132 8.34602 23.4665 7.94602 23.9598C5.91935 21.9065 4.66602 19.0932 4.66602 15.9998C4.66602 9.7465 9.74602 4.6665 15.9993 4.6665C22.2527 4.6665 27.3327 9.7465 27.3327 15.9998C27.3327 19.0932 26.0794 21.9065 24.0527 23.9598C23.666 23.4665 23.1727 23.0132 22.586 22.6265Z"
+        fill={color}
+      />
+      <path
+        d="M16 9.23975C13.24 9.23975 11 11.4797 11 14.2397C11 16.9464 13.12 19.1464 15.9333 19.2264C15.9733 19.2264 16.0267 19.2264 16.0533 19.2264C16.08 19.2264 16.12 19.2264 16.1467 19.2264C16.16 19.2264 16.1733 19.2264 16.1733 19.2264C18.8667 19.1331 20.9867 16.9464 21 14.2397C21 11.4797 18.76 9.23975 16 9.23975Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default ProfilIcon;