merge

components/ConnectWeb3.tsx

@@ -0,0 +1,143 @@
+import { ExternalProvider, JsonRpcFetchFunc, Web3Provider } from "@ethersproject/providers";
+import { useWeb3React, Web3ReactProvider } from "@web3-react/core";
+import { InjectedConnector } from "@web3-react/injected-connector";
+import { WalletConnectConnector } from "@web3-react/walletconnect-connector";
+import { useEffect, useState } from "react";
+
+import classNames from "@lib/classNames";
+import useLocalStorage from "@lib/hooks/useLocalStorage";
+import { useLocale } from "@lib/hooks/useLocale";
+
+import Button from "@components/ui/Button";
+
+const injected = new InjectedConnector({ supportedChainIds: [1, 3, 4, 5, 42] });
+const wcConnector = new WalletConnectConnector({
+  infuraId: "517bf3874a6848e58f99fa38ccf9fce4",
+});
+
+const ConnectorNames = {
+  Injected: "injected",
+  WalletConnect: "walletconnect",
+};
+
+const W3Operations = {
+  Connect: "connect",
+  Disconnect: "disconnect",
+};
+
+function getLibrary(provider: ExternalProvider | JsonRpcFetchFunc) {
+  const library = new Web3Provider(provider);
+  // library.pollingInterval = 12000;
+  return library;
+}
+
+export default function ConnectWeb3() {
+  return (
+    <Web3ReactProvider getLibrary={getLibrary}>
+      <Web3Component />
+    </Web3ReactProvider>
+  );
+}
+
+function Web3Component() {
+  const { t } = useLocale();
+  const web3React = useWeb3React();
+  const [, setLoaded] = useState(false);
+
+  const [latestOp, setLatestOp] = useLocalStorage("latest_op", "");
+  const [latestConnector, setLatestConnector] = useLocalStorage("latest_connector", "");
+  // console.log(web3React);
+
+  useEffect(() => {
+    if (latestOp == "connect" && latestConnector == "injected") {
+      injected
+        .isAuthorized()
+        .then((isAuthorized) => {
+          setLoaded(true);
+          if (isAuthorized && !web3React.active && !web3React.error) {
+            web3React.activate(injected);
+          }
+        })
+        .catch(() => {
+          setLoaded(true);
+        });
+    } else if (latestOp == "connect" && latestConnector == "walletconnect") {
+      web3React.activate(wcConnector);
+    }
+  }, []);
+
+  const getTruncatedAddress = (address: string | null | undefined) => {
+    if (address && address.startsWith("0x")) {
+      return address.substr(0, 4) + "..." + address.substr(address.length - 4);
+    }
+    return address;
+  };
+
+  const getNetwork = (chainId: number | undefined) => {
+    switch (chainId) {
+      case 1:
+        return "Mainnet";
+      case 3:
+        return "Ropsten";
+      case 4:
+        return "Rinkeby";
+      case 5:
+        return "Goerli";
+      case 42:
+        return "Kovan";
+      default:
+        return `unknown network ${chainId}`;
+    }
+  };
+
+  return (
+    <>
+      {!web3React.active ? (
+        <>
+          <div className="transition-opacity opacity-0 group-hover:opacity-100 space-x-2">
+            <Button
+              onClick={() => {
+                setLatestConnector(ConnectorNames.Injected);
+                setLatestOp(W3Operations.Connect);
+                web3React.activate(injected);
+              }}
+              color="secondary">
+              <img className="h-5 mr-1" src="/integrations/metamask.svg" />
+              MetaMask
+            </Button>
+
+            <Button
+              onClick={() => {
+                setLatestConnector(ConnectorNames.WalletConnect);
+                setLatestOp(W3Operations.Connect);
+                web3React.activate(wcConnector);
+              }}
+              color="secondary">
+              <img className="h-5 mr-1" src="/integrations/walletconnect.svg" />
+              WalletConnect
+            </Button>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className={classNames("fixed top-0 right-10 flex-col shadow dark:bg-gray-100")}>
+            <div className="flex-grow p-2 truncate">
+              <h3 className="text-green-500">{getNetwork(web3React.chainId)}</h3>
+              <p className="text-black mb-2">{getTruncatedAddress(web3React.account)}</p>
+            </div>
+            <div className="bg-white p-2">
+              <Button
+                onClick={() => {
+                  setLatestOp(W3Operations.Disconnect);
+                  web3React.deactivate();
+                }}
+                color="warn">
+                {t("disconnect")}
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}

lib/hooks/useLocalStorage.ts

@@ -0,0 +1,33 @@
+import { useState } from "react";
+
+export default function useLocalStorage(key: string, initialValue: string) {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const item = localStorage.getItem(key);
+        return item ? JSON.parse(item) : initialValue;
+      } catch (error) {
+        console.log(error);
+        return initialValue;
+      }
+    }
+  });
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value: unknown) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      console.log(error);
+    }
+  };
+  return [storedValue, setValue];
+}

package.json

@@ -32,6 +32,13 @@
     "yarn": ">=1.19.0 < 2.0.0"
   },
   "dependencies": {
+    "@ethersproject/providers": "^5.4.5",
+    "@walletconnect/web3-provider": "^1.6.5",
+    "@web3-react/core": "^6.1.9",
+    "@web3-react/injected-connector": "^6.0.7",
+    "@web3-react/walletconnect-connector": "^6.2.4",
+    "ethers": "^5.4.7",
+    "web3": "^1.5.3",
     "@daily-co/daily-js": "^0.21.0",
     "@headlessui/react": "^1.4.2",
     "@heroicons/react": "^1.0.5",

pages/[user].tsx

@@ -9,6 +9,7 @@ import useTheme from "@lib/hooks/useTheme";
 import prisma from "@lib/prisma";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
+import ConnectWeb3 from "@components/ConnectWeb3";
 import EventTypeDescription from "@components/eventtype/EventTypeDescription";
 import { HeadSeo } from "@components/seo/head-seo";
 import Avatar from "@components/ui/Avatar";
@@ -23,6 +24,9 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
 
   const nameOrUsername = user.name || user.username || "";
 
+  // todo: implement web3 event-types and components
+  const web3 = true;
+
   return (
     <>
       <HeadSeo
@@ -49,7 +53,19 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
               {eventTypes.map((type) => (
                 <div
                   key={type.id}
-                  className="relative bg-white border rounded-sm group dark:bg-neutral-900 dark:border-0 dark:hover:border-neutral-600 hover:bg-gray-50 border-neutral-200 hover:border-brand">
+                  className="group relative dark:bg-neutral-900 dark:border-0 dark:hover:border-neutral-600 bg-white hover:bg-gray-50 border border-neutral-200 hover:bordergs-brand rounded-sm">
+                  {web3 ? (
+                    <>
+                      <span className="flex items-center justify-between w-full px-6 py-4">
+                        <div>
+                          <h2 className="font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
+                          <EventTypeDescription eventType={type} />
+                        </div>
+                        <ConnectWeb3 />
+                      </span>
+                    </>
+                  ) : (
+                    <>
                       <ArrowRightIcon className="absolute w-4 h-4 text-black transition-opacity opacity-0 right-3 top-3 dark:text-white group-hover:opacity-100" />
                       <Link
                         href={{
@@ -63,6 +79,8 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                           <EventTypeDescription eventType={type} />
                         </a>
                       </Link>
+                    </>
+                  )}
                 </div>
               ))}
             </div>

pages/integrations/index.tsx

@@ -375,7 +375,7 @@ function IframeEmbedContainer() {
   return (
     <>
       <ShellSubHeading title={t("iframe_embed")} subtitle={t("embed_calcom")} className="mt-10" />
-      <div className="lg:pb-8 lg:col-span-9">
+      <div className="lg:col-span-9">
         <List>
           <ListItem className={classNames("flex-col")}>
             <div className={classNames("flex flex-1 space-x-2 w-full p-3 items-center")}>

public/integrations/metamask.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns:ev="http://www.w3.org/2001/xml-events"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 318.6 318.6"
+	 style="enable-background:new 0 0 318.6 318.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E2761B;stroke:#E2761B;stroke-linecap:round;stroke-linejoin:round;}
+	.st1{fill:#E4761B;stroke:#E4761B;stroke-linecap:round;stroke-linejoin:round;}
+	.st2{fill:#D7C1B3;stroke:#D7C1B3;stroke-linecap:round;stroke-linejoin:round;}
+	.st3{fill:#233447;stroke:#233447;stroke-linecap:round;stroke-linejoin:round;}
+	.st4{fill:#CD6116;stroke:#CD6116;stroke-linecap:round;stroke-linejoin:round;}
+	.st5{fill:#E4751F;stroke:#E4751F;stroke-linecap:round;stroke-linejoin:round;}
+	.st6{fill:#F6851B;stroke:#F6851B;stroke-linecap:round;stroke-linejoin:round;}
+	.st7{fill:#C0AD9E;stroke:#C0AD9E;stroke-linecap:round;stroke-linejoin:round;}
+	.st8{fill:#161616;stroke:#161616;stroke-linecap:round;stroke-linejoin:round;}
+	.st9{fill:#763D16;stroke:#763D16;stroke-linecap:round;stroke-linejoin:round;}
+</style>
+<polygon class="st0" points="274.1,35.5 174.6,109.4 193,65.8 "/>
+<g>
+	<polygon class="st1" points="44.4,35.5 143.1,110.1 125.6,65.8 	"/>
+	<polygon class="st1" points="238.3,206.8 211.8,247.4 268.5,263 284.8,207.7 	"/>
+	<polygon class="st1" points="33.9,207.7 50.1,263 106.8,247.4 80.3,206.8 	"/>
+	<polygon class="st1" points="103.6,138.2 87.8,162.1 144.1,164.6 142.1,104.1 	"/>
+	<polygon class="st1" points="214.9,138.2 175.9,103.4 174.6,164.6 230.8,162.1 	"/>
+	<polygon class="st1" points="106.8,247.4 140.6,230.9 111.4,208.1 	"/>
+	<polygon class="st1" points="177.9,230.9 211.8,247.4 207.1,208.1 	"/>
+</g>
+<g>
+	<polygon class="st2" points="211.8,247.4 177.9,230.9 180.6,253 180.3,262.3 	"/>
+	<polygon class="st2" points="106.8,247.4 138.3,262.3 138.1,253 140.6,230.9 	"/>
+</g>
+<polygon class="st3" points="138.8,193.5 110.6,185.2 130.5,176.1 "/>
+<polygon class="st3" points="179.7,193.5 188,176.1 208,185.2 "/>
+<g>
+	<polygon class="st4" points="106.8,247.4 111.6,206.8 80.3,207.7 	"/>
+	<polygon class="st4" points="207,206.8 211.8,247.4 238.3,207.7 	"/>
+	<polygon class="st4" points="230.8,162.1 174.6,164.6 179.8,193.5 188.1,176.1 208.1,185.2 	"/>
+	<polygon class="st4" points="110.6,185.2 130.6,176.1 138.8,193.5 144.1,164.6 87.8,162.1 	"/>
+</g>
+<g>
+	<polygon class="st5" points="87.8,162.1 111.4,208.1 110.6,185.2 	"/>
+	<polygon class="st5" points="208.1,185.2 207.1,208.1 230.8,162.1 	"/>
+	<polygon class="st5" points="144.1,164.6 138.8,193.5 145.4,227.6 146.9,182.7 	"/>
+	<polygon class="st5" points="174.6,164.6 171.9,182.6 173.1,227.6 179.8,193.5 	"/>
+</g>
+<polygon class="st6" points="179.8,193.5 173.1,227.6 177.9,230.9 207.1,208.1 208.1,185.2 "/>
+<polygon class="st6" points="110.6,185.2 111.4,208.1 140.6,230.9 145.4,227.6 138.8,193.5 "/>
+<polygon class="st7" points="180.3,262.3 180.6,253 178.1,250.8 140.4,250.8 138.1,253 138.3,262.3 106.8,247.4 117.8,256.4 
+	140.1,271.9 178.4,271.9 200.8,256.4 211.8,247.4 "/>
+<polygon class="st8" points="177.9,230.9 173.1,227.6 145.4,227.6 140.6,230.9 138.1,253 140.4,250.8 178.1,250.8 180.6,253 "/>
+<g>
+	<polygon class="st9" points="278.3,114.2 286.8,73.4 274.1,35.5 177.9,106.9 214.9,138.2 267.2,153.5 278.8,140 273.8,136.4 
+		281.8,129.1 275.6,124.3 283.6,118.2 	"/>
+	<polygon class="st9" points="31.8,73.4 40.3,114.2 34.9,118.2 42.9,124.3 36.8,129.1 44.8,136.4 39.8,140 51.3,153.5 103.6,138.2 
+		140.6,106.9 44.4,35.5 	"/>
+</g>
+<polygon class="st6" points="267.2,153.5 214.9,138.2 230.8,162.1 207.1,208.1 238.3,207.7 284.8,207.7 "/>
+<polygon class="st6" points="103.6,138.2 51.3,153.5 33.9,207.7 80.3,207.7 111.4,208.1 87.8,162.1 "/>
+<polygon class="st6" points="174.6,164.6 177.9,106.9 193.1,65.8 125.6,65.8 140.6,106.9 144.1,164.6 145.3,182.8 145.4,227.6 
+	173.1,227.6 173.3,182.8 "/>
+</svg>

public/integrations/walletconnect.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="300px" height="185px" viewBox="0 0 300 185" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>WalletConnect</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="walletconnect-logo-alt" fill="#3B99FC" fill-rule="nonzero">
+            <path d="M61.4385429,36.2562612 C110.349767,-11.6319051 189.65053,-11.6319051 238.561752,36.2562612 L244.448297,42.0196786 C246.893858,44.4140867 246.893858,48.2961898 244.448297,50.690599 L224.311602,70.406102 C223.088821,71.6033071 221.106302,71.6033071 219.883521,70.406102 L211.782937,62.4749541 C177.661245,29.0669724 122.339051,29.0669724 88.2173582,62.4749541 L79.542302,70.9685592 C78.3195204,72.1657633 76.337001,72.1657633 75.1142214,70.9685592 L54.9775265,51.2530561 C52.5319653,48.8586469 52.5319653,44.9765439 54.9775265,42.5821357 L61.4385429,36.2562612 Z M280.206339,77.0300061 L298.128036,94.5769031 C300.573585,96.9713 300.573599,100.85338 298.128067,103.247793 L217.317896,182.368927 C214.872352,184.763353 210.907314,184.76338 208.461736,182.368989 C208.461726,182.368979 208.461714,182.368967 208.461704,182.368957 L151.107561,126.214385 C150.496171,125.615783 149.504911,125.615783 148.893521,126.214385 C148.893517,126.214389 148.893514,126.214393 148.89351,126.214396 L91.5405888,182.368927 C89.095052,184.763359 85.1300133,184.763399 82.6844276,182.369014 C82.6844133,182.369 82.684398,182.368986 82.6843827,182.36897 L1.87196327,103.246785 C-0.573596939,100.852377 -0.573596939,96.9702735 1.87196327,94.5758653 L19.7936929,77.028998 C22.2392531,74.6345898 26.2042918,74.6345898 28.6498531,77.028998 L86.0048306,133.184355 C86.6162214,133.782957 87.6074796,133.782957 88.2188704,133.184355 C88.2188796,133.184346 88.2188878,133.184338 88.2188969,133.184331 L145.571,77.028998 C148.016505,74.6345347 151.981544,74.6344449 154.427161,77.028798 C154.427195,77.0288316 154.427229,77.0288653 154.427262,77.028899 L211.782164,133.184331 C212.393554,133.782932 213.384814,133.782932 213.996204,133.184331 L271.350179,77.0300061 C273.79574,74.6355969 277.760778,74.6355969 280.206339,77.0300061 Z" id="WalletConnect"></path>
+        </g>
+    </g>
+</svg>