@pioneer-platform/pioneer-react 0.0.2 → 0.2.32

package/src/lib/layout/Pioneer/Wallets.tsx

@@ -0,0 +1,166 @@
+import {
+  Avatar,
+  AvatarBadge,
+  Box,
+  Button,
+  HStack,
+  Stack,
+  Image,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  useDisclosure,
+  InputGroup,
+  InputLeftElement,
+  Input,
+  Text,
+} from "@chakra-ui/react";
+import React, { useState, useEffect } from "react";
+
+// Import icons
+// @ts-ignore
+import KEEPKEY_ICON from "lib/assets/png/keepkey.png";
+// @ts-ignore
+import METAMASK_ICON from "lib/assets/png/metamask.png";
+// @ts-ignore
+import PIONEER_ICON from "lib/assets/png/pioneer.png";
+import { usePioneer } from "lib/context/Pioneer";
+
+import MiddleEllipsis from "./MiddleEllipsis";
+
+interface Wallet {
+  context: string;
+  type: string;
+  valueUsdContext: number;
+  icon: any; // @ts-ignore
+  paired: boolean;
+}
+
+const getWalletBadgeContent = (walletType: string) => {
+  const icons: any = {
+    metamask: METAMASK_ICON,
+    keepkey: KEEPKEY_ICON,
+    native: PIONEER_ICON,
+  };
+
+  const icon = icons[walletType];
+
+  if (!icon) {
+    return null;
+  }
+
+  return (
+    <AvatarBadge boxSize="1.25em" bg="green.500">
+      <Image rounded="full" src={icon} />
+    </AvatarBadge>
+  );
+};
+
+export default function Wallets({ wallets }: { wallets: Wallet[] }) {
+  const { state, dispatch } = usePioneer();
+  const { user } = state;
+  const [currentPage, setCurrentPage] = useState(1);
+  const [walletsWithIcons, setWalletsWithIcons] = useState([]);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const walletsPerPage = 3;
+
+  const handlePageChange = (pageNumber: any) => {
+    setCurrentPage(pageNumber);
+  };
+
+  for (let i = 0; i < wallets.length; i++) {
+    const wallet = wallets[i];
+    if (wallet.type === "native") {
+      wallets[i].icon = PIONEER_ICON;
+    } else if (wallet.type === "metamask") {
+      wallets[i].icon = METAMASK_ICON;
+    } else if (wallet.type === "keepkey") {
+      wallets[i].icon = KEEPKEY_ICON;
+    }
+  }
+
+  const currentWallets = wallets.slice(
+    (currentPage - 1) * walletsPerPage,
+    currentPage * walletsPerPage
+  );
+  const totalPages = Math.ceil(wallets.length / walletsPerPage);
+
+  // Function to generate custom pagination array
+  const generatePaginationArray = () => {
+    const paginationArray = [];
+    const totalPageButtons = 5; // Number of page buttons to display around the current page
+
+    if (totalPages <= totalPageButtons) {
+      // If total pages are less than or equal to totalPageButtons, show all page numbers
+      for (let i = 1; i <= totalPages; i++) {
+        paginationArray.push(i);
+      }
+    } else {
+      // If total pages are more than totalPageButtons, generate custom pagination
+      const middleButton = Math.floor(totalPageButtons / 2);
+      const startPage = Math.max(currentPage - middleButton, 1);
+      const endPage = Math.min(currentPage + middleButton, totalPages);
+
+      if (startPage > 1) {
+        // Add the first page and ellipsis if the current page is far enough from the first page
+        paginationArray.push(1, "...");
+      }
+
+      // Add page numbers between startPage and endPage (inclusive)
+      for (let i = startPage; i <= endPage; i++) {
+        paginationArray.push(i);
+      }
+
+      if (endPage < totalPages) {
+        // Add the last page and ellipsis if the current page is far enough from the last page
+        paginationArray.push("...", totalPages);
+      }
+    }
+
+    return paginationArray;
+  };
+
+  return (
+    <Stack spacing={4}>
+      {/* <Text fontSize='xl'>Wallets Tracked</Text> */}
+      {currentWallets.map((wallet: Wallet, index: number) => (
+        <Box key={index}>
+          <HStack spacing={4} alignItems="center">
+            <Avatar src={wallet.icon} />
+            <Box>
+              <small>
+                Context: <MiddleEllipsis text={wallet?.context} />
+              </small>
+              <br />
+              <small>Type: {wallet.type}</small>
+              <br />
+              <small>Value (USD): {wallet.valueUsdContext}</small>
+              <br />
+              <small>Paired: {wallet.paired ? "Yes" : "No"}</small>
+              <br />
+            </Box>
+          </HStack>
+          <HStack mt={2} spacing={2}>
+            {/* ... (rest of the buttons and click handlers) */}
+          </HStack>
+        </Box>
+      ))}
+      <Box mt={4}>
+        {generatePaginationArray().map((page, index) => (
+          <Button
+            key={index}
+            size="sm"
+            variant={currentPage === page ? "solid" : "outline"}
+            onClick={() => handlePageChange(page)}
+          >
+            {page === "..." ? "..." : page}
+          </Button>
+        ))}
+      </Box>
+    </Stack>
+  );
+}

package/src/lib/layout/ThemeToggle.tsx

@@ -0,0 +1,16 @@
+import { IconButton, useColorMode } from "@chakra-ui/react";
+import { RiMoonFill, RiSunLine } from "react-icons/ri";
+
+const ThemeToggle = () => {
+  const { colorMode, toggleColorMode } = useColorMode();
+
+  return (
+    <IconButton
+      aria-label="theme toggle"
+      icon={colorMode === "light" ? <RiMoonFill /> : <RiSunLine />}
+      onClick={toggleColorMode}
+    />
+  );
+};
+
+export default ThemeToggle;

package/src/lib/layout/index.tsx

@@ -0,0 +1,29 @@
+import { Box, Flex } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+
+import Footer from "./Footer";
+import Header from "./Header";
+import Meta from "./Meta";
+
+type LayoutProps = {
+  children: ReactNode;
+};
+
+const Layout = ({ children }: LayoutProps) => {
+  return (
+    <div>
+      <Header />
+      <Box margin="0 auto" maxWidth={800} transition="0.5s ease-out">
+        <Meta />
+        <Flex wrap="wrap" margin="8" minHeight="90vh">
+          <Box width="full" as="main" marginY={22}>
+            {children}
+          </Box>
+          <Footer />
+        </Flex>
+      </Box>
+    </div>
+  );
+};
+
+export default Layout;

package/src/lib/pages/404/index.tsx

@@ -0,0 +1,36 @@
+import {
+  Box,
+  Button,
+  Grid,
+  Heading,
+  Image,
+  Link,
+  Text,
+} from "@chakra-ui/react";
+import { useNavigate } from "react-router-dom";
+
+const Page404 = () => {
+  const navigate = useNavigate();
+
+  const handleBackToHome = () => navigate("/");
+
+  return (
+    <Grid gap={4} textAlign="center">
+      <Heading>Page not Found</Heading>
+
+      <Box maxWidth={[280, 400]} marginX="auto">
+        <Image width={400} src="/assets/404 Error-rafiki.svg" />
+        <Link fontSize="xs" href="https://stories.freepik.com/web" isExternal>
+          Illustration by Freepik Stories
+        </Link>
+      </Box>
+
+      <Box>
+        <Text>It&apos;s Okay!</Text>
+        <Button onClick={handleBackToHome}>Let&apos;s Head Back</Button>
+      </Box>
+    </Grid>
+  );
+};
+
+export default Page404;

package/src/lib/pages/home/components/CTASection.tsx

@@ -0,0 +1,36 @@
+import { Box, Button, Flex, Image, Link } from "@chakra-ui/react";
+import { AiFillGithub } from "react-icons/ai";
+
+const CTASection = () => (
+  <Box textAlign="center">
+    <Link
+      _hover={undefined}
+      href="https://github.com/BitHighlander/pioneer-template"
+    >
+      <Button leftIcon={<AiFillGithub />} size="sm">
+        Open in Github
+      </Button>
+    </Link>
+    <Flex marginY={4} justifyContent="center" gridGap={2}>
+      <Link
+        aria-label="Deploy to Vercel"
+        isExternal
+        href="https://vercel.com/import/git?s=https://github.com/BitHighlander/pioneer-template"
+      >
+        <Image src="https://vercel.com/button" alt="Vercel deploy button" />
+      </Link>
+      <Link
+        aria-label="Deploy to Netlify"
+        isExternal
+        href="https://app.netlify.com/start/deploy?repository=https://github.com/BitHighlander/pioneer-template"
+      >
+        <Image
+          src="https://www.netlify.com/img/deploy/button.svg"
+          alt="Netlify deploy button"
+        />
+      </Link>
+    </Flex>
+  </Box>
+);
+
+export default CTASection;

package/src/lib/pages/home/components/SomeImage.tsx

@@ -0,0 +1,36 @@
+import { Flex, Image } from "@chakra-ui/react";
+
+const ICON_SIZE = 22;
+
+const SomeImage = () => {
+  return (
+    <Flex marginY={4} justifyContent="center" alignItems="center" gridGap={2}>
+      <Image
+        src="/assets/vite-logo.svg"
+        title="vite"
+        height={ICON_SIZE}
+        width={ICON_SIZE}
+      />
+      <Image
+        src="/assets/react-icon.svg"
+        title="react"
+        height={ICON_SIZE}
+        width={ICON_SIZE}
+      />
+      <Image
+        src="/assets/chakra-ui-logomark-colored.svg"
+        title="Chakra UI"
+        height={ICON_SIZE}
+        width={ICON_SIZE}
+      />
+      <Image
+        src="/assets/ts-logo-512.svg"
+        title="TypeScript"
+        height={ICON_SIZE}
+        width={ICON_SIZE}
+      />
+    </Flex>
+  );
+};
+
+export default SomeImage;

package/src/lib/pages/home/components/SomeText.tsx

@@ -0,0 +1,16 @@
+import { Grid, Heading, Text } from "@chakra-ui/react";
+
+const SomeText = () => {
+  return (
+    <Grid textAlign="center" gap={2}>
+      <Heading fontSize="2xl" fontWeight="extrabold">
+        Pioneer Template
+      </Heading>
+      <Text color="gray.500" fontSize="sm">
+        The Most Powerful Template for Building on Crypto
+      </Text>
+    </Grid>
+  );
+};
+
+export default SomeText;

package/src/lib/pages/home/index.tsx

@@ -0,0 +1,87 @@
+import {
+  Button,
+  useDisclosure,
+  Modal,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import { usePioneer } from "lib/context/Pioneer";
+import AssetSelect from "lib/components/AssetSelect";
+import BlockchainSelect from "lib/components/BlockchainSelect";
+import WalletSelect from "lib/components/WalletSelect";
+
+const Home = () => {
+  const { state } = usePioneer();
+  const { api, app, context, assetContext, blockchainContext, pubkeyContext } =
+    state;
+  const [address, setAddress] = useState("");
+  const [modalType, setModalType] = useState("");
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  useEffect(() => {
+    console.log("2 pubkeyContext: ", pubkeyContext);
+    setAddress(pubkeyContext.master || pubkeyContext.pubkey || pubkeyContext);
+  }, [pubkeyContext]);
+
+  const openModal = (type: any) => {
+    setModalType(type);
+    onOpen();
+  };
+
+  return (
+    <div>
+      <Modal isOpen={isOpen} onClose={() => onClose()} size="xl">
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>{modalType}</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            {/* Render content based on modalType */}
+            {modalType === "Select wallet" && (
+              <div>
+                <WalletSelect onClose={onClose}></WalletSelect>
+              </div>
+            )}
+            {modalType === "Select Asset" && (
+              <div>
+                <AssetSelect onClose={onClose}></AssetSelect>
+              </div>
+            )}
+            {modalType === "Select Blockchain" && (
+              <div>
+                <BlockchainSelect onClose={onClose}></BlockchainSelect>
+              </div>
+            )}
+            {modalType === "View Address" && <div>address: {address}</div>}
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="blue" onClick={onClose}>
+              Close
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+      Context: {context}
+      <Button onClick={() => openModal("Select wallet")}>Select wallet</Button>
+      <br />
+      Asset Context: {assetContext?.name}
+      <Button onClick={() => openModal("Select Asset")}>Select Asset</Button>
+      <br />
+      Blockchain Context: {blockchainContext?.name}
+      <Button onClick={() => openModal("Select Blockchain")}>
+        Select Blockchain
+      </Button>
+      <br />
+      Address: {address}
+      <Button onClick={() => openModal("View Address")}>View Address</Button>
+      <br />
+    </div>
+  );
+};
+
+export default Home;

package/src/lib/router/Routings.tsx

@@ -0,0 +1,45 @@
+/**
+ * @note
+ * for hook alternative of route element composition:
+ * - https://reactrouter.com/docs/en/v6/upgrading/v5#use-useroutes-instead-of-react-router-config
+ * - https://reactrouter.com/docs/en/v6/examples/route-objects
+ *
+ * might need to take notes on:
+ * - https://reactrouter.com/docs/en/v6/upgrading/v5#note-on-link-to-values
+ */
+
+import { Suspense } from "react";
+import { Routes, Route } from "react-router-dom";
+
+import RequireAuth from "lib/components/auth/RequireAuth";
+import Page404 from "lib/pages/404";
+
+import { routes, privateRoutes } from "./routes";
+
+const Routings = () => {
+  return (
+    <Suspense>
+      <Routes>
+        {routes.map((routeProps) => (
+          <Route {...routeProps} key={routeProps.path as string} />
+        ))}
+        {privateRoutes.map(({ element, ...privateRouteProps }) => (
+          <Route
+            element={
+              <RequireAuth
+                redirectTo={`/login?redirectTo=${privateRouteProps.path}`}
+              >
+                {element}
+              </RequireAuth>
+            }
+            {...privateRouteProps}
+            key={`privateRoute-${privateRouteProps.path}`}
+          />
+        ))}
+        <Route path="*" element={<Page404 />} />
+      </Routes>
+    </Suspense>
+  );
+};
+
+export default Routings;

package/src/lib/router/routes.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import type { PathRouteProps } from "react-router-dom";
+
+const Home = React.lazy(() => import("lib/pages/home"));
+
+export const routes: Array<PathRouteProps> = [
+  {
+    path: "/",
+    element: <Home />,
+  },
+];
+
+export const privateRoutes: Array<PathRouteProps> = [];

package/src/lib/styles/theme/config.ts

@@ -0,0 +1,5 @@
+import type { ThemeConfig } from "@chakra-ui/react";
+
+export const config: ThemeConfig = {
+  disableTransitionOnChange: false,
+};

package/src/lib/styles/theme/index.ts

@@ -0,0 +1,17 @@
+import { extendTheme } from "@chakra-ui/react";
+
+import { config } from "./config";
+
+export const theme = extendTheme({
+  initialColorMode: "dark",
+  useSystemColorMode: false,
+  fonts: {
+    heading: "Plus Jakarta Sans, sans-serif",
+    body: "Plus Jakarta Sans, sans-serif",
+  },
+  components: {
+    // Button: {
+    // }
+  },
+  config,
+});

package/tsconfig.json

@@ -1,13 +1,23 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
-    "lib": ["es6", "es2015", "dom"],
-    "declaration": true,
-    "outDir": "lib",
-    "rootDir": "src",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     "strict": true,
-    "types": ["node"],
-    "esModuleInterop": true
-  }
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "declaration": true, // Add this line to generate .d.ts files
+    "outDir": "./dist",  // Add this line to specify the output directory
+    "jsx": "react-jsx",
+    "baseUrl": "./src",
+  },
+  "include": ["./src"]
 }

package/turbo.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "pipeline": {
+    "type-check": {
+      "outputs": ["*.tsbuildinfo"]
+    },
+    "build": {
+      "dependsOn": ["type-check"],
+      "outputs": ["dist/**", "public/**"],
+      "env": []
+    },
+    "lint": {
+      "outputs": [],
+      "inputs": [".eslintrc.*", "src/**"]
+    }
+  }
+}

package/vercel.json

@@ -0,0 +1,4 @@
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/" }],
+  "buildCommand": "yarn build:turbo"
+}

package/vite.config.ts

@@ -0,0 +1,110 @@
+require('dotenv').config();
+import react from "@vitejs/plugin-react";
+import { resolve } from "path";
+import { defineConfig } from "vite";
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
+import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
+import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
+// import inject from '@rollup/plugin-inject'
+// import wasm from 'vite-plugin-wasm'
+
+// @ts-ignore
+export default defineConfig(({}) => {
+  // Load env file based on `mode` in the current working directory.
+  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
+  // const env = loadEnv(mode, process.cwd(), '')
+  return {
+    // vite config
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+    },
+    plugins: [react()],
+    resolve: {
+      alias: {
+        lib: resolve(__dirname, "src/lib"),
+        routes: resolve(__dirname, "src/routes"),
+        util: 'rollup-plugin-node-polyfills/polyfills/util',
+        sys: 'util',
+        events: 'rollup-plugin-node-polyfills/polyfills/events',
+        //stream: 'rollup-plugin-node-polyfills/polyfills/stream',
+        stream: 'stream-browserify',
+        path: 'rollup-plugin-node-polyfills/polyfills/path',
+        querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
+        punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
+        url: 'rollup-plugin-node-polyfills/polyfills/url',
+        http: 'rollup-plugin-node-polyfills/polyfills/http',
+        https: 'rollup-plugin-node-polyfills/polyfills/http',
+        os: 'rollup-plugin-node-polyfills/polyfills/os',
+        assert: 'rollup-plugin-node-polyfills/polyfills/assert',
+        constants: 'rollup-plugin-node-polyfills/polyfills/constants',
+        _stream_duplex:
+            'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
+        _stream_passthrough:
+            'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
+        _stream_readable:
+            'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
+        _stream_writable:
+            'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
+        _stream_transform:
+            'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
+        timers: 'rollup-plugin-node-polyfills/polyfills/timers',
+        console: 'rollup-plugin-node-polyfills/polyfills/console',
+        vm: 'rollup-plugin-node-polyfills/polyfills/vm',
+        zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
+        tty: 'rollup-plugin-node-polyfills/polyfills/tty',
+        domain: 'rollup-plugin-node-polyfills/polyfills/domain'
+      },
+    },
+    optimizeDeps: {
+      esbuildOptions: {
+        // Node.js global to browser globalThis
+        define: {
+          global: 'globalThis'
+        },
+        // Enable esbuild polyfill plugins
+        plugins: [
+          NodeGlobalsPolyfillPlugin({
+            process: true,
+            buffer: true
+          }),
+          // NodeModulesPolyfillPlugin()
+        ],
+      }
+    },
+    build: {
+      outDir: "dist",
+      minify: false,
+      lib: {
+        entry: resolve(__dirname, "src/lib/index.tsx"), // Set the entry file of your library
+        name: "PioneerLib", // Set the name of your library
+        fileName: (format) => `my-library.${format}.js` // Set the fileName of your library
+      },
+      rollupOptions: {
+        input: {
+          main: resolve(__dirname, "src/index.tsx"),
+        },
+        output: {
+          entryFileNames: 'index.js',
+          chunkFileNames: 'index_[hash].js',
+          assetFileNames: 'index_[hash][extname]',
+          format: "es",
+          globals: {
+            'react': 'React',
+            'react-dom': 'ReactDOM',
+            '@chakra-ui/react': 'Chakra',
+            '@emotion/react': 'emotion'
+          },
+          keepNames: true,
+        },
+        external: ['react', 'react-dom', '@chakra-ui/react', '@emotion/react'],
+        plugins: [
+          NodeGlobalsPolyfillPlugin({
+            process: true,
+            buffer: true
+          }),
+          rollupNodePolyFill()
+        ],
+      }
+    },
+  }
+})