From 9f2d59abd5c79ef16e896aa074f56c87ef56948f Mon Sep 17 00:00:00 2001 From: Dinesh Date: Sun, 19 Feb 2023 22:21:49 +0530 Subject: [PATCH] added --- frontend/components/Modal/StreamModal.tsx | 4 +- frontend/pages/index.tsx | 2 +- .../pages/pay/{[username].tsx => index.tsx} | 82 +++++++++++------- frontend/pages/register.tsx | 6 +- frontend/public/{tether.png => usdt.png} | Bin 5 files changed, 59 insertions(+), 35 deletions(-) rename frontend/pages/pay/{[username].tsx => index.tsx} (85%) rename frontend/public/{tether.png => usdt.png} (100%) diff --git a/frontend/components/Modal/StreamModal.tsx b/frontend/components/Modal/StreamModal.tsx index d8baa69..f4f713e 100644 --- a/frontend/components/Modal/StreamModal.tsx +++ b/frontend/components/Modal/StreamModal.tsx @@ -3,6 +3,7 @@ import React, { useState, FormEvent } from "react"; import Backdrop from "../UI/Backdrop"; import { calculateFlowRate } from "../createFlow"; import { createNewFlow } from "../createFlow"; +import { ethers } from "ethers"; // type Prop = { // onClose: () => {}; // }; @@ -26,7 +27,8 @@ const StreamModal = ({ onClose, address, provider }: any) => { const streamHandler = (event: FormEvent) => { event.preventDefault(); - createNewFlow(address, flowRate, provider, token); + const web3Provider = new ethers.providers.Web3Provider(provider); + createNewFlow(address, flowRate, web3Provider, token); }; return ( diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx index 631723a..8e6af18 100644 --- a/frontend/pages/index.tsx +++ b/frontend/pages/index.tsx @@ -2,7 +2,7 @@ import ShareModal from "@/components/Modal/ShareModal"; import About from "@/components/UI/About"; import Hero from "@/components/UI/Hero"; import Navbar from "@/components/UI/Navbar"; -import Pay from "./pay/[username]"; +import Pay from "./pay"; export default function Home() { return ( diff --git a/frontend/pages/pay/[username].tsx b/frontend/pages/pay/index.tsx similarity index 85% rename from frontend/pages/pay/[username].tsx rename to frontend/pages/pay/index.tsx index bb922c8..8a11c39 100644 --- a/frontend/pages/pay/[username].tsx +++ b/frontend/pages/pay/index.tsx @@ -3,13 +3,11 @@ import React, { useEffect } from "react"; import { HiCheckBadge } from "react-icons/hi2"; import { BsGithub, BsTwitter, BsCalendarCheck, BsUpload } from "react-icons/bs"; import { CiStreamOn } from "react-icons/ci"; -import usdc from "../public/usdc.png"; -import usdt from "../public/t.png"; -import dai from "../public/dai.png"; -import matic from "../public/matic.png"; -import Button from "@/components/UI/Button"; import { ethers, Signer } from "ethers"; import { sendNotification } from "@/Push"; +import { useAuth } from "@arcana/auth-react"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; import { contractABI, @@ -39,8 +37,7 @@ const Pay = () => { const [loading, setLoading] = useState(true); const [user, setUser] = useState(); const [tokenDetails, setTokenDetails] = useState(null); - const [signer, setSigner] = useState(); - const [provider, setProvider] = useState(); + const [showStreamModal, setShowStreamModal] = useState(false); const [showPaymentModal, setShowPaymentModal] = useState(false); const [showRequestModal, setShowRequestModal] = useState(false); @@ -51,30 +48,44 @@ const Pay = () => { console.log(user); const router = useRouter(); - const userName = "dineshaitham"; - const chain = "mumbai"; - - // const userName = router.query.username; - // console.log(userName); + const { userName, chain } = router.query; - const connectWallet = async () => { + const auth = useAuth(); + const provider = auth.provider; + const onLogin = async () => { + const provider = auth.provider; try { - const provider = new ethers.providers.Web3Provider( - (window as any).ethereum - ); - setProvider(provider); - - // MetaMask requires requesting permission to connect users accounts - await provider.send("eth_requestAccounts", []); - - // The MetaMask plugin also allows signing transactions to - // send ether and pay to change state within the blockchain. - // For this, you need the account signer... - const signer = provider.getSigner(); - setSigner(signer); - setAccount(await signer.getAddress()); - } catch (err) { - console.log(err, "connect Wallet"); + await auth.connect(); + console.log(provider, "provider"); + if (chain === "mumbai") { + await provider.request({ + method: "wallet_switchEthereumChain", + params: [{ chainId: "80001" }], + }); + } else { + await provider.request({ + method: "wallet_addEthereumChain", + params: [ + { + chainId: "5001", + chainName: "Mantle Testnet", + rpcUrls: ["https://rpc.testnet.mantle.xyz"], + nativeCurrency: { + name: "BIT", + symbol: "BIT", // 2-6 characters long + decimals: 18, + }, + }, + ], + }); + await provider.request({ + method: "wallet_switchEthereumChain", + params: [{ chainId: "5001" }], + }); + console.log(provider); + } + } catch (e) { + console.log(e, "onLogin"); } }; @@ -84,6 +95,10 @@ const Pay = () => { amount: string ) => { try { + const provider = auth.provider; + const web3Provider = new ethers.providers.Web3Provider(provider); + const signer = web3Provider.getSigner(); + const erc20Contract = new ethers.Contract(tokenAddress, erc20abi, signer); console.log(erc20Contract); @@ -119,6 +134,8 @@ const Pay = () => { await tx.wait(); await sendNotification(amount, await signer.getAddress()); + toast.success("Payment Successful"); + setShowPaymentModal(false); } catch (err) { console.log(err); } @@ -167,14 +184,14 @@ const Pay = () => { useEffect(() => { getDetails(userName as string); - }, []); + }, [userName]); console.log(tokenDetails); return (
{loading ? ( -

Loading...

+

) : (
@@ -327,7 +344,8 @@ const Pay = () => {
)} - {!account && } + {!auth.isLoggedIn && } +
); }; diff --git a/frontend/pages/register.tsx b/frontend/pages/register.tsx index f633b3a..267df5d 100644 --- a/frontend/pages/register.tsx +++ b/frontend/pages/register.tsx @@ -25,13 +25,17 @@ const register = () => { const acceptableTokens = [ { - tokenName: "USDC", + tokenName: "USDT", tokenAddress: "0xeA7a60bC7E14908b69489394dfc322F7E9d16918", }, { tokenName: "DAI", tokenAddress: "0xb973D2876c4F161439AD05f1dAe184dbD594e04E", }, + { + tokenName: "USDC", + tokenAddress: "0x8f3Cf7ad23Cd3CaDbD9735AFf958023239c6A063", + }, ]; const auth = useAuth(); diff --git a/frontend/public/tether.png b/frontend/public/usdt.png similarity index 100% rename from frontend/public/tether.png rename to frontend/public/usdt.png