feat(final): explore page and cleanup

Aman-zishan · Dec 5, 2023 · 58d46cb · 58d46cb
1 parent 34f14b6
commit 58d46cb
Show file tree

Hide file tree

Showing 20 changed files with 285 additions and 508 deletions.
diff --git a/contracts/keys.clar b/contracts/keys.clar
@@ -1,8 +1,9 @@
 
 ;; title: keys
 ;; version: 1.0.0
-;; summary: 
-;; description:
+;; summary: Core contract of sFriend.Tech. sFriend.tech is a clone application of friend.tech in stacks
+;; description: This contracts contains all the core functions of the key mechanism, the pricing model follows a quadratic formula 
+;; to calculate the price of a key based on supply trends.
 
 ;; traits
 ;;
@@ -94,6 +95,7 @@
   (asserts! (> (stx-get-balance tx-sender) (+ price protocolFee subjectFee)) err-insufficient-payment)
   ;; Retain base amount in contract itself
   (print {supply: supply, price:price, protocolFee:protocolFee, subjectFee:subjectFee, amount: amount})
+  ;; Allow a subject to buy his first key
   (if (> price u0)
       (begin
         ;; Retain base amount in contract itself
@@ -152,7 +154,7 @@
                 (/ (* (* (+ (- supply u1) amount) (+ supply amount)) (+ (* u2 (+ (- supply u1) amount )) u1)) u6)))
       (summation (- sum2 sum1))
     )
-    (/ (* summation u1000000) u16) ;; equivalent to 'summation * 1 ether / 16000' in Solidity
+    (/ (* summation u1000000) u16) 
 
   )
 )

diff --git a/settings/Devnet.toml b/settings/Devnet.toml
@@ -18,7 +18,7 @@ balance = 10_000_000_000
 
 [accounts.wallet_2]
 mnemonic = "hold excess usual excess ring elephant install account glad dry fragile donkey gaze humble truck breeze nation gasp vacuum limb head keep delay hospital"
-balance = 100_000_000_000_000
+balance = 10_000_000_000
 # secret_key: 530d9f61984c888536871c6573073bdfc0058896dc1adfe9a6a10dfacadc209101
 # stx_address: ST2CY5V39NHDPWSXMW9QDT3HC3GD6Q6XX4CFRK9AG
 # btc_address: muYdXKmX9bByAueDe6KFfHd5Ff1gdN9ErG

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,145 +1,9 @@
-import {
-  AppConfig,
-  FinishedAuthData,
-  UserSession,
-  openSignatureRequestPopup,
-  showConnect
-} from '@stacks/connect';
-import { verifyMessageSignatureRsv } from '@stacks/encryption';
-import { StacksTestnet } from '@stacks/network';
-import {
-  callReadOnlyFunction,
-  cvToValue,
-  getAddressFromPublicKey,
-  uintCV
-} from '@stacks/transactions';
-import { ReactElement, useState } from 'react';
+import { ReactElement } from 'react';
 
 import LoginPage from './pages/Login';
 
 function App(): ReactElement {
-  const [address, setAddress] = useState('');
-  const [isSignatureVerified, setIsSignatureVerified] = useState(false);
-  const [hasFetchedReadOnly, setHasFetchedReadOnly] = useState(false);
-
-  // Initialize your app configuration and user session here
-  const appConfig = new AppConfig(['store_write', 'publish_data']);
-  const userSession = new UserSession({ appConfig });
-
-  const message = 'Hello, Hiro Hacks!';
-  const network = new StacksTestnet();
-
-  // Define your authentication options here
-  const authOptions = {
-    userSession,
-    appDetails: {
-      name: 'My App',
-      icon: 'src/favicon.svg'
-    },
-    onFinish: (data: FinishedAuthData) => {
-      // Handle successful authentication here
-      const userData = data.userSession.loadUserData();
-      console.log(userData);
-      setAddress(userData.profile.stxAddress.testnet); // or .testnet for testnet
-    },
-    onCancel: () => {
-      // Handle authentication cancellation here
-    },
-    redirectTo: '/'
-  };
-
-  const connectWallet = () => {
-    showConnect(authOptions);
-  };
-
-  const disconnectWallet = () => {
-    if (userSession.isUserSignedIn()) {
-      userSession.signUserOut('/');
-      setAddress('');
-    }
-  };
-
-  const fetchReadOnly = async (senderAddress: string) => {
-    // Define your contract details here
-    const contractAddress = 'ST000000000000000000002AMW42H';
-    const contractName = 'pox-3';
-    const functionName = 'is-pox-active';
-
-    const functionArgs = [uintCV(10)];
-
-    try {
-      const result = await callReadOnlyFunction({
-        network,
-        contractAddress,
-        contractName,
-        functionName,
-        functionArgs,
-        senderAddress
-      });
-      setHasFetchedReadOnly(true);
-      console.log(cvToValue(result));
-    } catch (error) {
-      console.error('Error fetching read-only function:', error);
-    }
-  };
-
-  const signMessage = () => {
-    if (userSession.isUserSignedIn()) {
-      openSignatureRequestPopup({
-        message,
-        network,
-        onFinish: async ({ publicKey, signature }) => {
-          // Verify the message signature using the verifyMessageSignatureRsv function
-          const verified = verifyMessageSignatureRsv({
-            message,
-            publicKey,
-            signature
-          });
-          if (verified) {
-            // The signature is verified, so now we can check if the user is a keyholder
-            setIsSignatureVerified(true);
-            console.log(
-              'Address derived from public key',
-              getAddressFromPublicKey(publicKey, network.version)
-            );
-          }
-        }
-      });
-    }
-  };
-
   return <LoginPage />;
-
-  // return (
-  //   <div className="text-center">
-  //     <h1 className="text-xl">Friend.tech</h1>
-  //     <div>
-  //       <button onClick={disconnectWallet}>Disconnect Wallet</button>
-  //     </div>
-  //     <div>
-  //       <p>
-  //         {address} is {isKeyHolder ? '' : 'not'} a key holder
-  //       </p>
-  //       <div>
-  //         <input
-  //           type="text"
-  //           id="address"
-  //           name="address"
-  //           placeholder="Enter address"
-  //         />
-  //         <button onClick={() => checkIsKeyHolder(address)}>
-  //           Check Key Holder
-  //         </button>
-  //         <div>
-  //           <p>Key Holder Check Result: {isKeyHolder ? 'Yes' : 'No'}</p>
-  //         </div>
-  //       </div>
-  //     </div>
-  //     <div>
-  //       Sign this message: <button onClick={signMessage}>Sign</button>
-  //     </div>
-  //   </div>
-  // );
 }
 
 export default App;
diff --git a/src/components/chatLeftMenu.tsx b/src/components/chatLeftMenu.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect } from 'react';
-import { NavLink, useNavigate, useParams } from 'react-router-dom';
-import { SVGComponent } from './stacksSvg';
-import ConnectWallet from './connectWallet';
 import useConnect from '@/lib/hooks/useConnect';
 import { truncateAddress } from '@/lib/utils';
+import React, { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import ConnectWallet from './connectWallet';
+import { SVGComponent } from './stacksSvg';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
@@ -44,49 +44,72 @@ const ChatLeftMenu = () => {
     <aside className="fixed inset-y-0 left-0 bg-white shadow-md w-80 h-screen">
       <div className="flex flex-col justify-between h-full">
         <div className="flex-grow">
-          <div className="px-4 py-6 text-center border-b flex flex-row items-center justify-center gap-2">
-            <SVGComponent />
-            <h1 className="text-xl font-normal leading-none">
-              <span className="text-blue-500">sFriend</span>.tech
-            </h1>
-          </div>
+          <nav className="px-4 py-6 border-b">
+            <div className="flex justify-center items-center py-4">
+              <a href="/chats" className="absolute left-4">
+                <svg
+                  className="h-6 w-6"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M15 19l-7-7 7-7"
+                  />
+                </svg>
+              </a>
+
+              <div className="text-center flex flex-row items-center gap-2">
+                <SVGComponent />
+                <h1 className="text-xl font-normal leading-none">
+                  <span className="text-blue-500">sFriend</span>.tech
+                </h1>
+              </div>
+
+              <div className="absolute right-4 opacity-0">
+                <svg
+                  className="h-6 w-6"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M15 19l-7-7 7-7"
+                  />
+                </svg>
+              </div>
+            </div>
+          </nav>
+
           <div className="p-4">
             <ul className="space-y-5">
               {chatRooms.map((chatRoom: any) => {
                 return (
                   <>
                     {chatRoom.hasAccess && (
                       <div
-                        onClick={() =>
+                        onClick={() => {
                           navigate(
                             `/chatRoom?name=${truncateAddress(
                               stxAddress!
                             )}&room=${chatRoom.roomId}`
-                          )
-                        }
+                          );
+                          window.location.reload();
+                        }}
                         className="flex items-center justify-between border-b pb-5 mb-10"
                       >
-                        <div className="flex items-stretch">
-                          <div className="text-gray-400 text-xs">
-                            Members
-                            <br />
-                            connected
-                          </div>
-                          <div className="h-100 border-l mx-4"></div>
-                          <div className="flex flex-nowrap -space-x-3">
-                            <div className="h-9 w-9">
-                              <img
-                                className="object-cover w-full h-full rounded-full"
-                                src="https://ui-avatars.com/api/?background=random"
-                              />
-                            </div>
-                            <div className="h-9 w-9">
-                              <img
-                                className="object-cover w-full h-full rounded-full"
-                                src="https://ui-avatars.com/api/?background=random"
-                              />
-                            </div>
-                          </div>
+                        <div className="flex items-stretch font-bold">
+                          {stxAddress === chatRoom.roomId
+                            ? 'My chat room'
+                            : `${truncateAddress(chatRoom.roomId)}'s chat room`}
                         </div>
                         <div className="flex items-center gap-x-2">
                           <button

diff --git a/src/components/connectWallet.tsx b/src/components/connectWallet.tsx
@@ -7,14 +7,8 @@ import { SVGComponent } from './stacksSvg';
 import { useNavigate } from 'react-router-dom';
 
 function ConnectWallet(): ReactElement {
-  const {
-    user,
-    connectWallet,
-    disconnectWallet,
-    network,
-    isSignedIn,
-    balance
-  } = useConnect();
+  const { connectWallet, disconnectWallet, network, isSignedIn, balance } =
+    useConnect();
   const navigate = useNavigate();
 
   // const fetchReadOnly = async (senderAddress: string) => {

diff --git a/src/components/ui/Messages/Message/Message.css b/src/components/ui/Messages/Message/Message.css
diff --git a/src/components/ui/Messages/Message/Message.tsx b/src/components/ui/Messages/Message/Message.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import './Message.css';
 
 function Message({ message: { text, user }, name }: any) {
   let isSentByCurrentUser = false;