From 1c737e5f9dcb2a680f34b2b3719ad718c9e603a3 Mon Sep 17 00:00:00 2001 From: Simon Tennant Date: Thu, 6 Feb 2025 12:19:56 +0100 Subject: [PATCH 01/20] test a small change to see if build and deploys to beta --- tsconfig.json | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index cd69780..ef41259 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -42,11 +42,5 @@ "postcss.config.js", "tailwind.config.js" ], - "exclude": [ - "node_modules", - "build", - "dist", - ".next", - "coverage" - ] -} \ No newline at end of file + "exclude": ["node_modules", "build", "dist", ".next", "coverage"] +} From d15e393683b840ba3a36070f04f94c00a4f01ae5 Mon Sep 17 00:00:00 2001 From: Zain Ali Shah Date: Thu, 6 Feb 2025 14:25:52 +0300 Subject: [PATCH 02/20] updating package json --- package-lock.json | 7 ++++--- package.json | 1 + 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index b963d9b..5b4c28a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "zapzap-web", - "version": "0.2.0", + "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "zapzap-web", - "version": "0.2.0", + "version": "0.1.0", "dependencies": { "@radix-ui/react-dialog": "^1.1.5", "@radix-ui/react-dropdown-menu": "^2.1.5", @@ -34,7 +34,7 @@ "web-vitals": "^4.2.4" }, "devDependencies": { - "@babel/plugin-proposal-private-property-in-object": "^7.18.6", + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@typescript-eslint/eslint-plugin": "^5.5.0", "@typescript-eslint/parser": "^5.5.0", "autoprefixer": "^10.4.17", @@ -581,6 +581,7 @@ "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==", "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.", "dev": true, + "license": "MIT", "dependencies": { "@babel/helper-annotate-as-pure": "^7.18.6", "@babel/helper-create-class-features-plugin": "^7.21.0", diff --git a/package.json b/package.json index cfa5486..5bbbb0d 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ ] }, "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@typescript-eslint/eslint-plugin": "^5.5.0", "@typescript-eslint/parser": "^5.5.0", "autoprefixer": "^10.4.17", From bf6b1559122c4e58da4409bb36ce1f83a3651707 Mon Sep 17 00:00:00 2001 From: Zain Ali Shah Date: Thu, 6 Feb 2025 14:45:19 +0300 Subject: [PATCH 03/20] changing env to api beta, changing payment status localhost to API_ENDPOINT --- .env.production | 2 +- src/PageComponents/HomePage/PaymentStatus.jsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/.env.production b/.env.production index 5e9c2f2..939139a 100644 --- a/.env.production +++ b/.env.production @@ -1,2 +1,2 @@ -REACT_APP_API_ENDPOINT=https://api.zap-zap.me +REACT_APP_API_ENDPOINT=https://api-beta.zap-zap.me CI=false \ No newline at end of file diff --git a/src/PageComponents/HomePage/PaymentStatus.jsx b/src/PageComponents/HomePage/PaymentStatus.jsx index 6211ecd..c2b21cc 100644 --- a/src/PageComponents/HomePage/PaymentStatus.jsx +++ b/src/PageComponents/HomePage/PaymentStatus.jsx @@ -1,5 +1,6 @@ import { useState, useEffect } from 'react'; import toast from 'react-hot-toast'; +import { API_ENDPOINT } from '../config'; function PaymentStatus({ paymentHash, onSuccess }) { const [status, setStatus] = useState('Waiting for payment...'); @@ -9,7 +10,7 @@ function PaymentStatus({ paymentHash, onSuccess }) { if (!paymentHash) return; const eventSource = new EventSource( - `http://localhost:8080/sse/subscribe?payment_hash=${paymentHash}` + `${API_ENDPOINT}/sse/subscribe?payment_hash=${paymentHash}` ); eventSource.onmessage = (event) => { @@ -40,7 +41,7 @@ function PaymentStatus({ paymentHash, onSuccess }) { return () => { eventSource.close(); }; - }, [paymentHash]); + }, [paymentHash, onSuccess]); return (
From 8c37c5b7521fb20735038b22aadd3f16628bc73a Mon Sep 17 00:00:00 2001 From: Zain Ali Shah Date: Thu, 6 Feb 2025 14:55:38 +0300 Subject: [PATCH 04/20] changing config path in Payment status --- src/PageComponents/HomePage/PaymentStatus.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/PageComponents/HomePage/PaymentStatus.jsx b/src/PageComponents/HomePage/PaymentStatus.jsx index c2b21cc..069c22b 100644 --- a/src/PageComponents/HomePage/PaymentStatus.jsx +++ b/src/PageComponents/HomePage/PaymentStatus.jsx @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; import toast from 'react-hot-toast'; -import { API_ENDPOINT } from '../config'; +import { API_ENDPOINT } from '../../config'; function PaymentStatus({ paymentHash, onSuccess }) { const [status, setStatus] = useState('Waiting for payment...'); From 681f70c951bc79b835fc9dd07d60d6f8ca9e73ac Mon Sep 17 00:00:00 2001 From: Zain Ali Shah Date: Thu, 6 Feb 2025 17:41:17 +0300 Subject: [PATCH 05/20] updated to include trailing / in tips --- src/lib/utils/apiHandlers.ts | 51 +++++++++++++++++------------------- 1 file changed, 24 insertions(+), 27 deletions(-) diff --git a/src/lib/utils/apiHandlers.ts b/src/lib/utils/apiHandlers.ts index 7e5e0dd..ffbbcc5 100644 --- a/src/lib/utils/apiHandlers.ts +++ b/src/lib/utils/apiHandlers.ts @@ -3,60 +3,57 @@ import axiosClient, { API_BASE_URL } from './axiosClient'; // Example API handler // PUT /users/me -export const updateWalletAddress = async (newAddress:string) => { +export const updateWalletAddress = async (newAddress: string) => { try { - const response = await axiosClient.put(`${API_BASE_URL}/users/me`, { wallet_address: newAddress }); + const response = await axiosClient.put(`${API_BASE_URL}/users/me`, { + wallet_address: newAddress, + }); return response.data; } catch (error) { throw error; } }; - type TCreateInvoice = { - "amount_sats": number, - "comment": string, - "tweet_url": string, - "tip_sender": string -} + amount_sats: number; + comment: string; + tweet_url: string; + tip_sender: string; +}; // POST /tips -export const createInvoice = async (request_body:TCreateInvoice):Promise> =>{ +export const createInvoice = async ( + request_body: TCreateInvoice +): Promise> => { try { - return await axiosClient.post(`${API_BASE_URL}/tips`, request_body); - + return await axiosClient.post(`${API_BASE_URL}/tips/`, request_body); } catch (error) { throw error; - } -} +}; // GET tips => /tips/received/:username -export const getUsersTipReceived = async (username:string) =>{ +export const getUsersTipReceived = async (username: string) => { try { - return await axiosClient.get(`${API_BASE_URL}/tips/received/${username}`); + return await axiosClient.get(`${API_BASE_URL}/tips/received/${username}`); } catch (error) { throw error; - } -} +}; // GET tips => /tips/received/:username -export const getUsersTipSent = async (username:string) =>{ +export const getUsersTipSent = async (username: string) => { try { - return await axiosClient.get(`${API_BASE_URL}/tips/sent/${username}`); + return await axiosClient.get(`${API_BASE_URL}/tips/sent/${username}`); } catch (error) { throw error; - } -} - +}; -// GET USER BY USERNAME => /users/:username -export const getUserByUsername = async(username:string)=>{ +// GET USER BY USERNAME => /users/:username +export const getUserByUsername = async (username: string) => { try { - return await axiosClient.get(`${API_BASE_URL}/users/${username}`); + return await axiosClient.get(`${API_BASE_URL}/users/${username}`); } catch (error) { throw error; - } -} \ No newline at end of file +}; From 40f0c4bf88b84070efb868242d1566994346851f Mon Sep 17 00:00:00 2001 From: Zain Ali Shah Date: Thu, 6 Feb 2025 19:10:07 +0300 Subject: [PATCH 06/20] changed firebaserc --- .firebaserc | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.firebaserc b/.firebaserc index 2296599..e5abc02 100644 --- a/.firebaserc +++ b/.firebaserc @@ -6,12 +6,12 @@ "zapzap-me": { "hosting": { "production": [ - "production-zapzap-me" + "zapzap-me-production" ], "beta": [ - "beta-zapzap-me" + "zapzap-me-beta" ] } } } -} +} \ No newline at end of file From d14f0ed8ee241c844f22026e3dfad6a0438b0ece Mon Sep 17 00:00:00 2001 From: Zain Ali Shah Date: Sat, 8 Feb 2025 04:17:10 +0500 Subject: [PATCH 07/20] changes in desc 1. visual changes. 2. reduced footer size on mobile. 3. show "you need to add wallet' on settings page if its undefined. 4. clicking on date takes to the tweet (testing with backend IN PROGRESS) --- src/App.css | 10 +- src/App.js | 51 +-- .../UserProfilePage/FeedItem.jsx | 131 ++++-- .../UserProfilePage/ProfileTop.jsx | 51 ++- src/components/layouts/Footer/Footer.jsx | 74 ++- src/index.css | 48 +- src/pages/SettingsPage.jsx | 98 ++-- src/pages/UserProfilePage.jsx | 5 +- src/styles/faq.scss | 15 +- src/styles/homepage.scss | 2 +- src/styles/settings.scss | 420 ++++++++++-------- 11 files changed, 541 insertions(+), 364 deletions(-) diff --git a/src/App.css b/src/App.css index 69cf5e5..4cd6930 100644 --- a/src/App.css +++ b/src/App.css @@ -12,6 +12,7 @@ margin: 0 auto; width: 100%; display: flex; + flex-direction: column; } nav.navDesktop div.navDesktopContents { @@ -19,4 +20,11 @@ max-width: 960px; margin: 0 auto; padding: 0 24px; - } \ No newline at end of file + } + + + @media (max-width:786px){ + .main-content { + padding: 0px; + } + } diff --git a/src/App.js b/src/App.js index 415013f..accf2ec 100644 --- a/src/App.js +++ b/src/App.js @@ -7,39 +7,32 @@ import SettingsPage from './pages/SettingsPage'; import UserPage from './pages/UserProfilePage'; import FAQPage from './pages/FAQ'; import ProtectedRoute from './components/ProtectedRoute'; -import "./App.css" +import './App.css'; import { Toaster } from 'react-hot-toast'; - - function App() { return ( -
-
-
- - } /> - - - - } - /> - } /> - - } - /> - -
-
- -
+
+
+
+ + } /> + + + + } + /> + } /> + } /> + +
+
+ +
); } -export default App; \ No newline at end of file +export default App; diff --git a/src/PageComponents/UserProfilePage/FeedItem.jsx b/src/PageComponents/UserProfilePage/FeedItem.jsx index 266ceda..84d8354 100644 --- a/src/PageComponents/UserProfilePage/FeedItem.jsx +++ b/src/PageComponents/UserProfilePage/FeedItem.jsx @@ -1,11 +1,13 @@ +import { SquareArrowOutUpRight } from 'lucide-react'; import { useAuth } from '../../lib/contexts/AuthContext'; -import {formatDateDifference} from '../../lib/utils/helperFunctions'; +import { formatDateDifference } from '../../lib/utils/helperFunctions'; import React from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -const sampleAvatar='https://static.vecteezy.com/system/resources/previews/009/292/244/non_2x/default-avatar-icon-of-social-media-user-vector.jpg' +const sampleAvatar = + 'https://static.vecteezy.com/system/resources/previews/009/292/244/non_2x/default-avatar-icon-of-social-media-user-vector.jpg'; const FeedItem = (props) => { const { - tip_sender = "anonymous", + tip_sender = 'anonymous', created_at, tweet_id, recipient, @@ -13,75 +15,106 @@ const FeedItem = (props) => { avatar_url, comment, tip_type, - mode + mode, } = props; - console.log("🚀 ~ FeedItem ~ props:", props) - const navigate = useNavigate() + console.log('🚀 ~ FeedItem ~ props:', props); + const navigate = useNavigate(); - - return ( -
- {tip_sender} -
-
- -
-
- {amount_sats} sat - {formatDateDifference(created_at)} -
- {comment &&
{comment}
} + return ( +
+ {tip_sender} +
+
+ +
+
+ {amount_sats} sat -{' '} +
+ {comment &&
{comment}
}
- ); - } +
+ ); +}; - +const DateTippedAt = ({ created_at, handle, tweet_id }) => { + const navigateToProfile = () => { + if (handle) + window.open(`https://x.com/${handle}/status/${tweet_id}`, '_blank'); + }; + return ( + navigateToProfile()} + className="inline-flex cursor-pointer gap-1 items-center" + > + {formatDateDifference(created_at)}{' '} + + + ); +}; export default FeedItem; +const TipTitle = ({ tip_sender, recipient, type }) => { + const { username } = useParams(); + const { user } = useAuth(); -const TipTitle = ({tip_sender, recipient, type})=>{ - const {username} = useParams() - const {user} = useAuth() - // =========== SENT - if (type==="sent"){ - // ---------- logged in user sent a tip - if (user?.twitter_username===tip_sender) { + if (type === 'sent') { + // ---------- logged in user sent a tip + if (user?.twitter_username === tip_sender) { return ( - <>You tipped - ) + <> + You tipped {' '} + + ); } // ----------- Others page if (tip_sender) { return ( - <> received a tip from - ) + <> + sent a tip to{' '} + {' '} + + ); } - } - // ======== RECEIVED => @someone sent a tip - if (recipient){ + // ======== RECEIVED => @someone sent a tip + if (recipient) { return ( <> - {' '} sent a tip + Receieved a tip from {` `} + - ) + ); } -} - +}; -const TwitterHandle = ({handle})=>{ - - const navigateToProfile = () =>{ - if (handle) window.open(`https://x.com/${handle}`, "_blank") - } +const TwitterHandle = ({ handle }) => { + const navigateToProfile = () => { + if (handle) window.open(`/${handle}`, '_blank'); + }; return ( - @{handle??"anonymous"} - ) -} - - + + @{handle ?? 'anonymous'} + + ); +}; diff --git a/src/PageComponents/UserProfilePage/ProfileTop.jsx b/src/PageComponents/UserProfilePage/ProfileTop.jsx index 4cdf02f..906f303 100644 --- a/src/PageComponents/UserProfilePage/ProfileTop.jsx +++ b/src/PageComponents/UserProfilePage/ProfileTop.jsx @@ -4,46 +4,54 @@ import { useAuth } from '../../lib/contexts/AuthContext'; import { getUserByUsername } from '../../lib/utils/apiHandlers'; import ProfileSkeleton from '../../components/ui/LoadingSkeleton/ProfileSkeleton'; -const avatarPlaceholder = "https://s3-alpha-sig.figma.com/img/cc52/5eff/2ee1d0cd1de936a0c514f7464971af51?Expires=1739145600&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=uQMdAH7Qtc1b8bI7HeDbMAtiVgBWD3ATjGLMX~WO-ytSB-w1tWgH9qMSkv1hF4zvAS9IgHNS5SqrAyE5OwhkUVgQkXxciBO8VbNtPhLJ4Gb3c~zxubfYdkPHiOj20euKKhmJxa4XRg~9qaib45zGjnJq20MmOsp7iqMjWAS4yNJXpbp5yWBP~6jqjp9ob4n7UDH7LeD0-l8zHPerfIuffkex3TNIyfEOqjxNCRbYk95OaeGwD6ZiMbfcUkg3~2mjUSDUCbGfWQQK0QyOHjgYvRYj-WgOUoTmzJiiFjtoQzZm38xbCdvP2-0SMYgC5pP9Ho2SHMUC1pmCPIH~hjGAQQ__"; +const avatarPlaceholder = + 'https://s3-alpha-sig.figma.com/img/cc52/5eff/2ee1d0cd1de936a0c514f7464971af51?Expires=1739145600&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=uQMdAH7Qtc1b8bI7HeDbMAtiVgBWD3ATjGLMX~WO-ytSB-w1tWgH9qMSkv1hF4zvAS9IgHNS5SqrAyE5OwhkUVgQkXxciBO8VbNtPhLJ4Gb3c~zxubfYdkPHiOj20euKKhmJxa4XRg~9qaib45zGjnJq20MmOsp7iqMjWAS4yNJXpbp5yWBP~6jqjp9ob4n7UDH7LeD0-l8zHPerfIuffkex3TNIyfEOqjxNCRbYk95OaeGwD6ZiMbfcUkg3~2mjUSDUCbGfWQQK0QyOHjgYvRYj-WgOUoTmzJiiFjtoQzZm38xbCdvP2-0SMYgC5pP9Ho2SHMUC1pmCPIH~hjGAQQ__'; function ProfileTop() { const { username } = useParams(); const [userData, setUserData] = useState(); - const [ isLoading, setIsLoading ] = useState(false) + console.log('🚀 ~ ProfileTop ~ userData:', userData); + const [isLoading, setIsLoading] = useState(false); + const { user } = useAuth(); // const twitter_username = user?.twitter_username || 'unknown'; // const wallet_address = user?.wallet_address || 'N/A'; // const avatar_url = user?.avatar_url || avatarPlaceholder; - - const getUser = async()=>{ - setIsLoading(true) - const response = await getUserByUsername(username) - if (response.status===200){ - setUserData(response.data) + + const getUser = async () => { + setIsLoading(true); + const response = await getUserByUsername(username); + if (response.status === 200) { + setUserData(response.data); } - setIsLoading(false) - } + setIsLoading(false); + }; useLayoutEffect(() => { - getUser() - }, [username]) - if (isLoading || !userData) return + getUser(); + }, [username]); + if (isLoading || !userData) return ; return (
- Profile + Profile {userData?.twitter_username && ( - + > )}
-
+
@{userData.twitter_username}
- -
+ +
{userData?.twitter_username && ( @@ -81,7 +89,6 @@ function ProfileTop() { )}
- ); } @@ -93,7 +100,7 @@ const XIcon = () => ( height="24" viewBox="0 0 26 24" xmlns="http://www.w3.org/2000/svg" - className='self-end' + className="self-end" > diff --git a/src/components/layouts/Footer/Footer.jsx b/src/components/layouts/Footer/Footer.jsx index 65e515f..1c116a5 100644 --- a/src/components/layouts/Footer/Footer.jsx +++ b/src/components/layouts/Footer/Footer.jsx @@ -5,24 +5,74 @@ const Footer = () => { return (