├── .gitattributes
├── .gitignore
├── README.md
├── config
    ├── env.js
    ├── getHttpsConfig.js
    ├── jest
    │   ├── babelTransform.js
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── modules.js
    ├── paths.js
    ├── webpack.config.js
    ├── webpack
    │   └── persistentCache
    │   │   └── createEnvironmentHash.js
    └── webpackDevServer.config.js
├── electron
    ├── blockchain.ts
    ├── cat.ts
    ├── config.toml
    ├── config.ts
    ├── logger.ts
    ├── main.ts
    ├── nft.ts
    ├── preload.ts
    └── tsconfig.json
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
├── src
    ├── App.css
    ├── Header.tsx
    ├── Layout.tsx
    ├── assets
    │   ├── logo-light.png
    │   └── logo.png
    ├── chia
    │   └── bech32.ts
    ├── config.ts
    ├── index.css
    ├── index.tsx
    ├── logo.svg
    ├── pages
    │   ├── AddTail.tsx
    │   ├── HomePage.tsx
    │   └── Tail.tsx
    ├── react-app-env.d.ts
    ├── reportWebVitals.ts
    ├── setupTests.ts
    └── taildatabase
    │   └── db.ts
├── tsconfig.json
└── yarn.lock


/.gitattributes:
--------------------------------------------------------------------------------
1 | *.js linguist-detectable=false
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | /dist
14 | 
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tail Database
 2 | 
 3 | This is a web3 app which connects to a Tail Database data store in DataLayer running on the Chia blockchain.
 4 | 
 5 | ## Install
 6 | 
 7 | To install the app:
 8 | 
 9 | ```bash
10 | npm install
11 | ```
12 | 
13 | ## How to run
14 | 
15 | The quickest way to run the app is to execute the following command.
16 | 
17 | ```bash
18 | npm run electron:dev
19 | ```
20 | 
21 | ## How data is retrieved from DataLayer
22 | 
23 | The application is configured to use [Context Isolation](https://www.electronjs.org/docs/latest/tutorial/context-isolation) with a [Context Bridge](https://www.electronjs.org/docs/latest/api/context-bridge) to facilitate communication between the UI (Main world) and Node processes running in the back-end. This allows the UI to trigger RPC calls to a locally running full node securely without being able to access Electron internals.
24 | 
25 | The DataLayer RPC provided by the full node is used for creating, updating, and deleting data from DataLayer.
26 | 
27 | ## Todo
28 | 
29 | The following needs to be implemented:
30 | 
31 | * UI should display discord/website/twitter URL
32 | * Production build artifact for running in non-dev mode
33 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const paths = require('./paths');
  6 | 
  7 | // Make sure that including paths.js after env.js will read .env variables.
  8 | delete require.cache[require.resolve('./paths')];
  9 | 
 10 | const NODE_ENV = process.env.NODE_ENV;
 11 | if (!NODE_ENV) {
 12 |   throw new Error(
 13 |     'The NODE_ENV environment variable is required but was not specified.'
 14 |   );
 15 | }
 16 | 
 17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
 18 | const dotenvFiles = [
 19 |   `${paths.dotenv}.${NODE_ENV}.local`,
 20 |   // Don't include `.env.local` for `test` environment
 21 |   // since normally you expect tests to produce the same
 22 |   // results for everyone
 23 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
 24 |   `${paths.dotenv}.${NODE_ENV}`,
 25 |   paths.dotenv,
 26 | ].filter(Boolean);
 27 | 
 28 | // Load environment variables from .env* files. Suppress warnings using silent
 29 | // if this file is missing. dotenv will never modify any environment variables
 30 | // that have already been set.  Variable expansion is supported in .env files.
 31 | // https://github.com/motdotla/dotenv
 32 | // https://github.com/motdotla/dotenv-expand
 33 | dotenvFiles.forEach(dotenvFile => {
 34 |   if (fs.existsSync(dotenvFile)) {
 35 |     require('dotenv-expand')(
 36 |       require('dotenv').config({
 37 |         path: dotenvFile,
 38 |       })
 39 |     );
 40 |   }
 41 | });
 42 | 
 43 | // We support resolving modules according to `NODE_PATH`.
 44 | // This lets you use absolute paths in imports inside large monorepos:
 45 | // https://github.com/facebook/create-react-app/issues/253.
 46 | // It works similar to `NODE_PATH` in Node itself:
 47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
 48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
 49 | // Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
 50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
 51 | // We also resolve them to make sure all tools using them work consistently.
 52 | const appDirectory = fs.realpathSync(process.cwd());
 53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
 54 |   .split(path.delimiter)
 55 |   .filter(folder => folder && !path.isAbsolute(folder))
 56 |   .map(folder => path.resolve(appDirectory, folder))
 57 |   .join(path.delimiter);
 58 | 
 59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 60 | // injected into the application via DefinePlugin in webpack configuration.
 61 | const REACT_APP = /^REACT_APP_/i;
 62 | 
 63 | function getClientEnvironment(publicUrl) {
 64 |   const raw = Object.keys(process.env)
 65 |     .filter(key => REACT_APP.test(key))
 66 |     .reduce(
 67 |       (env, key) => {
 68 |         env[key] = process.env[key];
 69 |         return env;
 70 |       },
 71 |       {
 72 |         // Useful for determining whether we’re running in production mode.
 73 |         // Most importantly, it switches React into the correct mode.
 74 |         NODE_ENV: process.env.NODE_ENV || 'development',
 75 |         // Useful for resolving the correct path to static assets in `public`.
 76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
 77 |         // This should only be used as an escape hatch. Normally you would put
 78 |         // images into the `src` and `import` them in code to get their paths.
 79 |         PUBLIC_URL: publicUrl,
 80 |         // We support configuring the sockjs pathname during development.
 81 |         // These settings let a developer run multiple simultaneous projects.
 82 |         // They are used as the connection `hostname`, `pathname` and `port`
 83 |         // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
 84 |         // and `sockPort` options in webpack-dev-server.
 85 |         WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
 86 |         WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
 87 |         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
 88 |         // Whether or not react-refresh is enabled.
 89 |         // It is defined here so it is available in the webpackHotDevClient.
 90 |         FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
 91 |       }
 92 |     );
 93 |   // Stringify all values so we can feed into webpack DefinePlugin
 94 |   const stringified = {
 95 |     'process.env': Object.keys(raw).reduce((env, key) => {
 96 |       env[key] = JSON.stringify(raw[key]);
 97 |       return env;
 98 |     }, {}),
 99 |   };
100 | 
101 |   return { raw, stringified };
102 | }
103 | 
104 | module.exports = getClientEnvironment;
105 | 


--------------------------------------------------------------------------------
/config/getHttpsConfig.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const crypto = require('crypto');
 6 | const chalk = require('react-dev-utils/chalk');
 7 | const paths = require('./paths');
 8 | 
 9 | // Ensure the certificate and key provided are valid and if not
10 | // throw an easy to debug error
11 | function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
12 |   let encrypted;
13 |   try {
14 |     // publicEncrypt will throw an error with an invalid cert
15 |     encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
16 |   } catch (err) {
17 |     throw new Error(
18 |       `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
19 |     );
20 |   }
21 | 
22 |   try {
23 |     // privateDecrypt will throw an error with an invalid key
24 |     crypto.privateDecrypt(key, encrypted);
25 |   } catch (err) {
26 |     throw new Error(
27 |       `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
28 |         err.message
29 |       }`
30 |     );
31 |   }
32 | }
33 | 
34 | // Read file and throw an error if it doesn't exist
35 | function readEnvFile(file, type) {
36 |   if (!fs.existsSync(file)) {
37 |     throw new Error(
38 |       `You specified ${chalk.cyan(
39 |         type
40 |       )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
41 |     );
42 |   }
43 |   return fs.readFileSync(file);
44 | }
45 | 
46 | // Get the https config
47 | // Return cert files if provided in env, otherwise just true or false
48 | function getHttpsConfig() {
49 |   const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
50 |   const isHttps = HTTPS === 'true';
51 | 
52 |   if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
53 |     const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
54 |     const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
55 |     const config = {
56 |       cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
57 |       key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
58 |     };
59 | 
60 |     validateKeyAndCerts({ ...config, keyFile, crtFile });
61 |     return config;
62 |   }
63 |   return isHttps;
64 | }
65 | 
66 | module.exports = getHttpsConfig;
67 | 


--------------------------------------------------------------------------------
/config/jest/babelTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const babelJest = require('babel-jest').default;
 4 | 
 5 | const hasJsxRuntime = (() => {
 6 |   if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
 7 |     return false;
 8 |   }
 9 | 
10 |   try {
11 |     require.resolve('react/jsx-runtime');
12 |     return true;
13 |   } catch (e) {
14 |     return false;
15 |   }
16 | })();
17 | 
18 | module.exports = babelJest.createTransformer({
19 |   presets: [
20 |     [
21 |       require.resolve('babel-preset-react-app'),
22 |       {
23 |         runtime: hasJsxRuntime ? 'automatic' : 'classic',
24 |       },
25 |     ],
26 |   ],
27 |   babelrc: false,
28 |   configFile: false,
29 | });
30 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const camelcase = require('camelcase');
 5 | 
 6 | // This is a custom Jest transformer turning file imports into filenames.
 7 | // http://facebook.github.io/jest/docs/en/webpack.html
 8 | 
 9 | module.exports = {
10 |   process(src, filename) {
11 |     const assetFilename = JSON.stringify(path.basename(filename));
12 | 
13 |     if (filename.match(/\.svg$/)) {
14 |       // Based on how SVGR generates a component name:
15 |       // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
16 |       const pascalCaseFilename = camelcase(path.parse(filename).name, {
17 |         pascalCase: true,
18 |       });
19 |       const componentName = `Svg${pascalCaseFilename}`;
20 |       return `const React = require('react');
21 |       module.exports = {
22 |         __esModule: true,
23 |         default: ${assetFilename},
24 |         ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
25 |           return {
26 |             $$typeof: Symbol.for('react.element'),
27 |             type: 'svg',
28 |             ref: ref,
29 |             key: null,
30 |             props: Object.assign({}, props, {
31 |               children: ${assetFilename}
32 |             })
33 |           };
34 |         }),
35 |       };`;
36 |     }
37 | 
38 |     return `module.exports = ${assetFilename};`;
39 |   },
40 | };
41 | 


--------------------------------------------------------------------------------
/config/modules.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const paths = require('./paths');
  6 | const chalk = require('react-dev-utils/chalk');
  7 | const resolve = require('resolve');
  8 | 
  9 | /**
 10 |  * Get additional module paths based on the baseUrl of a compilerOptions object.
 11 |  *
 12 |  * @param {Object} options
 13 |  */
 14 | function getAdditionalModulePaths(options = {}) {
 15 |   const baseUrl = options.baseUrl;
 16 | 
 17 |   if (!baseUrl) {
 18 |     return '';
 19 |   }
 20 | 
 21 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 22 | 
 23 |   // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
 24 |   // the default behavior.
 25 |   if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
 26 |     return null;
 27 |   }
 28 | 
 29 |   // Allow the user set the `baseUrl` to `appSrc`.
 30 |   if (path.relative(paths.appSrc, baseUrlResolved) === '') {
 31 |     return [paths.appSrc];
 32 |   }
 33 | 
 34 |   // If the path is equal to the root directory we ignore it here.
 35 |   // We don't want to allow importing from the root directly as source files are
 36 |   // not transpiled outside of `src`. We do allow importing them with the
 37 |   // absolute path (e.g. `src/Components/Button.js`) but we set that up with
 38 |   // an alias.
 39 |   if (path.relative(paths.appPath, baseUrlResolved) === '') {
 40 |     return null;
 41 |   }
 42 | 
 43 |   // Otherwise, throw an error.
 44 |   throw new Error(
 45 |     chalk.red.bold(
 46 |       "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
 47 |         ' Create React App does not support other values at this time.'
 48 |     )
 49 |   );
 50 | }
 51 | 
 52 | /**
 53 |  * Get webpack aliases based on the baseUrl of a compilerOptions object.
 54 |  *
 55 |  * @param {*} options
 56 |  */
 57 | function getWebpackAliases(options = {}) {
 58 |   const baseUrl = options.baseUrl;
 59 | 
 60 |   if (!baseUrl) {
 61 |     return {};
 62 |   }
 63 | 
 64 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 65 | 
 66 |   if (path.relative(paths.appPath, baseUrlResolved) === '') {
 67 |     return {
 68 |       src: paths.appSrc,
 69 |     };
 70 |   }
 71 | }
 72 | 
 73 | /**
 74 |  * Get jest aliases based on the baseUrl of a compilerOptions object.
 75 |  *
 76 |  * @param {*} options
 77 |  */
 78 | function getJestAliases(options = {}) {
 79 |   const baseUrl = options.baseUrl;
 80 | 
 81 |   if (!baseUrl) {
 82 |     return {};
 83 |   }
 84 | 
 85 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 86 | 
 87 |   if (path.relative(paths.appPath, baseUrlResolved) === '') {
 88 |     return {
 89 |       '^src/(.*)$': '<rootDir>/src/$1',
 90 |     };
 91 |   }
 92 | }
 93 | 
 94 | function getModules() {
 95 |   // Check if TypeScript is setup
 96 |   const hasTsConfig = fs.existsSync(paths.appTsConfig);
 97 |   const hasJsConfig = fs.existsSync(paths.appJsConfig);
 98 | 
 99 |   if (hasTsConfig && hasJsConfig) {
100 |     throw new Error(
101 |       'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
102 |     );
103 |   }
104 | 
105 |   let config;
106 | 
107 |   // If there's a tsconfig.json we assume it's a
108 |   // TypeScript project and set up the config
109 |   // based on tsconfig.json
110 |   if (hasTsConfig) {
111 |     const ts = require(resolve.sync('typescript', {
112 |       basedir: paths.appNodeModules,
113 |     }));
114 |     config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
115 |     // Otherwise we'll check if there is jsconfig.json
116 |     // for non TS projects.
117 |   } else if (hasJsConfig) {
118 |     config = require(paths.appJsConfig);
119 |   }
120 | 
121 |   config = config || {};
122 |   const options = config.compilerOptions || {};
123 | 
124 |   const additionalModulePaths = getAdditionalModulePaths(options);
125 | 
126 |   return {
127 |     additionalModulePaths: additionalModulePaths,
128 |     webpackAliases: getWebpackAliases(options),
129 |     jestAliases: getJestAliases(options),
130 |     hasTsConfig,
131 |   };
132 | }
133 | 
134 | module.exports = getModules();
135 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebook/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
13 | // "public path" at which the app is served.
14 | // webpack needs to know it to put the right <script> hrefs into HTML even in
15 | // single-page apps that may serve index.html for nested URLs like /todos/42.
16 | // We can't use a relative path in HTML because we don't want to load something
17 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
18 | const publicUrlOrPath = getPublicUrlOrPath(
19 |   process.env.NODE_ENV === 'development',
20 |   require(resolveApp('package.json')).homepage,
21 |   process.env.PUBLIC_URL
22 | );
23 | 
24 | const buildPath = process.env.BUILD_PATH || 'build';
25 | 
26 | const moduleFileExtensions = [
27 |   'web.mjs',
28 |   'mjs',
29 |   'web.js',
30 |   'js',
31 |   'web.ts',
32 |   'ts',
33 |   'web.tsx',
34 |   'tsx',
35 |   'json',
36 |   'web.jsx',
37 |   'jsx',
38 | ];
39 | 
40 | // Resolve file paths in the same order as webpack
41 | const resolveModule = (resolveFn, filePath) => {
42 |   const extension = moduleFileExtensions.find(extension =>
43 |     fs.existsSync(resolveFn(`${filePath}.${extension}`))
44 |   );
45 | 
46 |   if (extension) {
47 |     return resolveFn(`${filePath}.${extension}`);
48 |   }
49 | 
50 |   return resolveFn(`${filePath}.js`);
51 | };
52 | 
53 | // config after eject: we're in ./config/
54 | module.exports = {
55 |   dotenv: resolveApp('.env'),
56 |   appPath: resolveApp('.'),
57 |   appBuild: resolveApp(buildPath),
58 |   appPublic: resolveApp('public'),
59 |   appHtml: resolveApp('public/index.html'),
60 |   appIndexJs: resolveModule(resolveApp, 'src/index'),
61 |   appPackageJson: resolveApp('package.json'),
62 |   appSrc: resolveApp('src'),
63 |   appTsConfig: resolveApp('tsconfig.json'),
64 |   appJsConfig: resolveApp('jsconfig.json'),
65 |   yarnLockFile: resolveApp('yarn.lock'),
66 |   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
67 |   proxySetup: resolveApp('src/setupProxy.js'),
68 |   appNodeModules: resolveApp('node_modules'),
69 |   appWebpackCache: resolveApp('node_modules/.cache'),
70 |   appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
71 |   swSrc: resolveModule(resolveApp, 'src/service-worker'),
72 |   publicUrlOrPath,
73 | };
74 | 
75 | 
76 | 
77 | module.exports.moduleFileExtensions = moduleFileExtensions;
78 | 


--------------------------------------------------------------------------------
/config/webpack.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const resolve = require('resolve');
  7 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  8 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  9 | const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 10 | const TerserPlugin = require('terser-webpack-plugin');
 11 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 12 | const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 13 | const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 14 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 15 | const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 16 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 17 | const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 18 | const ESLintPlugin = require('eslint-webpack-plugin');
 19 | const paths = require('./paths');
 20 | const modules = require('./modules');
 21 | const getClientEnvironment = require('./env');
 22 | const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 23 | const ForkTsCheckerWebpackPlugin =
 24 |   process.env.TSC_COMPILE_ON_ERROR === 'true'
 25 |     ? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
 26 |     : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 27 | const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 28 | 
 29 | const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
 30 | 
 31 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 32 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 33 | 
 34 | const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');
 35 | const reactRefreshWebpackPluginRuntimeEntry = require.resolve(
 36 |   '@pmmmwh/react-refresh-webpack-plugin'
 37 | );
 38 | const babelRuntimeEntry = require.resolve('babel-preset-react-app');
 39 | const babelRuntimeEntryHelpers = require.resolve(
 40 |   '@babel/runtime/helpers/esm/assertThisInitialized',
 41 |   { paths: [babelRuntimeEntry] }
 42 | );
 43 | const babelRuntimeRegenerator = require.resolve('@babel/runtime/regenerator', {
 44 |   paths: [babelRuntimeEntry],
 45 | });
 46 | 
 47 | // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 48 | // makes for a smoother build process.
 49 | const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 50 | 
 51 | const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
 52 | const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
 53 | 
 54 | const imageInlineSizeLimit = parseInt(
 55 |   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
 56 | );
 57 | 
 58 | // Check if TypeScript is setup
 59 | const useTypeScript = fs.existsSync(paths.appTsConfig);
 60 | 
 61 | // Check if Tailwind config exists
 62 | const useTailwind = fs.existsSync(
 63 |   path.join(paths.appPath, 'tailwind.config.js')
 64 | );
 65 | 
 66 | // Get the path to the uncompiled service worker (if it exists).
 67 | const swSrc = paths.swSrc;
 68 | 
 69 | // style files regexes
 70 | const cssRegex = /\.css$/;
 71 | const cssModuleRegex = /\.module\.css$/;
 72 | const sassRegex = /\.(scss|sass)$/;
 73 | const sassModuleRegex = /\.module\.(scss|sass)$/;
 74 | 
 75 | const hasJsxRuntime = (() => {
 76 |   if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
 77 |     return false;
 78 |   }
 79 | 
 80 |   try {
 81 |     require.resolve('react/jsx-runtime');
 82 |     return true;
 83 |   } catch (e) {
 84 |     return false;
 85 |   }
 86 | })();
 87 | 
 88 | // This is the production and development configuration.
 89 | // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 90 | module.exports = function (webpackEnv) {
 91 |   const isEnvDevelopment = webpackEnv === 'development';
 92 |   const isEnvProduction = webpackEnv === 'production';
 93 | 
 94 |   // Variable used for enabling profiling in Production
 95 |   // passed into alias object. Uses a flag if passed into the build command
 96 |   const isEnvProductionProfile =
 97 |     isEnvProduction && process.argv.includes('--profile');
 98 | 
 99 |   // We will provide `paths.publicUrlOrPath` to our app
100 |   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
101 |   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
102 |   // Get environment variables to inject into our app.
103 |   const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
104 | 
105 |   const shouldUseReactRefresh = env.raw.FAST_REFRESH;
106 | 
107 |   // common function to get style loaders
108 |   const getStyleLoaders = (cssOptions, preProcessor) => {
109 |     const loaders = [
110 |       isEnvDevelopment && require.resolve('style-loader'),
111 |       isEnvProduction && {
112 |         loader: MiniCssExtractPlugin.loader,
113 |         // css is located in `static/css`, use '../../' to locate index.html folder
114 |         // in production `paths.publicUrlOrPath` can be a relative path
115 |         options: paths.publicUrlOrPath.startsWith('.')
116 |           ? { publicPath: '../../' }
117 |           : {},
118 |       },
119 |       {
120 |         loader: require.resolve('css-loader'),
121 |         options: cssOptions,
122 |       },
123 |       {
124 |         // Options for PostCSS as we reference these options twice
125 |         // Adds vendor prefixing based on your specified browser support in
126 |         // package.json
127 |         loader: require.resolve('postcss-loader'),
128 |         options: {
129 |           postcssOptions: {
130 |             // Necessary for external CSS imports to work
131 |             // https://github.com/facebook/create-react-app/issues/2677
132 |             ident: 'postcss',
133 |             config: false,
134 |             plugins: !useTailwind
135 |               ? [
136 |                   'postcss-flexbugs-fixes',
137 |                   [
138 |                     'postcss-preset-env',
139 |                     {
140 |                       autoprefixer: {
141 |                         flexbox: 'no-2009',
142 |                       },
143 |                       stage: 3,
144 |                     },
145 |                   ],
146 |                   // Adds PostCSS Normalize as the reset css with default options,
147 |                   // so that it honors browserslist config in package.json
148 |                   // which in turn let's users customize the target behavior as per their needs.
149 |                   'postcss-normalize',
150 |                 ]
151 |               : [
152 |                   'tailwindcss',
153 |                   'postcss-flexbugs-fixes',
154 |                   [
155 |                     'postcss-preset-env',
156 |                     {
157 |                       autoprefixer: {
158 |                         flexbox: 'no-2009',
159 |                       },
160 |                       stage: 3,
161 |                     },
162 |                   ],
163 |                 ],
164 |           },
165 |           sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
166 |         },
167 |       },
168 |     ].filter(Boolean);
169 |     if (preProcessor) {
170 |       loaders.push(
171 |         {
172 |           loader: require.resolve('resolve-url-loader'),
173 |           options: {
174 |             sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
175 |             root: paths.appSrc,
176 |           },
177 |         },
178 |         {
179 |           loader: require.resolve(preProcessor),
180 |           options: {
181 |             sourceMap: true,
182 |           },
183 |         }
184 |       );
185 |     }
186 |     return loaders;
187 |   };
188 | 
189 |   return {
190 |     target: ['browserslist'],
191 |     // Webpack noise constrained to errors and warnings
192 |     stats: 'errors-warnings',
193 |     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
194 |     // Stop compilation early in production
195 |     bail: isEnvProduction,
196 |     devtool: isEnvProduction
197 |       ? shouldUseSourceMap
198 |         ? 'source-map'
199 |         : false
200 |       : isEnvDevelopment && 'cheap-module-source-map',
201 |     // These are the "entry points" to our application.
202 |     // This means they will be the "root" imports that are included in JS bundle.
203 |     entry: paths.appIndexJs,
204 |     output: {
205 |       // The build folder.
206 |       path: paths.appBuild,
207 |       // Add /* filename */ comments to generated require()s in the output.
208 |       pathinfo: isEnvDevelopment,
209 |       // There will be one main bundle, and one file per asynchronous chunk.
210 |       // In development, it does not produce real files.
211 |       filename: isEnvProduction
212 |         ? 'static/js/[name].[contenthash:8].js'
213 |         : isEnvDevelopment && 'static/js/bundle.js',
214 |       // There are also additional JS chunk files if you use code splitting.
215 |       chunkFilename: isEnvProduction
216 |         ? 'static/js/[name].[contenthash:8].chunk.js'
217 |         : isEnvDevelopment && 'static/js/[name].chunk.js',
218 |       assetModuleFilename: 'static/media/[name].[hash][ext]',
219 |       // webpack uses `publicPath` to determine where the app is being served from.
220 |       // It requires a trailing slash, or the file assets will get an incorrect path.
221 |       // We inferred the "public path" (such as / or /my-project) from homepage.
222 |       publicPath: paths.publicUrlOrPath,
223 |       // Point sourcemap entries to original disk location (format as URL on Windows)
224 |       devtoolModuleFilenameTemplate: isEnvProduction
225 |         ? info =>
226 |             path
227 |               .relative(paths.appSrc, info.absoluteResourcePath)
228 |               .replace(/\\/g, '/')
229 |         : isEnvDevelopment &&
230 |           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
231 |     },
232 |     cache: {
233 |       type: 'filesystem',
234 |       version: createEnvironmentHash(env.raw),
235 |       cacheDirectory: paths.appWebpackCache,
236 |       store: 'pack',
237 |       buildDependencies: {
238 |         defaultWebpack: ['webpack/lib/'],
239 |         config: [__filename],
240 |         tsconfig: [paths.appTsConfig, paths.appJsConfig].filter(f =>
241 |           fs.existsSync(f)
242 |         ),
243 |       },
244 |     },
245 |     infrastructureLogging: {
246 |       level: 'none',
247 |     },
248 |     optimization: {
249 |       minimize: isEnvProduction,
250 |       minimizer: [
251 |         // This is only used in production mode
252 |         new TerserPlugin({
253 |           terserOptions: {
254 |             parse: {
255 |               // We want terser to parse ecma 8 code. However, we don't want it
256 |               // to apply any minification steps that turns valid ecma 5 code
257 |               // into invalid ecma 5 code. This is why the 'compress' and 'output'
258 |               // sections only apply transformations that are ecma 5 safe
259 |               // https://github.com/facebook/create-react-app/pull/4234
260 |               ecma: 8,
261 |             },
262 |             compress: {
263 |               ecma: 5,
264 |               warnings: false,
265 |               // Disabled because of an issue with Uglify breaking seemingly valid code:
266 |               // https://github.com/facebook/create-react-app/issues/2376
267 |               // Pending further investigation:
268 |               // https://github.com/mishoo/UglifyJS2/issues/2011
269 |               comparisons: false,
270 |               // Disabled because of an issue with Terser breaking valid code:
271 |               // https://github.com/facebook/create-react-app/issues/5250
272 |               // Pending further investigation:
273 |               // https://github.com/terser-js/terser/issues/120
274 |               inline: 2,
275 |             },
276 |             mangle: {
277 |               safari10: true,
278 |             },
279 |             // Added for profiling in devtools
280 |             keep_classnames: isEnvProductionProfile,
281 |             keep_fnames: isEnvProductionProfile,
282 |             output: {
283 |               ecma: 5,
284 |               comments: false,
285 |               // Turned on because emoji and regex is not minified properly using default
286 |               // https://github.com/facebook/create-react-app/issues/2488
287 |               ascii_only: true,
288 |             },
289 |           },
290 |         }),
291 |         // This is only used in production mode
292 |         new CssMinimizerPlugin(),
293 |       ],
294 |     },
295 |     resolve: {
296 |       fallback: {
297 |         crypto: require.resolve('crypto-browserify'),
298 |         fs: false,
299 |         http: require.resolve('stream-http'),
300 |         https: require.resolve('https-browserify'),
301 |         path: require.resolve('path-browserify'),
302 |         stream: require.resolve('stream-browserify'),
303 |         url: require.resolve('url/')
304 |       },
305 |       // This allows you to set a fallback for where webpack should look for modules.
306 |       // We placed these paths second because we want `node_modules` to "win"
307 |       // if there are any conflicts. This matches Node resolution mechanism.
308 |       // https://github.com/facebook/create-react-app/issues/253
309 |       modules: ['node_modules', paths.appNodeModules].concat(
310 |         modules.additionalModulePaths || []
311 |       ),
312 |       // These are the reasonable defaults supported by the Node ecosystem.
313 |       // We also include JSX as a common component filename extension to support
314 |       // some tools, although we do not recommend using it, see:
315 |       // https://github.com/facebook/create-react-app/issues/290
316 |       // `web` extension prefixes have been added for better support
317 |       // for React Native Web.
318 |       extensions: paths.moduleFileExtensions
319 |         .map(ext => `.${ext}`)
320 |         .filter(ext => useTypeScript || !ext.includes('ts')),
321 |       alias: {
322 |         // Support React Native Web
323 |         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
324 |         'react-native': 'react-native-web',
325 |         // Allows for better profiling with ReactDevTools
326 |         ...(isEnvProductionProfile && {
327 |           'react-dom$': 'react-dom/profiling',
328 |           'scheduler/tracing': 'scheduler/tracing-profiling',
329 |         }),
330 |         ...(modules.webpackAliases || {}),
331 |       },
332 |       plugins: [
333 |         // Prevents users from importing files from outside of src/ (or node_modules/).
334 |         // This often causes confusion because we only process files within src/ with babel.
335 |         // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
336 |         // please link the files into your node_modules/ and let module-resolution kick in.
337 |         // Make sure your source files are compiled, as they will not be processed in any way.
338 |         new ModuleScopePlugin(paths.appSrc, [
339 |           paths.appPackageJson,
340 |           reactRefreshRuntimeEntry,
341 |           reactRefreshWebpackPluginRuntimeEntry,
342 |           babelRuntimeEntry,
343 |           babelRuntimeEntryHelpers,
344 |           babelRuntimeRegenerator,
345 |         ]),
346 |       ],
347 |     },
348 |     module: {
349 |       strictExportPresence: true,
350 |       rules: [
351 |         // Handle node_modules packages that contain sourcemaps
352 |         shouldUseSourceMap && {
353 |           enforce: 'pre',
354 |           exclude: /@babel(?:\/|\\{1,2})runtime/,
355 |           test: /\.(js|mjs|jsx|ts|tsx|css)$/,
356 |           loader: require.resolve('source-map-loader'),
357 |         },
358 |         {
359 |           // "oneOf" will traverse all following loaders until one will
360 |           // match the requirements. When no loader matches it will fall
361 |           // back to the "file" loader at the end of the loader list.
362 |           oneOf: [
363 |             // TODO: Merge this config once `image/avif` is in the mime-db
364 |             // https://github.com/jshttp/mime-db
365 |             {
366 |               test: [/\.avif$/],
367 |               type: 'asset',
368 |               mimetype: 'image/avif',
369 |               parser: {
370 |                 dataUrlCondition: {
371 |                   maxSize: imageInlineSizeLimit,
372 |                 },
373 |               },
374 |             },
375 |             // "url" loader works like "file" loader except that it embeds assets
376 |             // smaller than specified limit in bytes as data URLs to avoid requests.
377 |             // A missing `test` is equivalent to a match.
378 |             {
379 |               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
380 |               type: 'asset',
381 |               parser: {
382 |                 dataUrlCondition: {
383 |                   maxSize: imageInlineSizeLimit,
384 |                 },
385 |               },
386 |             },
387 |             {
388 |               test: /\.svg$/,
389 |               use: [
390 |                 {
391 |                   loader: require.resolve('@svgr/webpack'),
392 |                   options: {
393 |                     prettier: false,
394 |                     svgo: false,
395 |                     svgoConfig: {
396 |                       plugins: [{ removeViewBox: false }],
397 |                     },
398 |                     titleProp: true,
399 |                     ref: true,
400 |                   },
401 |                 },
402 |                 {
403 |                   loader: require.resolve('file-loader'),
404 |                   options: {
405 |                     name: 'static/media/[name].[hash].[ext]',
406 |                   },
407 |                 },
408 |               ],
409 |               issuer: {
410 |                 and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
411 |               },
412 |             },
413 |             // Process application JS with Babel.
414 |             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
415 |             {
416 |               test: /\.(js|mjs|jsx|ts|tsx)$/,
417 |               include: paths.appSrc,
418 |               loader: require.resolve('babel-loader'),
419 |               options: {
420 |                 customize: require.resolve(
421 |                   'babel-preset-react-app/webpack-overrides'
422 |                 ),
423 |                 presets: [
424 |                   [
425 |                     require.resolve('babel-preset-react-app'),
426 |                     {
427 |                       runtime: hasJsxRuntime ? 'automatic' : 'classic',
428 |                     },
429 |                   ],
430 |                 ],
431 |                 
432 |                 plugins: [
433 |                   isEnvDevelopment &&
434 |                     shouldUseReactRefresh &&
435 |                     require.resolve('react-refresh/babel'),
436 |                 ].filter(Boolean),
437 |                 // This is a feature of `babel-loader` for webpack (not Babel itself).
438 |                 // It enables caching results in ./node_modules/.cache/babel-loader/
439 |                 // directory for faster rebuilds.
440 |                 cacheDirectory: true,
441 |                 // See #6846 for context on why cacheCompression is disabled
442 |                 cacheCompression: false,
443 |                 compact: isEnvProduction,
444 |               },
445 |             },
446 |             // Process any JS outside of the app with Babel.
447 |             // Unlike the application JS, we only compile the standard ES features.
448 |             {
449 |               test: /\.(js|mjs)$/,
450 |               exclude: /@babel(?:\/|\\{1,2})runtime/,
451 |               loader: require.resolve('babel-loader'),
452 |               options: {
453 |                 babelrc: false,
454 |                 configFile: false,
455 |                 compact: false,
456 |                 presets: [
457 |                   [
458 |                     require.resolve('babel-preset-react-app/dependencies'),
459 |                     { helpers: true },
460 |                   ],
461 |                 ],
462 |                 cacheDirectory: true,
463 |                 // See #6846 for context on why cacheCompression is disabled
464 |                 cacheCompression: false,
465 |                 
466 |                 // Babel sourcemaps are needed for debugging into node_modules
467 |                 // code.  Without the options below, debuggers like VSCode
468 |                 // show incorrect code and set breakpoints on the wrong lines.
469 |                 sourceMaps: shouldUseSourceMap,
470 |                 inputSourceMap: shouldUseSourceMap,
471 |               },
472 |             },
473 |             // "postcss" loader applies autoprefixer to our CSS.
474 |             // "css" loader resolves paths in CSS and adds assets as dependencies.
475 |             // "style" loader turns CSS into JS modules that inject <style> tags.
476 |             // In production, we use MiniCSSExtractPlugin to extract that CSS
477 |             // to a file, but in development "style" loader enables hot editing
478 |             // of CSS.
479 |             // By default we support CSS Modules with the extension .module.css
480 |             {
481 |               test: cssRegex,
482 |               exclude: cssModuleRegex,
483 |               use: getStyleLoaders({
484 |                 importLoaders: 1,
485 |                 sourceMap: isEnvProduction
486 |                   ? shouldUseSourceMap
487 |                   : isEnvDevelopment,
488 |                 modules: {
489 |                   mode: 'icss',
490 |                 },
491 |               }),
492 |               // Don't consider CSS imports dead code even if the
493 |               // containing package claims to have no side effects.
494 |               // Remove this when webpack adds a warning or an error for this.
495 |               // See https://github.com/webpack/webpack/issues/6571
496 |               sideEffects: true,
497 |             },
498 |             // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
499 |             // using the extension .module.css
500 |             {
501 |               test: cssModuleRegex,
502 |               use: getStyleLoaders({
503 |                 importLoaders: 1,
504 |                 sourceMap: isEnvProduction
505 |                   ? shouldUseSourceMap
506 |                   : isEnvDevelopment,
507 |                 modules: {
508 |                   mode: 'local',
509 |                   getLocalIdent: getCSSModuleLocalIdent,
510 |                 },
511 |               }),
512 |             },
513 |             // Opt-in support for SASS (using .scss or .sass extensions).
514 |             // By default we support SASS Modules with the
515 |             // extensions .module.scss or .module.sass
516 |             {
517 |               test: sassRegex,
518 |               exclude: sassModuleRegex,
519 |               use: getStyleLoaders(
520 |                 {
521 |                   importLoaders: 3,
522 |                   sourceMap: isEnvProduction
523 |                     ? shouldUseSourceMap
524 |                     : isEnvDevelopment,
525 |                   modules: {
526 |                     mode: 'icss',
527 |                   },
528 |                 },
529 |                 'sass-loader'
530 |               ),
531 |               // Don't consider CSS imports dead code even if the
532 |               // containing package claims to have no side effects.
533 |               // Remove this when webpack adds a warning or an error for this.
534 |               // See https://github.com/webpack/webpack/issues/6571
535 |               sideEffects: true,
536 |             },
537 |             // Adds support for CSS Modules, but using SASS
538 |             // using the extension .module.scss or .module.sass
539 |             {
540 |               test: sassModuleRegex,
541 |               use: getStyleLoaders(
542 |                 {
543 |                   importLoaders: 3,
544 |                   sourceMap: isEnvProduction
545 |                     ? shouldUseSourceMap
546 |                     : isEnvDevelopment,
547 |                   modules: {
548 |                     mode: 'local',
549 |                     getLocalIdent: getCSSModuleLocalIdent,
550 |                   },
551 |                 },
552 |                 'sass-loader'
553 |               ),
554 |             },
555 |             // "file" loader makes sure those assets get served by WebpackDevServer.
556 |             // When you `import` an asset, you get its (virtual) filename.
557 |             // In production, they would get copied to the `build` folder.
558 |             // This loader doesn't use a "test" so it will catch all modules
559 |             // that fall through the other loaders.
560 |             {
561 |               // Exclude `js` files to keep "css" loader working as it injects
562 |               // its runtime that would otherwise be processed through "file" loader.
563 |               // Also exclude `html` and `json` extensions so they get processed
564 |               // by webpacks internal loaders.
565 |               exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
566 |               type: 'asset/resource',
567 |             },
568 |             // ** STOP ** Are you adding a new loader?
569 |             // Make sure to add the new loader(s) before the "file" loader.
570 |           ],
571 |         },
572 |       ].filter(Boolean),
573 |     },
574 |     plugins: [
575 |       // Generates an `index.html` file with the <script> injected.
576 |       new HtmlWebpackPlugin(
577 |         Object.assign(
578 |           {},
579 |           {
580 |             inject: true,
581 |             template: paths.appHtml,
582 |           },
583 |           isEnvProduction
584 |             ? {
585 |                 minify: {
586 |                   removeComments: true,
587 |                   collapseWhitespace: true,
588 |                   removeRedundantAttributes: true,
589 |                   useShortDoctype: true,
590 |                   removeEmptyAttributes: true,
591 |                   removeStyleLinkTypeAttributes: true,
592 |                   keepClosingSlash: true,
593 |                   minifyJS: true,
594 |                   minifyCSS: true,
595 |                   minifyURLs: true,
596 |                 },
597 |               }
598 |             : undefined
599 |         )
600 |       ),
601 |       // Inlines the webpack runtime script. This script is too small to warrant
602 |       // a network request.
603 |       // https://github.com/facebook/create-react-app/issues/5358
604 |       isEnvProduction &&
605 |         shouldInlineRuntimeChunk &&
606 |         new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
607 |       // Makes some environment variables available in index.html.
608 |       // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
609 |       // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
610 |       // It will be an empty string unless you specify "homepage"
611 |       // in `package.json`, in which case it will be the pathname of that URL.
612 |       new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
613 |       // This gives some necessary context to module not found errors, such as
614 |       // the requesting resource.
615 |       new ModuleNotFoundPlugin(paths.appPath),
616 |       // Makes some environment variables available to the JS code, for example:
617 |       // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
618 |       // It is absolutely essential that NODE_ENV is set to production
619 |       // during a production build.
620 |       // Otherwise React will be compiled in the very slow development mode.
621 |       new webpack.DefinePlugin(env.stringified),
622 |       // Experimental hot reloading for React .
623 |       // https://github.com/facebook/react/tree/main/packages/react-refresh
624 |       isEnvDevelopment &&
625 |         shouldUseReactRefresh &&
626 |         new ReactRefreshWebpackPlugin({
627 |           overlay: false,
628 |         }),
629 |       // Watcher doesn't work well if you mistype casing in a path so we use
630 |       // a plugin that prints an error when you attempt to do this.
631 |       // See https://github.com/facebook/create-react-app/issues/240
632 |       isEnvDevelopment && new CaseSensitivePathsPlugin(),
633 |       isEnvProduction &&
634 |         new MiniCssExtractPlugin({
635 |           // Options similar to the same options in webpackOptions.output
636 |           // both options are optional
637 |           filename: 'static/css/[name].[contenthash:8].css',
638 |           chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
639 |         }),
640 |       // Generate an asset manifest file with the following content:
641 |       // - "files" key: Mapping of all asset filenames to their corresponding
642 |       //   output file so that tools can pick it up without having to parse
643 |       //   `index.html`
644 |       // - "entrypoints" key: Array of files which are included in `index.html`,
645 |       //   can be used to reconstruct the HTML if necessary
646 |       new WebpackManifestPlugin({
647 |         fileName: 'asset-manifest.json',
648 |         publicPath: paths.publicUrlOrPath,
649 |         generate: (seed, files, entrypoints) => {
650 |           const manifestFiles = files.reduce((manifest, file) => {
651 |             manifest[file.name] = file.path;
652 |             return manifest;
653 |           }, seed);
654 |           const entrypointFiles = entrypoints.main.filter(
655 |             fileName => !fileName.endsWith('.map')
656 |           );
657 | 
658 |           return {
659 |             files: manifestFiles,
660 |             entrypoints: entrypointFiles,
661 |           };
662 |         },
663 |       }),
664 |       // Moment.js is an extremely popular library that bundles large locale files
665 |       // by default due to how webpack interprets its code. This is a practical
666 |       // solution that requires the user to opt into importing specific locales.
667 |       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
668 |       // You can remove this if you don't use Moment.js:
669 |       new webpack.IgnorePlugin({
670 |         resourceRegExp: /^\.\/locale$/,
671 |         contextRegExp: /moment$/,
672 |       }),
673 |       // Generate a service worker script that will precache, and keep up to date,
674 |       // the HTML & assets that are part of the webpack build.
675 |       isEnvProduction &&
676 |         fs.existsSync(swSrc) &&
677 |         new WorkboxWebpackPlugin.InjectManifest({
678 |           swSrc,
679 |           dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
680 |           exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],
681 |           // Bump up the default maximum size (2mb) that's precached,
682 |           // to make lazy-loading failure scenarios less likely.
683 |           // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
684 |           maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
685 |         }),
686 |       // TypeScript type checking
687 |       useTypeScript &&
688 |         new ForkTsCheckerWebpackPlugin({
689 |           async: isEnvDevelopment,
690 |           typescript: {
691 |             typescriptPath: resolve.sync('typescript', {
692 |               basedir: paths.appNodeModules,
693 |             }),
694 |             configOverwrite: {
695 |               compilerOptions: {
696 |                 sourceMap: isEnvProduction
697 |                   ? shouldUseSourceMap
698 |                   : isEnvDevelopment,
699 |                 skipLibCheck: true,
700 |                 inlineSourceMap: false,
701 |                 declarationMap: false,
702 |                 noEmit: true,
703 |                 incremental: true,
704 |                 tsBuildInfoFile: paths.appTsBuildInfoFile,
705 |               },
706 |             },
707 |             context: paths.appPath,
708 |             diagnosticOptions: {
709 |               syntactic: true,
710 |             },
711 |             mode: 'write-references',
712 |             // profile: true,
713 |           },
714 |           issue: {
715 |             // This one is specifically to match during CI tests,
716 |             // as micromatch doesn't match
717 |             // '../cra-template-typescript/template/src/App.tsx'
718 |             // otherwise.
719 |             include: [
720 |               { file: '../**/src/**/*.{ts,tsx}' },
721 |               { file: '**/src/**/*.{ts,tsx}' },
722 |             ],
723 |             exclude: [
724 |               { file: '**/src/**/__tests__/**' },
725 |               { file: '**/src/**/?(*.){spec|test}.*' },
726 |               { file: '**/src/setupProxy.*' },
727 |               { file: '**/src/setupTests.*' },
728 |             ],
729 |           },
730 |           logger: {
731 |             infrastructure: 'silent',
732 |           },
733 |         }),
734 |       !disableESLintPlugin &&
735 |         new ESLintPlugin({
736 |           // Plugin options
737 |           extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
738 |           formatter: require.resolve('react-dev-utils/eslintFormatter'),
739 |           eslintPath: require.resolve('eslint'),
740 |           failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
741 |           context: paths.appSrc,
742 |           cache: true,
743 |           cacheLocation: path.resolve(
744 |             paths.appNodeModules,
745 |             '.cache/.eslintcache'
746 |           ),
747 |           // ESLint class options
748 |           cwd: paths.appPath,
749 |           resolvePluginsRelativeTo: __dirname,
750 |           baseConfig: {
751 |             extends: [require.resolve('eslint-config-react-app/base')],
752 |             rules: {
753 |               ...(!hasJsxRuntime && {
754 |                 'react/react-in-jsx-scope': 'error',
755 |               }),
756 |             },
757 |           },
758 |         }),
759 |     ].filter(Boolean),
760 |     // Turn off performance processing because we utilize
761 |     // our own hints via the FileSizeReporter
762 |     performance: false,
763 |   };
764 | };
765 | 


--------------------------------------------------------------------------------
/config/webpack/persistentCache/createEnvironmentHash.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const { createHash } = require('crypto');
 3 | 
 4 | module.exports = env => {
 5 |   const hash = createHash('md5');
 6 |   hash.update(JSON.stringify(env));
 7 | 
 8 |   return hash.digest('hex');
 9 | };
10 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
  5 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  6 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
  7 | const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
  8 | const paths = require('./paths');
  9 | const getHttpsConfig = require('./getHttpsConfig');
 10 | 
 11 | const host = process.env.HOST || '0.0.0.0';
 12 | const sockHost = process.env.WDS_SOCKET_HOST;
 13 | const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
 14 | const sockPort = process.env.WDS_SOCKET_PORT;
 15 | 
 16 | module.exports = function (proxy, allowedHost) {
 17 |   const disableFirewall =
 18 |     !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
 19 |   return {
 20 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 21 |     // websites from potentially accessing local content through DNS rebinding:
 22 |     // https://github.com/webpack/webpack-dev-server/issues/887
 23 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 24 |     // However, it made several existing use cases such as development in cloud
 25 |     // environment or subdomains in development significantly more complicated:
 26 |     // https://github.com/facebook/create-react-app/issues/2271
 27 |     // https://github.com/facebook/create-react-app/issues/2233
 28 |     // While we're investigating better solutions, for now we will take a
 29 |     // compromise. Since our WDS configuration only serves files in the `public`
 30 |     // folder we won't consider accessing them a vulnerability. However, if you
 31 |     // use the `proxy` feature, it gets more dangerous because it can expose
 32 |     // remote code execution vulnerabilities in backends like Django and Rails.
 33 |     // So we will disable the host check normally, but enable it if you have
 34 |     // specified the `proxy` setting. Finally, we let you override it if you
 35 |     // really know what you're doing with a special environment variable.
 36 |     // Note: ["localhost", ".localhost"] will support subdomains - but we might
 37 |     // want to allow setting the allowedHosts manually for more complex setups
 38 |     allowedHosts: disableFirewall ? 'all' : [allowedHost],
 39 |     headers: {
 40 |       'Access-Control-Allow-Origin': '*',
 41 |       'Access-Control-Allow-Methods': '*',
 42 |       'Access-Control-Allow-Headers': '*',
 43 |     },
 44 |     // Enable gzip compression of generated files.
 45 |     compress: true,
 46 |     static: {
 47 |       // By default WebpackDevServer serves physical files from current directory
 48 |       // in addition to all the virtual build products that it serves from memory.
 49 |       // This is confusing because those files won’t automatically be available in
 50 |       // production build folder unless we copy them. However, copying the whole
 51 |       // project directory is dangerous because we may expose sensitive files.
 52 |       // Instead, we establish a convention that only files in `public` directory
 53 |       // get served. Our build script will copy `public` into the `build` folder.
 54 |       // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 55 |       // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
 56 |       // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 57 |       // Note that we only recommend to use `public` folder as an escape hatch
 58 |       // for files like `favicon.ico`, `manifest.json`, and libraries that are
 59 |       // for some reason broken when imported through webpack. If you just want to
 60 |       // use an image, put it in `src` and `import` it from JavaScript instead.
 61 |       directory: paths.appPublic,
 62 |       publicPath: [paths.publicUrlOrPath],
 63 |       // By default files from `contentBase` will not trigger a page reload.
 64 |       watch: {
 65 |         // Reportedly, this avoids CPU overload on some systems.
 66 |         // https://github.com/facebook/create-react-app/issues/293
 67 |         // src/node_modules is not ignored to support absolute imports
 68 |         // https://github.com/facebook/create-react-app/issues/1065
 69 |         ignored: ignoredFiles(paths.appSrc),
 70 |       },
 71 |     },
 72 |     client: {
 73 |       webSocketURL: {
 74 |         // Enable custom sockjs pathname for websocket connection to hot reloading server.
 75 |         // Enable custom sockjs hostname, pathname and port for websocket connection
 76 |         // to hot reloading server.
 77 |         hostname: sockHost,
 78 |         pathname: sockPath,
 79 |         port: sockPort,
 80 |       },
 81 |       overlay: {
 82 |         errors: true,
 83 |         warnings: false,
 84 |       },
 85 |     },
 86 |     devMiddleware: {
 87 |       // It is important to tell WebpackDevServer to use the same "publicPath" path as
 88 |       // we specified in the webpack config. When homepage is '.', default to serving
 89 |       // from the root.
 90 |       // remove last slash so user can land on `/test` instead of `/test/`
 91 |       publicPath: paths.publicUrlOrPath.slice(0, -1),
 92 |     },
 93 | 
 94 |     https: getHttpsConfig(),
 95 |     host,
 96 |     historyApiFallback: {
 97 |       // Paths with dots should still use the history fallback.
 98 |       // See https://github.com/facebook/create-react-app/issues/387.
 99 |       disableDotRule: true,
100 |       index: paths.publicUrlOrPath,
101 |     },
102 |     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
103 |     proxy,
104 |     onBeforeSetupMiddleware(devServer) {
105 |       // Keep `evalSourceMapMiddleware`
106 |       // middlewares before `redirectServedPath` otherwise will not have any effect
107 |       // This lets us fetch source contents from webpack for the error overlay
108 |       devServer.app.use(evalSourceMapMiddleware(devServer));
109 | 
110 |       if (fs.existsSync(paths.proxySetup)) {
111 |         // This registers user provided middleware for proxy reasons
112 |         require(paths.proxySetup)(devServer.app);
113 |       }
114 |     },
115 |     onAfterSetupMiddleware(devServer) {
116 |       // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
117 |       devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
118 | 
119 |       // This service worker file is effectively a 'no-op' that will reset any
120 |       // previous service worker registered for the same host:port combination.
121 |       // We do this in development to avoid hitting the production cache if
122 |       // it used the same host and port.
123 |       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
124 |       devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
125 |     },
126 |   };
127 | };
128 | 


--------------------------------------------------------------------------------
/electron/blockchain.ts:
--------------------------------------------------------------------------------
1 | import { Blockchain } from '@tail-database/tail-database-client';
2 | 
3 | export const synced = async (blockchain: Blockchain) => {
4 |     const result = await blockchain.get_blockchain_state();
5 | 
6 |     return result.success && result.blockchain_state.sync.synced;
7 | };
8 | 


--------------------------------------------------------------------------------
/electron/cat.ts:
--------------------------------------------------------------------------------
 1 | import { OPERATOR_LOOKUP, SExp, run_program } from 'clvm';
 2 | import { go, setPrintFunction } from 'clvm_tools';
 3 | import { Coin, coin_name, hash_program, hex_to_program, match_cat_puzzle, COIN_CREATE_CONDITION, MAGIC_SPEND } from '@tail-database/tail-database-client';
 4 | 
 5 | export const getTailReveal = async (coin_id: string, rpc: Coin): Promise<[string, string, string]> => {
 6 |     let current_coin = coin_id;
 7 | 
 8 |     while (true) {
 9 |         const coin = await rpc.get_coin_record_by_name(current_coin);
10 | 
11 |         if (!coin.success || !coin.coin_record) {
12 |             throw new Error(`Could not find coin id ${current_coin}`);
13 |         }
14 | 
15 |         const parent_coin_info = coin.coin_record.coin.parent_coin_info;
16 |         const parent = await rpc.get_puzzle_and_solution(parent_coin_info, coin.coin_record.confirmed_block_index);
17 | 
18 |         if (!parent.coin_solution) {
19 |             throw new Error(`Could not find parent spend ${parent_coin_info} at height ${coin.coin_record.confirmed_block_index}`);
20 |         }
21 | 
22 |         const puzzle = hex_to_program(parent.coin_solution.puzzle_reveal);
23 |         const match = match_cat_puzzle(puzzle);
24 | 
25 |         // First parent that is not a CAT
26 |         if (!match) {
27 |             const children = await rpc.get_coin_records_by_parent_ids([parent_coin_info]);
28 | 
29 |             for (const child of children.coin_records) {
30 |                 const child_coin_name = coin_name(String(child.coin.amount), child.coin.parent_coin_info, child.coin.puzzle_hash);
31 |                 const child_reveal = await rpc.get_puzzle_and_solution(child_coin_name, child.spent_block_index);
32 | 
33 |                 if (!child_reveal.success) {
34 |                     // This coin hasn't been spent but there may be another child that has
35 |                     continue;
36 |                 }
37 | 
38 |                 const puzzle = hex_to_program(child_reveal.coin_solution.puzzle_reveal);
39 |                 const match = match_cat_puzzle(puzzle);
40 | 
41 |                 // First CAT
42 |                 if (match) {
43 |                     const [,,inner_puzzle] = match;
44 |                     const outer_solution = hex_to_program(child_reveal.coin_solution.solution);
45 |                     const inner_solution = (outer_solution.as_iter().next().value as SExp);
46 |                     const inner_puzzle_program = hex_to_program(inner_puzzle);
47 | 
48 |                     const [, result] = run_program(
49 |                         inner_puzzle_program,
50 |                         inner_solution,
51 |                         OPERATOR_LOOKUP,
52 |                     );
53 | 
54 |                     for (const data of result.as_iter()) {
55 |                         const opcode = (data as SExp).first();
56 | 
57 |                         if (opcode.as_int() == COIN_CREATE_CONDITION) {
58 |                             const puzzle_hash = data.rest().first();
59 | 
60 |                             if (puzzle_hash.equal_to(SExp.to([]))) {
61 |                                 const amount = data.rest().rest().first();
62 | 
63 |                                 if (amount.as_int() == MAGIC_SPEND) {
64 |                                     const tail: SExp = data.rest().rest().rest().first();
65 |                                     const hashed_tail_reveal = hash_program(tail);
66 |                                     const tail_reveal: string = await new Promise(resolve => {
67 |                                         setPrintFunction(disassembled_clvm => resolve(disassembled_clvm));
68 |                                         go('opd', tail.toString());
69 |                                       });
70 | 
71 |                                     return [child_coin_name.slice(2), hashed_tail_reveal, tail_reveal];
72 |                                 }
73 |                             }
74 |                         }
75 |                     }
76 |                 }
77 |             }
78 |         }
79 | 
80 |         current_coin = parent_coin_info;
81 |     }
82 | };
83 | 


--------------------------------------------------------------------------------
/electron/config.toml:
--------------------------------------------------------------------------------
1 | network = "mainnet"
2 | 
3 | [testnet10]
4 | store_id = "073edb36a4a982c3d00999b1d925d304e7867afa68eb535e3071ee2f682700ea"
5 | 
6 | [mainnet]
7 | store_id = "fd1078bf0d01743e8e685b72635ca15488f5adce0da016b229f8885a3de36c0f"
8 | 


--------------------------------------------------------------------------------
/electron/config.ts:
--------------------------------------------------------------------------------
 1 | import { readFileSync } from 'fs';
 2 | import { homedir } from "os";
 3 | import * as path from 'path';
 4 | import toml from 'toml';
 5 | 
 6 | const config = toml.parse(readFileSync(path.resolve(process.cwd(), 'electron/', './config.toml')).toString('utf-8'))
 7 | 
 8 | const chiaRootPath = path.resolve(
 9 |     homedir(),
10 |     process.env["CHIA_ROOT"] || ".chia/mainnet"
11 | );
12 | 
13 | const CONFIG_PATH = `${chiaRootPath}/config/ssl/full_node`;
14 | 
15 | export const connectionOptions = {
16 |     cert: readFileSync(`${CONFIG_PATH}/private_full_node.crt`),
17 |     key: readFileSync(`${CONFIG_PATH}/private_full_node.key`),
18 |     rejectUnauthorized: false
19 | };
20 | 
21 | export const store_id = config.network == 'mainnet' ? config.mainnet.store_id  : config.testnet10.store_id;
22 | export const log_level = process.env.LOG_LEVEL || 'info';
23 | 


--------------------------------------------------------------------------------
/electron/logger.ts:
--------------------------------------------------------------------------------
 1 | import { createLogger, format, transports } from 'winston';
 2 | import { log_level } from './config';
 3 | import { name } from '../package.json';
 4 | 
 5 | export const logger = createLogger({
 6 |     level: log_level,
 7 |     format: format.json(),
 8 |     defaultMeta: { service: name },
 9 |     transports: [
10 |         new transports.Console({
11 |             format: format.simple(),
12 |         })
13 |     ],
14 | });
15 | 


--------------------------------------------------------------------------------
/electron/main.ts:
--------------------------------------------------------------------------------
 1 | import * as path from 'path';
 2 | import { app, ipcMain, BrowserWindow } from 'electron';
 3 | import * as isDev from 'electron-is-dev';
 4 | import installExtension, { REACT_DEVELOPER_TOOLS } from "electron-devtools-installer";
 5 | import { Blockchain, Coin, DataLayer, Tail, TailRecord } from '@tail-database/tail-database-client';
 6 | import { connectionOptions, store_id } from './config';
 7 | import { getNftUri } from './nft';
 8 | import { getTailReveal } from './cat';
 9 | import { synced } from './blockchain';
10 | import { logger } from './logger';
11 | 
12 | process.on('uncaughtException', (e) => logger.error(e));
13 | 
14 | const coin = new Coin(connectionOptions);
15 | const blockchain = new Blockchain(connectionOptions);
16 | const dl = new DataLayer({
17 |     id: store_id,
18 |     ...connectionOptions
19 | })
20 | 
21 | const tailStore = new Tail(dl);
22 | 
23 | let win: BrowserWindow | null = null;
24 | 
25 | function createWindow() {
26 |     win = new BrowserWindow({
27 |         width: 800,
28 |         height: 600,
29 |         webPreferences: {
30 |             nodeIntegration: true,
31 |             preload: path.join(__dirname, 'preload.js'),
32 |             contextIsolation: true, // Isolating context so our app is not exposed to random javascript executions making it safer
33 |         }
34 |     })
35 | 
36 |     if (isDev) {
37 |         win.loadURL('http://localhost:3000/');
38 |     } else {
39 |         // 'build/index.html'
40 |         win.loadURL(`file://${__dirname}/../`);
41 |     }
42 | 
43 |     win.on('closed', () => win = null);
44 | 
45 |     // Hot Reloading
46 |     if (isDev) {
47 |         // 'node_modules/.bin/electronPath'
48 |         require('electron-reload')(__dirname, {
49 |             electron: path.join(__dirname, '..', '..', 'node_modules', '.bin', 'electron'),
50 |             forceHardReset: true,
51 |             hardResetMethod: 'exit'
52 |         });
53 |     }
54 | 
55 |     ipcMain.handle('subscribe', (_, urls: string[] = []) => tailStore.subscribe(urls));
56 |     ipcMain.handle('synced', () => synced(blockchain));
57 |     ipcMain.handle('get-tails', () => tailStore.all());
58 |     ipcMain.handle('get-tail', (_, hash) => tailStore.get(hash));
59 |     ipcMain.handle('add-tail', (_, tailRecord: TailRecord) => tailStore.insert(tailRecord));
60 |     ipcMain.handle('get-nft-uri', async (_, launcher_id: string) => getNftUri(launcher_id, coin));
61 |     ipcMain.handle('get-tail-reveal', async (_, coin_id: string) => getTailReveal(coin_id, coin));
62 | 
63 |     // DevTools
64 |     installExtension(REACT_DEVELOPER_TOOLS)
65 |         .then((name) => logger.info(`Added Extension:  ${name}`))
66 |         .catch((err) => logger.info('An error occurred: ', err));
67 | 
68 |     if (isDev) {
69 |         // win.webContents.openDevTools();
70 |     }
71 | }
72 | 
73 | app.on('ready', createWindow);
74 | 
75 | app.on('window-all-closed', () => {
76 |     if (process.platform !== 'darwin') {
77 |         app.quit();
78 |     }
79 | });
80 | 
81 | app.on('activate', () => {
82 |     if (win === null) {
83 |         createWindow();
84 |     }
85 | });
86 | 


--------------------------------------------------------------------------------
/electron/nft.ts:
--------------------------------------------------------------------------------
 1 | import { SExp } from 'clvm';
 2 | import { Coin, coin_name, hex_to_program, uncurry, NFT_STATE_LAYER_MOD, SINGLETON_MOD } from '@tail-database/tail-database-client';
 3 | 
 4 | export const getNftUri = async (launcher_id: string, coin: Coin): Promise<string | null> => {
 5 |     const { coin_records } = await coin.get_coin_records_by_parent_ids([launcher_id]);
 6 |     const result = await coin.get_puzzle_and_solution(coin_name(String(coin_records[0].coin.amount), coin_records[0].coin.parent_coin_info, coin_records[0].coin.puzzle_hash), coin_records[0].spent_block_index);
 7 |     const outer_puzzle = hex_to_program(result.coin_solution.puzzle_reveal);
 8 |     const outer_puzzle_uncurry = uncurry(outer_puzzle);
 9 | 
10 |     if (outer_puzzle_uncurry) {
11 |         const [mod, curried_args] = outer_puzzle_uncurry;
12 | 
13 |         if (mod == SINGLETON_MOD) {
14 |             const [_, singleton_inner_puzzle] = curried_args;
15 | 
16 |             const singleton_inner_puzzle_1 = hex_to_program(singleton_inner_puzzle);
17 |             const singleton_inner_puzzle_1_uncurry = uncurry(singleton_inner_puzzle_1);
18 | 
19 |             if (singleton_inner_puzzle_1_uncurry) {
20 |                 const [mod, curried_args] = singleton_inner_puzzle_1_uncurry;
21 | 
22 |                 if (mod == NFT_STATE_LAYER_MOD) {
23 |                     const [_, metadata] = curried_args;
24 | 
25 |                     const metadata_program = hex_to_program(metadata);
26 | 
27 |                     for (const data of metadata_program.as_iter()) {
28 |                         const pair = data.as_pair();
29 | 
30 |                         if (pair) {
31 |                             const [type, value]: SExp[] = pair;
32 | 
33 |                             if (type.atom?.decode() == 'u') {
34 |                                 if (value.pair) {
35 |                                     // URI
36 |                                     return value.pair[0].atom.decode();
37 |                                 }
38 |                             }
39 |                         }
40 |                     }
41 |                 }
42 | 
43 |             }
44 | 
45 |         }
46 |     }
47 | 
48 |     return null;
49 | };
50 | 


--------------------------------------------------------------------------------
/electron/preload.ts:
--------------------------------------------------------------------------------
 1 | import { contextBridge, ipcRenderer } from 'electron';
 2 | import { TailRecord } from '@tail-database/tail-database-client';
 3 | 
 4 | contextBridge.exposeInMainWorld('taildatabase', {
 5 |     addTail: (tailRecord: TailRecord) => ipcRenderer.invoke('add-tail', tailRecord),
 6 |     getTail: (hash: string) => ipcRenderer.invoke('get-tail', hash),
 7 |     getTails: () => ipcRenderer.invoke('get-tails'),
 8 |     getNftUri: (launcher_id: string) => ipcRenderer.invoke('get-nft-uri', launcher_id),
 9 |     getTailReveal: (coin_id: string) => ipcRenderer.invoke('get-tail-reveal', coin_id),
10 |     synced: () => ipcRenderer.invoke('synced'),
11 |     subscribe: (urls: string[] = []) => ipcRenderer.invoke('subscribe', urls),
12 | });
13 | 


--------------------------------------------------------------------------------
/electron/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "target": "ES2015",
 4 |         "lib": ["DOM"],
 5 |         "module": "commonjs",
 6 |         "allowSyntheticDefaultImports": true,
 7 |         "esModuleInterop": true,
 8 |         "sourceMap": true,
 9 |         "strict": true,
10 |         "skipLibCheck": true,
11 |         "outDir": "../build",
12 |         "rootDir": "../",
13 |         "noEmitOnError": true,
14 |         "resolveJsonModule": true,
15 |         "typeRoots": [
16 |             "node_modules/@types"
17 |         ]
18 |     }
19 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "tail-database-app",
  3 |   "version": "0.1.0",
  4 |   "homepage": ".",
  5 |   "main": "build/electron/main.js",
  6 |   "private": true,
  7 |   "dependencies": {
  8 |     "@babel/core": "^7.16.0",
  9 |     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
 10 |     "@svgr/webpack": "^5.5.0",
 11 |     "@tail-database/tail-database-client": "^1.5.0",
 12 |     "@tanstack/react-table": "^8.5.15",
 13 |     "@testing-library/jest-dom": "^5.16.5",
 14 |     "@testing-library/react": "^13.4.0",
 15 |     "@testing-library/user-event": "^13.5.0",
 16 |     "@types/electron-devtools-installer": "^2.2.2",
 17 |     "@types/node": "^16.11.68",
 18 |     "@types/react": "^18.0.21",
 19 |     "@types/react-dom": "^18.0.6",
 20 |     "axios": "^1.1.3",
 21 |     "babel-jest": "^27.4.2",
 22 |     "babel-loader": "^8.2.3",
 23 |     "babel-plugin-named-asset-import": "^0.3.8",
 24 |     "babel-preset-react-app": "^10.0.1",
 25 |     "bfj": "^7.0.2",
 26 |     "bootstrap": "^5.2.2",
 27 |     "browserslist": "^4.18.1",
 28 |     "camelcase": "^6.2.1",
 29 |     "case-sensitive-paths-webpack-plugin": "^2.4.0",
 30 |     "clvm": "^2.0.0",
 31 |     "clvm_tools": "^0.9.5",
 32 |     "crypto-browserify": "^3.12.0",
 33 |     "css-loader": "^6.5.1",
 34 |     "css-minimizer-webpack-plugin": "^3.2.0",
 35 |     "dexie": "^3.2.2",
 36 |     "dotenv": "^10.0.0",
 37 |     "dotenv-expand": "^5.1.0",
 38 |     "electron-devtools-installer": "^3.2.0",
 39 |     "electron-is-dev": "^2.0.0",
 40 |     "electron-reload": "^2.0.0-alpha.1",
 41 |     "eslint": "^8.3.0",
 42 |     "eslint-config-react-app": "^7.0.1",
 43 |     "eslint-webpack-plugin": "^3.1.1",
 44 |     "file-loader": "^6.2.0",
 45 |     "fs-extra": "^10.0.0",
 46 |     "html-webpack-plugin": "^5.5.0",
 47 |     "https-browserify": "^1.0.0",
 48 |     "identity-obj-proxy": "^3.0.0",
 49 |     "javascript-time-ago": "^2.5.9",
 50 |     "jest": "^27.4.3",
 51 |     "jest-resolve": "^27.4.2",
 52 |     "jest-watch-typeahead": "^1.0.0",
 53 |     "mini-css-extract-plugin": "^2.4.5",
 54 |     "msgpack-lite": "^0.1.26",
 55 |     "path-browserify": "^1.0.1",
 56 |     "postcss": "^8.4.4",
 57 |     "postcss-flexbugs-fixes": "^5.0.2",
 58 |     "postcss-loader": "^6.2.1",
 59 |     "postcss-normalize": "^10.0.1",
 60 |     "postcss-preset-env": "^7.0.1",
 61 |     "prompts": "^2.4.2",
 62 |     "react": "^18.2.0",
 63 |     "react-app-polyfill": "^3.0.0",
 64 |     "react-dev-utils": "^12.0.1",
 65 |     "react-dom": "^18.2.0",
 66 |     "react-refresh": "^0.11.0",
 67 |     "react-router-dom": "^6.4.2",
 68 |     "react-select": "^5.5.9",
 69 |     "react-syntax-highlighter": "^15.5.0",
 70 |     "react-time-ago": "^7.2.1",
 71 |     "resolve": "^1.20.0",
 72 |     "resolve-url-loader": "^4.0.0",
 73 |     "sass-loader": "^12.3.0",
 74 |     "semver": "^7.3.5",
 75 |     "source-map-loader": "^3.0.0",
 76 |     "stream-browserify": "^3.0.0",
 77 |     "stream-http": "^3.2.0",
 78 |     "style-loader": "^3.3.1",
 79 |     "tailwindcss": "^3.0.2",
 80 |     "terser-webpack-plugin": "^5.2.5",
 81 |     "toml": "^3.0.0",
 82 |     "typescript": "^4.8.4",
 83 |     "url": "^0.11.0",
 84 |     "web-vitals": "^2.1.4",
 85 |     "webpack": "^5.64.4",
 86 |     "webpack-dev-server": "^4.6.0",
 87 |     "webpack-manifest-plugin": "^4.0.2",
 88 |     "winston": "^3.8.2",
 89 |     "workbox-webpack-plugin": "^6.4.1"
 90 |   },
 91 |   "scripts": {
 92 |     "start": "node scripts/start.js",
 93 |     "build": "node scripts/build.js",
 94 |     "test": "node scripts/test.js",
 95 |     "postinstall": "electron-builder install-app-deps",
 96 |     "electron:dev": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://127.0.0.1:3000 && tsc -p electron -w\" \"wait-on http://127.0.0.1:3000 && tsc -p electron && electron .\"",
 97 |     "electron:build": "yarn build && tsc -p electron && electron-builder"
 98 |   },
 99 |   "eslintConfig": {
100 |     "extends": [
101 |       "react-app",
102 |       "react-app/jest"
103 |     ]
104 |   },
105 |   "browserslist": {
106 |     "production": [
107 |       ">0.2%",
108 |       "not dead",
109 |       "not op_mini all"
110 |     ],
111 |     "development": [
112 |       "last 1 chrome version",
113 |       "last 1 firefox version",
114 |       "last 1 safari version"
115 |     ]
116 |   },
117 |   "build": {
118 |     "extends": null,
119 |     "files": [
120 |       "build/**/*"
121 |     ],
122 |     "directories": {
123 |       "buildResources": "assets"
124 |     }
125 |   },
126 |   "devDependencies": {
127 |     "@types/jest": "^29.2.1",
128 |     "@types/msgpack-lite": "^0.1.8",
129 |     "@types/react-syntax-highlighter": "^15.5.5",
130 |     "concurrently": "^7.4.0",
131 |     "cross-env": "^7.0.3",
132 |     "electron": "^21.2.0",
133 |     "electron-builder": "^23.6.0",
134 |     "wait-on": "^6.0.1",
135 |     "yarn": "^1.22.19"
136 |   },
137 |   "jest": {
138 |     "roots": [
139 |       "<rootDir>/src"
140 |     ],
141 |     "collectCoverageFrom": [
142 |       "src/**/*.{js,jsx,ts,tsx}",
143 |       "!src/**/*.d.ts"
144 |     ],
145 |     "setupFiles": [
146 |       "react-app-polyfill/jsdom"
147 |     ],
148 |     "setupFilesAfterEnv": [
149 |       "<rootDir>/src/setupTests.ts"
150 |     ],
151 |     "testMatch": [
152 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
153 |       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
154 |     ],
155 |     "testEnvironment": "jsdom",
156 |     "transform": {
157 |       "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
158 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
159 |       "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
160 |     },
161 |     "transformIgnorePatterns": [
162 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
163 |       "^.+\\.module\\.(css|sass|scss)$"
164 |     ],
165 |     "modulePaths": [],
166 |     "moduleNameMapper": {
167 |       "^react-native$": "react-native-web",
168 |       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
169 |     },
170 |     "moduleFileExtensions": [
171 |       "web.js",
172 |       "js",
173 |       "web.ts",
174 |       "ts",
175 |       "web.tsx",
176 |       "tsx",
177 |       "json",
178 |       "web.jsx",
179 |       "jsx",
180 |       "node"
181 |     ],
182 |     "watchPlugins": [
183 |       "jest-watch-typeahead/filename",
184 |       "jest-watch-typeahead/testname"
185 |     ],
186 |     "resetMocks": true
187 |   },
188 |   "babel": {
189 |     "presets": [
190 |       "react-app"
191 |     ]
192 |   }
193 | }
194 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tail-Database/tail-database-app/3c6937bb57d22b7ae29030cdd21572e1d01cc06d/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>TAIL Database</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tail-Database/tail-database-app/3c6937bb57d22b7ae29030cdd21572e1d01cc06d/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tail-Database/tail-database-app/3c6937bb57d22b7ae29030cdd21572e1d01cc06d/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const path = require('path');
 18 | const chalk = require('react-dev-utils/chalk');
 19 | const fs = require('fs-extra');
 20 | const bfj = require('bfj');
 21 | const webpack = require('webpack');
 22 | const configFactory = require('../config/webpack.config');
 23 | const paths = require('../config/paths');
 24 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 25 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 26 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 27 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 28 | const printBuildError = require('react-dev-utils/printBuildError');
 29 | 
 30 | const measureFileSizesBeforeBuild =
 31 |   FileSizeReporter.measureFileSizesBeforeBuild;
 32 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 33 | const useYarn = fs.existsSync(paths.yarnLockFile);
 34 | 
 35 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 36 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 37 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 38 | 
 39 | const isInteractive = process.stdout.isTTY;
 40 | 
 41 | // Warn and crash if required files are missing
 42 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 43 |   process.exit(1);
 44 | }
 45 | 
 46 | const argv = process.argv.slice(2);
 47 | const writeStatsJson = argv.indexOf('--stats') !== -1;
 48 | 
 49 | // Generate configuration
 50 | const config = configFactory('production');
 51 | 
 52 | // We require that you explicitly set browsers and do not fall back to
 53 | // browserslist defaults.
 54 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 55 | checkBrowsers(paths.appPath, isInteractive)
 56 |   .then(() => {
 57 |     // First, read the current file sizes in build directory.
 58 |     // This lets us display how much they changed later.
 59 |     return measureFileSizesBeforeBuild(paths.appBuild);
 60 |   })
 61 |   .then(previousFileSizes => {
 62 |     // Remove all content but keep the directory so that
 63 |     // if you're in it, you don't end up in Trash
 64 |     fs.emptyDirSync(paths.appBuild);
 65 |     // Merge with the public folder
 66 |     copyPublicFolder();
 67 |     // Start the webpack build
 68 |     return build(previousFileSizes);
 69 |   })
 70 |   .then(
 71 |     ({ stats, previousFileSizes, warnings }) => {
 72 |       if (warnings.length) {
 73 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 74 |         console.log(warnings.join('\n\n'));
 75 |         console.log(
 76 |           '\nSearch for the ' +
 77 |             chalk.underline(chalk.yellow('keywords')) +
 78 |             ' to learn more about each warning.'
 79 |         );
 80 |         console.log(
 81 |           'To ignore, add ' +
 82 |             chalk.cyan('// eslint-disable-next-line') +
 83 |             ' to the line before.\n'
 84 |         );
 85 |       } else {
 86 |         console.log(chalk.green('Compiled successfully.\n'));
 87 |       }
 88 | 
 89 |       console.log('File sizes after gzip:\n');
 90 |       printFileSizesAfterBuild(
 91 |         stats,
 92 |         previousFileSizes,
 93 |         paths.appBuild,
 94 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 95 |         WARN_AFTER_CHUNK_GZIP_SIZE
 96 |       );
 97 |       console.log();
 98 | 
 99 |       const appPackage = require(paths.appPackageJson);
100 |       const publicUrl = paths.publicUrlOrPath;
101 |       const publicPath = config.output.publicPath;
102 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
103 |       printHostingInstructions(
104 |         appPackage,
105 |         publicUrl,
106 |         publicPath,
107 |         buildFolder,
108 |         useYarn
109 |       );
110 |     },
111 |     err => {
112 |       const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
113 |       if (tscCompileOnError) {
114 |         console.log(
115 |           chalk.yellow(
116 |             'Compiled with the following type errors (you may want to check these before deploying your app):\n'
117 |           )
118 |         );
119 |         printBuildError(err);
120 |       } else {
121 |         console.log(chalk.red('Failed to compile.\n'));
122 |         printBuildError(err);
123 |         process.exit(1);
124 |       }
125 |     }
126 |   )
127 |   .catch(err => {
128 |     if (err && err.message) {
129 |       console.log(err.message);
130 |     }
131 |     process.exit(1);
132 |   });
133 | 
134 | // Create the production build and print the deployment instructions.
135 | function build(previousFileSizes) {
136 |   console.log('Creating an optimized production build...');
137 | 
138 |   const compiler = webpack(config);
139 |   return new Promise((resolve, reject) => {
140 |     compiler.run((err, stats) => {
141 |       let messages;
142 |       if (err) {
143 |         if (!err.message) {
144 |           return reject(err);
145 |         }
146 | 
147 |         let errMessage = err.message;
148 | 
149 |         // Add additional information for postcss errors
150 |         if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
151 |           errMessage +=
152 |             '\nCompileError: Begins at CSS selector ' +
153 |             err['postcssNode'].selector;
154 |         }
155 | 
156 |         messages = formatWebpackMessages({
157 |           errors: [errMessage],
158 |           warnings: [],
159 |         });
160 |       } else {
161 |         messages = formatWebpackMessages(
162 |           stats.toJson({ all: false, warnings: true, errors: true })
163 |         );
164 |       }
165 |       if (messages.errors.length) {
166 |         // Only keep the first error. Others are often indicative
167 |         // of the same problem, but confuse the reader with noise.
168 |         if (messages.errors.length > 1) {
169 |           messages.errors.length = 1;
170 |         }
171 |         return reject(new Error(messages.errors.join('\n\n')));
172 |       }
173 |       if (
174 |         process.env.CI &&
175 |         (typeof process.env.CI !== 'string' ||
176 |           process.env.CI.toLowerCase() !== 'false') &&
177 |         messages.warnings.length
178 |       ) {
179 |         // Ignore sourcemap warnings in CI builds. See #8227 for more info.
180 |         const filteredWarnings = messages.warnings.filter(
181 |           w => !/Failed to parse source map/.test(w)
182 |         );
183 |         if (filteredWarnings.length) {
184 |           console.log(
185 |             chalk.yellow(
186 |               '\nTreating warnings as errors because process.env.CI = true.\n' +
187 |                 'Most CI servers set it automatically.\n'
188 |             )
189 |           );
190 |           return reject(new Error(filteredWarnings.join('\n\n')));
191 |         }
192 |       }
193 | 
194 |       const resolveArgs = {
195 |         stats,
196 |         previousFileSizes,
197 |         warnings: messages.warnings,
198 |       };
199 | 
200 |       if (writeStatsJson) {
201 |         return bfj
202 |           .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
203 |           .then(() => resolve(resolveArgs))
204 |           .catch(error => reject(new Error(error)));
205 |       }
206 | 
207 |       return resolve(resolveArgs);
208 |     });
209 |   });
210 | }
211 | 
212 | function copyPublicFolder() {
213 |   fs.copySync(paths.appPublic, paths.appBuild, {
214 |     dereference: true,
215 |     filter: file => file !== paths.appHtml,
216 |   });
217 | }
218 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const fs = require('fs');
 18 | const chalk = require('react-dev-utils/chalk');
 19 | const webpack = require('webpack');
 20 | const WebpackDevServer = require('webpack-dev-server');
 21 | const clearConsole = require('react-dev-utils/clearConsole');
 22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 23 | const {
 24 |   choosePort,
 25 |   createCompiler,
 26 |   prepareProxy,
 27 |   prepareUrls,
 28 | } = require('react-dev-utils/WebpackDevServerUtils');
 29 | const openBrowser = require('react-dev-utils/openBrowser');
 30 | const semver = require('semver');
 31 | const paths = require('../config/paths');
 32 | const configFactory = require('../config/webpack.config');
 33 | const createDevServerConfig = require('../config/webpackDevServer.config');
 34 | const getClientEnvironment = require('../config/env');
 35 | const react = require(require.resolve('react', { paths: [paths.appPath] }));
 36 | 
 37 | const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
 38 | const useYarn = fs.existsSync(paths.yarnLockFile);
 39 | const isInteractive = process.stdout.isTTY;
 40 | 
 41 | // Warn and crash if required files are missing
 42 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 43 |   process.exit(1);
 44 | }
 45 | 
 46 | // Tools like Cloud9 rely on this.
 47 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 48 | const HOST = process.env.HOST || '0.0.0.0';
 49 | 
 50 | if (process.env.HOST) {
 51 |   console.log(
 52 |     chalk.cyan(
 53 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 54 |         chalk.bold(process.env.HOST)
 55 |       )}`
 56 |     )
 57 |   );
 58 |   console.log(
 59 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 60 |   );
 61 |   console.log(
 62 |     `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
 63 |   );
 64 |   console.log();
 65 | }
 66 | 
 67 | // We require that you explicitly set browsers and do not fall back to
 68 | // browserslist defaults.
 69 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 70 | checkBrowsers(paths.appPath, isInteractive)
 71 |   .then(() => {
 72 |     // We attempt to use the default port but if it is busy, we offer the user to
 73 |     // run on a different port. `choosePort()` Promise resolves to the next free port.
 74 |     return choosePort(HOST, DEFAULT_PORT);
 75 |   })
 76 |   .then(port => {
 77 |     if (port == null) {
 78 |       // We have not found a port.
 79 |       return;
 80 |     }
 81 | 
 82 |     const config = configFactory('development');
 83 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 84 |     const appName = require(paths.appPackageJson).name;
 85 | 
 86 |     const useTypeScript = fs.existsSync(paths.appTsConfig);
 87 |     const urls = prepareUrls(
 88 |       protocol,
 89 |       HOST,
 90 |       port,
 91 |       paths.publicUrlOrPath.slice(0, -1)
 92 |     );
 93 |     // Create a webpack compiler that is configured with custom messages.
 94 |     const compiler = createCompiler({
 95 |       appName,
 96 |       config,
 97 |       urls,
 98 |       useYarn,
 99 |       useTypeScript,
100 |       webpack,
101 |     });
102 |     // Load proxy config
103 |     const proxySetting = require(paths.appPackageJson).proxy;
104 |     const proxyConfig = prepareProxy(
105 |       proxySetting,
106 |       paths.appPublic,
107 |       paths.publicUrlOrPath
108 |     );
109 |     // Serve webpack assets generated by the compiler over a web server.
110 |     const serverConfig = {
111 |       ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
112 |       host: HOST,
113 |       port,
114 |     };
115 |     const devServer = new WebpackDevServer(serverConfig, compiler);
116 |     // Launch WebpackDevServer.
117 |     devServer.startCallback(() => {
118 |       if (isInteractive) {
119 |         clearConsole();
120 |       }
121 | 
122 |       if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
123 |         console.log(
124 |           chalk.yellow(
125 |             `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
126 |           )
127 |         );
128 |       }
129 | 
130 |       console.log(chalk.cyan('Starting the development server...\n'));
131 |       openBrowser(urls.localUrlForBrowser);
132 |     });
133 | 
134 |     ['SIGINT', 'SIGTERM'].forEach(function (sig) {
135 |       process.on(sig, function () {
136 |         devServer.close();
137 |         process.exit();
138 |       });
139 |     });
140 | 
141 |     if (process.env.CI !== 'true') {
142 |       // Gracefully exit when stdin ends
143 |       process.stdin.on('end', function () {
144 |         devServer.close();
145 |         process.exit();
146 |       });
147 |     }
148 |   })
149 |   .catch(err => {
150 |     if (err && err.message) {
151 |       console.log(err.message);
152 |     }
153 |     process.exit(1);
154 |   });
155 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const execSync = require('child_process').execSync;
20 | let argv = process.argv.slice(2);
21 | 
22 | function isInGitRepository() {
23 |   try {
24 |     execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
25 |     return true;
26 |   } catch (e) {
27 |     return false;
28 |   }
29 | }
30 | 
31 | function isInMercurialRepository() {
32 |   try {
33 |     execSync('hg --cwd . root', { stdio: 'ignore' });
34 |     return true;
35 |   } catch (e) {
36 |     return false;
37 |   }
38 | }
39 | 
40 | // Watch unless on CI or explicitly running all tests
41 | if (
42 |   !process.env.CI &&
43 |   argv.indexOf('--watchAll') === -1 &&
44 |   argv.indexOf('--watchAll=false') === -1
45 | ) {
46 |   // https://github.com/facebook/create-react-app/issues/5210
47 |   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
48 |   argv.push(hasSourceControl ? '--watch' : '--watchAll');
49 | }
50 | 
51 | 
52 | jest.run(argv);
53 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: left;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 7vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | .App-header {
11 |   background-color: #282c34;
12 |   min-height: 12vh;
13 |   display: flex;
14 |   flex-direction: column;
15 |   align-items: center;
16 |   justify-content: center;
17 |   font-size: calc(10px + 2vmin);
18 |   color: white;
19 | }
20 | 
21 | .tail-table {
22 |   min-height: 40vh;
23 |   display: flex;
24 |   flex-direction: column;
25 |   align-items: center;
26 |   justify-content: center;
27 |   font-size: calc(10px + 2vmin);
28 |   color: #282c34;
29 | }
30 | 
31 | .search {
32 |   padding-bottom: 1em;
33 |   text-align: center;
34 | }
35 | 
36 | .menu-container {
37 |   pointer-events: none; 
38 |   width: 100%;
39 |   position: absolute;
40 |   right: 1em;
41 | }
42 | 
43 | .sync-status {
44 |   pointer-events: none; 
45 |   width: 100%;
46 |   position: absolute;
47 |   left: 1em;
48 | }
49 | 
50 | .menu-button {
51 |   pointer-events: all; 
52 |   float: right;
53 |   background-color: #8364e2;
54 |   color: #fff;
55 |   font-weight: bold;
56 | }
57 | 
58 | .tail-info {
59 |   min-height: 40vh;
60 |   display: flex;
61 |   flex-direction: column;
62 |   align-items: center;
63 |   justify-content: center;
64 |   font-size: calc(10px + 2vmin);
65 |   color: #282c34;
66 | }
67 | 
68 | .App-link {
69 |   color: #61dafb;
70 | }
71 | 
72 | @keyframes App-logo-spin {
73 |   from {
74 |     transform: rotate(0deg);
75 |   }
76 |   to {
77 |     transform: rotate(360deg);
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/Header.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | import { useNavigate } from 'react-router-dom';
 3 | import logo from './assets/logo-light.png';
 4 | 
 5 | const SyncStatus = () => {
 6 |     const [synced, setSynced] = useState(true);
 7 | 
 8 |     useEffect(() => {
 9 |         setInterval(() => {
10 |             window.taildatabase.synced()
11 |                 .then(syncstatus => setSynced(syncstatus));
12 |         }, 2500);
13 |     }, []);
14 | 
15 |     return (<button type="button" className={`btn btn-${synced ? 'success' : 'danger'}`}>{synced ? 'Synced' : 'Not-synced'}</button>);
16 | };
17 | 
18 | 
19 | function Header() {
20 |     const navigate = useNavigate();
21 | 
22 |     return (
23 |         <header className="App-header">
24 |             <div className="sync-status">
25 |                 <SyncStatus />
26 |             </div>
27 |             <div className="menu-container">
28 |                 <input type="button" value="Add CAT TAIL" className="menu-button" onClick={() => navigate('/add/tail')} />
29 |             </div>
30 |             <a href='/'><img src={logo} className="App-logo" alt="logo" onClick={() => navigate('/')} /></a>
31 |         </header>
32 |     );
33 | }
34 | 
35 | export default Header;
36 | 


--------------------------------------------------------------------------------
/src/Layout.tsx:
--------------------------------------------------------------------------------
 1 | import React, { PropsWithChildren } from 'react';
 2 | import Header from './Header';
 3 | 
 4 | function Layout(props: PropsWithChildren) {
 5 |     return (
 6 |         <>
 7 |             <Header />
 8 |             <main role="main" className="container">
 9 |                 {props.children}
10 |             </main>
11 |             
12 |         </>
13 |     );
14 | }
15 | 
16 | export default Layout;
17 | 


--------------------------------------------------------------------------------
/src/assets/logo-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tail-Database/tail-database-app/3c6937bb57d22b7ae29030cdd21572e1d01cc06d/src/assets/logo-light.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tail-Database/tail-database-app/3c6937bb57d22b7ae29030cdd21572e1d01cc06d/src/assets/logo.png


--------------------------------------------------------------------------------
/src/chia/bech32.ts:
--------------------------------------------------------------------------------
  1 | // Copyright (c) 2017, 2021 Pieter Wuille
  2 | //
  3 | // Permission is hereby granted, free of charge, to any person obtaining a copy
  4 | // of this software and associated documentation files (the "Software"), to deal
  5 | // in the Software without restriction, including without limitation the rights
  6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  7 | // copies of the Software, and to permit persons to whom the Software is
  8 | // furnished to do so, subject to the following conditions:
  9 | //
 10 | // The above copyright notice and this permission notice shall be included in
 11 | // all copies or substantial portions of the Software.
 12 | //
 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 19 | // THE SOFTWARE.
 20 | 
 21 | var CHARSET = 'qpzry9x8gf2tvdw0s3jn54khce6mua7l';
 22 | var GENERATOR = [0x3b6a57b2, 0x26508e6d, 0x1ea119fa, 0x3d4233dd, 0x2a1462b3];
 23 | 
 24 | const encodings = {
 25 |   BECH32: "bech32",
 26 |   BECH32M: "bech32m",
 27 | };
 28 | 
 29 | function getEncodingConst(enc: string): number | null {
 30 |   if (enc == encodings.BECH32) {
 31 |     return 1;
 32 |   } else if (enc == encodings.BECH32M) {
 33 |     return 0x2bc830a3;
 34 |   } else {
 35 |     return null;
 36 |   }
 37 | }
 38 | 
 39 | function polymod(values: number[]) {
 40 |   var chk = 1;
 41 |   for (var p = 0; p < values.length; ++p) {
 42 |     var top = chk >> 25;
 43 |     chk = (chk & 0x1ffffff) << 5 ^ values[p];
 44 |     for (var i = 0; i < 5; ++i) {
 45 |       if ((top >> i) & 1) {
 46 |         chk ^= GENERATOR[i];
 47 |       }
 48 |     }
 49 |   }
 50 |   return chk;
 51 | }
 52 | 
 53 | function hrpExpand(hrp: string) {
 54 |   var ret = [];
 55 |   var p;
 56 |   for (p = 0; p < hrp.length; ++p) {
 57 |     ret.push(hrp.charCodeAt(p) >> 5);
 58 |   }
 59 |   ret.push(0);
 60 |   for (p = 0; p < hrp.length; ++p) {
 61 |     ret.push(hrp.charCodeAt(p) & 31);
 62 |   }
 63 |   return ret;
 64 | }
 65 | 
 66 | function verifyChecksum(hrp: string, data: number[], enc: string) {
 67 |   return polymod(hrpExpand(hrp).concat(data)) === getEncodingConst(enc);
 68 | }
 69 | 
 70 | function createChecksum(hrp: string, data: number[], enc: string) {
 71 |   var values = hrpExpand(hrp).concat(data).concat([0, 0, 0, 0, 0, 0]);
 72 |   // @ts-ignore
 73 |   var mod = polymod(values) ^ getEncodingConst(enc);
 74 |   var ret = [];
 75 |   for (var p = 0; p < 6; ++p) {
 76 |     ret.push((mod >> 5 * (5 - p)) & 31);
 77 |   }
 78 |   return ret;
 79 | }
 80 | 
 81 | function encode(hrp: string, data: number[], enc: string) {
 82 |   var combined = data.concat(createChecksum(hrp, data, enc));
 83 |   var ret = hrp + '1';
 84 |   for (var p = 0; p < combined.length; ++p) {
 85 |     ret += CHARSET.charAt(combined[p]);
 86 |   }
 87 |   return ret;
 88 | }
 89 | 
 90 | function decode(bechString: string, enc: string): { hrp: string, data: number[] } | null {
 91 |   var p;
 92 |   var has_lower = false;
 93 |   var has_upper = false;
 94 |   for (p = 0; p < bechString.length; ++p) {
 95 |     if (bechString.charCodeAt(p) < 33 || bechString.charCodeAt(p) > 126) {
 96 |       return null;
 97 |     }
 98 |     if (bechString.charCodeAt(p) >= 97 && bechString.charCodeAt(p) <= 122) {
 99 |       has_lower = true;
100 |     }
101 |     if (bechString.charCodeAt(p) >= 65 && bechString.charCodeAt(p) <= 90) {
102 |       has_upper = true;
103 |     }
104 |   }
105 |   if (has_lower && has_upper) {
106 |     return null;
107 |   }
108 |   bechString = bechString.toLowerCase();
109 |   var pos = bechString.lastIndexOf('1');
110 |   if (pos < 1 || pos + 7 > bechString.length || bechString.length > 90) {
111 |     return null;
112 |   }
113 |   var hrp = bechString.substring(0, pos);
114 |   var data = [];
115 |   for (p = pos + 1; p < bechString.length; ++p) {
116 |     var d = CHARSET.indexOf(bechString.charAt(p));
117 |     if (d === -1) {
118 |       return null;
119 |     }
120 |     data.push(d);
121 |   }
122 |   if (!verifyChecksum(hrp, data, enc)) {
123 |     return null;
124 |   }
125 |   return { hrp: hrp, data: data.slice(0, data.length - 6) };
126 | }
127 | 
128 | function convertbits(data: number[], frombits: number, tobits: number, pad = true): number[] | null {
129 |   let acc = 0;
130 |   let bits = 0;
131 |   const ret = [];
132 |   const maxv = (1 << tobits) - 1;
133 |   const max_acc = (1 << (frombits + tobits - 1)) - 1;
134 | 
135 |   for (const value of data) {
136 |     if (value < 0 || (value >> frombits)) {
137 |       return null;
138 |     }
139 | 
140 |     acc = ((acc << frombits) | value) & max_acc;
141 |     bits += frombits;
142 | 
143 |     while (bits >= tobits) {
144 |       bits -= tobits;
145 | 
146 |       ret.push((acc >> bits) & maxv);
147 |     }
148 |   }
149 | 
150 |   if (pad) {
151 |     if (bits) {
152 |       ret.push((acc << (tobits - bits)) & maxv);
153 |     }
154 |   } else if (bits >= frombits || ((acc << (tobits - bits)) & maxv)) {
155 |     return null;
156 |   }
157 | 
158 |   return ret;
159 | }
160 | 
161 | export {
162 |   decode,
163 |   encode,
164 |   convertbits
165 | };
166 | 


--------------------------------------------------------------------------------
/src/config.ts:
--------------------------------------------------------------------------------
1 | export const ADD_TAIL_URL = process.env.REACT_APP_ADD_TAIL_URL || 'https://mainnet-api.taildatabase.com/tail'
2 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import 'bootstrap/dist/css/bootstrap.css';
 2 | import React from 'react';
 3 | import ReactDOM from 'react-dom/client';
 4 | import {
 5 |   createBrowserRouter,
 6 |   RouterProvider,
 7 | } from "react-router-dom";
 8 | import TimeAgo from 'javascript-time-ago'
 9 | import en from 'javascript-time-ago/locale/en.json'
10 | import { InsertResponse, RpcResponse, TailRecord } from '@tail-database/tail-database-client';
11 | import './index.css';
12 | import reportWebVitals from './reportWebVitals';
13 | import HomePage from './pages/HomePage';
14 | import Tail from './pages/Tail';
15 | import AddTail from './pages/AddTail';
16 | 
17 | declare global {
18 |   interface Window {
19 |     taildatabase: {
20 |       addTail: (tailRecord: TailRecord) => Promise<InsertResponse>;
21 |       getTails: () => Promise<TailRecord[]>;
22 |       getTail: (hash: string) => Promise<TailRecord>;
23 |       getNftUri: (launcherId: string) => Promise<string>;
24 |       getTailReveal: (coin_id: string) => Promise<string>;
25 |       synced: () => Promise<boolean>;
26 |       subscribe: () => Promise<RpcResponse>;
27 |     }
28 |   }
29 | }
30 | 
31 | TimeAgo.addDefaultLocale(en)
32 | 
33 | 
34 | const router = createBrowserRouter([
35 |   {
36 |     path: "/",
37 |     element: <HomePage />,
38 |   },
39 |   {
40 |     path: "/tail/:hash",
41 |     element: <Tail />,
42 |   },
43 |   {
44 |     path: "/add/tail",
45 |     element: <AddTail />,
46 |   },
47 | ]);
48 | 
49 | const root = ReactDOM.createRoot(
50 |   document.getElementById('root') as HTMLElement
51 | );
52 | 
53 | (async() => {
54 |   window.taildatabase.subscribe().then(() => console.log('Subscribed to data store'));
55 | })();
56 | 
57 | root.render(
58 |   <React.StrictMode>
59 |     <div className="App">
60 |       <RouterProvider router={router} />
61 |     </div>
62 |   </React.StrictMode>
63 | );
64 | 
65 | // If you want to start measuring performance in your app, pass a function
66 | // to log results (for example: reportWebVitals(console.log))
67 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
68 | reportWebVitals();
69 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/src/pages/AddTail.tsx:
--------------------------------------------------------------------------------
  1 | import axios from 'axios';
  2 | import React, { useEffect, useState } from 'react';
  3 | import Select, { GroupBase, StylesConfig } from 'react-select'
  4 | import { TailRecord, CATEGORIES, InsertResponse } from '@tail-database/tail-database-client';
  5 | import '../App.css';
  6 | import Layout from '../Layout';
  7 | import { convertbits, decode } from '../chia/bech32';
  8 | import { db } from '../taildatabase/db';
  9 | import { ADD_TAIL_URL } from '../config';
 10 | 
 11 | const isValid = (urlString: string) => {
 12 |     try {
 13 |         const url = new URL(urlString);
 14 | 
 15 |         return url.protocol === "http:" || url.protocol === "https:";
 16 |     } catch (_) { }
 17 | 
 18 |     return false;
 19 | };
 20 | 
 21 | const customStyles: StylesConfig<React.ChangeEvent<HTMLInputElement>, false, GroupBase<React.ChangeEvent<HTMLInputElement>>> = {
 22 |     option: (base, state) => ({
 23 |         ...base,
 24 |         background: "#fff",
 25 |         color: "#333",
 26 |         borderRadius: state.isFocused ? "0" : 0,
 27 |         "&:hover": {
 28 |             background: "#eee",
 29 |         }
 30 |     }),
 31 |     menu: base => ({
 32 |         ...base,
 33 |         borderRadius: 0,
 34 |         marginTop: 0
 35 |     }),
 36 |     menuList: base => ({
 37 |         ...base,
 38 |         padding: 0
 39 |     }),
 40 |     control: (base, state) => ({
 41 |         ...base,
 42 |         padding: 2
 43 |     })
 44 | };
 45 | 
 46 | const categoryOptions = CATEGORIES.map(category => ({
 47 |     value: category,
 48 |     label: category
 49 | }));
 50 | 
 51 | const tailsTable = db.table<TailRecord>('tails');
 52 | 
 53 | function AddTail() {
 54 |     const [hash, setHash] = useState('');
 55 |     const [name, setName] = useState('');
 56 |     const [code, setCode] = useState('');
 57 |     const [logoNftId, setLogoNftId] = useState('');
 58 |     const [category, setCategory] = useState(null);
 59 |     const [description, setDescription] = useState('');
 60 |     const [coinId, setCoinId] = useState('');
 61 |     const [websiteUrl, setWebsiteUrl] = useState('');
 62 |     const [twitterUrl, setTwitterUrl] = useState('');
 63 |     const [discordUrl, setDiscordUrl] = useState('');
 64 |     const [inserted, setInserted] = useState(false);
 65 |     const [failedMessage, setFailedMessage] = useState('');
 66 |     const [launcherId, setLauncherId] = useState<string | null>(null);
 67 |     const [logoUrl, setLogoUrl] = useState<string | null>(null);
 68 | 
 69 |     useEffect(() => {
 70 |         // When logo is correct length we check if it is a valid nft id
 71 |         // iff it's valid we resolve the NFT image and display it inline
 72 |         if (logoNftId.length !== 62) {
 73 |             setLauncherId(null);
 74 |             setLogoUrl(null);
 75 |             return
 76 |         }
 77 | 
 78 |         // bech32m decode nft id to coin id
 79 |         const decode_result = decode(logoNftId, 'bech32m');
 80 | 
 81 |         // Check for valid bech32m decode
 82 |         if (decode_result) {
 83 |             const launcher_id_raw = convertbits(decode_result.data, 5, 8, false);
 84 | 
 85 |             // Check for successful bit conversion
 86 |             if (launcher_id_raw) {
 87 |                 const launcher_id = launcher_id_raw.map(n => n.toString(16).padStart(2, '0')).join('');
 88 | 
 89 |                 window.taildatabase.getNftUri(launcher_id).then((url) => {
 90 |                     setLauncherId(launcher_id);
 91 |                     setLogoUrl(url);
 92 |                 })
 93 |             }
 94 | 
 95 |         }
 96 | 
 97 |     }, [logoNftId]);
 98 | 
 99 |     const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
100 |         event.preventDefault();
101 | 
102 |         const id = coinId.slice(0, 2) == '0x' ? coinId.slice(2) : coinId;
103 | 
104 |         if (hash.length !== 64) {
105 |             setInserted(false);
106 |             setFailedMessage('Hash is incorrect length (should be 64)');
107 |             console.error('hash.length !== 64');
108 |             return;
109 |         }
110 | 
111 |         if (name.length < 1 || name.length > 100) {
112 |             setInserted(false);
113 |             setFailedMessage('Name is too long (max length of 100)');
114 |             console.error('name.length < 1 || name.length > 100');
115 |             return;
116 |         }
117 | 
118 |         if (code.length < 1 || code.length > 5) {
119 |             setInserted(false);
120 |             setFailedMessage('Code is incorrect length (max length of 5)');
121 |             console.error('code.length <1 || code.length > 5');
122 |             return;
123 |         }
124 | 
125 |         if (!CATEGORIES.includes(category || '')) {
126 |             setInserted(false);
127 |             setFailedMessage(`Category is not one of ${CATEGORIES.join(',')}`);
128 |             console.error('!CATEGORIES.includes(category || \'\')');
129 |             return;
130 |         }
131 | 
132 |         if (!launcherId || launcherId.length !== 64) {
133 |             setInserted(false);
134 |             setFailedMessage('Logo NFT ID is invalid');
135 |             console.error('!launcherId || launcherId.length !== 64');
136 |             return;
137 |         }
138 | 
139 |         if (id.length !== 64) {
140 |             setInserted(false);
141 |             setFailedMessage('Coin ID is incorrect length (should be 64)');
142 |             console.error('coinId.length !== 64');
143 |             return;
144 |         }
145 | 
146 |         if (websiteUrl && !isValid(websiteUrl)) {
147 |             setInserted(false);
148 |             setFailedMessage('Invalid website URL');
149 |             console.error('!isValid(websiteUrl)');
150 |             return;
151 |         }
152 | 
153 |         if (twitterUrl && !isValid(twitterUrl)) {
154 |             setInserted(false);
155 |             setFailedMessage('Invalid twitter URL');
156 |             console.error('!isValid(twitterUrl)');
157 |             return;
158 |         }
159 | 
160 |         if (discordUrl && !isValid(discordUrl)) {
161 |             setInserted(false);
162 |             setFailedMessage('Invalid discord URL');
163 |             console.error('!isValid(discordUrl)');
164 |             return;
165 |         }
166 | 
167 |         const tails = await tailsTable
168 |             .where('code')
169 |             .equalsIgnoreCase(code)
170 |             .toArray();
171 | 
172 |         if (tails.length > 0) {
173 |             console.error('Code already taken');
174 | 
175 |             setInserted(false);
176 |             setFailedMessage(`Code already taken: ${code}`);
177 | 
178 |             return;
179 |         }
180 | 
181 |         let eveCoinId = null;
182 | 
183 |         try {
184 |             const [eve_coin_id, tail_hash] = await window.taildatabase.getTailReveal(id);
185 | 
186 |             if (tail_hash !== hash) {
187 |                 console.error(`tail_hash !== hash ${tail_hash} !== ${hash}`);
188 |                 setInserted(false);
189 |                 setFailedMessage(`Coin ID is not for correct type of CAT`);
190 |                 return;
191 |             }
192 | 
193 |             eveCoinId = eve_coin_id;
194 |         } catch (err) {
195 |             console.error(err);
196 |             setInserted(false);
197 |             setFailedMessage(`Error with passed Coin ID: ${err}`);
198 |             return;
199 |         }
200 | 
201 |         try {
202 |             const response = await axios.post(ADD_TAIL_URL, {
203 |                 hash,
204 |                 name,
205 |                 code,
206 |                 category,
207 |                 description,
208 |                 launcherId,
209 |                 eveCoinId,
210 |                 ...(websiteUrl ? { website_url: websiteUrl } : {}),
211 |                 ...(twitterUrl ? { twitter_url: twitterUrl } : {}),
212 |                 ...(discordUrl ? { discord_url: discordUrl } : {}),
213 |             });
214 | 
215 |             const { tx_id, error } = response.data;
216 | 
217 |             if (tx_id) {
218 |                 setInserted(true);
219 |                 setFailedMessage('');
220 |             } else {
221 |                 setInserted(false);
222 |                 if (error) {
223 |                     setFailedMessage(error);
224 |                 } else {
225 |                     setFailedMessage('Failed to submit TAIL record to mempool. You can only submit the same TAIL hash once. If you recently submitted a record you must wait for it to clear before submitting another.');
226 |                 }
227 |             }
228 | 
229 |             console.log(hash, name, code, tx_id)
230 |         } catch (err) {
231 |             console.error(err);
232 |         }
233 |     };
234 | 
235 |     const onHashChange = (event: React.ChangeEvent<HTMLInputElement>) => setHash(event.target.value);
236 |     const onNameChange = (event: React.ChangeEvent<HTMLInputElement>) => setName(event.target.value);
237 |     const onCodeChange = (event: React.ChangeEvent<HTMLInputElement>) => setCode(event.target.value);
238 |     const onLogoNftIdChange = (event: React.ChangeEvent<HTMLInputElement>) => setLogoNftId(event.target.value);
239 |     const onDescriptionChange = (event: React.ChangeEvent<HTMLInputElement>) => setDescription(event.target.value);
240 |     const onCoinIdChange = (event: React.ChangeEvent<HTMLInputElement>) => setCoinId(event.target.value);
241 |     const onWebsiteUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => setWebsiteUrl(event.target.value);
242 |     const onTwitterUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => setTwitterUrl(event.target.value);
243 |     const onDiscordUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => setDiscordUrl(event.target.value);
244 | 
245 |     return (
246 |         <Layout>
247 |             <div className="tail-info">
248 |                 <h1>Add CAT TAIL</h1>
249 |                 {inserted && (
250 |                     <>TAIL record submitted to mempool</>
251 |                 )}
252 |                 {!inserted && (
253 |                     <form id="form-add-tail" onSubmit={onSubmit}>
254 |                         {failedMessage && (
255 |                             <div className="alert alert-danger" role="alert">{failedMessage}</div>
256 |                         )}
257 |                         <div className="form-group">
258 |                             <label htmlFor="hash">Hash</label> <input type="text" className="form-control" id="hash" name="hash" onChange={onHashChange} />
259 |                         </div>
260 |                         <div className="form-group">
261 |                             <label htmlFor="name">Name</label> <input type="text" className="form-control" id="name" name="name" onChange={onNameChange} />
262 |                         </div>
263 |                         <div className="form-group">
264 |                             <label htmlFor="code">Code</label> <input type="text" className="form-control" id="code" name="code" onChange={onCodeChange} />
265 |                         </div>
266 |                         <div className="form-group">
267 |                             <label htmlFor="logo-nft-id">Logo NFT ID</label> <input type="text" className="form-control" id="logo-nft-id" name="logo-nft-id" onChange={onLogoNftIdChange} />
268 |                         </div>
269 |                         <div className="form-group">
270 |                             {/* @ts-ignore */}
271 |                             <label htmlFor="category">Category</label> <Select styles={customStyles} defaultValue={category} onChange={e => { setCategory(e.value) }} options={categoryOptions} id="category" />
272 |                         </div>
273 |                         <div className="form-group">
274 |                             <label htmlFor="description">Description</label> <input type="text" className="form-control" id="description" name="description" onChange={onDescriptionChange} />
275 |                         </div>
276 |                         <div className="form-group">
277 |                             <label htmlFor="coin-id">CAT Coin ID</label> <input type="text" className="form-control" id="coin-id" name="coin-id" onChange={onCoinIdChange} />
278 |                         </div>
279 |                         <div className="form-group">
280 |                             <label htmlFor="coin-id">Website URL</label> <input type="text" className="form-control" id="coin-id" name="coin-id" onChange={onWebsiteUrlChange} />
281 |                         </div>
282 |                         <div className="form-group">
283 |                             <label htmlFor="coin-id">Twitter URL</label> <input type="text" className="form-control" id="coin-id" name="coin-id" onChange={onTwitterUrlChange} />
284 |                         </div>
285 |                         <div className="form-group">
286 |                             <label htmlFor="coin-id">Discord URL</label> <input type="text" className="form-control" id="coin-id" name="coin-id" onChange={onDiscordUrlChange} />
287 |                         </div>
288 |                         <p><small>Provide the coin id of any coin that is of this CAT. This is used to find the TAIL reveal.</small></p>
289 |                         <p>{logoUrl && <img src={logoUrl} width={250} height={250} />}</p>
290 |                         <input type="submit" value="Add TAIL" />
291 |                     </form>
292 |                 )}
293 |             </div>
294 |         </Layout>
295 |     );
296 | }
297 | 
298 | export default AddTail;
299 | 


--------------------------------------------------------------------------------
/src/pages/HomePage.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react';
  2 | import ReactTimeAgo from 'react-time-ago'
  3 | import { TailRecord } from '@tail-database/tail-database-client';
  4 | import {
  5 |   createColumnHelper,
  6 |   flexRender,
  7 |   getCoreRowModel,
  8 |   useReactTable,
  9 | } from '@tanstack/react-table';
 10 | import { Link } from "react-router-dom";
 11 | import '../App.css';
 12 | import Layout from '../Layout';
 13 | import { db } from '../taildatabase/db';
 14 | 
 15 | const uniqueTailRecords = (arr: TailRecord[]) => [...new Map(arr.map(item => [item.hash, item])).values()];
 16 | 
 17 | const columnHelper = createColumnHelper<TailRecord>();
 18 | 
 19 | const columns = [
 20 |   columnHelper.accessor('hash', {
 21 |     header: () => 'TAIL Hash / Asset ID',
 22 |     cell: info => <Link to={`/tail/${info.getValue()}`}>{info.getValue()}</Link>,
 23 |     footer: info => info.column.id,
 24 |   }),
 25 |   columnHelper.accessor(row => row.name, {
 26 |     id: 'name',
 27 |     cell: info => <i>{info.getValue()}</i>,
 28 |     header: () => 'Name',
 29 |     footer: info => info.column.id,
 30 |   }),
 31 |   columnHelper.accessor('code', {
 32 |     header: () => 'Code',
 33 |     cell: info => info.renderValue(),
 34 |     footer: info => info.column.id,
 35 |   }),
 36 | ];
 37 | 
 38 | const Tails = ({ tails, updated }: { tails: TailRecord[]; updated: number | null; }) => {
 39 |   const table = useReactTable({
 40 |     data: tails,
 41 |     columns,
 42 |     getCoreRowModel: getCoreRowModel(),
 43 |   });
 44 | 
 45 |   return (
 46 |     <>
 47 |       <table className="table">
 48 |         <thead>
 49 |           {table.getHeaderGroups().map(headerGroup => (
 50 |             <tr key={headerGroup.id}>
 51 |               {headerGroup.headers.map(header => (
 52 |                 <th key={header.id}>
 53 |                   {header.isPlaceholder
 54 |                     ? null
 55 |                     : flexRender(
 56 |                       header.column.columnDef.header,
 57 |                       header.getContext()
 58 |                     )}
 59 |                 </th>
 60 |               ))}
 61 |             </tr>
 62 |           ))}
 63 |         </thead>
 64 |         <tbody>
 65 |           {table.getRowModel().rows.map(row => (
 66 |             <tr key={row.id}>
 67 |               {row.getVisibleCells().map(cell => (
 68 |                 <td key={cell.id}>
 69 |                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
 70 |                 </td>
 71 |               ))}
 72 |             </tr>
 73 |           ))}
 74 |         </tbody>
 75 |       </table>
 76 |       {updated && (<>Last updated: <ReactTimeAgo date={updated} locale="en-US" timeStyle={"round"} /></>)}
 77 |     </>
 78 |   );
 79 | };
 80 | 
 81 | const tailsTable = db.table<TailRecord>('tails');
 82 | 
 83 | function HomePage() {
 84 |   const [updated, setUpdated] = useState<number | null>(null);
 85 |   const [tails, setTails] = useState<TailRecord[]>([]);
 86 |   const [searchResults, setSearchResults] = useState<TailRecord[]>([]);
 87 | 
 88 |   const updateDb = (tailRecords: TailRecord[]) =>
 89 |     tailsTable.clear()
 90 |       .then(() => tailsTable.bulkAdd(tailRecords));
 91 | 
 92 |   useEffect(() => {
 93 |     (function getTails() {
 94 |       window.taildatabase.getTails()
 95 |         .then((tailRecords: any) => {
 96 |           setTails(tailRecords);
 97 | 
 98 |           return updateDb(tailRecords);
 99 |         })
100 |         .then(()=> {
101 |           setUpdated(Date.now());
102 |           setTimeout(getTails, 10000);
103 |         });
104 |     })();
105 |   }, []);
106 | 
107 |   const onSearchChange = async(event: React.ChangeEvent<HTMLInputElement>) => {
108 |     const searchTerm = event.target.value;
109 | 
110 |     if (searchTerm.length === 64) {
111 |       const results = await tailsTable
112 |         .where('hash')
113 |         .equals(searchTerm)
114 |         .toArray();
115 | 
116 |       setSearchResults(results);
117 |     } else if (searchTerm.length <= 5) {
118 |       const [codeResults, nameResults] = await Promise.all([
119 |         tailsTable
120 |           .where('code')
121 |           .startsWithIgnoreCase(searchTerm)
122 |           .toArray(),
123 |         tailsTable
124 |           .where('name')
125 |           .startsWithIgnoreCase(searchTerm)
126 |           .toArray()
127 |       ]);
128 | 
129 |       setSearchResults(uniqueTailRecords([...codeResults, ...nameResults]));
130 |     } else {
131 |       const results = await tailsTable
132 |         .where('name')
133 |         .startsWithIgnoreCase(searchTerm)
134 |         .toArray();
135 | 
136 |       setSearchResults(results);
137 |     }
138 |   };
139 | 
140 |   return (
141 |     <Layout>
142 |       <div className="row">
143 |         <div className="col-md-12 search">
144 |           <div className="form-group">
145 |             <label htmlFor="search"></label> <input type="text" className="form-control" id="search" name="search" placeholder="Search by name, code, or hash..." onChange={onSearchChange} />
146 |           </div>
147 |         </div>
148 |         <div className="col-md-12">
149 |           <Tails tails={searchResults.length > 0 ? searchResults : tails} updated={updated} />
150 |         </div>
151 |       </div>
152 | 
153 |     </Layout>
154 |   );
155 | }
156 | 
157 | export default HomePage;
158 | 


--------------------------------------------------------------------------------
/src/pages/Tail.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | import { useParams, Link } from "react-router-dom";
 3 | import SyntaxHighlighter from 'react-syntax-highlighter';
 4 | import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 5 | import '../App.css';
 6 | import Layout from '../Layout';
 7 | 
 8 | function Tail() {
 9 |     const { hash } = useParams();
10 |     const [tail, setTail] = useState({ hash: '', name: '', code: '', category: '', description: '', launcherId: '', eveCoinId: '' });
11 |     const [logoUrl, setLogoUrl] = useState<string | null>(null);
12 |     const [tailReveal, setTailReveal] = useState('');
13 | 
14 |     useEffect(() => {
15 |         window.taildatabase.getTail(hash || '')
16 |             .then(res => {
17 |                 setTail(res);
18 | 
19 |                 return Promise.all([
20 |                     window.taildatabase.getTailReveal(res.eveCoinId),
21 |                     window.taildatabase.getNftUri(res.launcherId)
22 |                 ]);
23 |             })
24 |             .then(([[eve_coin_id, _, tail_reveal], url]) => {
25 |                 setLogoUrl(url);
26 |                 setTailReveal(tail_reveal);
27 |             })
28 |             .catch(console.error)
29 |     }, []);
30 | 
31 | 
32 |     return (
33 |         <Layout>
34 |             <div className="row">
35 |                 <div className="col-md-12">
36 |                     <table className="table">
37 |                         <thead>
38 |                             <tr>
39 |                                 <td colSpan={2}>
40 |                                     <h1>{tail.name}</h1>
41 |                                 </td>
42 |                             </tr>
43 |                             <tr>
44 |                                 <td colSpan={2} style={{ textAlign: 'center' }}>
45 |                                     {logoUrl && (<img src={logoUrl} style={{ width: '15em' }} />)}
46 |                                 </td>
47 |                             </tr>
48 |                         </thead>
49 |                         <tbody>
50 |                             <tr>
51 |                                 <td>Hash</td>
52 |                                 <td>{tail.hash}</td>
53 |                             </tr>
54 |                             <tr>
55 |                                 <td>Code</td>
56 |                                 <td>{tail.code}</td>
57 |                             </tr>
58 |                             <tr>
59 |                                 <td>Category</td>
60 |                                 <td>{tail.category}</td>
61 |                             </tr>
62 |                             <tr>
63 |                                 <td>Description</td>
64 |                                 <td>{tail.description}</td>
65 |                             </tr>
66 |                             <tr>
67 |                                 <td>Eve coin id</td>
68 |                                 <td>{tail.eveCoinId}</td>
69 |                             </tr>
70 |                             <tr>
71 |                                 <td>TAIL reveal</td>
72 |                                 <td>
73 |                                     <div style={{ width: '35em', overflowX: 'auto' }}>
74 |                                         <SyntaxHighlighter language="lisp" style={docco} wrapLongLines>
75 |                                             {tailReveal}
76 |                                         </SyntaxHighlighter>
77 |                                     </div>
78 |                                 </td>
79 |                             </tr>
80 |                         </tbody>
81 |                     </table>
82 |                 </div>
83 |             </div>
84 |         </Layout>
85 |     );
86 | }
87 | 
88 | export default Tail;
89 | 


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="node" />
 2 | /// <reference types="react" />
 3 | /// <reference types="react-dom" />
 4 | 
 5 | declare namespace NodeJS {
 6 |   interface ProcessEnv {
 7 |     readonly NODE_ENV: 'development' | 'production' | 'test';
 8 |     readonly PUBLIC_URL: string;
 9 |   }
10 | }
11 | 
12 | declare module '*.avif' {
13 |   const src: string;
14 |   export default src;
15 | }
16 | 
17 | declare module '*.bmp' {
18 |   const src: string;
19 |   export default src;
20 | }
21 | 
22 | declare module '*.gif' {
23 |   const src: string;
24 |   export default src;
25 | }
26 | 
27 | declare module '*.jpg' {
28 |   const src: string;
29 |   export default src;
30 | }
31 | 
32 | declare module '*.jpeg' {
33 |   const src: string;
34 |   export default src;
35 | }
36 | 
37 | declare module '*.png' {
38 |   const src: string;
39 |   export default src;
40 | }
41 | 
42 | declare module '*.webp' {
43 |     const src: string;
44 |     export default src;
45 | }
46 | 
47 | declare module '*.svg' {
48 |   import * as React from 'react';
49 | 
50 |   export const ReactComponent: React.FunctionComponent<React.SVGProps<
51 |     SVGSVGElement
52 |   > & { title?: string }>;
53 | 
54 |   const src: string;
55 |   export default src;
56 | }
57 | 
58 | declare module '*.module.css' {
59 |   const classes: { readonly [key: string]: string };
60 |   export default classes;
61 | }
62 | 
63 | declare module '*.module.scss' {
64 |   const classes: { readonly [key: string]: string };
65 |   export default classes;
66 | }
67 | 
68 | declare module '*.module.sass' {
69 |   const classes: { readonly [key: string]: string };
70 |   export default classes;
71 | }
72 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
 1 | import { ReportHandler } from 'web-vitals';
 2 | 
 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
 4 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 5 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 6 |       getCLS(onPerfEntry);
 7 |       getFID(onPerfEntry);
 8 |       getFCP(onPerfEntry);
 9 |       getLCP(onPerfEntry);
10 |       getTTFB(onPerfEntry);
11 |     });
12 |   }
13 | };
14 | 
15 | export default reportWebVitals;
16 | 


--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/taildatabase/db.ts:
--------------------------------------------------------------------------------
1 | import { Dexie } from 'dexie';
2 | 
3 | export const db = new Dexie('TailDatabase');
4 | 
5 | db.version(1).stores({
6 |     tails: "&hash,name,code,category"
7 | });
8 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2015",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "noFallthroughCasesInSwitch": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react-jsx"
22 |   },
23 |   "include": [
24 |     "src"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------