Skip to content

Commit

Permalink
Support for minipay added (#217)
Browse files Browse the repository at this point in the history
  • Loading branch information
viral-sangani authored Sep 18, 2023
1 parent 7a76943 commit 1862ccb
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 82 deletions.
130 changes: 80 additions & 50 deletions packages/react-app/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,59 +2,89 @@ import { Disclosure } from "@headlessui/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import Image from "next/image";
import { useEffect, useState } from "react";
import { useConnect } from "wagmi";
import { InjectedConnector } from "wagmi/connectors/injected";

export default function Header() {
return (
<Disclosure as="nav" className="bg-prosperity border-b border-black">
{({ open }) => (
<>
<div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div className="relative flex h-16 justify-between">
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-black focus:outline-none focus:ring-1 focus:ring-inset focus:rounded-none focus:ring-black">
<span className="sr-only">Open main menu</span>
{open ? (
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
) : (
<Bars3Icon className="block h-6 w-6" aria-hidden="true" />
)}
</Disclosure.Button>
</div>
<div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
<div className="flex flex-shrink-0 items-center">
<Image className="block h-8 w-auto sm:block lg:block" src="/logo.svg" width="24" height="24" alt="Celo Logo" />
</div>
<div className="hidden sm:ml-6 sm:flex sm:space-x-8">
<a
href="#"
className="inline-flex items-center border-b-2 border-black px-1 pt-1 text-sm font-medium text-gray-900"
>
Home
</a>

</div>
const [hideConnectBtn, setHideConnectBtn] = useState(false);
const { connect } = useConnect({
connector: new InjectedConnector(),
});

useEffect(() => {
if (window.ethereum.isMiniPay) {
setHideConnectBtn(true);
connect();
}
}, [connect]);

return (
<Disclosure as="nav" className="bg-prosperity border-b border-black">
{({ open }) => (
<>
<div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div className="relative flex h-16 justify-between">
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-black focus:outline-none focus:ring-1 focus:ring-inset focus:rounded-none focus:ring-black">
<span className="sr-only">Open main menu</span>
{open ? (
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
) : (
<Bars3Icon className="block h-6 w-6" aria-hidden="true" />
)}
</Disclosure.Button>
</div>
<div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
<div className="flex flex-shrink-0 items-center">
<Image
className="block h-8 w-auto sm:block lg:block"
src="/logo.svg"
width="24"
height="24"
alt="Celo Logo"
/>
</div>
<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<ConnectButton showBalance={{smallScreen: true, largeScreen: false}} />
<div className="hidden sm:ml-6 sm:flex sm:space-x-8">
<a
href="#"
className="inline-flex items-center border-b-2 border-black px-1 pt-1 text-sm font-medium text-gray-900"
>
Home
</a>
</div>
</div>
</div>

<Disclosure.Panel className="sm:hidden">
<div className="space-y-1 pt-2 pb-4">
<Disclosure.Button
as="a"
href="#"
className="block border-l-4 border-black py-2 pl-3 pr-4 text-base font-medium text-black"
>
Home
</Disclosure.Button>
{/* Add here your custom menu elements */}
<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
{!hideConnectBtn && (
<ConnectButton
showBalance={{ smallScreen: true, largeScreen: false }}
/>
)}
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
)
}
</div>
</div>

<Disclosure.Panel className="sm:hidden">
<div className="space-y-1 pt-2 pb-4">
<Disclosure.Button
as="a"
href="#"
className="block border-l-4 border-black py-2 pl-3 pr-4 text-base font-medium text-black"
>
Home
</Disclosure.Button>
{/* Add here your custom menu elements */}
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
);
}

declare global {
interface Window {
ethereum: any;
}
}
52 changes: 23 additions & 29 deletions packages/react-app/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,51 +1,45 @@
import type { AppProps } from "next/app";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { Alfajores, Celo } from "@celo/rainbowkit-celo/chains";
import celoGroups from "@celo/rainbowkit-celo/lists";
import Layout from "../components/Layout";
import "../styles/globals.css";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import "@rainbow-me/rainbowkit/styles.css";
import type { AppProps } from "next/app";
import { WagmiConfig, configureChains, createConfig } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { Alfajores, Celo } from "@celo/rainbowkit-celo/chains";
import Layout from "../components/Layout";
import "../styles/globals.css";

const projectId = process.env.NEXT_PUBLIC_WC_PROJECT_ID as string; // get one at https://cloud.walletconnect.com/app

const { chains, publicClient } = configureChains(
[Celo, Alfajores],
[publicProvider()]
[Celo, Alfajores],
[publicProvider()]
);

const connectors = celoGroups({
chains,
projectId,
appName:
(typeof document === "object" && document.title) || "Your App Name",
chains,
projectId,
appName: (typeof document === "object" && document.title) || "Your App Name",
});

const appInfo = {
appName: "Celo Composer",
appName: "Celo Composer",
};

const wagmiConfig = createConfig({
autoConnect: true,
connectors,
publicClient: publicClient,
connectors,
publicClient: publicClient,
});

function App({ Component, pageProps }: AppProps) {
return (
<WagmiConfig config={wagmiConfig}>
<RainbowKitProvider
chains={chains}
appInfo={appInfo}
coolMode={true}
>
<Layout>
<Component {...pageProps} />
</Layout>
</RainbowKitProvider>
</WagmiConfig>
);
return (
<WagmiConfig config={wagmiConfig}>
<RainbowKitProvider chains={chains} appInfo={appInfo} coolMode={true}>
<Layout>
<Component {...pageProps} />
</Layout>
</RainbowKitProvider>
</WagmiConfig>
);
}

export default App;
23 changes: 20 additions & 3 deletions packages/react-app/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,24 @@
import { useEffect, useState } from "react";
import { useAccount } from "wagmi";

export default function Home() {
const [userAddress, setUserAddress] = useState("");
const { address, isConnected } = useAccount();

useEffect(() => {
if (isConnected && address) {
setUserAddress(address);
}
}, [address, isConnected]);

return (
<div>
<div className="h1">There you go... a canvas for your next Celo project!</div>
<div className="flex flex-col justify-center items-center">
<div className="h1">
There you go... a canvas for your next Celo project!
</div>
{isConnected && (
<div className="h2 text-center">Your address: {userAddress}</div>
)}
</div>
)
);
}

0 comments on commit 1862ccb

Please sign in to comment.