0.0.1-beta • Published 3 months ago

kyb-app v0.0.1-beta

Weekly downloads
-
License
-
Repository
-
Last release
3 months ago

Salla KYB Solution UI: Open-Source Risk Management Infrastructure

This is the UI for the Salla KYB Solution.

Clone project

git clone https://github.com/SallaApp/ui-kyb-app.git

Checkout to the dev branch

git checkout dev

Install dependencies

pnpm install

Run the project

pnpm start

It expects the ballerineapi to be running on http://localhost:3000/api/v1/. Please make sure to have it running before running the UI.

Build the project

pnpm build

Check the dist folder for the build.js file.

WebComponentLoader (HTML)

<!DOCTYPE html>
<html lang="ar">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Font -->
    <link
      rel="stylesheet"
      href="https://cdn.salla.network/fonts/pingarlt.css?v=0.2"
    />
    <!-- Font -->
    <!-- Favicon -->
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="https://cdn.salla.network/images/logo/logo-square.png"
    />
    <link
      rel="icon"
      type="image/png"
      media="(prefers-color-scheme: light)"
      href="https://cdn.salla.network/images/logo/logo-square.png"
    />
    <link
      rel="icon"
      type="image/png"
      media="(prefers-color-scheme: dark)"
      href="https://cdn.salla.network/images/logo/logo-light-square.png"
    />
    <meta
      name="msapplication-TileImage"
      content="https://cdn.salla.network/images/logo/logo-square.png"
    />
    <!-- Favicon -->
    <meta name="theme-color" content="#76E8CD" />
    <meta name="msapplication-TileColor" content="#ffffff" />
    <title>التحقق من مالك المتجر</title>
  </head>
  <body>
    <script type="module" src="./build.js"></script>
    <kyb-app></kyb-app>
  </body>
</html>

You must serve the build.js file before using this component.

WebComponentLoader (ReactJS)

import { useEffect } from "react";

export default function WebComponentLoader() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "http://localhost:4000/build.js";
    script.type = "module";
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
}

Use this component to load the WebComponent then you can use the tag anywhere in the project.

<kyb-app></kyb-app> WebComponent

<div className="px-[40px]">
  <kyb-app></kyb-app>
</div>

You must load the build.js using the WebComponentLoader component before using this component.

@ballerine/blocks@ballerine/common@ballerine/ui@ballerine/workflow-browser-sdk@lukemorales/query-key-factory@mui/material@mui/x-date-pickers@radix-ui/react-accordion@radix-ui/react-checkbox@radix-ui/react-collapsible@radix-ui/react-dialog@radix-ui/react-dropdown-menu@radix-ui/react-hover-card@radix-ui/react-icons@radix-ui/react-label@radix-ui/react-popover@radix-ui/react-radio-group@radix-ui/react-scroll-area@radix-ui/react-slot@radix-ui/react-tooltip@rjsf/core@rjsf/utils@rjsf/validator-ajv8@sentry/react@tanstack/react-query@tanstack/react-table@xstate/reactajvajv-errorsajv-formatsclass-variance-authorityclsxcmdkcountry-state-citycurrency-codesdayjsdompurifyemblorform-data-encoderi18n-iso-countriesi18n-nationalityi18nexti18next-browser-languagedetectori18next-http-backendjmespathjson-logic-jskylodashlucide-reactp-queuepdfjs-distposthog-jsqsreactreact-domreact-error-boundaryreact-helmet-asyncreact-i18nextreact-imagereact-json-viewreact-phone-input-2react-router-domrechartssonnerstring-tstailwind-mergetype-festuse-debounceuuidvite-plugin-terminalxstatezod
0.0.1-beta

3 months ago