@multiplatform.one/web3 5.0.28 → 5.1.0

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

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1,37 @@
+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/gpg/GpgContext.tsx

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,131 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,57 @@
+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/useModal.ts

@@ -18,8 +18,15 @@ const safeRoutes: {
     routes.ONBOARDING,
     routes.MOBILECONNECTORS,
     routes.ONBOARDING,
+    // GPG has no connect step — it's valid in both connected and disconnected states.
+    routes.SIGNINWITHGPG,
+  ],
+  connected: [
+    routes.PROFILE,
+    routes.SWITCHNETWORKS,
+    routes.SIGNINWITHETHEREUM,
+    routes.SIGNINWITHGPG,
   ],
-  connected: [routes.PROFILE, routes.SWITCHNETWORKS, routes.SIGNINWITHETHEREUM],
 };
 const allRoutes: ModalRoutes[] = [
   ...safeRoutes.connected,
@@ -97,5 +104,7 @@ export const useModal = ({ onConnect, onDisconnect }: UseModalProps = {}) => {
       gotoAndOpen(routes.SIGNINWITHETHEREUM);
       if (triggerSIWE) signIn();
     },
+    // Open the SAME modal straight to the GPG screen — no wallet connect step.
+    openGpg: () => gotoAndOpen(routes.SIGNINWITHGPG),
   };
 };

package/src/connectkit/index.ts

@@ -14,9 +14,20 @@ export {
 } from './siwe';
 export type { SIWESession, SIWEConfig } from './siwe';
 
+// Sign-In With GPG (SIWG) — a separate, connection-free signer that opens the SAME
+// modal to a GPG screen. Pulls in NO wagmi/viem; destined for a standalone gpg package.
+export {
+  GpgProvider,
+  useGpg,
+  GpgStatusState,
+  GPG_NONCE_QUERY_KEY,
+} from './gpg';
+export type { GpgConfig } from './gpg';
+
 export { ConnectKitProvider, Context } from './components/ConnectKit';
 export { ConnectKitButton } from './components/ConnectButton';
 export { default as SIWEButton } from './components/Standard/SIWE';
+export { default as SignInWithGpgButton } from './components/Standard/GPG';
 
 //export { default as NetworkButton } from './components/NetworkButton';
 //export { default as BalanceButton, Balance } from './components/BalanceButton';