Feat/payment widget (#1)

Author: bassgeta

.github/deploy-to-production.yml

@@ -0,0 +1,14 @@
+name: Deploy to production
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Webhook request
+        run: |
+          curl -X GET https://prod.request.network/api/deploy/${{ secrets.EASYPANEL_DEPLOY_KEY_PRODUCTION }}

.github/deploy-to-staging.yml

@@ -0,0 +1,14 @@
+name: Deploy to staging
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Webhook request
+        run: |
+          curl -X GET https://stage.request.network/api/deploy/${{ secrets.EASYPANEL_DEPLOY_KEY_STAGING }}

.gitignore

@@ -1,139 +1,41 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
-# nyc test coverage
-.nyc_output
+# testing
+/coverage
 
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
+# next.js
+/.next/
+/out/
 
-# Bower dependency directory (https://bower.io/)
-bower_components
+# production
+/build
 
-# node-waf configuration
-.lock-wscript
+# misc
+.DS_Store
+*.pem
 
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
 
-# Dependency directories
-node_modules/
-jspm_packages/
+# env files (can opt-in for committing if needed)
+.env*
 
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
+# vercel
+.vercel
 
-# TypeScript cache
+# typescript
 *.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.*
-!.env.example
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Sveltekit cache directory
-.svelte-kit/
-
-# vitepress build output
-**/.vitepress/dist
-
-# vitepress cache directory
-**/.vitepress/cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# Firebase cache directory
-.firebase/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v3
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
-
-# Vite logs files
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
+next-env.d.ts

README.md

@@ -1,2 +1,41 @@
-# ui-registry
-Request Network's reusable components registry for ShadCN
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Notes
+
+Before you push changes to this repository, do not forget to run `npm run registry:build` to regenerate the component's `JSON` file!
+
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/components/payment-widget-wrapper.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { PaymentWidget } from "@/registry/default/payment-widget/payment-widget";
+import type { WalletClient } from "viem";
+
+interface PaymentWidgetWrapperProps {
+  recipientWallet: string;
+  walletAccount?: WalletClient;
+}
+
+export function PaymentWidgetWrapper({
+  recipientWallet,
+  walletAccount,
+}: PaymentWidgetWrapperProps) {
+  const walletConnectProjectId =
+    process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID || "";
+  const rnApiClientId = process.env.NEXT_PUBLIC_REQUEST_API_CLIENT_ID || "";
+
+  const handleSuccess = async (requestId: string) => {
+    console.log("Payment successful:", requestId);
+  };
+
+  const handleError = async (error: any) => {
+    console.error("Payment failed:", error);
+  };
+
+  return (
+    <PaymentWidget
+      amountInUsd="1.00"
+      recipientWallet={recipientWallet}
+      walletAccount={walletAccount}
+      paymentConfig={{
+        walletConnectProjectId,
+        rnApiClientId,
+        supportedCurrencies: [
+          "ETH-sepolia-sepolia",
+          "fUSDT-sepolia",
+          "FAU-sepolia",
+          //"USDCn-matic",
+        ],
+        feeInfo: undefined /* {
+          feeAddress: "0xEbe98659e162e8fF3520EC71e097C9e0a4F53829",
+          feePercentage: "10",
+        },*/,
+      }}
+      receiptInfo={{
+        buyerInfo: {
+          firstName: "Testo",
+          email: "[email protected]",
+        },
+        companyInfo: {
+          name: "Request Network Inc.",
+          address: {
+            street: "123 Crypto Street",
+            city: "San Francisco",
+            state: "CA",
+            postalCode: "94105",
+            country: "USA",
+          },
+          taxId: "US123456789",
+          email: "[email protected]",
+          phone: "+1 (555) 123-4567",
+          website: "https://request.network",
+        },
+        items: [
+          {
+            id: "1",
+            description: "Payment via Request Network",
+            quantity: 1,
+            unitPrice: "10.0",
+            total: "10.0",
+            currency: "USD",
+          },
+        ],
+        totals: {
+          totalDiscount: "0",
+          totalTax: "0",
+          total: "10.0",
+          totalUSD: "10.0",
+        },
+      }}
+      onSuccess={handleSuccess}
+      onError={handleError}
+    >
+      <div className="flex p-3 bg-blue-500 items-center rounded-2xl text-white">
+        Pay using crypto
+      </div>
+    </PaymentWidget>
+  );
+}