mowblox · Baah-Danso-Kenneth · Nov 10, 2024 · Nov 10, 2024 · Nov 10, 2024 · Nov 10, 2024
diff --git 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
@@ -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
@@ -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({
       <body
         className={`${poppins.variable} ${nowy.variable} antialiased bg-grayTint dark:bg-dark `}
       >
-        {children}
+        <Web3Provider>
+          {children}
+        </Web3Provider>
       </body>
     </html>
   );

diff --git a/frontend/src/components/Web3Provide.tsx 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 (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+      <ConnectKitProvider
+         customTheme={{
+         "--ck-accent-color": "#00D54B",
+        "--ck-accent-text-color": "#ffffff",
+        }}
+>
+  {children}
+</ConnectKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+};
diff --git 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 (
-    <div className='dark:text-light'>
+    <div className="dark:text-light">
 
-      <div className='flex items-end justify-end'>
-        <UserInformation/>
+      {/* User Information Section */}
+      <div className="flex items-end justify-end">
+        <UserInformation />
       </div>
 
-      <div className='mx-32'>
-         <div>
-          <DefaultText className='dark:text-light text-4xl font-nowy text-start mb-5' title='create a link'/>
-          <p className='font-pop mb-5'>You can create 15 more payflow links this month <span><Link href="#">upgrade for more</Link></span></p>
-
-           <div className='flex flex-row gap-5 mb-5'>
-            <div className='flex-grow'>
-              <DefaultText className='dark:text-light md:text-[20px] text-start md:font-pop' title='description'/>
-              <Input className='bg-darkGrayHue py-6 rounded-full text-light placeholder:font-pop placeholder:font-semibold' placeholder='Eg:Smart contract for Dummies Ebook'/>
-
+      <div className="mx-32">
+        {/* Heading Section */}
+        <div>
+          <DefaultText className="dark:text-light text-4xl font-nowy text-start mb-5" title="Create a Link" />
+          <p className="font-pop mb-5">
+            You can create 15 more payflow links this month{' '}
+            <span>
+              <Link href="#">Upgrade for more</Link>
+            </span>
+          </p>
+
+          {/* Input Section */}
+          <div className="flex flex-row gap-5 mb-5">
+            <div className="flex-grow">
+              <DefaultText className="dark:text-light md:text-[20px] text-start md:font-pop" title="Description" />
+              <Input className="bg-darkGrayHue py-6 rounded-full text-light placeholder:font-pop placeholder:font-semibold" placeholder="Eg: Smart contract for Dummies Ebook" />
             </div>
 
-            <div className='w-52 '>
-              <DefaultText className='md:font-pop md:dark:text-light md:text-[20px]' title='Amount'/>
-              <PriceInput/>
+            <div className="w-52">
+              <DefaultText className="md:font-pop md:dark:text-light md:text-[20px]" title="Amount" />
+              <PriceInput />
             </div>
-           </div>
-
-          <p className='text-start mb-5 md:font-pop md:text-[18px]'>Wallet Address <span className="italic">(key in wallet address or connect wallet to auto-read)</span></p> 
-          <div className='flex gap-10 mb-10'>
-            <Input className='bg-darkGrayHue py-6 rounded-full placeholder:font-pop placeholder:font-semibold' placeholder='0xhsdghghsyfffkwtttth'/>
-
-        <Button
-         className={buttonVariants({
-          size: "sm",
-          variant:'outline',
-          className:
-            " dark:text-light dark:border-light rounded-full font-pop capitalize py-6 sm:py-6 lg:py-6 px-4 sm:px-8 lg:px-5 text-[16px] sm:text-[18px] lg:text-[18px] border text-dark border-dark shadow-none bg-transparent",
-        })}
-         >connect wallet</Button>
           </div>
 
-         </div>
+          {/* Wallet Address Section */}
+          <p className="text-start mb-5 md:font-pop md:text-[18px]">
+            Wallet Address <span className="italic">(key in wallet address or connect wallet to auto-read)</span>
+          </p>
+          <div className="flex gap-10 mb-10">
+            <Input className="bg-darkGrayHue py-6 rounded-full placeholder:font-pop placeholder:font-semibold" placeholder="0xhsdghghsyfffkwtttth" />
+
+
+            <ConnectKitButton.Custom>
+              {({ isConnected, show, truncatedAddress, ensName }) => {
+                return (
+                  <Button
+                    onClick={show}
+                    className="text-nowrap dark:text-light dark:border-light rounded-full font-pop capitalize py-6 sm:py-6 lg:py-6 px-4 sm:px-8 lg:px-5 text-[16px] sm:text-[18px] lg:text-[18px] border text-dark border-dark shadow-none bg-transparent"
+                  >
+                    {isConnected ? ensName ?? truncatedAddress : 'Connect Wallet'}
+                  </Button>
+                );
+              }}
+            </ConnectKitButton.Custom>
 
+          </div>
 
-         <Button
-         className={buttonVariants({
-          size: "sm",
-          className:
-            "w-full   dark:border-light rounded-full font-pop capitalize py-6 sm:py-6 lg:py-6 px-4 sm:px-8 lg:px-5 text-[16px] sm:text-[18px] lg:text-[17px] border text-dark border-dark shadow-none bg-primary",
-        })}
-         >Generate Link</Button>
-
+
+          <Button
+            className={buttonVariants({
+              size: 'sm',
+              className:
+                'w-full dark:border-light rounded-full font-pop capitalize py-6 sm:py-6 lg:py-6 px-4 sm:px-8 lg:px-5 text-[16px] sm:text-[18px] lg:text-[17px] border text-dark border-dark shadow-none bg-primary',
+            })}
+          >
+            Generate Link
+          </Button>
+
+        </div>
       </div>
 
     </div>
-  )
+  );
 }
 
-export default CreateLink
+export default CreateLink;
diff --git 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() {
              <p className='text-light text-[13px] md:text-[16px] font-pop'>By Continuing <span className='text-mouve'>you agree to our terms and conditions</span></p>
           </div>
 
-          <Button
-         className={buttonVariants({
-          size: "sm",
-          className:
-            "w-full text-[13px]  dark:border-light rounded-full font-pop capitalize py-6 sm:py-6 lg:py-6 px-4 sm:px-8 lg:px-5 md:text-[16px] sm:text-[18px] lg:text-[17px] border text-dark border-dark shadow-none bg-primary",
-        })}
-         >Connect wallet to pay</Button>
+
+         <ConnectKitButton.Custom>
+            {({isConnected, show, truncatedAddress, ensName})=>{
+              return(
+                <Button
+                onClick={show}
+                className={buttonVariants({
+                 size: "sm",
+                 className:
+                   "w-full text-[13px]  dark:border-light rounded-full font-pop capitalize py-6 sm:py-6 lg:py-6 px-4 sm:px-8 lg:px-5 md:text-[16px] sm:text-[18px] lg:text-[17px] border text-dark border-dark shadow-none bg-primary",
+               })}
+                >
+                    {isConnected ? ensName ?? truncatedAddress : 'Connect Wallet to pay'}
+                  </Button>
+              )
+            }}
+         </ConnectKitButton.Custom>
 
         </div>
       </div>