init

.github/workflows/main.yml

@@ -0,0 +1,32 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ['14.x']
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
+
+      - name: Build
+        run: yarn build

.github/workflows/size.yml

@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,6 @@
+*.log
+.DS_Store
+node_modules
+.cache
+.vscode
+/example/dist

DEVELOPMENT.md

@@ -0,0 +1,158 @@
+# Development
+
+The project is botstrapped with TSDX.
+
+> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
+
+## Commands
+
+TSDX scaffolds library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
+
+The recommended workflow is to run TSDX in one terminal:
+
+```bash
+npm start # or yarn start
+```
+
+This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
+
+Then run the example inside another:
+
+```bash
+cd example
+npm i # or yarn to install dependencies
+npm start # or yarn start
+```
+
+The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
+
+To do a one-off build, use `npm run build` or `yarn build`.
+
+To run tests, use `npm test` or `yarn test`.
+
+## Configuration
+
+Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
+
+### Jest
+
+Jest tests are set up to run with `npm test` or `yarn test`.
+
+### Bundle analysis
+
+Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.
+
+#### Setup Files
+
+This is the folder structure we set up for you:
+
+```txt
+/example
+  index.html
+  index.tsx       # test your component here in a demo app
+  package.json
+  tsconfig.json
+/src
+  index.tsx       # EDIT THIS
+/test
+  blah.test.tsx   # EDIT THIS
+.gitignore
+package.json
+README.md         # EDIT THIS
+tsconfig.json
+```
+
+#### React Testing Library
+
+We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this.
+
+### Rollup
+
+TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
+
+### TypeScript
+
+`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
+
+## Continuous Integration
+
+### GitHub Actions
+
+Two actions are added by default:
+
+- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
+- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)
+
+## Optimizations
+
+Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
+
+```js
+// ./types/index.d.ts
+declare var __DEV__: boolean;
+
+// inside your code...
+if (__DEV__) {
+  console.log('foo');
+}
+```
+
+You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.
+
+## Module Formats
+
+CJS, ESModules, and UMD module formats are supported.
+
+The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
+
+## Deploying the Example Playground
+
+The Playground is just a simple [Parcel](https://parceljs.org) app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for **manually** deploying with the Netlify CLI (`npm i -g netlify-cli`):
+
+```bash
+cd example # if not already in the example folder
+npm run build # builds to dist
+netlify deploy # deploy the dist folder
+```
+
+Alternatively, if you already have a git repo connected, you can set up continuous deployment with Netlify:
+
+```bash
+netlify init
+# build command: yarn build && cd example && yarn && yarn build
+# directory to deploy: example/dist
+# pick yes for netlify.toml
+```
+
+## Named Exports
+
+Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
+
+## Including Styles
+
+There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
+
+For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
+
+## Publishing to NPM
+
+We recommend using [np](https://github.com/sindresorhus/np).
+
+## Usage with Lerna
+
+When creating a new package with TSDX within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_.
+
+The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's `package.json` might not point to the right place, as those dependencies might have been installed in the root of your Lerna project.
+
+Change the `alias` to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below.
+
+```diff
+   "alias": {
+-    "react": "../node_modules/react",
+-    "react-dom": "../node_modules/react-dom"
++    "react": "../../../node_modules/react",
++    "react-dom": "../../../node_modules/react-dom"
+   },
+```
+
+An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. [However, that might cause other problems.](https://github.com/palmerhq/tsdx/issues/64)

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 milukove
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,69 @@
+# Use Grindery Login
+
+A React context provider and a hook to interact with user authentication session in React applications.
+
+## GrinderyLoginProvider
+
+The component defines a `GrinderyLoginContext` which is a context that provides access to user-related information and actions, including:
+
+- The authentication token
+- User ID
+- User address
+- Functions to connect (login) and disconnect (logout) a user
+
+The `GrinderyLoginProvider` uses this context to hold and manage the state of these values. The component provides a mechanism for a user to login (connect) and logout (disconnect) with methods that redirect the user to different URLs depending on their environment (staging, localhost, production).
+
+- On connecting, it redirects the user to the appropriate login URL with a `redirect_uri` parameter set to the current URL.
+- On disconnecting, it posts a message to clear the authentication session and resets user-related state to null.
+
+Additionally, `GrinderyLoginProvider` listens for messages posted from a hidden iframe sourced from the login URL, handling updates to the user's authentication session. Any such updates are used to set the context's state values.
+
+The `GrinderyLoginProvider` component also wraps its children, thus providing the context values to all child components.
+
+A custom hook, `useGrinderyLogin`, is also exported for easy access to the context.
+
+## How to use
+
+### Install library
+
+`yarn add use-grindery-login`
+
+or
+
+`npm install use-grindery-login`
+
+### Add Provider component to your React app
+
+```js
+import GrinderyLoginProvider from 'use-grindery-login';
+
+const App = () => {
+  return (
+    <GrinderyLoginProvider>{/* your app components */}</GrinderyLoginProvider>
+  );
+};
+```
+
+### Use hook in your components to access user context
+
+```js
+import { useGrinderLogin } from 'use-grindery-login';
+
+const AuthenticationButton = () => {
+  const { connect, disconnect, token, user, address } = useGrinderyLogin();
+
+  if (token) {
+    return <button onClick={disconnect}>Disconnect</button>;
+  }
+
+  return <button onClick={connect}>Connect</button>;
+};
+```
+
+## Development
+
+See [DEVELOPMENT.md](https://github.com/grindery-io/use-grindery-login/blob/master/DEVELOPMENT.md) file.
+
+## License
+
+MIT License

dist/index.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+export declare const LOGIN_URL: string;
+export declare type AuthToken = {
+    access_token: string;
+    expires_in: number;
+    refresh_token?: string;
+    token_type: string;
+};
+export declare type GrinderyLoginContextProps = {
+    /** Authentication token object */
+    token: AuthToken | null;
+    /** User ID */
+    user: string | null;
+    /** User address */
+    address: string | null;
+    /** Connect user */
+    connect: () => void;
+    /** Disconnect user */
+    disconnect: () => void;
+};
+export declare type GrinderyLoginProviderProps = {
+    children: React.ReactNode;
+};
+/** Grindery Nexus Context */
+export declare const GrinderyLoginContext: React.Context<GrinderyLoginContextProps>;
+/**
+ * The component provides context for user authentication.
+ *
+ * It manages authentication state (token, user, address),
+ * provides connect and disconnect functionality,
+ * and listens for updates from a hidden iframe.
+ *
+ * It also exposes the context via the useGrinderyLogin hook.
+ */
+export declare const GrinderyLoginProvider: ({ children, }: GrinderyLoginProviderProps) => React.JSX.Element;
+/** Grindery Login Hook */
+export declare const useGrinderyLogin: () => GrinderyLoginContextProps;
+export default GrinderyLoginProvider;

dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./use-grindery-login.cjs.production.min.js')
+} else {
+  module.exports = require('./use-grindery-login.cjs.development.js')
+}