cashout

example/src/components/header.tsx

@@ -34,6 +34,10 @@ const Header = () => {
       title: 'Connect',
       href: '/connect',
     },
+    {
+      title: 'Cashout',
+      href: '/cashout',
+    },
   ];
 
   const location = useLocation();
@@ -79,6 +83,11 @@ const Header = () => {
             Connect
           </Link>
         </NavbarItem>
+        <NavbarItem isActive={location.pathname === '/cashout'}>
+          <Link className="text-gray-400 hover:text-gray-200" to="/cashout">
+            Cashout
+          </Link>
+        </NavbarItem>
       </NavbarContent>
       <NavbarContent justify="end">
         <NavbarItem>

example/src/main.tsx

@@ -11,6 +11,7 @@ import Layout from './components/layout';
 import Kyc from './routes/kyc';
 import Payout from './routes/payout';
 import { NextUIProvider } from '@nextui-org/react';
+import Cashout from './routes/cashout';
 
 const router = createHashRouter([
   {
@@ -37,6 +38,14 @@ const router = createHashRouter([
       </Layout>
     ),
   },
+  {
+    path: '/cashout',
+    element: (
+      <Layout>
+        <Cashout />
+      </Layout>
+    ),
+  },
   {
     path: '/kyc',
     element: (

example/src/routes/cashout.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { NoRampCashout } from '../../../src';
+import ThemeSwitcher from '../components/ui/theme-switcher/theme-switcher';
+
+const Cashout = () => {
+  const [theme, setTheme] = useState<'light' | 'dark'>('dark');
+
+  const handleThemeChange = (checked: boolean) => {
+    setTheme(checked ? 'dark' : 'light');
+  };
+
+  return (
+    <div className="container flex mx-auto my-0 ">
+      <div className="flex flex-col items-center w-full ">
+        <div className="flex items-center justify-between w-full max-w-4xl">
+          <p className="my-4 text-2xl font-bold">Cashout Widget</p>
+
+          <div className="">
+            <ThemeSwitcher onChange={handleThemeChange} />
+          </div>
+        </div>
+
+        <div className="w-full max-w-4xl overflow-auto ">
+          <NoRampCashout token={''} />
+        </div>
+
+        <div className="flex flex-col justify-start w-full max-w-4xl mt-12">
+          <h3 className="mb-2 text-lg font-bold">Usage</h3>
+          <p className="mb-4">
+            Sign up on{' '}
+            <a
+              href="https://app.noramp.io"
+              className="text-blue-500 hover:underline"
+            >
+              app.noramp.io
+            </a>{' '}
+            , create a Marketplace App and register sellers in order to get the
+            token.
+          </p>
+          <pre className="p-2 mb-4 text-white bg-gray-800 rounded">
+            {`import { NoRampCashout } from 'norampkit';
+
+<NoRampCashout/>`}
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Cashout;

src/components/noramp-cashout/cashout.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import NoRampLogo from '../NoRampLogo';
+
+type NoRampCashoutProps = {
+  token: string;
+  testnet?: boolean;
+  theme?: 'light' | 'dark' | null;
+  height?: string;
+  width?: string;
+};
+
+export const NoRampCashout = ({
+  height = '440',
+  width = '440',
+}: NoRampCashoutProps) => {
+  let src = `https://noramp-beam.vercel.app/`;
+  //   let src = `http://localhost:3000`;
+
+  const [openWidget, setOpenWidget] = React.useState(false);
+
+  //   const isPreview = token === 'preview';
+
+  //   if (isPreview) {
+  //     src += '&preview=true';
+  //   }
+
+  if (openWidget) {
+    return (
+      <div className="w-full h-full">
+        <iframe
+          src={src}
+          title="NoRamp Cashout"
+          width={width}
+          height={height}
+          frameBorder="0"
+          allowFullScreen
+        />
+      </div>
+    );
+  }
+
+  return (
+    <button
+      className={`button`}
+      type="button"
+      onClick={() => setOpenWidget(true)}
+      //   disabled={openWidget}
+    >
+      <span className="icon">
+        <NoRampLogo />
+      </span>
+      {<span>Cashout with NoRamp</span>}
+    </button>
+  );
+};

src/index.tsx

@@ -2,3 +2,4 @@ export { NoRampOneClick } from './components/noramp-one-click/one-click';
 export { NoRampPayout } from './components/noramp-payout/payout';
 export { NoRampKyc } from './components/noramp-kyc/kyc';
 export { NoRampConnect } from './components/noramp-connect/connect';
+export { NoRampCashout } from './components/noramp-cashout/cashout';