@moveindustries/wallet-adapter-react 7.2.2

package/src/components/AboutPetraWeb.tsx

@@ -0,0 +1,63 @@
+// TODO: Re-enable when Movement supports social sign-in (Petra Web)
+// This is a stub component that just renders children - social sign-in education screens are disabled
+
+import {
+  ForwardRefExoticComponent,
+  ReactNode,
+  RefAttributes,
+  SVGProps,
+} from "react";
+import { HeadlessComponentProps, createHeadlessComponent } from "./utils";
+
+/** @deprecated Social sign-in disabled */
+export const EXPLORE_ECOSYSTEM_URL = "https://movementlabs.xyz/ecosystem";
+
+/** @deprecated Social sign-in disabled */
+export interface AboutPetraWebEducationScreen {
+  Graphic: ForwardRefExoticComponent<
+    Omit<SVGProps<SVGSVGElement>, "ref"> & RefAttributes<SVGSVGElement>
+  >;
+  Title: ForwardRefExoticComponent<
+    HeadlessComponentProps & RefAttributes<HTMLHeadingElement>
+  >;
+  Description: ForwardRefExoticComponent<
+    HeadlessComponentProps & RefAttributes<HTMLParagraphElement>
+  >;
+  screenIndex: number;
+  totalScreens: number;
+  screenIndicators: ForwardRefExoticComponent<HeadlessComponentProps & RefAttributes<HTMLButtonElement>>[];
+  back: () => void;
+  next: () => void;
+  cancel: () => void;
+}
+
+/** @deprecated Social sign-in disabled */
+export interface AboutPetraWebProps {
+  renderEducationScreen: (screen: AboutPetraWebEducationScreen) => ReactNode;
+  children?: ReactNode;
+}
+
+/**
+ * @deprecated Social sign-in disabled - this component just renders children without any education screens
+ */
+const Root = ({ children }: AboutPetraWebProps) => {
+  return <>{children}</>;
+};
+Root.displayName = "AboutPetraWeb";
+
+const Trigger = createHeadlessComponent(
+  "AboutPetraWeb.Trigger",
+  "button",
+  () => ({
+    // No-op since social sign-in is disabled
+    onClick: () => {},
+    style: { display: "none" },
+  }),
+);
+
+/**
+ * @deprecated Social sign-in disabled - this component just renders children
+ */
+export const AboutPetraWeb = Object.assign(Root, {
+  Trigger,
+});

package/src/components/MovementPrivacyPolicy.tsx

@@ -0,0 +1,44 @@
+import { forwardRef } from "react";
+import { SmallMovementLogo } from "../graphics/SmallMovementLogo";
+import { HeadlessComponentProps, createHeadlessComponent } from "./utils";
+
+export const MOVEMENT_PRIVACY_POLICY_URL = "https://movementlabs.xyz/privacy";
+
+const Root = createHeadlessComponent("MovementPrivacyPolicy.Root", "div");
+
+const Disclaimer = createHeadlessComponent(
+  "MovementPrivacyPolicy.Disclaimer",
+  "span",
+  { children: "By continuing, you agree to Movement Labs'" },
+);
+
+const Link = createHeadlessComponent("MovementPrivacyPolicy.Disclaimer", "a", {
+  href: MOVEMENT_PRIVACY_POLICY_URL,
+  target: "_blank",
+  rel: "noopener noreferrer",
+  children: "Privacy Policy",
+});
+
+const PoweredBy = forwardRef<
+  HTMLDivElement,
+  Pick<HeadlessComponentProps, "className">
+>(({ className }, ref) => {
+  return (
+    <div ref={ref} className={className}>
+      <span>Powered by</span>
+      <SmallMovementLogo />
+      <span>Movement Labs</span>
+    </div>
+  );
+});
+PoweredBy.displayName = "MovementPrivacyPolicy.PoweredBy";
+
+/**
+ * A headless component for rendering the Movement Labs privacy policy disclaimer
+ * that should be placed under the Petra Web login options.
+ */
+export const MovementPrivacyPolicy = Object.assign(Root, {
+  Disclaimer,
+  Link,
+  PoweredBy,
+});

package/src/components/WalletItem.tsx

@@ -0,0 +1,122 @@
+import {
+  AdapterNotDetectedWallet,
+  AdapterWallet,
+  WalletReadyState,
+  isRedirectable,
+} from "@moveindustries/wallet-adapter-core";
+import { Slot } from "@radix-ui/react-slot";
+import { createContext, forwardRef, useCallback, useContext } from "react";
+import { useWallet } from "../useWallet";
+import { HeadlessComponentProps, createHeadlessComponent } from "./utils";
+
+export interface WalletItemProps extends HeadlessComponentProps {
+  /** The wallet option to be displayed. */
+  wallet: AdapterWallet | AdapterNotDetectedWallet;
+  /** A callback to be invoked when the wallet is connected. */
+  onConnect?: () => void;
+}
+
+function useWalletItemContext(displayName: string) {
+  const context = useContext(WalletItemContext);
+
+  if (!context) {
+    throw new Error(`\`${displayName}\` must be used within \`WalletItem\``);
+  }
+
+  return context;
+}
+
+const WalletItemContext = createContext<{
+  wallet: AdapterWallet | AdapterNotDetectedWallet;
+  connectWallet: () => void;
+} | null>(null);
+
+const Root = forwardRef<HTMLDivElement, WalletItemProps>(
+  ({ wallet, onConnect, className, asChild, children }, ref) => {
+    const { connect } = useWallet();
+
+    const connectWallet = useCallback(() => {
+      connect(wallet.name);
+      onConnect?.();
+    }, [connect, wallet.name, onConnect]);
+
+    const isWalletReady = wallet.readyState === WalletReadyState.Installed;
+
+    const mobileSupport =
+      "deeplinkProvider" in wallet && wallet.deeplinkProvider;
+
+    if (!isWalletReady && isRedirectable() && !mobileSupport) return null;
+
+    const Component = asChild ? Slot : "div";
+
+    return (
+      <WalletItemContext.Provider value={{ wallet, connectWallet }}>
+        <Component ref={ref} className={className}>
+          {children}
+        </Component>
+      </WalletItemContext.Provider>
+    );
+  },
+);
+Root.displayName = "WalletItem";
+
+const Icon = createHeadlessComponent(
+  "WalletItem.Icon",
+  "img",
+  (displayName) => {
+    const context = useWalletItemContext(displayName);
+
+    return {
+      src: context.wallet.icon,
+      alt: `${context.wallet.name} icon`,
+    };
+  },
+);
+
+const Name = createHeadlessComponent(
+  "WalletItem.Name",
+  "div",
+  (displayName) => {
+    const context = useWalletItemContext(displayName);
+
+    return {
+      children: context.wallet.name,
+    };
+  },
+);
+
+const ConnectButton = createHeadlessComponent(
+  "WalletItem.ConnectButton",
+  "button",
+  (displayName) => {
+    const context = useWalletItemContext(displayName);
+
+    return {
+      onClick: context.connectWallet,
+      children: "Connect",
+    };
+  },
+);
+
+const InstallLink = createHeadlessComponent(
+  "WalletItem.InstallLink",
+  "a",
+  (displayName) => {
+    const context = useWalletItemContext(displayName);
+
+    return {
+      href: context.wallet.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: "Install",
+    };
+  },
+);
+
+/** A headless component for rendering a wallet option's name, icon, and either connect button or install link. */
+export const WalletItem = Object.assign(Root, {
+  Icon,
+  Name,
+  ConnectButton,
+  InstallLink,
+});

package/src/components/utils.tsx

@@ -0,0 +1,70 @@
+import { Slot } from "@radix-ui/react-slot";
+import { ReactNode, cloneElement, forwardRef, isValidElement } from "react";
+
+export interface HeadlessComponentProps {
+  /** A class name for styling the element. */
+  className?: string;
+  /**
+   * Whether to render as the child element instead of the default element provided.
+   * All props will be merged into the child element.
+   */
+  asChild?: boolean;
+  children?: ReactNode;
+}
+
+/**
+ * Gets an HTML element type from its tag name
+ * @example
+ * HTMLElementFromTag<"img"> // resolved type: HTMLImageElement
+ */
+type HTMLElementFromTag<T extends keyof JSX.IntrinsicElements> =
+  JSX.IntrinsicElements[T] extends React.ClassAttributes<infer Element>
+    ? Element
+    : HTMLElement;
+
+export function createHeadlessComponent<
+  TElement extends keyof JSX.IntrinsicElements,
+>(
+  displayName: string,
+  elementType: TElement,
+  props?:
+    | JSX.IntrinsicElements[TElement]
+    | ((displayName: string) => JSX.IntrinsicElements[TElement]),
+) {
+  const component = forwardRef<
+    HTMLElementFromTag<TElement>,
+    HeadlessComponentProps
+  >(({ className, asChild, children }, ref) => {
+    const Component = asChild ? Slot : elementType;
+
+    const { children: defaultChildren, ...resolvedProps } =
+      typeof props === "function" ? props(displayName) : (props ?? {});
+    const resolvedChildren =
+      /**
+       * Use props' default children if no children are set in the component element's children and when asChild is true.
+       */
+      asChild && isValidElement(children) && !children.props.children
+        ? cloneElement(children, {}, defaultChildren)
+        : (children ?? defaultChildren);
+
+    return (
+      /**
+       * Due to the complexity of the types at play, TypeScript reports the
+       * following error for our JSX below:
+       *
+       * `Expression produces a union type that is too complex to represent.`
+       *
+       * We can safely ignore this error and retain accurate return types for
+       * consumers of this function. The only drawback is that type-checking is
+       * ignored for the JSX block below.
+       */
+      // @ts-expect-error
+      <Component ref={ref} className={className} {...resolvedProps}>
+        {resolvedChildren}
+      </Component>
+    );
+  });
+  component.displayName = displayName;
+
+  return component;
+}

package/src/graphics/LinkGraphic.tsx

@@ -0,0 +1,26 @@
+import { SVGProps, forwardRef } from "react";
+
+export const LinkGraphic = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
+  (props, ref) => {
+    return (
+      <svg
+        ref={ref}
+        width="102"
+        height="132"
+        viewBox="0 0 102 132"
+        fill="none"
+        {...props}
+      >
+        <g stroke="currentColor" strokeMiterlimit="10">
+          <path d="M59.633 80.66c11.742-2.814 17.48-7.018 20.925-13.254l17.518-31.69c6.257-11.317 2.142-25.55-9.189-31.798C82.737.53 75.723.188 69.593 2.398M60.7 69.565a14.09 14.09 0 0 1-6.907-1.767l-.228-.108" />
+          <path d="m52.365 41.075 12.507-22.627a14.146 14.146 0 0 1 4.727-5.062M32.407 118.619a14.139 14.139 0 0 1-7.034-1.768c-6.857-3.78-9.353-12.402-5.561-19.25l16.634-30.1a14.097 14.097 0 0 1 4.518-4.923" />
+          <path d="M41.211 78.85c11.332 6.248 25.583 2.14 31.84-9.177l17.518-31.691c6.256-11.317 2.142-25.55-9.19-31.798-6.085-3.357-13.018-3.724-19.104-1.59A23.31 23.31 0 0 0 49.541 15.36L36.863 38.298l7.989 5.036 12.506-22.627c3.786-6.848 12.419-9.34 19.276-5.554 6.856 3.78 9.353 12.402 5.561 19.25l-16.634 30.1c-3.785 6.848-12.418 9.341-19.275 5.555l-5.075 8.791ZM29.5 130.447c12.361-1.37 19.2-6.994 22.966-13.804l12.678-22.936-8.305-5.239" />
+          <path d="m55.72 61.947-.442.764 5.511-9.55c-6.901-3.806-18.65-3.124-27.105.814M44.85 43.523l7.635-2.486m-4.221 23.264 7.217-1.723m-9.316 7.517 7.59-2.405m-.562-12.156 7.508-2.221m10.136-51.32L62.761 4.43M49.642 90.778l7.514-2.26m.474 7.448 7.514-2.26m-50.306-60.13c7.135 0 12.918-5.776 12.918-12.9 0-7.126-5.783-12.902-12.918-12.902-7.134 0-12.917 5.776-12.917 12.901s5.783 12.901 12.918 12.901Z" />
+          <path d="M15.724 7.774h3.197c7.135 0 12.918 5.776 12.918 12.901 0 7.126-5.783 12.901-12.918 12.901h-3.425m65.112 66.935h3.198c7.135 0 12.918 5.775 12.918 12.901 0 7.125-5.783 12.9-12.918 12.9h-3.425" />
+          <path d="M79.717 126.312c7.135 0 12.918-5.775 12.918-12.9s-5.783-12.901-12.918-12.901c-7.134 0-12.917 5.776-12.917 12.901s5.783 12.9 12.917 12.9ZM53.281 55.414c-11.33-6.248-25.582-2.14-31.839 9.177L3.924 96.281c-6.257 11.318-2.142 25.55 9.189 31.799 11.331 6.248 25.582 2.139 31.839-9.177l12.677-22.937-7.988-5.036-12.507 22.627c-3.785 6.848-12.418 9.341-19.275 5.554-6.857-3.781-9.353-12.402-5.561-19.25l16.633-30.1c3.786-6.848 12.419-9.341 19.276-5.555l5.074-8.792Z" />
+        </g>
+      </svg>
+    );
+  },
+);
+LinkGraphic.displayName = "LinkGraphic";

package/src/graphics/SmallMovementLogo.tsx

@@ -0,0 +1,25 @@
+import { SVGProps, forwardRef } from "react";
+
+export const SmallMovementLogo = forwardRef<
+  SVGSVGElement,
+  SVGProps<SVGSVGElement>
+>((props, ref) => {
+  return (
+    <svg
+      ref={ref}
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12ZM7.17547 3.67976C7.13401 3.72309 7.07649 3.74757 7.01648 3.74757H3.00775C3.69185 2.83824 4.77995 2.25 6.00569 2.25C7.23142 2.25 8.31953 2.83824 9.00362 3.74757H8.28524C8.20824 3.74757 8.13498 3.71468 8.08401 3.65701L7.81608 3.35416C7.77618 3.30896 7.71882 3.28308 7.6585 3.28308H7.6454C7.58805 3.28308 7.53318 3.30646 7.49343 3.34792L7.17547 3.67976ZM8.05656 4.75897H7.39569C7.31869 4.75897 7.24543 4.72593 7.19447 4.66842L6.92638 4.36557C6.88647 4.32036 6.82896 4.29465 6.7688 4.29465C6.70863 4.29465 6.65112 4.32052 6.61121 4.36557L6.38131 4.6254C6.30603 4.71034 6.19801 4.75913 6.08454 4.75913H2.46703C2.36401 5.05278 2.29683 5.36296 2.27002 5.68467H5.68505C5.74506 5.68467 5.80258 5.66019 5.84404 5.61686L6.16201 5.28502C6.20175 5.24356 6.25662 5.22018 6.31398 5.22018H6.32707C6.38739 5.22018 6.44475 5.24606 6.48465 5.29126L6.75258 5.59411C6.80355 5.65178 6.87681 5.68467 6.95381 5.68467H9.74133C9.71452 5.3628 9.64734 5.05263 9.54431 4.75913H8.05641L8.05656 4.75897ZM4.33651 7.63095C4.39652 7.63095 4.45404 7.60648 4.4955 7.56315L4.81347 7.23131C4.85321 7.18985 4.90808 7.16647 4.96544 7.16647H4.97853C5.03885 7.16647 5.09621 7.19234 5.13611 7.23739L5.40404 7.54024C5.45501 7.59791 5.52827 7.6308 5.60527 7.6308H9.38285C9.52438 7.33839 9.62803 7.02463 9.68975 6.69591H6.06383C5.98683 6.69591 5.91357 6.66287 5.8626 6.60535L5.59467 6.3025C5.55477 6.2573 5.49725 6.23158 5.43709 6.23158C5.37692 6.23158 5.31941 6.25746 5.27951 6.3025L5.0496 6.56233C4.97432 6.64728 4.86631 6.69606 4.75268 6.69606H2.32147C2.3832 7.02479 2.487 7.33855 2.62837 7.63095H4.33651ZM5.57359 8.55745H4.59116C4.51417 8.55745 4.44091 8.52441 4.38994 8.46689L4.12201 8.16404C4.0821 8.11884 4.02459 8.09312 3.96442 8.09312C3.90426 8.09312 3.84675 8.119 3.80684 8.16404L3.57694 8.42387C3.50166 8.50882 3.39364 8.55761 3.28001 8.55761H3.26474C3.94915 9.29096 4.92378 9.74998 6.00596 9.74998C7.08815 9.74998 8.06262 9.29096 8.74719 8.55761H5.57359V8.55745Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+});
+SmallMovementLogo.displayName = "SmallMovementLogo";

package/src/graphics/WalletGraphic.tsx

@@ -0,0 +1,42 @@
+import { SVGProps, forwardRef } from "react";
+
+export const WalletGraphic = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
+  (props, ref) => {
+    return (
+      <svg
+        ref={ref}
+        width="128"
+        height="102"
+        viewBox="0 0 128 102"
+        fill="none"
+        {...props}
+      >
+        <path
+          fill="currentColor"
+          d="m.96 25.93-.36-.35.36.85v-.5Zm7.79-7.81v-.5h-.21l-.15.15.36.35ZM1.3 26.28l7.79-7.8-.7-.71-7.8 7.8.7.71Zm7.44-7.66H10v-1H8.75v1Zm29.22 6.8h-37v1h37.01v-1Z"
+        />
+        <path
+          stroke="currentColor"
+          strokeMiterlimit="10"
+          d="M82.25 26.08c0 12.25-9.92 22.2-22.14 22.2a22.17 22.17 0 0 1-22.14-22.2H1.1v74.82h118.02V26.08H82.25Zm44.33 67.02h.33V18.27h-5.7"
+        />
+        <path
+          stroke="currentColor"
+          strokeMiterlimit="10"
+          d="M74.52 42.92a22.4 22.4 0 0 1-11.43 3.3 22.5 22.5 0 0 1-22.46-22.53H9.52M119.22 101l7.78-7.82m-7.88-67.1 7.79-7.81m-44.78 7.72 2.73-2.3m-46.89 2.39 2.39-2.4"
+        />
+        <path
+          stroke="currentColor"
+          strokeMiterlimit="10"
+          d="M9.86 23.69V5.72h107.97v18.04H84.65"
+        />
+        <path
+          stroke="currentColor"
+          strokeMiterlimit="10"
+          d="M117.83 20.46h3.39V1H13.25v4.72M9.36 23.69h31.78"
+        />
+      </svg>
+    );
+  },
+);
+WalletGraphic.displayName = "WalletGraphic";

package/src/graphics/Web3Graphic.tsx

@@ -0,0 +1,31 @@
+import { SVGProps, forwardRef } from "react";
+
+export const Web3Graphic = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
+  (props, ref) => {
+    return (
+      <svg
+        ref={ref}
+        width="142"
+        height="108"
+        viewBox="0 0 142 108"
+        fill="none"
+        {...props}
+      >
+        <g stroke="currentColor" strokeLinejoin="round">
+          <path d="m91.26 35.8.06-10.46L71.3 1v10.53L87 30.5m-36.11 5.24-.06-10.45L71.3 1v10.53L55 30.5" />
+          <path d="M71 59.55V49.17L50.83 25.3l.06 10.45L57 42.5m14 17.05V49.18l20.33-23.84-.07 10.45L86 42M1 59.68l.22-9.07 35.33-19.8-.1 9L9 55" />
+          <path d="M36.55 30.8s-.08 5.92-.1 9l.1-9ZM71 59.51v-9.07L36.55 30.8l-.1 9L63.5 55" />
+          <path d="M71 59.51v-9.07L36.44 70.78l-.1 9.14L55.5 68.5" />
+          <path d="M1.22 50.6a77387.2 77387.2 0 0 0 35.22 20.18l-.1 9.14L1 59.68l.23-9.07h-.01ZM141 59.68l-.23-9.07-35.33-19.8.11 9L133 55" />
+          <path d="m105.44 30.8.11 9-.1-9Z" />
+          <path d="M71 59.51v-9.07l34.44-19.64.11 9L78.5 55" />
+          <path d="M71 59.51v-9.07l34.56 20.34.1 9.14L87 69" />
+          <path d="M140.78 50.6a78487.3 78487.3 0 0 1-35.23 20.18l.11 9.14L141 59.68l-.23-9.07ZM50.83 80.15l.06-6.33 20.1-23.38H71v9.26L55 79" />
+          <path d="M71.3 97.6 50.89 73.81l-.06 9.33L71.3 107v-9.4Zm20.03-14.5-.07-9.33L71 50.44v9.26l16 18.8" />
+          <path d="m71.3 97.6 19.96-23.83.06 9.33L71.3 107v-9.4Z" />
+        </g>
+      </svg>
+    );
+  },
+);
+Web3Graphic.displayName = "Web3Graphic";

package/src/index.tsx

@@ -0,0 +1,7 @@
+export * from "@moveindustries/wallet-adapter-core";
+export * from "./WalletProvider";
+export * from "./components/AboutMovementConnect";
+export * from "./components/AboutPetraWeb";
+export * from "./components/MovementPrivacyPolicy";
+export * from "./components/WalletItem";
+export * from "./useWallet";

package/src/useWallet.tsx

@@ -0,0 +1,67 @@
+import { useContext, createContext } from "react";
+import {
+  AccountAuthenticator,
+  AccountInfo,
+  AdapterWallet,
+  AnyRawTransaction,
+  MovementSignAndSubmitTransactionOutput,
+  InputTransactionData,
+  NetworkInfo,
+  MovementSignMessageInput,
+  MovementSignMessageOutput,
+  AdapterNotDetectedWallet,
+  Network,
+  MovementChangeNetworkOutput,
+  PendingTransactionResponse,
+  InputSubmitTransactionData,
+  MovementSignInInput,
+  MovementSignInOutput,
+} from "@moveindustries/wallet-adapter-core";
+
+export interface WalletContextState {
+  connected: boolean;
+  isLoading: boolean;
+  account: AccountInfo | null;
+  network: NetworkInfo | null;
+  connect(walletName: string): void;
+  signIn(args: {
+    walletName: string;
+    input: MovementSignInInput;
+  }): Promise<MovementSignInOutput | void>;
+  signAndSubmitTransaction(
+    transaction: InputTransactionData,
+  ): Promise<MovementSignAndSubmitTransactionOutput>;
+  signTransaction(args: {
+    transactionOrPayload: AnyRawTransaction | InputTransactionData;
+    asFeePayer?: boolean;
+  }): Promise<{
+    authenticator: AccountAuthenticator;
+    rawTransaction: Uint8Array;
+  }>;
+  signMessage(message: MovementSignMessageInput): Promise<MovementSignMessageOutput>;
+  signMessageAndVerify(message: MovementSignMessageInput): Promise<boolean>;
+  disconnect(): void;
+  changeNetwork(network: Network): Promise<MovementChangeNetworkOutput>;
+  submitTransaction(
+    transaction: InputSubmitTransactionData,
+  ): Promise<PendingTransactionResponse>;
+  wallet: AdapterWallet | null;
+  wallets: ReadonlyArray<AdapterWallet>;
+  notDetectedWallets: ReadonlyArray<AdapterNotDetectedWallet>;
+}
+
+const DEFAULT_CONTEXT = {
+  connected: false,
+};
+
+export const WalletContext = createContext<WalletContextState>(
+  DEFAULT_CONTEXT as WalletContextState,
+);
+
+export function useWallet(): WalletContextState {
+  const context = useContext(WalletContext);
+  if (!context) {
+    throw new Error("useWallet must be used within a WalletContextState");
+  }
+  return context;
+}