Test

README.md

@@ -1,2 +1,26 @@
-# web3getter
-Stitch, share and combine your web3 data into a beautiful, customisable dashboard.
+# My Room
+
+My Room enables people to collect, share, and utilize their NFTs in a secure a manner with an intuitive and sleek UI built for the mainstream user. Let's unlock your NFT potential. 
+
+## Our use of Sponsors 
+
+### Lens Protocol. 
+My Room relies on Lens Protocol to integrate the lens profiles for each My Room page. The Lens Handle is prominently atop the dashboard and we use that handle to check if Users have created a room or not. Users can search for their friend's rooms by resolving to their Lens handles and they can follow each other using the Lens follow integration. My Room's entire social element runs on those fundamental features of Lens but adds the personalized dashboard for each user. We believe the intuitive and sleek UI of My Room will enable web3 to have a better social web3 experience and encourage non-web3 users to socially utilize their NFTs.
+
+### WalletConnect. 
+My Room is a deployed Dapp that integrates Wallet Connect to provide a convenient user experience for onboarding mainstream people into web3. We place a themed wallet connect button on the home page of the dapp to immprove the user interface. We rely extensively on Wallet Connect to provide quick access to multiple wallets across multiple chains. The wallet connect themed QR pop-up emphasizes the importance of connecting a wallet but relaxes the user with the use of the orange color. 
+
+### Magic.
+We aim to use My Room to transform millions of owners of NFTs into millions of users of NFTs. My Room will help onboard more owners and users of NFTs through improvements in UX. The Magic Wallet SDK was crucial to the building of our Dapp. Authentication enabled users to login with their email address to access their dashboard. Such an improvement in UX is important to ensure that  mainstream users can access My Room without sacrificing any of their security. 
+
+### Base.
+Our target user are mainstream users who are unfamiliar with web3. Deploying on Base means that users can enter the convenient ecosystem of Coinbase and potentially begin to use Coinbase's financial services and NFT marketplace because of their use of My Room. Each profile is a mintable ERC-721 contract. Each profile resolves to the minter's address. We deployed the ERC-721 contract on Base testnet because we wanted to enable the user to resolve to their addresses. The ERC-721 is an easy and fast way for users to share their room profiles and to save the content of their room profiles to the token URI. Our target user are mainstream users who are unfamiliar with web3. 
+
+### Scroll.
+The dapp we built needs speed and cheap transaction fees to ensure the best UX. Scroll delivers both. Each profile is a mintable ERC-721 contract. Each profile resolves to the minter's address. We deployed the ERC-721 contract on Scroll testnet because we wanted to enable the user to resolve to their addresses. The ERC-721 is an easy and fast way for users to share their room profiles and to save the content of their room profiles to the token URI. 
+
+### Polygon.
+The dapp we built needs speed and cheap transaction fees to ensure the best UX. Polygon delivers both. Each profile is a mintable ERC-721 contract. Each profile resolves to the minter's address. We deployed the ERC-721 contract on Polygon testnet because we wanted to enable the user to resolve to their addresses. The ERC-721 is an easy and fast way for users to share their room profiles and to save the content of their room profiles to the token URI. Our dashboard pulls NFT data across wallets, across chains, which means that user experience with NFTs has vastly improved. Our dashboard will enable millions of owners of NFTs to analyze their own NFT and others without viewing the junk or uninteresting NFTs owned by each individual. 
+
+### Infura.
+Our social web3 app uses Infura along with Lens Protocol to provide a cross-chain, cross-wallet experience. Built with Truffle, our dapp enables user to follow and post using their Lens profiles. 

apps/dashkit/.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.yarn

apps/dashkit/package.json

@@ -11,6 +11,8 @@
   "dependencies": {
     "@apollo/client": "^3.7.9",
     "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@rive-app/react-canvas": "^3.0.38",
     "@types/node": "18.14.1",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
@@ -21,6 +23,7 @@
     "ethers": "<6",
     "framer-motion": "^10.0.0",
     "graphql": "^16.6.0",
+    "magic-sdk": "^13.5.0",
     "next": "13.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/dashkit/src/components/Button.tsx

@@ -16,8 +16,9 @@ function Button({ as = "button", className, ...props }: BaseButtonProps) {
   const Component = as;
   return (
     <Component
+      style={{ lineHeight: "18px"}}
       {...props}
-      className={`rounded px-8 py-2 text-xl font-sans bg-pumpkin-400 text-slate-800 shadow-md hover:bg-pumpkin-500 transition-colors active:bg-pumpkin-600 border-amber-100 flex flex-row items-center justify-between ${
+      className={`rounded px-2 text-sm font-sans bg-pumpkin-400 text-slate-800 shadow-md hover:bg-pumpkin-500 transition-colors active:bg-pumpkin-600 border-amber-100 flex flex-row items-center justify-between m-2 ${
         className ?? ""
       }`}
     />

apps/dashkit/src/components/DragGrid.tsx

@@ -1,7 +1,52 @@
 import {
-
-} from "@dnd-kit/core"
+  DndContext,
+  PointerSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  closestCenter,
+} from '@dnd-kit/core';
+import { SortableContext } from '@dnd-kit/sortable';
+import { Showcase } from '@/components';
+import BaseWidget from './widgets/BaseWidget';
 
-export const DragGrid = () => {
-    return <></>
-}
+const DragGrid = () => {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(TouchSensor)
+  );
+
+  return (
+    <div className="w-full max-w-2xl">
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+      >
+        <Showcase data={{}} />
+        <SortableContext items={[]}>
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(3, 1fr)',
+              gridAutoFlow: 'dense',
+              gridAutoRows: '3fr',
+            }}
+          >
+            <BaseWidget size="small" id="tiny" />
+            <BaseWidget size="small" id="tiny" />
+            <BaseWidget size="doubleTall" id="slender" />
+            <BaseWidget size="doubleWide" id="wide" />
+            <BaseWidget size="small" id="tiny" />
+            <BaseWidget size="doubleWide" id="wide" />
+            <BaseWidget size="small" id="tiny" />
+            <BaseWidget size="doubleTall" id="slender" />
+            <BaseWidget size="doubleTall" id="slender" />
+            <BaseWidget size="small" id="tiny" />
+          </div>
+        </SortableContext>
+      </DndContext>
+    </div>
+  );
+};
+
+export default DragGrid;

apps/dashkit/src/components/Greeter.tsx

@@ -0,0 +1,20 @@
+type GreeterProps = {
+  me?: boolean,
+  name: string
+}
+
+const Greeter = ({me, name}: GreeterProps) => {
+  return (
+    <div className="rounded border-2 font-sans inline-flex m-2" style={{
+      borderColor: "var(--color-primary)",
+      color: "var(--color-primary-contrast)"
+    }}>
+      <span className="h-full p-2" style={{background: "var(--color-primary"}}>{me ? "Welcome home " : "This room belongs to "}</span>
+      <span className="p-2" style={{
+        fontFamily: "var(--header-font)",
+        color: "var(--color-primary)"
+      }}>{name}</span>
+    </div>
+  )
+}
+export default Greeter

apps/dashkit/src/components/IconButton.tsx

@@ -0,0 +1,29 @@
+import { HTMLAttributes, ReactElement, ReactNode } from "react";
+
+type BaseButtonProps = {
+  className?: string;
+  as?: "a" | "button";
+  icon?: ReactNode;
+};
+
+type LinkButtonProps = BaseButtonProps & HTMLAttributes<HTMLAnchorElement>;
+
+type ButtonProps = BaseButtonProps & HTMLAttributes<HTMLButtonElement>;
+
+function IconButton(props: LinkButtonProps): ReactElement;
+function IconButton(props: ButtonProps): ReactElement;
+function IconButton({ as = "button", className, ...props }: BaseButtonProps) {
+  const Component = as;
+  return (
+    <Component
+      {...props}
+      className={`rounded-full border-white border-2 text-white aspect-square p-3 mr-2 hover:bg-opacity-80 hover:bg-black/25 active:bg-black/40 ${
+        className ?? ""
+      }`}
+    >
+      {props.icon}
+    </Component>
+  );
+}
+
+export default IconButton;

apps/dashkit/src/components/MagicPopup.tsx

@@ -0,0 +1,109 @@
+import React, { useState, ChangeEvent, FormEvent, useEffect } from 'react';
+import { Magic } from "magic-sdk";
+import { ethers } from "ethers";
+import { useRouter } from "next/router";
+
+
+type MagicPopupModalProps = {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function MagicPopup() {
+  const [showModal, setShowModal] = useState(false);
+  const [email, setEmail] = useState("");
+  const [address, setAddress] = useState(null);
+
+  const handleChange = (event: FormEvent<HTMLInputElement>) => {
+    setEmail(event.currentTarget.value);
+  };
+  const router = useRouter()
+  const handleSignIn = async (event: FormEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    console.log("boo ")
+
+    const magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY as string);
+    console.log("🚀 ~ file: MagicPopup.tsx:25 ~ handleSignIn ~ magic:", magic)
+
+    const didToken = magic.auth.loginWithMagicLink({
+      email
+    });
+    // // 🌐 Send didToken to your backend API
+
+    const provider = new ethers.providers.Web3Provider(magic.rpcProvider as any);
+
+    const signer = provider.getSigner();
+    const address = await signer.getAddress();
+
+    setAddress(address as any);
+    if (address) {
+      router.push("/rooms/me")
+    }
+
+  }
+
+
+
+
+  const openModal = () => {
+    setShowModal(true);
+    console.log("opened")
+  }
+
+  const closeModal = () => {
+    setShowModal(false);
+    console.log("closed")
+  }
+
+  return (
+    <>
+      <button className=" text-white font-bold py-2 px-4 rounded-md" onClick={openModal} style={{ borderRadius: '10px', backgroundColor: "#E88C38" }}>Connect with Magic ✨</button>
+      {showModal && (
+        <div className="popup-overlay min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+          {/* <div className="sm:mx-auto sm:w-full sm:max-w-md">
+            {address && (
+              <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+                {address}
+              </h2>
+            )}
+          </div> */}
+
+          <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md" >
+            <div className="py-8 px-4 shadow sm:rounded-lg sm:px-10" style={{ border: '1px solid var(--color-primary)' }}>
+              <form className="space-y-6" onSubmit={handleSignIn as any}>
+                <div>
+                  <div className="mt-1" style={{ fontFamily: 'var(--header-font)' }}>
+                    <input
+                      id="email"
+                      name="email"
+                      type="email"
+                      placeholder="email"
+                      autoComplete="email"
+                      required
+                      className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none sm:text-sm"
+                      onChange={handleChange}
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <button
+                    type="submit"
+                    className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 "
+                    style={{ background: 'transparent', color: 'var(--color-primary)', border: '1px solid var(--color-primary)', borderRadius: '12px' }}
+                  >
+
+                    Sign in
+                  </button>
+
+                </div>
+              </form>
+
+
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};

apps/dashkit/src/components/Navigation.tsx

@@ -1,13 +1,35 @@
+import IconButton from '@/components/IconButton';
+import MyRoomLogo from '@/svg/logo.svg';
+import {
+  HiMagnifyingGlass,
+  HiQrCode,
+  HiWrench,
+} from 'react-icons/hi2';
+import Image from 'next/image';
+
 const Navigation = () => {
-  return <>
-    <nav className="navbar navbar-expand-lg navbar-light flex" style={{
-      background: "var(--color-primary)",
-      color: "var(--color-primary-contrast)",
-      borderRadius: "0 0 1em 1em",
-      height: "4em",
-    }}>
-    </nav>
-  </>;
+  return (
+    <>
+      <nav
+        className="flex justify-between items-center"
+        style={{
+          background: 'var(--color-primary)',
+          color: 'var(--color-primary-contrast)',
+          borderRadius: '0 0 1em 1em',
+          height: '4em',
+        }}
+      >
+        <a href="#" className="mx-7">
+          <MyRoomLogo />
+        </a>
+        <div id="button-section" className="mx-6">
+          <IconButton icon={<HiMagnifyingGlass />} />
+          <IconButton icon={<HiQrCode />} />
+          <IconButton icon={<HiWrench />} />
+        </div>
+      </nav>
+    </>
+  );
 };
 
-export default Navigation;
+export default Navigation;

apps/dashkit/src/components/Showcase.tsx

@@ -0,0 +1,19 @@
+type ShowcaseProps = {
+  data: any;
+};
+
+const Showcase = ({
+    data
+}: ShowcaseProps) => {
+    return (
+        <div className="h-96 p-2">
+            <div className="flex flex-row justify-center items-center w-full h-full rounded-3xl shadow-lg bg-slate-700 text-white">
+            <h1>
+                Test
+            </h1>
+            </div>
+        </div>
+    );
+}
+
+export default Showcase;

apps/dashkit/src/components/index.tsx

@@ -1,4 +1,8 @@
 import Button from './Button';
 import Navigation from './Navigation';
+import IconButton from './IconButton';
+import Showcase from './Showcase';
+import Greeter from './Greeter';
+import DragGrid from './DragGrid';
 
-export { Button, Navigation };
+export { Button, Navigation, IconButton, Showcase, Greeter, DragGrid };