@multiplatform.one/connectkit 6.0.0

package/src/styles/themes/web95.ts

@@ -0,0 +1,165 @@
+export default {
+  "--ck-font-family": "Lato",
+  "--ck-border-radius": "0px",
+
+  "--ck-connectbutton-color": "#373737",
+  "--ck-connectbutton-background":
+    "linear-gradient(180deg, #F0F0EA 0%, #FFFFFF 50%, #F0F0EA 100%) 100% 100% / 200% 200%, #F5F5F1",
+  "--ck-connectbutton-box-shadow":
+    " 0 0 0 1px #003C74, 2px 2px 0px rgba(255, 255, 255, 0.75), -2px -2px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)",
+  "--ck-connectbutton-border-radius": "4.5px",
+
+  "--ck-connectbutton-hover-color": "#373737",
+  "--ck-connectbutton-hover-background":
+    "linear-gradient(180deg, #F0F0EA 0%, #FFFFFF 50%, #F0F0EA 100%) 100% 0% / 200% 200%, #F5F5F1",
+
+  "--ck-connectbutton-active-background":
+    "linear-gradient(180deg, #F0F0EA 0%, #FFFFFF 50%, #F0F0EA 100%) 100% 100% / 200% 200%, #F5F5F1",
+
+  "--ck-connectbutton-balance-color": "#373737",
+  "--ck-connectbutton-balance-background": "#fff",
+  "--ck-connectbutton-balance-box-shadow": "0 0 0 1px #E4E7E7",
+  "--ck-connectbutton-balance-hover-box-shadow": "0 0 0 1px #d7dbdb",
+  "--ck-connectbutton-balance-active-box-shadow": "0 0 0 1px #bbc0c0",
+
+  "--ck-focus-color": "#1A88F8",
+  "--ck-overlay-background": "rgba(0, 127,  128, 0.8)",
+  "--ck-body-color": "#373737",
+  "--ck-body-color-muted": "#808080",
+  "--ck-body-color-muted-hover": "#111111",
+  "--ck-body-background": "#F0EDE2",
+  "--ck-body-background-transparent": "rgba(255,255,255,0)",
+  "--ck-body-background-secondary-hover-background": "#FAFAFA",
+  "--ck-body-background-secondary-hover-outline": "#4282FF",
+  "--ck-body-action-color": "#373737",
+  "--ck-body-color-danger": "#FC6464",
+  "--ck-body-color-valid": "#32D74B",
+
+  "--ck-body-divider": "#919B9C",
+  "--ck-body-divider-box-shadow": "0px 1px 0px #FBFBF8",
+
+  // Primary button
+  "--ck-primary-button-background": "linear-gradient(180deg, #FFFFFF 0%, #F0F0EA 100%), #F5F5F1",
+  "--ck-primary-button-box-shadow":
+    "inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)",
+  "--ck-primary-button-border-radius": "6px",
+
+  // Primary button hover
+  "--ck-primary-button-hover-box-shadow":
+    "inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 5px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)",
+  "--ck-primary-button-hover-border-radius": "6px",
+
+  // Modal
+  "--ck-modal-heading-font-weight": 400,
+  "--ck-modal-box-shadow": `
+    inset 0px -3px 0px #0F37A9,
+    inset -2px 0px 0px #0F37A9,
+    inset 0px -4px 0px #0D5DDF,
+    inset -4px 0px 0px #0D5DDF,
+    inset 2px 0px 0px #0453DD,
+    inset 0px 2px 0px #044FD1,
+    inset 4px 0px 0px #4283EB,
+    inset 0px 4px 0px #4283EB
+  `,
+  "--ck-modal-h1-font-weight": 400,
+
+  // Secondary button
+  "--ck-secondary-button-color": "#373737",
+  "--ck-secondary-button-border-radius": "6px",
+  "--ck-secondary-button-box-shadow":
+    "inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)",
+  "--ck-secondary-button-background": "linear-gradient(180deg, #FFFFFF 0%, #F0F0EA 100%), #F5F5F1",
+
+  // Secondary button hover
+  "--ck-secondary-button-hover-box-shadow":
+    "inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 4px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)",
+
+  "--ck-body-background-secondary": "rgba(0, 0, 0, 0.1)",
+  "--ck-body-background-tertiary": "linear-gradient(180deg, #FBFBFB 0%, #EFEFEE 100%)",
+  "--ck-tertiary-border-radius": "0px",
+  "--ck-tertiary-box-shadow":
+    "inset 0 0 0 1px #919B9C, 1px 1px 2px rgba(0, 0, 0, 0.15), inset -2px -2px 0px #FFFFFF",
+  "--ck-body-button-text-align": "left",
+  "--ck-body-button-box-shadow": "0 2px 4px rgba(0, 0, 0, 0.05 )",
+
+  "--ck-body-disclaimer-background": "linear-gradient(180deg, #FBFBFB 0%, #EFEFEE 100%)",
+  "--ck-body-disclaimer-box-shadow": `
+    inset 0px -3px 0px #0F37A9,
+    inset -2px 0px 0px #0F37A9,
+    inset 0px -4px 0px #0D5DDF,
+    inset -4px 0px 0px #0D5DDF,
+    inset 2px 0px 0px #0453DD,
+    inset 4px 0px 0px #4283EB,
+    inset 0 1px 0 0 #919B9C`,
+  "--ck-body-disclaimer-font-size": "14px",
+  "--ck-body-disclaimer-color": "#959594",
+  "--ck-body-disclaimer-link-color": "#626262",
+  "--ck-body-disclaimer-link-hover-color": "#000000",
+
+  "--ck-qr-dot-color": "#000000",
+  "--ck-qr-border-color": "#919B9C",
+  "--ck-qr-border-radius": "0",
+  "--ck-qr-background": "#FFFFFF",
+
+  "--ck-copytoclipboard-stroke": "rgba(55, 55, 55, 0.4)",
+
+  "--ck-tooltip-background": "linear-gradient(270deg, #F7F3E6 7.69%, #F5F7DA 100%)",
+  "--ck-tooltip-background-secondary": "#f6f7f9",
+  "--ck-tooltip-color": "#000000",
+  "--ck-tooltip-shadow": " 0 0 0 1.5px #2b2622, 0px 2px 10px rgba(0, 0, 0, 0.08)",
+
+  "--ck-spinner-color": "var(--ck-focus-color)",
+
+  "--ck-dropdown-button-color": "#999999",
+  "--ck-dropdown-button-box-shadow":
+    "0 0 0 1px #A0A0A0, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset -1px -2px 2px rgba(0, 0, 0, 0.2)",
+  "--ck-dropdown-button-background": "linear-gradient(180deg, #FFFFFF 0%, #F0F0EA 100%), #F5F5F1",
+  "--ck-dropdown-button-hover-background":
+    "linear-gradient(0deg, #FFFFFF 0%, #F0F0EA 100%), #F5F5F1",
+
+  "--ck-dropdown-pending-color": "#ACA899",
+  "--ck-dropdown-active-color": "#FFFFFF",
+  "--ck-dropdown-active-static-color": "#ACA899",
+  "--ck-dropdown-active-background": "#3F69BF",
+  "--ck-dropdown-active-border-radius": "0",
+  "--ck-dropdown-active-inset": "-12px",
+  "--ck-dropdown-color": "#ACA899",
+  "--ck-dropdown-background": "#FFFFFF",
+  "--ck-dropdown-box-shadow": "inset 0 0 0 1px #ACA899, 2px 2px 7px rgba(0, 0, 0, 0.15)",
+  "--ck-dropdown-border-radius": "0",
+
+  "--ck-alert-color": "#ACA899",
+  "--ck-alert-background": "linear-gradient(180deg, #FBFBFB 0%, #EFEFEE 100%)",
+  "--ck-alert-box-shadow":
+    "inset 0 0 0 1px #919B9C, 1px 1px 2px rgba(0, 0, 0, 0.15), inset -2px -2px 0px #FFFFFF",
+  "--ck-alert-border-radius": "0",
+
+  "--ck-recent-badge-border-radius": "32px",
+  "--ck-recent-badge-top-offset": "0px",
+
+  /** Graphics options for our themes, not to be exposed to devs */
+
+  "--ck-graphic-primary-color": "#333333",
+  "--ck-graphic-primary-background": "#FFFFFF",
+  /*
+  '--ck-graphic-secondary-color': '#7D7D7D',
+  '--ck-graphic-secondary-background':
+    'linear-gradient(180deg, #FFFFFF 0%, #F0F0EA 100%), #F5F5F1',
+  '--ck-graphic-secondary-box-shadow':
+    'inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)',
+
+  '--ck-graphic-compass-color': '#7D7D7D',
+  */
+  "--ck-graphic-compass-background": "#FFFFFF",
+  /*
+  '--ck-graphic-compass-box-shadow':
+    'inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)',
+
+  '--ck-graphic-globe-background': '#ffffff',
+  '--ck-graphic-globe-lines': '#808080',
+  '--ck-graphic-globe-box-shadow':
+    ' 0 0 0 1px #999A9E, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC',
+    */
+
+  "--ck-siwe-border": "#919B9C",
+};

package/src/styles/types.ts

@@ -0,0 +1,84 @@
+type RGB = `rgb(${number}, ${number}, ${number})`;
+type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
+type HEX = `#${string}`;
+type Color = RGB | RGBA | HEX;
+
+type BorderRadius = number | string;
+type Font = {
+  family?: string;
+};
+
+interface Button {
+  font?: Font;
+  color?: Color;
+  background?: Color;
+  border?: Color;
+  borderRadius?: BorderRadius;
+  hover?: this;
+}
+
+interface Text {
+  color?: Color;
+  font?: Font;
+  hover?: this;
+}
+
+export type Theme = {
+  font?: Font;
+  primary?: {
+    color?: Color;
+    colorSelected?: Color;
+  };
+  error?: {
+    color?: Color;
+  };
+  text?: {
+    primary?: Text;
+    secondary?: Text;
+    error?: Color;
+    valid?: Color;
+  };
+  navigation?: {
+    color?: Color;
+  };
+  buttons?: {
+    primary?: Button;
+    secondary?: Button;
+  };
+  modal?: {
+    divider: Color;
+    background?: Color;
+    boxShadow?: string;
+    borderRadius?: BorderRadius;
+  };
+  overlay?: {
+    background?: Color;
+    backdropFilter?: string;
+  };
+  tooltips?: {
+    color?: Color;
+    background?: Color;
+    hover?: {
+      color?: Color;
+      background?: Color;
+    };
+  };
+  qrCode?: {
+    background?: Color;
+    accentColor?: Color;
+  };
+};
+
+export type ThemeMode = {
+  preferred: "light" | "dark";
+  light: Theme;
+  dark: Theme;
+};
+export type CustomTheme = {
+  connectKit: {
+    options?: {
+      iconStyle?: "light" | "regular" | "heavy";
+    };
+    theme?: Theme | ThemeMode;
+  };
+};

package/src/types.ts

@@ -0,0 +1,34 @@
+import { Languages as Lang } from "./localizations";
+export type Languages = Lang;
+
+export type Theme =
+  | "auto"
+  | "web95"
+  | "retro"
+  | "soft"
+  | "midnight"
+  | "minimal"
+  | "rounded"
+  | "nouns";
+export type Mode = "light" | "dark" | "auto";
+export type CustomTheme = any; // TODO: define type
+
+export type All = {
+  theme?: Theme;
+  mode?: Mode;
+  customTheme?: CustomTheme;
+  lang?: Languages;
+};
+
+export type { ConnectKitOptions } from "./components/ConnectKit";
+
+// The shape a host's custom avatar component receives. Defined here (rather than
+// re-exported from the wallet Avatar) so the agnostic kit owns the contract;
+// web3's Avatar imports this type back from @multiplatform.one/connectkit.
+export type CustomAvatarProps = {
+  address?: `0x${string}` | undefined;
+  ensName?: string | undefined;
+  ensImage?: string;
+  size: number;
+  radius: number;
+};

package/src/utils/index.ts

@@ -0,0 +1,123 @@
+import React from "react";
+import { detect } from "detect-browser";
+
+const truncateRegex = /^(0x[a-zA-Z0-9]{4})[a-zA-Z0-9]+([a-zA-Z0-9]{4})$/;
+
+const truncateEthAddress = (address?: string, separator: string = "••••") => {
+  if (!address) return "";
+  const match = address.match(truncateRegex);
+  if (!match) return address;
+  return `${match[1]}${separator}${match[2]}`;
+};
+
+const truncateENSAddress = (ensName: string, maxLength: number) => {
+  if (ensName.length > maxLength) {
+    return ensName.replace(".eth", "").slice(0, maxLength) + "...";
+  } else {
+    return ensName;
+  }
+};
+
+const nFormatter = (num: number, digits: number = 2) => {
+  if (num < 10000) return num.toFixed(2);
+  const lookup = [
+    { value: 1, symbol: "" },
+    { value: 1e3, symbol: "k" },
+    { value: 1e6, symbol: "m" },
+    { value: 1e9, symbol: "b" },
+    { value: 1e12, symbol: "t" },
+    { value: 1e15, symbol: "p" },
+    { value: 1e18, symbol: "e" },
+  ];
+
+  const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
+  var item = lookup
+    .slice()
+    .reverse()
+    .find(function (item) {
+      return num >= item.value;
+    });
+  return item ? (num / item.value).toFixed(digits).replace(rx, "$1") + item.symbol : "0";
+};
+
+const detectBrowser = () => {
+  const browser = detect();
+  return browser?.name ?? "";
+};
+const detectOS = () => {
+  const browser = detect();
+  return browser?.os ?? "";
+};
+
+const isIOS = () => {
+  const os = detectOS();
+  return os.toLowerCase().includes("ios");
+};
+const isAndroid = () => {
+  const os = detectOS();
+  return os.toLowerCase().includes("android");
+};
+const isMobile = () => {
+  return isAndroid() || isIOS();
+};
+
+type ReactChildArray = ReturnType<typeof React.Children.toArray>;
+function flattenChildren(children: React.ReactNode): ReactChildArray {
+  const childrenArray = React.Children.toArray(children);
+  return childrenArray.reduce((flatChildren: ReactChildArray, child) => {
+    if ((child as React.ReactElement<any>).type === React.Fragment) {
+      return flatChildren.concat(
+        flattenChildren((child as React.ReactElement<any>).props.children),
+      );
+    }
+    flatChildren.push(child);
+    return flatChildren;
+  }, []);
+}
+
+export const isWalletConnectConnector = (connectorId?: string) => connectorId === "walletConnect";
+
+export const isAaveAccountConnector = (connectorId?: string) =>
+  connectorId === "aaveAccountProvider";
+
+export const isMetaMaskConnector = (connectorId?: string) => connectorId === "metaMaskSDK";
+
+export const isCoinbaseWalletConnector = (connectorId?: string) =>
+  connectorId === "coinbaseWalletSDK";
+
+export const isLedgerConnector = (connectorId?: string) => connectorId === "ledger";
+
+export const isPortoConnector = (connectorId?: string) => connectorId === "xyz.ithaca.porto";
+
+export const isSafeConnector = (connectorId?: string) => connectorId === "safe";
+
+export const isInjectedConnector = (connectorId?: string) => connectorId === "injected";
+
+// siww multi-chain seam: every wallet entry carries an `ecosystem`. EVM wallets
+// (the wagmi/EIP-6963/Coinbase/WalletConnect connectors) default to 'evm'; the
+// siww shim-connectors (Solana/Sui/Bitcoin) tag themselves so the modal can route
+// them down the injected path and skip EVM-only assumptions.
+export type Ecosystem = "evm" | "solana" | "sui" | "bitcoin";
+
+// Params are `unknown` because wagmi's Connector / CreateConnectorFn types are
+// opaque and `ecosystem` is our own added field — narrow internally.
+export const getConnectorEcosystem = (connector?: unknown): Ecosystem =>
+  (connector as { ecosystem?: Ecosystem } | null | undefined)?.ecosystem ?? "evm";
+
+export const isSiwwConnector = (connectorOrId?: unknown): boolean => {
+  if (!connectorOrId) return false;
+  if (typeof connectorOrId === "string") return connectorOrId.startsWith("siww:");
+  const c = connectorOrId as { type?: string; id?: string };
+  return c.type === "siww" || (c.id?.startsWith("siww:") ?? false);
+};
+
+export {
+  nFormatter,
+  truncateEthAddress,
+  truncateENSAddress,
+  isMobile,
+  isAndroid,
+  detectBrowser,
+  detectOS,
+  flattenChildren,
+};

package/src/utils/localstorage.ts

@@ -0,0 +1,63 @@
+/**
+ * LocalStorage helper functions to save and retrieve data on a per-app basis
+ * e.g recently connected wallets, transactions, etc.
+ */
+
+//import { randomUUID as randomID } from 'crypto';
+const randomID = () => {
+  // TODO: use randomUUID when it's supported in all browsers
+  // https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID
+  // Until then, use this fallback
+  return (
+    Date.now().toString(36) +
+    Math.random().toString(36).substring(2, 15) +
+    Math.random().toString(36).substring(2, 15)
+  );
+};
+
+export const save = (storageKey: string, data: any[]) => {
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(data));
+    return get(storageKey);
+  } catch (e) {
+    return [];
+  }
+};
+
+export const get = (storageKey: string) => {
+  try {
+    const data = localStorage.getItem(storageKey);
+    if (data) return JSON.parse(data);
+    return [];
+  } catch (e) {
+    // error parsing data, reset
+    save(storageKey, []);
+    return [];
+  }
+};
+
+export const add = (storageKey: string, item: any) => {
+  const data = get(storageKey);
+  const newData = [
+    {
+      ...item,
+      ckStoreKey: randomID(), // unique key to identify the item so we can remove it later
+      timestamp: new Date(),
+    },
+    ...data,
+  ];
+  save(storageKey, newData);
+  return get(storageKey);
+};
+
+export const remove = (storageKey: string, item: any) => {
+  const data = get(storageKey);
+  const newData = data.filter((i: any) => i.ckStoreKey !== item.ckStoreKey);
+  save(storageKey, newData);
+  return get(storageKey);
+};
+
+export const clear = (storageKey: string) => {
+  save(storageKey, []);
+  return get(storageKey);
+};

package/src/utils/p3.ts

@@ -0,0 +1,27 @@
+import { css } from "styled-components";
+
+export const hexToP3 = (hex: string) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (result == null) return hex;
+  const values = {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16),
+  };
+  return `color(display-p3 ${values.r / 255} ${values.g / 255} ${values.b / 255})`;
+};
+
+export const p3Hex = (hex: string, property: string) => {
+  const isSafari = true;
+  const p3 = hexToP3(hex);
+  if (!p3 || !isSafari) {
+    return css`
+      ${property}: ${hex};
+    `;
+  } else {
+    return css`
+      ${property}: ${hex};
+      ${property}: ${p3};
+    `;
+  }
+};

package/src/utils/wallets.ts

@@ -0,0 +1,38 @@
+declare global {
+  interface Window {
+    ethereum?: any;
+    trustWallet: any;
+    trustwallet: any;
+  }
+}
+
+export const isWalletInstalled = (name: string) => {
+  if (typeof window === "undefined") return false;
+  const { ethereum } = window;
+  return !!(
+    ethereum?.[`is${name}`] ||
+    (ethereum?.providers && ethereum?.providers.find((provider) => provider?.[`is${name}`]))
+  );
+};
+
+export const isMetaMask = () => isWalletInstalled("MetaMask");
+export const isCoinbaseWallet = () => isWalletInstalled("CoinbaseWallet");
+export const isBrave = () => isWalletInstalled("BraveWallet");
+export const isTokenary = () => isWalletInstalled("Tokenary");
+export const isDawn = () => isWalletInstalled("Dawn");
+export const isFrame = () => isWalletInstalled("Frame");
+export const isPhantom = () => isWalletInstalled("Phantom");
+export const isInfinityWallet = () => isWalletInstalled("InfinityWallet");
+export const isRabby = () => isWalletInstalled("Rabby");
+export const isArgent = () => isWalletInstalled("Argent");
+export const isFrontier = () => isWalletInstalled("Frontier");
+export const isTrust = () => {
+  if (typeof window === "undefined") return false;
+  return isWalletInstalled("Trust") || window?.trustWallet?.isTrust || window?.trustwallet?.isTrust;
+};
+export const isTokenPocket = () => isWalletInstalled("TokenPocket");
+export const isTalisman = () => isWalletInstalled("Talisman");
+export const isFordefi = () => isWalletInstalled("Fordefi");
+export const isRainbow = () => isWalletInstalled("Rainbow");
+export const isZerion = () => isWalletInstalled("Zerion");
+export const isSafe = () => isWalletInstalled("Safe");