new KYC [WIP]

example/src/components/header.tsx

@@ -26,10 +26,6 @@ const Header = () => {
       title: 'KYC',
       href: '/kyc',
     },
-    {
-      title: 'Payout',
-      href: '/payout',
-    },
     {
       title: 'Connect',
       href: '/connect',
@@ -71,13 +67,9 @@ const Header = () => {
           className="text-gray-400 hover:text-gray-200"
           isActive={location.pathname === '/kyc'}
         >
-          <Link to="/kyc">KYC</Link>
-        </NavbarItem>
-        <NavbarItem isActive={location.pathname === '/payout'}>
-          <Link className="text-gray-400 hover:text-gray-200" to="/payout">
-            Payout
-          </Link>
+          <Link to="/payout">Payout</Link>
         </NavbarItem>
+
         <NavbarItem isActive={location.pathname === '/connect'}>
           <Link className="text-gray-400 hover:text-gray-200" to="/connect">
             Connect

example/src/main.tsx

@@ -1,17 +1,14 @@
+import { NextUIProvider } from '@nextui-org/react';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import { RouterProvider, createHashRouter } from 'react-router-dom';
-import Home from './routes/home';
+import Layout from './components/layout';
+import './index.css';
+import Cashout from './routes/cashout';
 import Checkout from './routes/checkout';
 import Connect from './routes/connect';
-import Marketplace from './routes/kyc';
-import Header from './components/header';
-import Layout from './components/layout';
-import Kyc from './routes/kyc';
+import Home from './routes/home';
 import Payout from './routes/payout';
-import { NextUIProvider } from '@nextui-org/react';
-import Cashout from './routes/cashout';
 
 const router = createHashRouter([
   {
@@ -46,14 +43,6 @@ const router = createHashRouter([
       </Layout>
     ),
   },
-  {
-    path: '/kyc',
-    element: (
-      <Layout>
-        <Kyc />
-      </Layout>
-    ),
-  },
   {
     path: '/payout',
     element: (

example/src/routes/home.tsx

@@ -46,13 +46,6 @@ export default function Home() {
           <Link to="/kyc" className="font-bold text-blue-500 hover:underline">
             KYC Widget
           </Link>
-          <br />
-          <Link
-            to="/payout"
-            className="font-bold text-blue-500 hover:underline"
-          >
-            Payout Widget
-          </Link>
         </p>
 
         <h2 className="mb-2 text-xl font-bold">Documentation</h2>

example/src/routes/payout.tsx

@@ -21,23 +21,27 @@ const Payout = () => {
         </div>
 
         <div className="w-full max-w-4xl overflow-auto ">
-          <NoRampPayout token="preview" testnet theme={theme} />
+          <NoRampPayout
+            token="098c589add3ece84398bba9caa773fbb97de531779a24a5d547c3dceee61edd7"
+            testnet
+            theme={theme}
+          />
         </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"
+              href="https://dash.noramp.io"
               className="text-blue-500 hover:underline"
             >
-              app.noramp.io
+              dash.noramp.io
             </a>{' '}
             , create a Marketplace App and register sellers in order to get the
             token.
           </p>
-          <pre className="p-2 mb-4 overflow-auto text-white bg-gray-800 rounded">
+          <pre className="p-2 mb-4 text-white bg-gray-800 rounded">
             {`import { NoRampPayout } from 'norampkit';
 
 <NoRampPayout 

src/components/noramp-payout/payout.tsx

@@ -1,20 +1,19 @@
-import React from 'react';
-
 import './styles.css';
+import React from 'react';
 
-import { getNoRampAppBaseUrl } from '../../utils/noramp-app';
 import { NoRampPayoutProps } from '../../types';
+import { getNoRampPayoutBaseUrl } from '../../utils/noramp-app';
 
 export const NoRampPayout = ({
   token,
   testnet = false,
   theme = 'dark',
-  height = '400',
+  height = '440',
   width = '100%',
 }: NoRampPayoutProps) => {
-  const baseUrl = getNoRampAppBaseUrl(testnet);
+  const baseUrl = getNoRampPayoutBaseUrl(testnet);
 
-  let src = `${baseUrl}/embed/payout/${token}?theme=${theme}`;
+  let src = `${baseUrl}/${token}?theme=${theme}`;
 
   const isPreview = token === 'preview';
 

src/index.tsx

@@ -1,6 +1,5 @@
 export { NoRampCheckout } from './components/noramp-checkout/checkout';
 export { NoRampPayout } from './components/noramp-payout/payout';
-export { NoRampKyc } from './components/noramp-kyc/kyc';
 export { NoRampCashout } from './components/noramp-cashout/cashout';
 export { useNoRampModal } from './hooks/useNoRampModal';
 // export { NoRampConnect } from './components/noramp-connect/connect';

src/types.ts

@@ -29,14 +29,6 @@ export type NoRampConfig = {
   userCanEditWalletAddress?: string;
 };
 
-export type NoRampKycProps = {
-  token: string;
-  testnet?: boolean;
-  theme?: 'light' | 'dark' | null;
-  height?: string;
-  width?: string;
-};
-
 export type NoRampCashoutProps = {
   testnet?: boolean;
   theme?: 'light' | 'dark' | null;

src/utils/noramp-app.ts

@@ -5,3 +5,9 @@ export function getNoRampAppBaseUrl(testnet: boolean): string {
 
   return baseUrl;
 }
+
+export function getNoRampPayoutBaseUrl(testnet: boolean): string {
+  const baseUrl = testnet ? 'https://kyc.noramp.dev' : 'https://kyc.noramp.io';
+
+  return baseUrl;
+}