@multiplatform.one/web3 5.1.0 → 6.0.0

package/src/connectkit/components/Pages/SignInWithGpg/index.tsx

@@ -1,102 +0,0 @@
-import React, { CSSProperties, useState } from 'react';
-
-import { useContext } from '../../ConnectKit';
-import { PageContent, ModalBody, ModalContent } from '../../Common/Modal/styles';
-import Button from '../../Common/Button';
-import CopyToClipboard from '../../Common/CopyToClipboard';
-import { useGpg } from '../../../gpg';
-
-// Sign-In With GPG screen: a connection-free, copy/paste flow rendered inside the SAME
-// ConnectKit modal as the wallet screens. Reads everything from useGpg() (the consumer's
-// GpgProvider supplies the backend-specific getNonce/onSign) — no keycloak knowledge here.
-const textarea: CSSProperties = {
-  width: '100%',
-  boxSizing: 'border-box',
-  fontFamily: 'var(--ck-font-family, monospace)',
-  fontSize: 11,
-  lineHeight: 1.4,
-  padding: 8,
-  borderRadius: 'var(--ck-primary-button-border-radius, 12px)',
-  border: '1px solid var(--ck-body-divider, #d3d3d3)',
-  background: 'var(--ck-body-background-secondary, #f6f7f9)',
-  color: 'var(--ck-body-color, inherit)',
-  resize: 'vertical',
-};
-const label: CSSProperties = {
-  textAlign: 'left',
-  fontSize: 14,
-  fontWeight: 500,
-  margin: '4px 0',
-};
-
-const SignInWithGpg: React.FC = () => {
-  const context = useContext();
-  const { message, command, signIn, isLoading, isReady } = useGpg();
-  const [pasted, setPasted] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [busy, setBusy] = useState(false);
-
-  const onSubmit = async () => {
-    setError(null);
-    setBusy(true);
-    try {
-      await signIn(pasted);
-      // A keycloak browser login navigates away; for API consumers, close the modal.
-      setTimeout(() => context.setOpen(false), 1000);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'GPG sign-in failed');
-      setBusy(false);
-    }
-  };
-
-  return (
-    <PageContent style={{ width: 320 }}>
-      <ModalContent style={{ paddingBottom: 8, gap: 6 }}>
-        <ModalBody style={label}>1. Sign the challenge in your terminal:</ModalBody>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-          <CopyToClipboard variant="button" string={command ?? ''}>
-            Copy gpg command
-          </CopyToClipboard>
-          <CopyToClipboard variant="button" string={message ?? ''}>
-            Copy message only
-          </CopyToClipboard>
-        </div>
-        <textarea
-          readOnly
-          rows={4}
-          value={message ?? (isLoading ? 'Loading challenge…' : '')}
-          style={textarea}
-        />
-        <ModalBody style={label}>2. Paste the full output below:</ModalBody>
-        <textarea
-          rows={6}
-          value={pasted}
-          onChange={(e) => setPasted(e.target.value)}
-          placeholder="-----BEGIN PGP SIGNATURE----- … and your -----BEGIN PGP PUBLIC KEY BLOCK-----"
-          style={textarea}
-        />
-        <Button
-          onClick={onSubmit}
-          disabled={!isReady || !pasted || busy}
-          waiting={busy}
-          arrow
-        >
-          Sign in
-        </Button>
-        {error && (
-          <ModalBody
-            style={{
-              color: 'var(--ck-body-color-danger, #c9190b)',
-              fontSize: 13,
-              textAlign: 'left',
-            }}
-          >
-            {error}
-          </ModalBody>
-        )}
-      </ModalContent>
-    </PageContent>
-  );
-};
-
-export default SignInWithGpg;

package/src/connectkit/components/Standard/GPG/index.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import Button from '../../Common/Button';
-import { ResetContainer } from '../../../styles';
-import { useModal } from '../../../hooks/useModal';
-
-// Standalone trigger for the GPG flow. GPG is NOT a wallet connector — there is nothing
-// to connect first — so this button simply opens the SAME modal straight to the GPG
-// screen (no connect step), mirroring how the SIWE button opens its screen.
-type ButtonProps = {
-  children?: React.ReactNode;
-};
-
-export const GPGButton: React.FC<ButtonProps> = ({ children }) => {
-  const { openGpg } = useModal();
-  return (
-    <Button
-      key="button"
-      style={{ margin: 0 }}
-      arrow
-      // preventDefault so we never submit a surrounding host <form> (e.g. keycloak's
-      // login form) — the underlying styled button can render as type=submit.
-      onClick={(e?: { preventDefault?: () => void }) => {
-        e?.preventDefault?.();
-        openGpg();
-      }}
-    >
-      {children ?? 'Sign in with GPG'}
-    </Button>
-  );
-};
-
-const GPGButtonComponent: React.FC<ButtonProps> = ({ ...props }) => (
-  <ResetContainer>
-    <GPGButton {...props} />
-  </ResetContainer>
-);
-export default GPGButtonComponent;

package/src/connectkit/constants/defaultTheme.ts

@@ -1,3 +0,0 @@
-export default {
-  mobileWidth: 560,
-};

package/src/connectkit/gpg/GpgContext.tsx

@@ -1,49 +0,0 @@
-import { createContext } from 'react';
-import { useQuery } from '@tanstack/react-query';
-
-// Sign-In With GPG (SIWG) is a SEPARATE, connection-free signer: unlike a wallet
-// there is nothing to "connect" first — the user signs a challenge in their terminal
-// and pastes the result back. This module deliberately pulls in NO wagmi/viem, so it
-// can later move into a standalone `@multiplatform.one/gpg` package on top of connectkit.
-
-export enum GpgStatusState {
-  READY = 'ready',
-  LOADING = 'loading',
-  SUCCESS = 'success',
-  ERROR = 'error',
-}
-
-export type GpgConfig = {
-  // Required: fetch a fresh nonce from the backend (e.g. keycloak /realms/<realm>/siww/nonce).
-  getNonce: () => Promise<string>;
-  // Required: submit the signed credential. The screen produces
-  //   username = base64(armoredSignature + armoredPublicKey)
-  //   password = base64(message)
-  // For a keycloak browser login this writes the login form and submits it (the page
-  // then navigates); an API consumer may POST and return a boolean instead.
-  onSign: (cred: {
-    username: string;
-    password: string;
-    message: string;
-  }) => Promise<boolean | void> | boolean | void;
-
-  // Optional: override the challenge message (default = the standard SIWG message).
-  buildMessage?: (args: { nonce: string }) => string;
-  enabled?: boolean;
-  nonceRefetchInterval?: number;
-};
-
-export type GpgContextValue = Required<
-  Pick<GpgConfig, 'getNonce' | 'onSign' | 'enabled' | 'nonceRefetchInterval'>
-> & {
-  buildMessage?: GpgConfig['buildMessage'];
-  nonce: ReturnType<typeof useQuery<string | null>>;
-  // Derived from the nonce — what the user copies/signs, and the ready-to-run command.
-  message: string | null;
-  command: string | null;
-  status: GpgStatusState;
-  signIn: (pastedBlob: string) => Promise<boolean>;
-  resetStatus: () => void;
-};
-
-export const GpgContext = createContext<GpgContextValue | null>(null);

package/src/connectkit/gpg/GpgProvider.tsx

@@ -1,131 +0,0 @@
-import { ReactNode, useContext, useMemo, useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
-
-import { Context as ConnectKitContext } from '../components/ConnectKit';
-import { GpgContext, GpgConfig, GpgStatusState } from './GpgContext';
-
-type Props = GpgConfig & {
-  children: ReactNode;
-  onSignIn?: () => void;
-};
-
-export const GPG_NONCE_QUERY_KEY = 'ckGpgNonce';
-
-// UTF-8-safe base64 — the server decodes with new String(decoder.decode(...), UTF_8),
-// so plain btoa would corrupt non-ASCII. Must keep the unescape(encodeURIComponent()).
-const b64 = (s: string) => window.btoa(unescape(encodeURIComponent(s)));
-
-// The default SIWG challenge. Only the header line (domain) and the Nonce line are
-// load-bearing per the server's GpgMessage grammar; the rest is a cosmetic envelope.
-function defaultBuildMessage({ nonce }: { nonce: string }): string {
-  return (
-    `${window.location.host} wants you to sign in with your GPG key.\n\n` +
-    `URI: ${window.location.origin}\n` +
-    `Version: 1\n` +
-    `Nonce: ${nonce}\n` +
-    `Issued At: ${new Date().toISOString()}`
-  );
-}
-
-export const GpgProvider = ({
-  children,
-  enabled = true,
-  nonceRefetchInterval = 1000 * 60 * 5,
-  buildMessage,
-  onSignIn,
-  ...gpgConfig
-}: Props) => {
-  const [status, setStatus] = useState<GpgStatusState>(GpgStatusState.READY);
-  const resetStatus = () => setStatus(GpgStatusState.READY);
-
-  // Mirror SIWEProvider's guards: single instance, and mounted OUTSIDE ConnectKitProvider
-  // so the modal's GPG screen can read this context.
-  if (useContext(GpgContext)) {
-    throw new Error(
-      'Multiple, nested usages of GpgProvider detected. Please use only one.'
-    );
-  }
-  if (useContext(ConnectKitContext)) {
-    throw new Error('ConnectKitProvider must be mounted inside GpgProvider.');
-  }
-
-  const nonce = useQuery({
-    queryKey: [GPG_NONCE_QUERY_KEY],
-    queryFn: () => gpgConfig.getNonce(),
-    refetchInterval: nonceRefetchInterval,
-  });
-
-  // Compute the challenge ONCE per nonce (it embeds an Issued At timestamp); recomputing
-  // on every render would desync the displayed/copied message from the one base64'd into
-  // `password`, breaking the signature (which is verified over the exact message bytes).
-  const message = useMemo(
-    () =>
-      nonce.data
-        ? (buildMessage ?? defaultBuildMessage)({ nonce: nonce.data })
-        : null,
-    [nonce.data, buildMessage]
-  );
-  // The ready-to-run terminal command: detached armored signature + the exported public
-  // key, concatenated — exactly the blob the user pastes back. printf %s (no newline) so
-  // the signed bytes are byte-identical to `message`.
-  const command = useMemo(
-    () =>
-      message
-        ? `{ printf %s '${message}' | gpg --detach-sign --armor; gpg --armor --export; }`
-        : null,
-    [message]
-  );
-
-  const signIn = async (pastedBlob: string): Promise<boolean> => {
-    const blob = pastedBlob.trim();
-    if (
-      !blob.includes('-----BEGIN PGP SIGNATURE-----') ||
-      !blob.includes('-----BEGIN PGP PUBLIC KEY BLOCK-----')
-    ) {
-      setStatus(GpgStatusState.ERROR);
-      throw new Error(
-        'Paste the FULL output — it must contain both a PGP SIGNATURE and a PUBLIC KEY block.'
-      );
-    }
-    if (!message) {
-      setStatus(GpgStatusState.ERROR);
-      throw new Error('Could not fetch nonce');
-    }
-    try {
-      setStatus(GpgStatusState.LOADING);
-      // username = base64(signature + public key), password = base64(message).
-      const result = await gpgConfig.onSign({
-        username: b64(blob),
-        password: b64(message),
-        message,
-      });
-      // A keycloak browser login navigates away here; an API consumer returns a boolean.
-      if (result === false) throw new Error('GPG sign-in was rejected');
-      setStatus(GpgStatusState.SUCCESS);
-      onSignIn?.();
-      return true;
-    } catch (error) {
-      setStatus(GpgStatusState.ERROR);
-      throw error;
-    }
-  };
-
-  return (
-    <GpgContext.Provider
-      value={{
-        enabled,
-        nonceRefetchInterval,
-        buildMessage,
-        ...gpgConfig,
-        nonce,
-        message,
-        command,
-        status,
-        signIn,
-        resetStatus,
-      }}
-    >
-      {children}
-    </GpgContext.Provider>
-  );
-};

package/src/connectkit/gpg/index.ts

@@ -1,4 +0,0 @@
-export { useGpg } from './useGpg';
-export { GpgProvider, GPG_NONCE_QUERY_KEY } from './GpgProvider';
-export { GpgContext, GpgStatusState } from './GpgContext';
-export type { GpgConfig, GpgContextValue } from './GpgContext';

package/src/connectkit/gpg/useGpg.ts

@@ -1,57 +0,0 @@
-import { useContext } from 'react';
-import { GpgContext, GpgStatusState } from './GpgContext';
-
-type HookProps = {
-  // What the GPG screen renders:
-  message: string | null; // the challenge to copy/sign
-  command: string | null; // the ready-to-run terminal command
-  // State:
-  status: GpgStatusState;
-  error?: Error | any;
-  isLoading: boolean;
-  isSuccess: boolean;
-  isError: boolean;
-  isReady: boolean;
-  // Actions:
-  signIn: (pastedBlob: string) => Promise<boolean>;
-  reset: () => void;
-};
-
-// Consumer-facing hook. Degrades gracefully (returns a disabled shape) when no
-// GpgProvider is mounted, so non-GPG apps don't crash — same contract as useSIWE.
-export const useGpg = (): HookProps | any => {
-  const gpg = useContext(GpgContext);
-  if (!gpg) {
-    return {
-      message: null,
-      command: null,
-      status: GpgStatusState.ERROR,
-      error: new Error('useGpg hook must be inside a GpgProvider.'),
-      isLoading: false,
-      isSuccess: false,
-      isError: true,
-      isReady: false,
-      signIn: () => Promise.reject(),
-      reset: () => {},
-    };
-  }
-
-  const { nonce, message, command, status, signIn, resetStatus } = gpg;
-  const isLoading = status === GpgStatusState.LOADING || nonce.isLoading;
-  const isSuccess = status === GpgStatusState.SUCCESS;
-  const isError = status === GpgStatusState.ERROR;
-  const isReady = !!message && !isLoading;
-
-  return {
-    message,
-    command,
-    status,
-    error: nonce.error,
-    isLoading,
-    isSuccess,
-    isError,
-    isReady,
-    signIn,
-    reset: () => resetStatus(),
-  };
-};

package/src/connectkit/hooks/useFitText.tsx

@@ -1,188 +0,0 @@
-// https://github.com/saltycrane/use-fit-text
-
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-import ResizeObserver from 'resize-observer-polyfill';
-
-export type TLogLevel = 'debug' | 'info' | 'warn' | 'error' | 'none';
-
-export type TOptions = {
-  logLevel?: TLogLevel;
-  maxFontSize?: number;
-  minFontSize?: number;
-  onFinish?: (fontSize: number) => void;
-  onStart?: () => void;
-  resolution?: number;
-};
-
-const LOG_LEVEL: Record<TLogLevel, number> = {
-  debug: 10,
-  info: 20,
-  warn: 30,
-  error: 40,
-  none: 100,
-};
-
-// Suppress `useLayoutEffect` warning when rendering on the server
-// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
-const useIsoLayoutEffect =
-  typeof window !== 'undefined' &&
-  window.document &&
-  window.document.createElement !== undefined
-    ? useLayoutEffect
-    : useEffect;
-
-const useFitText = ({
-  logLevel: logLevelOption = 'info',
-  maxFontSize = 100,
-  minFontSize = 20,
-  onFinish,
-  onStart,
-  resolution = 5,
-}: TOptions = {}) => {
-  const logLevel = LOG_LEVEL[logLevelOption];
-
-  const initState = useCallback(() => {
-    return {
-      calcKey: 0,
-      fontSize: maxFontSize,
-      fontSizePrev: minFontSize,
-      fontSizeMax: maxFontSize,
-      fontSizeMin: minFontSize,
-    };
-  }, [maxFontSize, minFontSize]);
-
-  const ref = useRef<HTMLDivElement>(null);
-  const innerHtmlPrevRef = useRef<string | null>(null);
-  const isCalculatingRef = useRef(false);
-  const [state, setState] = useState(initState);
-  const { calcKey, fontSize, fontSizeMax, fontSizeMin, fontSizePrev } = state;
-
-  // Montior div size changes and recalculate on resize
-  let animationFrameId: number | null = null;
-  const [ro] = useState(
-    () =>
-      new ResizeObserver(() => {
-        animationFrameId = window.requestAnimationFrame(() => {
-          if (isCalculatingRef.current) {
-            return;
-          }
-          onStart && onStart();
-          isCalculatingRef.current = true;
-          // `calcKey` is used in the dependencies array of
-          // `useIsoLayoutEffect` below. It is incremented so that the font size
-          // will be recalculated even if the previous state didn't change (e.g.
-          // when the text fit initially).
-          setState({
-            ...initState(),
-            calcKey: calcKey + 1,
-          });
-        });
-      })
-  );
-
-  useEffect(() => {
-    if (ref.current) {
-      ro.observe(ref.current);
-    }
-    return () => {
-      animationFrameId && window.cancelAnimationFrame(animationFrameId);
-      ro.disconnect();
-    };
-  }, [animationFrameId, ro]);
-
-  // Recalculate when the div contents change
-  const innerHtml = ref.current && ref.current.innerHTML;
-  useEffect(() => {
-    if (calcKey === 0 || isCalculatingRef.current) return;
-
-    if (innerHtml !== innerHtmlPrevRef.current) {
-      onStart && onStart();
-      setState({
-        ...initState(),
-        calcKey: calcKey + 1,
-      });
-    }
-    innerHtmlPrevRef.current = innerHtml;
-  }, [calcKey, initState, innerHtml, onStart]);
-
-  // Check overflow and resize font
-  useIsoLayoutEffect(() => {
-    // Don't start calculating font size until the `resizeKey` is incremented
-    // above in the `ResizeObserver` callback. This avoids an extra resize
-    // on initialization.
-    if (calcKey === 0) {
-      return;
-    }
-
-    const isWithinResolution = Math.abs(fontSize - fontSizePrev) <= resolution;
-    const isOverflow =
-      !!ref.current &&
-      (ref.current.scrollHeight > ref.current.offsetHeight ||
-        ref.current.scrollWidth > ref.current.offsetWidth);
-    const isFailed = isOverflow && fontSize === fontSizePrev;
-    const isAsc = fontSize > fontSizePrev;
-
-    // Return if the font size has been adjusted "enough" (change within `resolution`)
-    // reduce font size by one increment if it's overflowing.
-    if (isWithinResolution) {
-      if (isFailed) {
-        isCalculatingRef.current = false;
-        if (logLevel <= LOG_LEVEL.info) {
-          console.info(
-            `[use-fit-text] reached \`minFontSize = ${minFontSize}\` without fitting text`
-          );
-        }
-      } else if (isOverflow) {
-        setState({
-          fontSize: isAsc ? fontSizePrev : fontSizeMin,
-          fontSizeMax,
-          fontSizeMin,
-          fontSizePrev,
-          calcKey,
-        });
-      } else {
-        isCalculatingRef.current = false;
-        onFinish && onFinish(fontSize);
-      }
-      return;
-    }
-
-    // Binary search to adjust font size
-    let delta: number;
-    let newMax = fontSizeMax;
-    let newMin = fontSizeMin;
-    if (isOverflow) {
-      delta = isAsc ? fontSizePrev - fontSize : fontSizeMin - fontSize;
-      newMax = Math.min(fontSizeMax, fontSize);
-    } else {
-      delta = isAsc ? fontSizeMax - fontSize : fontSizePrev - fontSize;
-      newMin = Math.max(fontSizeMin, fontSize);
-    }
-    setState({
-      calcKey,
-      fontSize: fontSize + delta / 2,
-      fontSizeMax: newMax,
-      fontSizeMin: newMin,
-      fontSizePrev: fontSize,
-    });
-  }, [
-    calcKey,
-    fontSize,
-    fontSizeMax,
-    fontSizeMin,
-    fontSizePrev,
-    onFinish,
-    ref,
-    resolution,
-  ]);
-
-  return { fontSize, ref };
-};
-
-export default useFitText;

package/src/connectkit/hooks/useFocusTrap.tsx

@@ -1,71 +0,0 @@
-// Based on https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element
-
-import { useRef, useEffect } from 'react';
-
-const KEYCODE_TAB = 9;
-
-function useFocusTrap() {
-  const elRef = useRef<any>(null);
-
-  function handleFocus(e: any) {
-    if (!elRef.current) return;
-    var focusableEls = elRef.current.querySelectorAll(`
-        a[href]:not(:disabled),
-        button:not(:disabled),
-        textarea:not(:disabled),
-        input[type="text"]:not(:disabled),
-        input[type="radio"]:not(:disabled),
-        input[type="checkbox"]:not(:disabled),
-        select:not(:disabled)
-      `),
-      firstFocusableEl = focusableEls[0],
-      lastFocusableEl = focusableEls[focusableEls.length - 1];
-
-    var isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
-
-    if (!isTabPressed) {
-      return;
-    }
-
-    if (e.shiftKey) {
-      /* shift + tab */ if (document.activeElement === firstFocusableEl) {
-        lastFocusableEl.focus();
-        e.preventDefault();
-      }
-    } /* tab */ else {
-      if (document.activeElement === lastFocusableEl) {
-        firstFocusableEl.focus();
-        e.preventDefault();
-      }
-    }
-  }
-
-  useEffect(() => {
-    if (elRef.current) {
-      elRef.current.addEventListener('keydown', handleFocus);
-      elRef.current.focus({ preventScroll: true });
-    }
-    return () => {
-      if (elRef.current) {
-        elRef.current.removeEventListener('keydown', handleFocus);
-      }
-    };
-  }, []);
-
-  return elRef;
-}
-
-export default function FocusTrap(props: any) {
-  const elRef = useFocusTrap();
-
-  useEffect(() => {
-    if (!elRef.current) return;
-    elRef.current.focus({ preventScroll: true });
-  }, []);
-
-  return (
-    <div ref={elRef} tabIndex={0}>
-      {props.children}
-    </div>
-  );
-}

package/src/connectkit/hooks/useGoogleFont.tsx

@@ -1,44 +0,0 @@
-import { useEffect } from 'react';
-import { Theme } from '../types';
-
-export function useGoogleFont(font: string) {
-  useEffect(() => {
-    if (!font) return;
-    font = font.replace(/ /g, '+');
-
-    const googleapis = document.createElement('link');
-    googleapis.href = `https://fonts.googleapis.com`;
-    googleapis.rel = 'preconnect';
-
-    const gstatic = document.createElement('link');
-    gstatic.href = `https://fonts.gstatic.com`;
-    gstatic.rel = 'preconnect';
-    gstatic.crossOrigin = 'true';
-
-    const link = document.createElement('link');
-    link.href = `https://fonts.googleapis.com/css2?family=${font}:wght@400;500;600&display=swap`;
-    link.rel = 'stylesheet';
-
-    document.head.appendChild(googleapis);
-    document.head.appendChild(gstatic);
-    document.head.appendChild(link);
-    return () => {
-      document.head.removeChild(googleapis);
-      document.head.removeChild(gstatic);
-      document.head.removeChild(link);
-    };
-  }, [font]);
-}
-
-// TODO: This could be dynamic if theming wasn't set up as css variables
-export function useThemeFont(theme: Theme) {
-  const themeFonts: any = {
-    web95: 'Lato',
-    retro: 'Nunito',
-    midnight: 'Inter',
-    minimal: 'Inter',
-    rounded: 'Nunito',
-  };
-  const font: string = themeFonts[theme] ?? null;
-  useGoogleFont(font ?? '');
-}