From a971513e64faf46708f5e3ea781726274dc5576a Mon Sep 17 00:00:00 2001
From: Matt Jones <885417+jonesmac@users.noreply.github.com>
Date: Mon, 7 Oct 2024 15:21:11 -0400
Subject: [PATCH 1/2] stub package
---
packages/sdk/packages/access-gate/.depcheckrc | 5 +
packages/sdk/packages/access-gate/.gitignore | 26 +++
packages/sdk/packages/access-gate/.npmignore | 18 ++
packages/sdk/packages/access-gate/LICENSE | 165 ++++++++++++++++++
packages/sdk/packages/access-gate/README.md | 13 ++
.../sdk/packages/access-gate/package.json | 71 ++++++++
.../access-gate/src/components/index.ts | 1 +
.../sdk/packages/access-gate/src/index.ts | 1 +
.../access-gate/src/types/images.d.ts | 5 +
.../sdk/packages/access-gate/tsconfig.json | 10 ++
.../packages/access-gate/tsconfig.test.json | 4 +
.../access-gate/tsconfig.typedoc.json | 5 +
.../sdk/packages/access-gate/typedoc.json | 5 +
.../sdk/packages/access-gate/xy.config.ts | 10 ++
yarn.lock | 24 +++
15 files changed, 363 insertions(+)
create mode 100644 packages/sdk/packages/access-gate/.depcheckrc
create mode 100644 packages/sdk/packages/access-gate/.gitignore
create mode 100644 packages/sdk/packages/access-gate/.npmignore
create mode 100644 packages/sdk/packages/access-gate/LICENSE
create mode 100644 packages/sdk/packages/access-gate/README.md
create mode 100644 packages/sdk/packages/access-gate/package.json
create mode 100644 packages/sdk/packages/access-gate/src/components/index.ts
create mode 100644 packages/sdk/packages/access-gate/src/index.ts
create mode 100644 packages/sdk/packages/access-gate/src/types/images.d.ts
create mode 100644 packages/sdk/packages/access-gate/tsconfig.json
create mode 100644 packages/sdk/packages/access-gate/tsconfig.test.json
create mode 100644 packages/sdk/packages/access-gate/tsconfig.typedoc.json
create mode 100644 packages/sdk/packages/access-gate/typedoc.json
create mode 100644 packages/sdk/packages/access-gate/xy.config.ts
diff --git a/packages/sdk/packages/access-gate/.depcheckrc b/packages/sdk/packages/access-gate/.depcheckrc
new file mode 100644
index 0000000000..0906865610
--- /dev/null
+++ b/packages/sdk/packages/access-gate/.depcheckrc
@@ -0,0 +1,5 @@
+ignores: [
+ "@xylabs/ts-scripts-yarn3",
+ "@xylabs/tsconfig-react",
+ "typescript"
+]
\ No newline at end of file
diff --git a/packages/sdk/packages/access-gate/.gitignore b/packages/sdk/packages/access-gate/.gitignore
new file mode 100644
index 0000000000..4403c56f70
--- /dev/null
+++ b/packages/sdk/packages/access-gate/.gitignore
@@ -0,0 +1,26 @@
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+*.log
+*.tgz
+*.tsbuildinfo
+.DS_Store
+.env
+.eslintcache
+.git
+.hg
+.idea
+.pnp.*
+.rollup.cache
+.serverless
+.svn
+.tsconfig*
+.webpack
+.yarn/*
+build
+dist
+docs
+node_modules
+storybook-static
\ No newline at end of file
diff --git a/packages/sdk/packages/access-gate/.npmignore b/packages/sdk/packages/access-gate/.npmignore
new file mode 100644
index 0000000000..5aa6d9852d
--- /dev/null
+++ b/packages/sdk/packages/access-gate/.npmignore
@@ -0,0 +1,18 @@
+*.tsbuildinfo
+.*
+.aws
+.git
+.github
+.pnp.*
+.storybook
+.tsconfig*
+.vscode
+.yarn/*
+cspell.json
+docs
+jest.config.cjs
+jest.config.js
+rollup.config.ts
+storybook-static
+tsconfig*
+yarn.lock
\ No newline at end of file
diff --git a/packages/sdk/packages/access-gate/LICENSE b/packages/sdk/packages/access-gate/LICENSE
new file mode 100644
index 0000000000..0a041280bd
--- /dev/null
+++ b/packages/sdk/packages/access-gate/LICENSE
@@ -0,0 +1,165 @@
+ GNU LESSER GENERAL PUBLIC LICENSE
+ Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc.
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+ This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+ 0. Additional Definitions.
+
+ As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+ "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+ An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+ A "Combined Work" is a work produced by combining or linking an
+Application with the Library. The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+ The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+ The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+ 1. Exception to Section 3 of the GNU GPL.
+
+ You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+ 2. Conveying Modified Versions.
+
+ If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+ a) under this License, provided that you make a good faith effort to
+ ensure that, in the event an Application does not supply the
+ function or data, the facility still operates, and performs
+ whatever part of its purpose remains meaningful, or
+
+ b) under the GNU GPL, with none of the additional permissions of
+ this License applicable to that copy.
+
+ 3. Object Code Incorporating Material from Library Header Files.
+
+ The object code form of an Application may incorporate material from
+a header file that is part of the Library. You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+ a) Give prominent notice with each copy of the object code that the
+ Library is used in it and that the Library and its use are
+ covered by this License.
+
+ b) Accompany the object code with a copy of the GNU GPL and this license
+ document.
+
+ 4. Combined Works.
+
+ You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+ a) Give prominent notice with each copy of the Combined Work that
+ the Library is used in it and that the Library and its use are
+ covered by this License.
+
+ b) Accompany the Combined Work with a copy of the GNU GPL and this license
+ document.
+
+ c) For a Combined Work that displays copyright notices during
+ execution, include the copyright notice for the Library among
+ these notices, as well as a reference directing the user to the
+ copies of the GNU GPL and this license document.
+
+ d) Do one of the following:
+
+ 0) Convey the Minimal Corresponding Source under the terms of this
+ License, and the Corresponding Application Code in a form
+ suitable for, and under terms that permit, the user to
+ recombine or relink the Application with a modified version of
+ the Linked Version to produce a modified Combined Work, in the
+ manner specified by section 6 of the GNU GPL for conveying
+ Corresponding Source.
+
+ 1) Use a suitable shared library mechanism for linking with the
+ Library. A suitable mechanism is one that (a) uses at run time
+ a copy of the Library already present on the user's computer
+ system, and (b) will operate properly with a modified version
+ of the Library that is interface-compatible with the Linked
+ Version.
+
+ e) Provide Installation Information, but only if you would otherwise
+ be required to provide such information under section 6 of the
+ GNU GPL, and only to the extent that such information is
+ necessary to install and execute a modified version of the
+ Combined Work produced by recombining or relinking the
+ Application with a modified version of the Linked Version. (If
+ you use option 4d0, the Installation Information must accompany
+ the Minimal Corresponding Source and Corresponding Application
+ Code. If you use option 4d1, you must provide the Installation
+ Information in the manner specified by section 6 of the GNU GPL
+ for conveying Corresponding Source.)
+
+ 5. Combined Libraries.
+
+ You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+ a) Accompany the combined library with a copy of the same work based
+ on the Library, uncombined with any other library facilities,
+ conveyed under the terms of this License.
+
+ b) Give prominent notice with the combined library that part of it
+ is a work based on the Library, and explaining where to find the
+ accompanying uncombined form of the same work.
+
+ 6. Revised Versions of the GNU Lesser General Public License.
+
+ The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+ Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+ If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.
diff --git a/packages/sdk/packages/access-gate/README.md b/packages/sdk/packages/access-gate/README.md
new file mode 100644
index 0000000000..26f79c30f0
--- /dev/null
+++ b/packages/sdk/packages/access-gate/README.md
@@ -0,0 +1,13 @@
+[![logo][]](https://xyo.network)
+
+Part of [@xyo-network/sdk-xyo-react](https://www.npmjs.com/package/@xyo-network/sdk-xyo-react)
+
+## License
+
+> See the [LICENSE](LICENSE) file for license details
+
+## Credits
+
+[Made with 🔥 and ❄️ by XYO](https://xyo.network)
+
+[logo]: https://cdn.xy.company/img/brand/XYO_full_colored.png
\ No newline at end of file
diff --git a/packages/sdk/packages/access-gate/package.json b/packages/sdk/packages/access-gate/package.json
new file mode 100644
index 0000000000..c66397a8f2
--- /dev/null
+++ b/packages/sdk/packages/access-gate/package.json
@@ -0,0 +1,71 @@
+{
+ "name": "@xyo-network/react-access-gate",
+ "version": "4.0.1",
+ "description": "Common React library for all XYO projects that use React",
+ "keywords": [
+ "xyo",
+ "utility",
+ "typescript",
+ "react"
+ ],
+ "homepage": "https://xyo.network",
+ "bugs": {
+ "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues",
+ "email": "support@xyo.network"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+ },
+ "license": "LGPL-3.0-only",
+ "author": {
+ "name": "XYO Development Team",
+ "email": "support@xyo.network",
+ "url": "https://xyo.network"
+ },
+ "sideEffects": false,
+ "type": "module",
+ "exports": {
+ ".": {
+ "browser": {
+ "types": "./dist/browser/index.d.ts",
+ "default": "./dist/browser/index.mjs"
+ },
+ "types": "./dist/browser/index.d.ts",
+ "default": "./dist/browser/index.mjs"
+ },
+ "./package.json": "./package.json"
+ },
+ "module": "dist/browser/index.mjs",
+ "types": "dist/browser/index.d.ts",
+ "scripts": {
+ "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\"",
+ "lint-pkg": "npmPkgJsonLint ."
+ },
+ "dependencies": {
+ "@mui/icons-material": "^6.1.1",
+ "@xylabs/react-flexbox": "^5.0.1"
+ },
+ "devDependencies": {
+ "@mui/material": "^6.1.1",
+ "@mui/styles": "^6.1.1",
+ "@storybook/react": "^8.3.3",
+ "@xylabs/ts-scripts-yarn3": "^4.0.7",
+ "@xylabs/tsconfig-react": "^4.0.7",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "react-router-dom": "^6.26.2",
+ "storybook": "^8.3.3",
+ "typescript": "^5.6.2"
+ },
+ "peerDependencies": {
+ "@mui/material": "^6",
+ "@mui/styles": "^6",
+ "react": "^18",
+ "react-dom": "^18"
+ },
+ "publishConfig": {
+ "access": "public"
+ },
+ "docs": "dist/docs.json"
+}
diff --git a/packages/sdk/packages/access-gate/src/components/index.ts b/packages/sdk/packages/access-gate/src/components/index.ts
new file mode 100644
index 0000000000..336ce12bb9
--- /dev/null
+++ b/packages/sdk/packages/access-gate/src/components/index.ts
@@ -0,0 +1 @@
+export {}
diff --git a/packages/sdk/packages/access-gate/src/index.ts b/packages/sdk/packages/access-gate/src/index.ts
new file mode 100644
index 0000000000..1bbda2f74c
--- /dev/null
+++ b/packages/sdk/packages/access-gate/src/index.ts
@@ -0,0 +1 @@
+export * from './components/index.ts'
diff --git a/packages/sdk/packages/access-gate/src/types/images.d.ts b/packages/sdk/packages/access-gate/src/types/images.d.ts
new file mode 100644
index 0000000000..e425b8bee8
--- /dev/null
+++ b/packages/sdk/packages/access-gate/src/types/images.d.ts
@@ -0,0 +1,5 @@
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.svg'
+declare module '*.gif'
+declare module '*.webp'
diff --git a/packages/sdk/packages/access-gate/tsconfig.json b/packages/sdk/packages/access-gate/tsconfig.json
new file mode 100644
index 0000000000..09f1830312
--- /dev/null
+++ b/packages/sdk/packages/access-gate/tsconfig.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "moduleResolution": "NodeNext",
+ "module": "NodeNext",
+ "typeRoots": [],
+ },
+ "exclude": ["dist", "docs", "packages", "node_modules"],
+ "extends": "@xylabs/tsconfig-react",
+ "include": ["src"]
+}
\ No newline at end of file
diff --git a/packages/sdk/packages/access-gate/tsconfig.test.json b/packages/sdk/packages/access-gate/tsconfig.test.json
new file mode 100644
index 0000000000..812137caa4
--- /dev/null
+++ b/packages/sdk/packages/access-gate/tsconfig.test.json
@@ -0,0 +1,4 @@
+{
+ "extends": "./tsconfig.json",
+ "include": ["**/*.spec.ts"]
+}
\ No newline at end of file
diff --git a/packages/sdk/packages/access-gate/tsconfig.typedoc.json b/packages/sdk/packages/access-gate/tsconfig.typedoc.json
new file mode 100644
index 0000000000..8e79a613f4
--- /dev/null
+++ b/packages/sdk/packages/access-gate/tsconfig.typedoc.json
@@ -0,0 +1,5 @@
+{
+ "exclude": ["**/spec/*", "**/*.spec.*", "dist", "docs", "packages"],
+ "extends": "./tsconfig.json"
+}
+
diff --git a/packages/sdk/packages/access-gate/typedoc.json b/packages/sdk/packages/access-gate/typedoc.json
new file mode 100644
index 0000000000..8eda4f2661
--- /dev/null
+++ b/packages/sdk/packages/access-gate/typedoc.json
@@ -0,0 +1,5 @@
+{
+ "$schema": "https://typedoc.org/schema.json",
+ "entryPoints": ["src/index.ts"],
+ "tsconfig": "./tsconfig.typedoc.json"
+}
\ No newline at end of file
diff --git a/packages/sdk/packages/access-gate/xy.config.ts b/packages/sdk/packages/access-gate/xy.config.ts
new file mode 100644
index 0000000000..b2084172fd
--- /dev/null
+++ b/packages/sdk/packages/access-gate/xy.config.ts
@@ -0,0 +1,10 @@
+import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
+const config: XyTsupConfig = {
+ compile: {
+ browser: { src: true },
+ node: {},
+ neutral: {},
+ },
+}
+
+export default config
diff --git a/yarn.lock b/yarn.lock
index 3b944b7268..9e2aa0b4ef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7233,6 +7233,30 @@ __metadata:
languageName: node
linkType: hard
+"@xyo-network/react-access-gate@workspace:packages/sdk/packages/access-gate":
+ version: 0.0.0-use.local
+ resolution: "@xyo-network/react-access-gate@workspace:packages/sdk/packages/access-gate"
+ dependencies:
+ "@mui/icons-material": "npm:^6.1.1"
+ "@mui/material": "npm:^6.1.1"
+ "@mui/styles": "npm:^6.1.1"
+ "@storybook/react": "npm:^8.3.3"
+ "@xylabs/react-flexbox": "npm:^5.0.1"
+ "@xylabs/ts-scripts-yarn3": "npm:^4.0.7"
+ "@xylabs/tsconfig-react": "npm:^4.0.7"
+ react: "npm:^18.3.1"
+ react-dom: "npm:^18.3.1"
+ react-router-dom: "npm:^6.26.2"
+ storybook: "npm:^8.3.3"
+ typescript: "npm:^5.6.2"
+ peerDependencies:
+ "@mui/material": ^6
+ "@mui/styles": ^6
+ react: ^18
+ react-dom: ^18
+ languageName: unknown
+ linkType: soft
+
"@xyo-network/react-address-history@workspace:^, @xyo-network/react-address-history@workspace:packages/sdk/packages/address/packages/history":
version: 0.0.0-use.local
resolution: "@xyo-network/react-address-history@workspace:packages/sdk/packages/address/packages/history"
From 720a46ee9ae0dadb1243b3aa8a081002b8cc7ced Mon Sep 17 00:00:00 2001
From: Matt Jones <885417+jonesmac@users.noreply.github.com>
Date: Mon, 7 Oct 2024 15:34:54 -0400
Subject: [PATCH 2/2] port over access code components and add story
---
.../AccessCodeGateFlexbox.stories.tsx | 42 ++++++++
.../src/components/AccessCodeGateFlexbox.tsx | 99 +++++++++++++++++++
.../src/components/CodeTextField.tsx | 45 +++++++++
.../access-gate/src/components/index.ts | 2 +-
packages/sdk/src/index.ts | 1 +
5 files changed, 188 insertions(+), 1 deletion(-)
create mode 100644 packages/sdk/packages/access-gate/src/components/AccessCodeGateFlexbox.stories.tsx
create mode 100644 packages/sdk/packages/access-gate/src/components/AccessCodeGateFlexbox.tsx
create mode 100644 packages/sdk/packages/access-gate/src/components/CodeTextField.tsx
diff --git a/packages/sdk/packages/access-gate/src/components/AccessCodeGateFlexbox.stories.tsx b/packages/sdk/packages/access-gate/src/components/AccessCodeGateFlexbox.stories.tsx
new file mode 100644
index 0000000000..ccc90af453
--- /dev/null
+++ b/packages/sdk/packages/access-gate/src/components/AccessCodeGateFlexbox.stories.tsx
@@ -0,0 +1,42 @@
+import { Alert, Typography } from '@mui/material'
+import type { Meta, StoryFn } from '@storybook/react'
+import { FlexCol } from '@xylabs/react-flexbox'
+import React, { useState } from 'react'
+
+import { AccessCodeGateFlexbox } from './AccessCodeGateFlexbox.tsx'
+
+export default {
+ component: AccessCodeGateFlexbox,
+ title: 'access/AccessCodeGateFlexbox',
+} as Meta
+
+const Template: StoryFn = args => (
+
+)
+
+const TemplateWithAccessCodes: StoryFn = (args) => {
+ const validAccessCodes = ['100519']
+ const [validated, setValidated] = useState(false)
+ const onAccessCodeSuccess = () => {
+ setValidated(true)
+ }
+ const validateFunction = (code?: string) => code?.length === 6
+
+ return validated
+ ? Success!
+ : (
+
+
+ Hint: 100519
+
+ )
+}
+
+const Default = Template.bind({})
+const WithAccessCodes = TemplateWithAccessCodes.bind({})
+
+export { Default, WithAccessCodes }
diff --git a/packages/sdk/packages/access-gate/src/components/AccessCodeGateFlexbox.tsx b/packages/sdk/packages/access-gate/src/components/AccessCodeGateFlexbox.tsx
new file mode 100644
index 0000000000..dee766eb31
--- /dev/null
+++ b/packages/sdk/packages/access-gate/src/components/AccessCodeGateFlexbox.tsx
@@ -0,0 +1,99 @@
+/* eslint-disable @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
+import { FormControl } from '@mui/material'
+import { ButtonEx } from '@xylabs/react-button'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'
+import type { WithChildren } from '@xylabs/react-shared'
+import React, {
+ useCallback, useEffect, useState,
+} from 'react'
+
+import { CodeTextField } from './CodeTextField.tsx'
+
+export interface AccessCodeGateFlexbox extends WithChildren, FlexBoxProps {
+ onAccessCodeSuccess?: (code?: string) => void
+ textFieldHelperText?: string
+ userAccessCodes?: string[]
+ validAccessCodes?: string[]
+ validateFunction?: (codeInput?: string) => boolean
+}
+
+export const AccessCodeGateFlexbox: React.FC = ({
+ children,
+ onAccessCodeSuccess,
+ userAccessCodes,
+ validAccessCodes,
+ validateFunction,
+ ...props
+}) => {
+ const [initialized, setInitialized] = useState(false)
+ const [accessGranted, setAccessGranted] = useState(false)
+ const [codeInput, setCodeInput] = useState()
+ const [validCode, setValidCode] = useState(null)
+
+ const disabled = validateFunction ? !validateFunction(codeInput) : !codeInput
+ const validateCode = useCallback((accessCode: string) => (accessCode ? validAccessCodes?.includes(accessCode) : false), [validAccessCodes])
+
+ const onEnter = () => {
+ if (codeInput) {
+ const granted = validateCode(codeInput)
+ if (granted) {
+ setValidCode(true)
+ // delay success callback to ensure the ui shows success before next action
+ setTimeout(() => {
+ setAccessGranted(granted)
+ onAccessCodeSuccess?.(codeInput)
+ }, 1500)
+ } else {
+ setValidCode(false)
+ }
+ }
+ }
+
+ useEffect(() => {
+ // whenever a code changes, reset the success/failure warning
+ setValidCode(null)
+ }, [codeInput])
+
+ useEffect(() => {
+ if (userAccessCodes) {
+ const granted = userAccessCodes.some(code => validateCode(code))
+ setAccessGranted(granted)
+ if (granted) {
+ onAccessCodeSuccess?.()
+ }
+ }
+ setInitialized(true)
+ }, [onAccessCodeSuccess, userAccessCodes, validateCode])
+
+ return (
+ <>
+ {initialized
+ ? accessGranted
+ ? children
+ : (
+
+
+
+
+
+
+
+ Enter
+
+
+
+
+ )
+
+ : null}
+ >
+ )
+}
diff --git a/packages/sdk/packages/access-gate/src/components/CodeTextField.tsx b/packages/sdk/packages/access-gate/src/components/CodeTextField.tsx
new file mode 100644
index 0000000000..888053f40d
--- /dev/null
+++ b/packages/sdk/packages/access-gate/src/components/CodeTextField.tsx
@@ -0,0 +1,45 @@
+import { CheckCircleOutline, ErrorOutline } from '@mui/icons-material'
+import type { TextFieldProps } from '@mui/material'
+import {
+ InputAdornment, styled, TextField,
+} from '@mui/material'
+import type { Dispatch, SetStateAction } from 'react'
+import React from 'react'
+
+export type CodeTextFieldProps = TextFieldProps & {
+ codeInput?: string
+ disabled?: boolean
+ onEnter?: () => void
+ setCodeInput?: Dispatch>
+ validCode?: boolean | null
+}
+
+export const CodeTextField: React.FC = ({
+ codeInput, disabled, onEnter, setCodeInput, validCode, ...props
+}) => (
+
+ {/* Having a display block element for all 3 states (null, false, true) means the icon coming in and out
+ does not affect the overall width */}
+
+
+
+
+ ),
+ }}
+ onKeyUp={event => (event.key === 'Enter' && !disabled ? onEnter?.() : null)}
+ autoFocus
+ size="small"
+ value={codeInput ?? ''}
+ onChange={event => setCodeInput?.(event.target.value)}
+ {...props}
+ />
+)
+
+const StyledTextField = styled(TextField, { name: 'StyledTextField' })(() => ({ '& .MuiInputBase-root': { paddingRight: 0 } }))
diff --git a/packages/sdk/packages/access-gate/src/components/index.ts b/packages/sdk/packages/access-gate/src/components/index.ts
index 336ce12bb9..08dd45ed50 100644
--- a/packages/sdk/packages/access-gate/src/components/index.ts
+++ b/packages/sdk/packages/access-gate/src/components/index.ts
@@ -1 +1 @@
-export {}
+export * from './AccessCodeGateFlexbox.tsx'
diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts
index a557c890ca..ca7d223b7e 100644
--- a/packages/sdk/src/index.ts
+++ b/packages/sdk/src/index.ts
@@ -1,3 +1,4 @@
+export * from '@xyo-network/react-access-gate'
export * from '@xyo-network/react-address'
export * from '@xyo-network/react-app-settings'
export * from '@xyo-network/react-appbar'