Move examples and migrate to Parcel (#224)
* Remove old examples * Add Community and Channel examples
This commit is contained in:
Pavel
GitHub
parent
de6837b0f5
commit
3334108bdd
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>Channel | Status</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import React, { render } from 'react-dom';
|
||||
import { GroupChat, lightTheme } from '@status-im/react';
|
||||
import { StrictMode } from 'react';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div>
|
||||
<GroupChat
|
||||
theme={lightTheme}
|
||||
communityKey="<YOUR_COMMUNITY_KEY>"
|
||||
config={{
|
||||
environment: '<ENVIRONMENT>',
|
||||
dappUrl: '<URL>',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "channel",
|
||||
"version": "0.0.0",
|
||||
"source": "index.html",
|
||||
"scripts": {
|
||||
"dev": "parcel",
|
||||
"build": "parcel build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@status-im/react": "^0.0.0",
|
||||
"react": "^17.0.0",
|
||||
"react-dom": "^17.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^17.0.0",
|
||||
"@types/react-dom": "^17.0.0",
|
||||
"parcel": "^2.0.0",
|
||||
"typescript": "^4.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>Community | Status</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import React, { render } from 'react-dom';
|
||||
import { CommunityChat, lightTheme } from '@status-im/react';
|
||||
import { StrictMode } from 'react';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div>
|
||||
<CommunityChat
|
||||
theme={lightTheme}
|
||||
communityKey="<YOUR_COMMUNITY_KEY>"
|
||||
config={{
|
||||
environment: '<ENVIRONMENT>',
|
||||
dappUrl: '<URL>',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "community",
|
||||
"version": "0.0.0",
|
||||
"source": "./index.html",
|
||||
"scripts": {
|
||||
"dev": "parcel",
|
||||
"build": "parcel build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@status-im/react": "^0.0.0",
|
||||
"react": "^17.0.0",
|
||||
"react-dom": "^17.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^17.0.0",
|
||||
"@types/react-dom": "^17.0.0",
|
||||
"parcel": "^2.0.0",
|
||||
"typescript": "^4.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
{
|
||||
"private": true,
|
||||
"workspaces": [
|
||||
"packages/*"
|
||||
"packages/*",
|
||||
"examples/*"
|
||||
],
|
||||
"keywords": [],
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
{
|
||||
"name": "@waku/preview-proxy",
|
||||
"version": "0.1.0",
|
||||
"main": "index.js",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"node-fetch": "^2.6.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "yarn node src/index.js",
|
||||
"fix": "",
|
||||
"build": "",
|
||||
"test": ""
|
||||
}
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
import fetch from 'node-fetch'
|
||||
import https from 'https'
|
||||
import fs from 'fs'
|
||||
|
||||
const regEx = new RegExp(/meta +(property|content)="(.+?)" +(property|content)="(.+?)"/g);
|
||||
|
||||
async function listener(req, res){
|
||||
const origin = req?.headers?.origin
|
||||
res.statusCode = 200
|
||||
res.setHeader('Content-Type', 'application/json')
|
||||
if (origin === 'https://0.0.0.0:8080' || origin === 'https://localhost:8080' || origin === 'https://127.0.0.1:8080') {
|
||||
res.setHeader('Access-Control-Allow-Origin', origin);
|
||||
}
|
||||
res.setHeader('Access-Control-Allow-Methods', 'POST');
|
||||
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
|
||||
const requestBody = await new Promise((resolve) => {
|
||||
if (req.method == 'POST') {
|
||||
let body = '';
|
||||
req.on('data', function (data) {
|
||||
body += data;
|
||||
if (body.length > 1e6)
|
||||
req.connection.destroy();
|
||||
});
|
||||
req.on('end', function () {
|
||||
try {
|
||||
resolve(JSON.parse(body))
|
||||
} catch {
|
||||
resolve({})
|
||||
}
|
||||
});
|
||||
} else {
|
||||
resolve({})
|
||||
}
|
||||
})
|
||||
const obj = {}
|
||||
if ('site' in requestBody) {
|
||||
try {
|
||||
const response = await fetch(requestBody['site'])
|
||||
const body = await response.text()
|
||||
for (const match of body.matchAll(regEx)) {
|
||||
if (match[1] === 'property') {
|
||||
obj[match[2]] = match[4]
|
||||
} else {
|
||||
obj[match[4]] = match[2]
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
}
|
||||
}
|
||||
res.end(JSON.stringify(obj));
|
||||
}
|
||||
|
||||
const options = {
|
||||
key: fs.readFileSync('../../../cert/CA/localhost/localhost.decrypted.key'),
|
||||
cert: fs.readFileSync('../../../cert/CA/localhost/localhost.crt')
|
||||
}
|
||||
|
||||
const server = https.createServer(options, listener);
|
||||
server.listen(3000, () => console.log('server running at port 3000'));
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
{
|
||||
"root": true,
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": { "project": "./tsconfig.json" },
|
||||
"env": { "es6": true },
|
||||
"ignorePatterns": ["node_modules", "dist", "coverage", "proto"],
|
||||
"plugins": ["import", "eslint-comments", "functional"],
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:eslint-comments/recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:import/typescript",
|
||||
"prettier"
|
||||
],
|
||||
"globals": { "BigInt": true, "console": true, "WebAssembly": true },
|
||||
"rules": {
|
||||
"@typescript-eslint/explicit-module-boundary-types": "off",
|
||||
"eslint-comments/disable-enable-pair": [
|
||||
"error",
|
||||
{ "allowWholeFile": true }
|
||||
],
|
||||
"eslint-comments/no-unused-disable": "error",
|
||||
"import/order": [
|
||||
"error",
|
||||
{ "newlines-between": "always", "alphabetize": { "order": "asc" } }
|
||||
],
|
||||
"no-constant-condition": ["error", { "checkLoops": false }],
|
||||
"sort-imports": [
|
||||
"error",
|
||||
{ "ignoreDeclarationSort": true, "ignoreCase": true }
|
||||
]
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.spec.ts", "**/test_utils/*.ts"],
|
||||
"rules": {
|
||||
"@typescript-eslint/no-non-null-assertion": "off"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"extension": ["ts"],
|
||||
"spec": "src/**/*.spec.ts",
|
||||
"require": "ts-node/register",
|
||||
"exit": true
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
# package.json is formatted by package managers, so we ignore it here
|
||||
package.json
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
#React chat example
|
||||
|
||||
##How to run example
|
||||
|
||||
1. First you need to `yarn && yarn build` in main repo folder
|
||||
2. set two environment libraries
|
||||
ENV and COMMUNITY_KEY
|
||||
|
||||
`export ENV=test` to use waku test fleet
|
||||
`export ENV=prod` to use waku prod fleet
|
||||
`export COMMUNITY_KEY=0x038ff8c6539ff268e024d07534a362ef69f7b13b056fcf19177fb6282b4d547bc8` to set a key to community
|
||||
|
||||
3. run `yarn start` in `packages/react-chat-example` folder.
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
{
|
||||
"name": "@waku/react-chat-sdk-example",
|
||||
"main": "index.js",
|
||||
"version": "0.1.0",
|
||||
"repository": "https://github.com/status-im/wakuconnect-chat-sdk/",
|
||||
"license": "MIT OR Apache-2.0",
|
||||
"packageManager": "yarn@3.0.1",
|
||||
"scripts": {
|
||||
"clean:all": "yarn clean && rimraf node_modules/",
|
||||
"clean": "rimraf dist/",
|
||||
"build": "rm -rf dist && webpack --mode=production --env ENV=production",
|
||||
"start": "webpack serve --mode=development --env ENV=$ENV COMMUNITY_KEY=$COMMUNITY_KEY --https",
|
||||
"fix": "run-s 'fix:*'",
|
||||
"fix:prettier": "prettier './{src,test}/**/*.{ts,tsx}' \"./*.json\" --write",
|
||||
"fix:lint": "eslint './{src,test}/**/*.{ts,tsx}' --fix",
|
||||
"test": "run-s 'test:*'",
|
||||
"test:lint": "eslint './{src,test}/**/*.{ts,tsx}'",
|
||||
"test:prettier": "prettier './{src,test}/**/*.{ts,tsx}' \"./*.json\" --list-different"
|
||||
},
|
||||
"dependencies": {
|
||||
"@status-im/react": "^0.0.0",
|
||||
"assert": "^2.0.0",
|
||||
"browserify-zlib": "^0.2.0",
|
||||
"buffer": "^6.0.3",
|
||||
"crypto-browserify": "^3.12.0",
|
||||
"https-browserify": "^1.0.0",
|
||||
"process": "^0.11.10",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"stream-http": "^3.2.0",
|
||||
"styled-components": "^5.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/react-hooks": "^7.0.1",
|
||||
"@types/chai": "^4.2.21",
|
||||
"@types/mocha": "^9.0.0",
|
||||
"@types/node": "^16.4.12",
|
||||
"@types/react": "^17.0.15",
|
||||
"@types/react-dom": "^17.0.9",
|
||||
"@types/react-router": "^5.1.16",
|
||||
"@types/react-router-dom": "^5.1.8",
|
||||
"@types/styled-components": "^5.1.12",
|
||||
"@typescript-eslint/eslint-plugin": "^4.29.0",
|
||||
"@typescript-eslint/parser": "^4.29.0",
|
||||
"chai": "^4.3.4",
|
||||
"css-loader": "^6.3.0",
|
||||
"esbuild-loader": "^2.15.1",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-hooks": "^0.2.0",
|
||||
"eslint-plugin-react": "^7.24.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"fork-ts-checker-webpack-plugin": "^6.3.1",
|
||||
"html-webpack-plugin": "^5.3.2",
|
||||
"jsdom": "^16.7.0",
|
||||
"jsdom-global": "^3.0.2",
|
||||
"mocha": "^9.0.3",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^2.3.2",
|
||||
"rimraf": "^3.0.2",
|
||||
"source-map-loader": "^3.0.0",
|
||||
"style-loader": "^3.3.0",
|
||||
"ts-loader": "^9.2.5",
|
||||
"ts-node": "^10.1.0",
|
||||
"typescript": "^4.3.5",
|
||||
"webpack": "^5.48.0",
|
||||
"webpack-cli": "^4.7.2",
|
||||
"webpack-dev-server": "^3.11.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
/* /index.html 200
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<title>Waku Connect Chat</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<script type="module" src="/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
import { CommunityChat, darkTheme, lightTheme } from "@waku/react-chat-sdk";
|
||||
import React, { useRef, useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import styled from "styled-components";
|
||||
|
||||
const fetchMetadata = async (link: string) => {
|
||||
const response = await fetch("https://localhost:3000", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ site: link }),
|
||||
});
|
||||
const body = await response.text();
|
||||
const parsedBody = JSON.parse(body);
|
||||
if (
|
||||
"og:image" in parsedBody &&
|
||||
"og:site_name" in parsedBody &&
|
||||
"og:title" in parsedBody
|
||||
) {
|
||||
return JSON.parse(body);
|
||||
}
|
||||
};
|
||||
|
||||
function DragDiv() {
|
||||
const [x, setX] = useState(0);
|
||||
const [y, setY] = useState(0);
|
||||
const [width, setWidth] = useState(window.innerWidth - 50);
|
||||
const [height, setHeight] = useState(window.innerHeight - 50);
|
||||
const [showChat, setShowChat] = useState(true);
|
||||
const ref = useRef<HTMLHeadingElement>(null);
|
||||
const moved = useRef(false);
|
||||
const setting = useRef("");
|
||||
|
||||
const [theme, setTheme] = useState(true);
|
||||
|
||||
const onMouseMove = (e: MouseEvent) => {
|
||||
if (setting.current === "position") {
|
||||
e.preventDefault();
|
||||
setX(e.x - 20);
|
||||
setY(e.y - 20);
|
||||
}
|
||||
if (setting.current === "size") {
|
||||
setWidth(e.x - x);
|
||||
setHeight(e.y - y);
|
||||
e.preventDefault();
|
||||
}
|
||||
moved.current = true;
|
||||
};
|
||||
|
||||
const onMouseUp = () => {
|
||||
document.removeEventListener("mousemove", onMouseMove);
|
||||
document.removeEventListener("mouseup", onMouseUp);
|
||||
if (!moved.current) [setShowChat((prev) => !prev)];
|
||||
moved.current = false;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
setTheme(!theme);
|
||||
}}
|
||||
>
|
||||
Change theme
|
||||
</button>
|
||||
<Drag style={{ left: x, top: y, width: width, height: height }} ref={ref}>
|
||||
<Bubble
|
||||
onMouseDown={() => {
|
||||
setting.current = "position";
|
||||
document.addEventListener("mousemove", onMouseMove);
|
||||
document.addEventListener("mouseup", onMouseUp);
|
||||
}}
|
||||
/>
|
||||
<FloatingDiv className={showChat ? "" : "hide"}>
|
||||
<CommunityChat
|
||||
theme={theme ? lightTheme : darkTheme}
|
||||
communityKey={process.env.COMMUNITY_KEY ?? ""}
|
||||
config={{
|
||||
environment: process.env.ENV ?? "",
|
||||
dappUrl: "https://0.0.0.0:8080",
|
||||
}}
|
||||
fetchMetadata={fetchMetadata}
|
||||
/>
|
||||
</FloatingDiv>
|
||||
{showChat && (
|
||||
<SizeSet
|
||||
onMouseDown={() => {
|
||||
setting.current = "size";
|
||||
document.addEventListener("mousemove", onMouseMove);
|
||||
document.addEventListener("mouseup", onMouseUp);
|
||||
}}
|
||||
></SizeSet>
|
||||
)}
|
||||
</Drag>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const FloatingDiv = styled.div`
|
||||
height: calc(100% - 50px);
|
||||
border: 1px solid black;
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const SizeSet = styled.div`
|
||||
margin-left: auto;
|
||||
margin-right: 0px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: light-grey;
|
||||
border: 1px solid;
|
||||
`;
|
||||
|
||||
const Bubble = styled.div`
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: lightblue;
|
||||
border: 1px solid;
|
||||
`;
|
||||
|
||||
const Drag = styled.div`
|
||||
position: absolute;
|
||||
min-width: 375px;
|
||||
`;
|
||||
|
||||
ReactDOM.render(
|
||||
<div style={{ height: "100%" }}>
|
||||
<DragDiv />
|
||||
</div>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es6",
|
||||
"outDir": "dist",
|
||||
"jsx": "react",
|
||||
"moduleResolution": "node",
|
||||
"module": "commonjs",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"esModuleInterop": true,
|
||||
"resolveJsonModule": true,
|
||||
"composite": true,
|
||||
"strict": true /* Enable all strict type-checking options. */,
|
||||
|
||||
/* Strict Type-Checking Options */
|
||||
"noImplicitAny": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"strictPropertyInitialization": true,
|
||||
"noImplicitThis": true,
|
||||
"alwaysStrict": true,
|
||||
|
||||
/* Additional Checks */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": false /* to set at a later stage */,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
|
||||
/* Debugging Options */
|
||||
"traceResolution": false,
|
||||
"listEmittedFiles": false,
|
||||
"listFiles": false,
|
||||
"pretty": true,
|
||||
|
||||
// Due to broken types in indirect dependencies
|
||||
"skipLibCheck": true,
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./src/types",
|
||||
"../../node_modules/@types"
|
||||
]
|
||||
},
|
||||
"include": ["src"],
|
||||
"types": ["mocha"],
|
||||
"compileOnSave": false
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,88 +0,0 @@
|
|||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
|
||||
const webpack = require('webpack');
|
||||
const { ESBuildMinifyPlugin } = require('esbuild-loader');
|
||||
|
||||
module.exports = env => {
|
||||
const environment = env.ENV || 'development';
|
||||
const communityKey = env.COMMUNITY_KEY || '';
|
||||
|
||||
return {
|
||||
entry: './src/index.tsx',
|
||||
output: {
|
||||
filename: 'index.[fullhash].js',
|
||||
path: path.join(__dirname, 'dist'),
|
||||
publicPath: '/',
|
||||
},
|
||||
devtool: 'source-map',
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js', '.json'],
|
||||
fallback: {
|
||||
buffer: require.resolve('buffer/'),
|
||||
crypto: require.resolve('crypto-browserify'),
|
||||
stream: require.resolve('stream-browserify'),
|
||||
assert: require.resolve('assert/'),
|
||||
http: require.resolve('stream-http'),
|
||||
https: require.resolve('https-browserify'),
|
||||
zlib: require.resolve('browserify-zlib')
|
||||
},
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
loader: 'esbuild-loader',
|
||||
exclude: /node_modules/,
|
||||
options: {
|
||||
loader: 'tsx',
|
||||
target: 'es2020',
|
||||
},
|
||||
},
|
||||
{
|
||||
enforce: 'pre',
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'source-map-loader',
|
||||
},
|
||||
{
|
||||
test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf|ico)$/,
|
||||
use: ['file-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
optimization: {
|
||||
minimizer: [
|
||||
new ESBuildMinifyPlugin({
|
||||
target: 'es2020',
|
||||
}),
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new ForkTsCheckerWebpackPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'src/index.html',
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.ENV': JSON.stringify(environment),
|
||||
'process.env.COMMUNITY_KEY': JSON.stringify(communityKey),
|
||||
}),
|
||||
new webpack.ProvidePlugin({
|
||||
process: 'process/browser.js',
|
||||
Buffer: ['buffer', 'Buffer'],
|
||||
}),
|
||||
],
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
host: '0.0.0.0',
|
||||
stats: 'errors-only',
|
||||
overlay: true,
|
||||
hot: true,
|
||||
},
|
||||
stats: 'minimal',
|
||||
};
|
||||
};
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
{
|
||||
"root": true,
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": { "project": "./tsconfig.json" },
|
||||
"env": { "es6": true },
|
||||
"ignorePatterns": ["node_modules", "dist", "coverage", "proto"],
|
||||
"plugins": ["import", "eslint-comments", "functional"],
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:eslint-comments/recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:import/typescript",
|
||||
"prettier"
|
||||
],
|
||||
"globals": { "BigInt": true, "console": true, "WebAssembly": true },
|
||||
"rules": {
|
||||
"@typescript-eslint/explicit-module-boundary-types": "off",
|
||||
"eslint-comments/disable-enable-pair": [
|
||||
"error",
|
||||
{ "allowWholeFile": true }
|
||||
],
|
||||
"eslint-comments/no-unused-disable": "error",
|
||||
"import/order": [
|
||||
"error",
|
||||
{ "newlines-between": "always", "alphabetize": { "order": "asc" } }
|
||||
],
|
||||
"no-constant-condition": ["error", { "checkLoops": false }],
|
||||
"sort-imports": [
|
||||
"error",
|
||||
{ "ignoreDeclarationSort": true, "ignoreCase": true }
|
||||
]
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.spec.ts", "**/test_utils/*.ts"],
|
||||
"rules": {
|
||||
"@typescript-eslint/no-non-null-assertion": "off"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"extension": ["ts"],
|
||||
"spec": "src/**/*.spec.ts",
|
||||
"require": "ts-node/register",
|
||||
"exit": true
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
# package.json is formatted by package managers, so we ignore it here
|
||||
package.json
|
||||
|
|
@ -1 +0,0 @@
|
|||
#React chat example
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
{
|
||||
"name": "@waku/react-group-chat-sdk-example",
|
||||
"main": "index.js",
|
||||
"version": "0.1.0",
|
||||
"repository": "https://github.com/status-im/wakuconnect-chat-sdk/",
|
||||
"license": "MIT OR Apache-2.0",
|
||||
"packageManager": "yarn@3.0.1",
|
||||
"scripts": {
|
||||
"clean:all": "yarn clean && rimraf node_modules/",
|
||||
"clean": "rimraf dist/",
|
||||
"build": "rm -rf dist && webpack --mode=production --env ENV=production",
|
||||
"start": "webpack serve --mode=development --env ENV=$ENV COMMUNITY_KEY=$COMMUNITY_KEY --https",
|
||||
"fix": "run-s 'fix:*'",
|
||||
"fix:prettier": "prettier './{src,test}/**/*.{ts,tsx}' \"./*.json\" --write",
|
||||
"fix:lint": "eslint './{src,test}/**/*.{ts,tsx}' --fix",
|
||||
"test": "run-s 'test:*'",
|
||||
"test:lint": "eslint './{src,test}/**/*.{ts,tsx}'",
|
||||
"test:prettier": "prettier './{src,test}/**/*.{ts,tsx}' \"./*.json\" --list-different"
|
||||
},
|
||||
"dependencies": {
|
||||
"@status-im/react": "^0.0.0",
|
||||
"assert": "^2.0.0",
|
||||
"browserify-zlib": "^0.2.0",
|
||||
"buffer": "^6.0.3",
|
||||
"crypto-browserify": "^3.12.0",
|
||||
"https-browserify": "^1.0.0",
|
||||
"process": "^0.11.10",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"stream-http": "^3.2.0",
|
||||
"styled-components": "^5.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/react-hooks": "^7.0.1",
|
||||
"@types/chai": "^4.2.21",
|
||||
"@types/mocha": "^9.0.0",
|
||||
"@types/node": "^16.4.12",
|
||||
"@types/react": "^17.0.15",
|
||||
"@types/react-dom": "^17.0.9",
|
||||
"@types/react-router": "^5.1.16",
|
||||
"@types/react-router-dom": "^5.1.8",
|
||||
"@types/styled-components": "^5.1.12",
|
||||
"@typescript-eslint/eslint-plugin": "^4.29.0",
|
||||
"@typescript-eslint/parser": "^4.29.0",
|
||||
"chai": "^4.3.4",
|
||||
"css-loader": "^6.3.0",
|
||||
"esbuild-loader": "^2.15.1",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-hooks": "^0.2.0",
|
||||
"eslint-plugin-react": "^7.24.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"fork-ts-checker-webpack-plugin": "^6.3.1",
|
||||
"html-webpack-plugin": "^5.3.2",
|
||||
"jsdom": "^16.7.0",
|
||||
"jsdom-global": "^3.0.2",
|
||||
"mocha": "^9.0.3",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^2.3.2",
|
||||
"rimraf": "^3.0.2",
|
||||
"source-map-loader": "^3.0.0",
|
||||
"style-loader": "^3.3.0",
|
||||
"ts-loader": "^9.2.5",
|
||||
"ts-node": "^10.1.0",
|
||||
"typescript": "^4.3.5",
|
||||
"webpack": "^5.48.0",
|
||||
"webpack-cli": "^4.7.2",
|
||||
"webpack-dev-server": "^3.11.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
/* /index.html 200
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<title>Waku Connect group chat</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<script type="module" src="/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
import { darkTheme, GroupChat, lightTheme } from "@waku/react-chat-sdk";
|
||||
import React, { useRef, useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import styled from "styled-components";
|
||||
|
||||
const fetchMetadata = async (link: string) => {
|
||||
const response = await fetch("https://localhost:3000", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ site: link }),
|
||||
});
|
||||
const body = await response.text();
|
||||
const parsedBody = JSON.parse(body);
|
||||
if (
|
||||
"og:image" in parsedBody &&
|
||||
"og:site_name" in parsedBody &&
|
||||
"og:title" in parsedBody
|
||||
) {
|
||||
return JSON.parse(body);
|
||||
}
|
||||
};
|
||||
|
||||
function DragDiv() {
|
||||
const [x, setX] = useState(0);
|
||||
const [y, setY] = useState(0);
|
||||
const [width, setWidth] = useState(window.innerWidth - 50);
|
||||
const [height, setHeight] = useState(window.innerHeight - 50);
|
||||
const [showChat, setShowChat] = useState(true);
|
||||
const ref = useRef<HTMLHeadingElement>(null);
|
||||
const moved = useRef(false);
|
||||
const setting = useRef("");
|
||||
|
||||
const [theme, setTheme] = useState(true);
|
||||
|
||||
const onMouseMove = (e: MouseEvent) => {
|
||||
if (setting.current === "position") {
|
||||
e.preventDefault();
|
||||
setX(e.x - 20);
|
||||
setY(e.y - 20);
|
||||
}
|
||||
if (setting.current === "size") {
|
||||
setWidth(e.x - x);
|
||||
setHeight(e.y - y);
|
||||
e.preventDefault();
|
||||
}
|
||||
moved.current = true;
|
||||
};
|
||||
|
||||
const onMouseUp = () => {
|
||||
document.removeEventListener("mousemove", onMouseMove);
|
||||
document.removeEventListener("mouseup", onMouseUp);
|
||||
if (!moved.current) [setShowChat((prev) => !prev)];
|
||||
moved.current = false;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
setTheme(!theme);
|
||||
}}
|
||||
>
|
||||
Change theme
|
||||
</button>
|
||||
<Drag style={{ left: x, top: y, width: width, height: height }} ref={ref}>
|
||||
<Bubble
|
||||
onMouseDown={() => {
|
||||
setting.current = "position";
|
||||
document.addEventListener("mousemove", onMouseMove);
|
||||
document.addEventListener("mouseup", onMouseUp);
|
||||
}}
|
||||
/>
|
||||
<FloatingDiv className={showChat ? "" : "hide"}>
|
||||
<GroupChat
|
||||
theme={theme ? lightTheme : darkTheme}
|
||||
config={{
|
||||
environment: process.env.ENV ?? "",
|
||||
dappUrl: "https://0.0.0.0:8080",
|
||||
}}
|
||||
fetchMetadata={fetchMetadata}
|
||||
/>
|
||||
</FloatingDiv>
|
||||
{showChat && (
|
||||
<SizeSet
|
||||
onMouseDown={() => {
|
||||
setting.current = "size";
|
||||
document.addEventListener("mousemove", onMouseMove);
|
||||
document.addEventListener("mouseup", onMouseUp);
|
||||
}}
|
||||
></SizeSet>
|
||||
)}
|
||||
</Drag>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const FloatingDiv = styled.div`
|
||||
height: calc(100% - 50px);
|
||||
border: 1px solid black;
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const SizeSet = styled.div`
|
||||
margin-left: auto;
|
||||
margin-right: 0px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: light-grey;
|
||||
border: 1px solid;
|
||||
`;
|
||||
|
||||
const Bubble = styled.div`
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: lightblue;
|
||||
border: 1px solid;
|
||||
`;
|
||||
|
||||
const Drag = styled.div`
|
||||
position: absolute;
|
||||
min-width: 375px;
|
||||
`;
|
||||
|
||||
ReactDOM.render(
|
||||
<div style={{ height: "100%" }}>
|
||||
<DragDiv />
|
||||
</div>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es6",
|
||||
"outDir": "dist",
|
||||
"jsx": "react",
|
||||
"moduleResolution": "node",
|
||||
"module": "commonjs",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"esModuleInterop": true,
|
||||
"resolveJsonModule": true,
|
||||
"composite": true,
|
||||
"strict": true /* Enable all strict type-checking options. */,
|
||||
|
||||
/* Strict Type-Checking Options */
|
||||
"noImplicitAny": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"strictPropertyInitialization": true,
|
||||
"noImplicitThis": true,
|
||||
"alwaysStrict": true,
|
||||
|
||||
/* Additional Checks */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": false /* to set at a later stage */,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
|
||||
/* Debugging Options */
|
||||
"traceResolution": false,
|
||||
"listEmittedFiles": false,
|
||||
"listFiles": false,
|
||||
"pretty": true,
|
||||
|
||||
// Due to broken types in indirect dependencies
|
||||
"skipLibCheck": true,
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./src/types",
|
||||
"../../node_modules/@types"
|
||||
]
|
||||
},
|
||||
"include": ["src"],
|
||||
"types": ["mocha"],
|
||||
"compileOnSave": false
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,88 +0,0 @@
|
|||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
|
||||
const webpack = require('webpack');
|
||||
const { ESBuildMinifyPlugin } = require('esbuild-loader');
|
||||
|
||||
module.exports = env => {
|
||||
const environment = env.ENV || 'development';
|
||||
const communityKey = env.COMMUNITY_KEY || '';
|
||||
|
||||
return {
|
||||
entry: './src/index.tsx',
|
||||
output: {
|
||||
filename: 'index.[fullhash].js',
|
||||
path: path.join(__dirname, 'dist'),
|
||||
publicPath: '/',
|
||||
},
|
||||
devtool: 'source-map',
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js', '.json'],
|
||||
fallback: {
|
||||
buffer: require.resolve('buffer/'),
|
||||
crypto: require.resolve('crypto-browserify'),
|
||||
stream: require.resolve('stream-browserify'),
|
||||
assert: require.resolve('assert/'),
|
||||
http: require.resolve('stream-http'),
|
||||
https: require.resolve('https-browserify'),
|
||||
zlib: require.resolve('browserify-zlib')
|
||||
},
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
loader: 'esbuild-loader',
|
||||
exclude: /node_modules/,
|
||||
options: {
|
||||
loader: 'tsx',
|
||||
target: 'es2020',
|
||||
},
|
||||
},
|
||||
{
|
||||
enforce: 'pre',
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'source-map-loader',
|
||||
},
|
||||
{
|
||||
test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf|ico)$/,
|
||||
use: ['file-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
optimization: {
|
||||
minimizer: [
|
||||
new ESBuildMinifyPlugin({
|
||||
target: 'es2020',
|
||||
}),
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new ForkTsCheckerWebpackPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'src/index.html',
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.ENV': JSON.stringify(environment),
|
||||
'process.env.COMMUNITY_KEY': JSON.stringify(communityKey),
|
||||
}),
|
||||
new webpack.ProvidePlugin({
|
||||
process: 'process/browser.js',
|
||||
Buffer: ['buffer', 'Buffer'],
|
||||
}),
|
||||
],
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
host: '0.0.0.0',
|
||||
stats: 'errors-only',
|
||||
overlay: true,
|
||||
hot: true,
|
||||
},
|
||||
stats: 'minimal',
|
||||
};
|
||||
};
|
||||
Loading…
Reference in New Issue