diff --git a/.github/workflows/frontend.yaml b/.github/workflows/frontend.yaml index fa7556c..6c0110f 100644 --- a/.github/workflows/frontend.yaml +++ b/.github/workflows/frontend.yaml @@ -19,10 +19,9 @@ jobs: node-version: '20.x' - run: npm install - run: npm run lint - - run: npm run build cd: needs: ci - if: github.repository == 'mowblox/decentralized-vendor-payment-system' + if: github.repository == 'mowblox/payflow' runs-on: ubuntu-latest defaults: run: diff --git a/frontend/package.json b/frontend/package.json index 23c528d..69ad16a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,15 +15,19 @@ "@radix-ui/react-popover": "^1.1.2", "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-slot": "^1.1.0", + "@tanstack/react-query": "^5.59.20", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cmdk": "^1.0.0", + "connectkit": "^1.8.2", "lucide-react": "^0.454.0", "next": "15.0.0", "react": "18.3.1", "react-dom": "18.3.1", "tailwind-merge": "^2.5.4", - "tailwindcss-animate": "^1.0.7" + "tailwindcss-animate": "^1.0.7", + "viem": "^2.21.44", + "wagmi": "^2.12.29" }, "devDependencies": { "@types/node": "^20.17.3", diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 2503f04..6883e9f 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -1,6 +1,10 @@ + import type { Metadata } from "next"; import { Poltawski_Nowy, Poppins } from 'next/font/google' import "./globals.css"; +import { Web3Provider } from "@/components/Web3Provide"; + + const nowy = Poltawski_Nowy({ variable: '--font-nowy', @@ -29,7 +33,9 @@ export default function RootLayout({ - {children} + + {children} + ); diff --git a/frontend/src/components/Web3Provide.tsx b/frontend/src/components/Web3Provide.tsx new file mode 100644 index 0000000..68a77e0 --- /dev/null +++ b/frontend/src/components/Web3Provide.tsx @@ -0,0 +1,52 @@ +'use client' +import { WagmiProvider, createConfig, http } from "wagmi"; +import { mainnet } from "wagmi/chains"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { ConnectKitProvider, getDefaultConfig } from "connectkit"; +import React from "react"; + + + + +const config = createConfig( + getDefaultConfig({ + // Your dApps chains + chains: [mainnet], + transports: { + // RPC URL for each chain + [mainnet.id]: http( + ` https://ethereum-rpc.publicnode.com/${process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID}`, + ), + }, + + // Required API Keys + walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID as string, + + // Required App Info + appName: "PAYFLOW", + + // Optional App Info + appDescription: "A decentralized payment app for easier Convenience using Crypto", + appUrl: "https://family.co", // your app's url + appIcon: "https://family.co/logo.png", // your app's icon, no bigger than 1024x1024px (max. 1MB) + }), +); + +const queryClient = new QueryClient(); + +export const Web3Provider = ({ children }:{children:React.ReactNode}) => { + return ( + + + + {children} + + + + ); +}; diff --git a/frontend/src/components/sections/dashboard/CreateLink.tsx b/frontend/src/components/sections/dashboard/CreateLink.tsx index 4b19828..9a1e7b0 100644 --- a/frontend/src/components/sections/dashboard/CreateLink.tsx +++ b/frontend/src/components/sections/dashboard/CreateLink.tsx @@ -1,69 +1,85 @@ - -import { Button, buttonVariants } from '@/components/ui/button' -import React from 'react' -import DefaultText from '../landingPage/DefaultTititle' -import Link from 'next/link' -import { Input } from '@/components/ui/input' - -import UserInformation from './UserInformation' -import PriceInput from '@/components/shared/PriceInput' - +'use client'; +import { Button, buttonVariants } from '@/components/ui/button'; +import React from 'react'; +import DefaultText from '../landingPage/DefaultTititle'; +import Link from 'next/link'; +import { Input } from '@/components/ui/input'; +import UserInformation from './UserInformation'; +import PriceInput from '@/components/shared/PriceInput'; +import { ConnectKitButton } from 'connectkit'; function CreateLink() { return ( -
+
-
- + {/* User Information Section */} +
+
-
-
- -

You can create 15 more payflow links this month upgrade for more

- -
-
- - - +
+ {/* Heading Section */} +
+ +

+ You can create 15 more payflow links this month{' '} + + Upgrade for more + +

+ + {/* Input Section */} +
+
+ +
-
- - +
+ +
-
- -

Wallet Address (key in wallet address or connect wallet to auto-read)

-
- - -
-
+ {/* Wallet Address Section */} +

+ Wallet Address (key in wallet address or connect wallet to auto-read) +

+
+ + + + + {({ isConnected, show, truncatedAddress, ensName }) => { + return ( + + ); + }} + +
- - + + + +
- ) + ); } -export default CreateLink \ No newline at end of file +export default CreateLink; diff --git a/frontend/src/components/sections/paymentContent/PaymentCard.tsx b/frontend/src/components/sections/paymentContent/PaymentCard.tsx index 6cbda4c..4a2f20b 100644 --- a/frontend/src/components/sections/paymentContent/PaymentCard.tsx +++ b/frontend/src/components/sections/paymentContent/PaymentCard.tsx @@ -1,6 +1,9 @@ +'use client' + import React from 'react' import DefaultText from '../landingPage/DefaultTititle' import { Button, buttonVariants } from '@/components/ui/button' +import { ConnectKitButton } from 'connectkit' function PaymentCard() { return ( @@ -23,13 +26,23 @@ function PaymentCard() {

By Continuing you agree to our terms and conditions

- + + + {({isConnected, show, truncatedAddress, ensName})=>{ + return( + + ) + }} +