@daimo/pay 0.3.21 → 1.0.0

package/build/src/components/Common/ChainSelectList/styles.js

@@ -0,0 +1,228 @@
+import { motion } from 'framer-motion';
+import { css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+import defaultTheme from '../../../constants/defaultTheme.js';
+
+const SwitchNetworksContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    flex-direction: column-reverse;
+  }
+`;
+const ChainIcon = styled(motion.div) `
+  display: block;
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  background: var(--ck-body-background);
+  svg {
+    border-radius: inherit;
+    display: block;
+    position: relative;
+    transform: translate3d(0, 0, 0);
+    width: 100%;
+    height: auto;
+  }
+  ${(props) => props.$empty &&
+    css `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:before {
+        content: "?";
+        color: var(--ck-body-color-muted);
+        font-weight: bold;
+        font-family: var(--ck-font-family);
+      }
+    `}
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    border-radius: 16px;
+    width: 32px;
+    height: 32px;
+  }
+`;
+const ChainLogoContainer = styled(motion.div) `
+  position: relative;
+`;
+const ChainLogoSpinner = styled(motion.div) `
+  position: absolute;
+  inset: -6px;
+  animation: rotateSpinner 1200ms linear infinite;
+  pointer-events: none;
+  svg {
+    display: block;
+    position: relative;
+    transform: translate3d(0, 0, 0);
+    width: 100%;
+    height: auto;
+  }
+  @keyframes rotateSpinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+const ChainButtonContainer = styled.div `
+  position: relative;
+  margin: -8px -8px;
+  &:after {
+    border-radius: var(--border-radius, 0);
+    z-index: 2;
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    inset: 0 2px;
+    box-shadow:
+      inset 0 16px 8px -12px var(--background, var(--ck-body-background)),
+      inset 0 -16px 8px -12px var(--background, var(--ck-body-background));
+  }
+`;
+const ChainButtons = styled(motion.div) `
+  padding: 8px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 242px;
+
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+  &::-webkit-scrollbar {
+    display: none; /* Safari and Chrome */
+  }
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    padding: 8px 14px;
+    margin: 2px -2px 0;
+    max-height: 60vh;
+  }
+`;
+const ChainButton = styled(motion.button) `
+  appearance: none;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  border-radius: 11px;
+  margin: 0 0 1px;
+  padding: 8px 0;
+  padding-right: 154px;
+  font-size: 15px;
+  line-height: 18px;
+  font-weight: 500;
+  text-decoration: none;
+  color: var(--ck-body-color);
+  background: none;
+  white-space: nowrap;
+  transition:
+    transform 100ms ease,
+    background-color 100ms ease;
+  transform: translateZ(0px);
+  &:before {
+    content: "";
+    background: currentColor;
+    position: absolute;
+    z-index: -1;
+    inset: 0 var(--ck-dropdown-active-inset, -8px);
+    border-radius: var(--ck-dropdown-active-border-radius, 12px);
+    opacity: 0;
+    transition: opacity 180ms ease;
+  }
+  &:after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0 var(--ck-dropdown-active-inset, -8px);
+    border-radius: 12px;
+    opacity: 0;
+    transition: opacity 180ms ease;
+    outline: 2px solid var(--ck-focus-color);
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    font-size: 17px;
+    padding: 8px 0;
+  }
+  @media only screen and (min-width: ${defaultTheme.mobileWidth}px) {
+    &:hover {
+      &:before {
+        transition-duration: 80ms;
+        opacity: 0.05;
+      }
+    }
+  }
+  &:active {
+    transform: scale(0.99) translateZ(0px);
+  }
+  &:disabled {
+    //opacity: 0.4;
+    pointer-events: none;
+  }
+  &:focus-visible {
+    outline: none !important;
+    &:after {
+      opacity: 1;
+    }
+  }
+  ${(props) => props.$variant === "secondary" &&
+    css `
+      padding: 12px 4px;
+      margin: 0 0 8px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      &:before {
+        opacity: 0.05;
+      }
+      &:hover:before {
+        opacity: 0.1;
+      }
+    `}
+`;
+const ChainButtonStatus = styled(motion.div) `
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: var(--ck-body-color-muted);
+  font-size: 15px;
+  line-height: 18px;
+  font-weight: 500;
+  padding-right: 4px;
+  span {
+    display: block;
+    position: relative;
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    font-size: 17px;
+    padding: 0;
+  }
+`;
+const ChainButtonBg = styled(motion.div) `
+  position: absolute;
+  z-index: -1;
+  inset: 0 var(--ck-dropdown-active-inset, -8px);
+  background: var(--ck-dropdown-active-background, rgba(26, 136, 248, 0.1));
+  box-shadow var(--ck-dropdown-active-box-shadow);
+  border-radius: var(--ck-dropdown-active-border-radius, 12px);
+  
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    inset: 0 var(--ck-dropdown-active-inset, -8px);
+  }
+`;
+
+export { ChainButton, ChainButtonBg, ChainButtonContainer, ChainButtonStatus, ChainButtons, ChainIcon, ChainLogoContainer, ChainLogoSpinner, SwitchNetworksContainer };
+//# sourceMappingURL=styles.js.map

package/build/src/components/Common/ChainSelectList/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Common/ConnectorList/index.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { usePayContext, ROUTES } from '../../DaimoPay.js';
+import { ConnectorsContainer, ConnectorButton, ConnectorIcon, ConnectorLabel, RecentlyUsedTag } from './styles.js';
+import { useWeb3 } from '../../contexts/web3/index.js';
+import useIsMobile from '../../../hooks/useIsMobile.js';
+import { ScrollArea } from '../ScrollArea/index.js';
+import Alert from '../Alert/index.js';
+import { useConnect } from '../../../hooks/useConnect.js';
+import { useLastConnector } from '../../../hooks/useLastConnector.js';
+import { isWalletConnectConnector, detectBrowser, isCoinbaseWalletConnector } from '../../../utils/index.js';
+import { useWallets } from '../../../wallets/useWallets.js';
+
+const ConnectorList = () => {
+    const context = usePayContext();
+    const isMobile = useIsMobile();
+    const wallets = useWallets();
+    const { lastConnectorId } = useLastConnector();
+    const walletsToDisplay = context.options?.hideRecentBadge || lastConnectorId === "walletConnect" // do not hoist walletconnect to top of list
+        ? wallets
+        : [
+            // move last used wallet to top of list
+            // using .filter and spread to avoid mutating original array order with .sort
+            ...wallets.filter((wallet) => lastConnectorId === wallet.connector.id),
+            ...wallets.filter((wallet) => lastConnectorId !== wallet.connector.id),
+        ];
+    return (jsxs(ScrollArea, { mobileDirection: "horizontal", children: [walletsToDisplay.length === 0 && (jsx(Alert, { error: true, children: "No connectors found in ConnectKit config." })), walletsToDisplay.length > 0 && (jsx(ConnectorsContainer, { "$mobile": isMobile, "$totalResults": walletsToDisplay.length, children: walletsToDisplay.map((wallet) => (jsx(ConnectorItem, { wallet: wallet, isRecent: wallet.id === lastConnectorId }, wallet.id))) }))] }));
+};
+const ConnectorItem = ({ wallet, isRecent, }) => {
+    const { connect: { getUri }, } = useWeb3();
+    const uri = getUri();
+    const isMobile = useIsMobile();
+    const context = usePayContext();
+    const { connect } = useConnect();
+    /*
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+      (async () => {
+        const provider = await wallet.connector.getProvider();
+        setReady(!!provider);
+      })();
+    }, [wallet, setReady]);
+    */
+    let deeplink = (!wallet.isInstalled && isMobile) ||
+        (wallet.shouldDeeplinkDesktop && !isMobile)
+        ? wallet.getWalletConnectDeeplink?.(uri ?? "")
+        : undefined;
+    const redirectToMoreWallets = isMobile && isWalletConnectConnector(wallet.id);
+    // Safari requires opening popup on user gesture, so we connect immediately here
+    const shouldConnectImmediately = (detectBrowser() === "safari" || detectBrowser() === "ios") &&
+        isCoinbaseWalletConnector(wallet.connector.id);
+    if (redirectToMoreWallets || shouldConnectImmediately)
+        deeplink = undefined; // mobile redirects to more wallets page
+    return (jsxs(ConnectorButton, { type: "button", as: deeplink ? "a" : undefined, href: deeplink ? deeplink : undefined, disabled: context.route !== ROUTES.CONNECTORS, onClick: deeplink
+            ? undefined
+            : () => {
+                if (redirectToMoreWallets) {
+                    context.setRoute(ROUTES.MOBILECONNECTORS);
+                }
+                else {
+                    if (shouldConnectImmediately) {
+                        connect({ connector: wallet?.connector });
+                    }
+                    context.setRoute(ROUTES.CONNECT);
+                    context.setConnector({ id: wallet.id });
+                }
+            }, children: [jsx(ConnectorIcon, { "data-small": wallet.iconShouldShrink, "data-shape": wallet.iconShape, children: wallet.iconConnector ?? wallet.icon }), jsxs(ConnectorLabel, { children: [isMobile ? (wallet.shortName ?? wallet.name) : wallet.name, !context.options?.hideRecentBadge && isRecent && (jsx(RecentlyUsedTag, { children: jsx("span", { children: "Recent" }) }))] })] }));
+};
+
+export { ConnectorList as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Common/ConnectorList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Common/ConnectorList/styles.js

@@ -0,0 +1,314 @@
+import { keyframes, css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+import { motion } from 'framer-motion';
+
+const Shimmer = keyframes `
+  0%{ transform: translate(-100%) rotate(-45deg); }
+  100%{ transform: translate(100%) rotate(-80deg); }
+`;
+const ConnectorButton = styled(motion.button) `
+  display: block;
+  text-decoration: none;
+`;
+const ConnectorLabel = styled(motion.span) ``;
+const ConnectorIcon = styled(motion.div) ``;
+// This is a bit of a hack to not share styles between mobile and desktop
+const styles = {
+    desktop: {
+        ConnectorButton: css `
+      cursor: pointer;
+      user-select: none;
+      position: relative;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      width: 100%;
+      height: 64px;
+      font-size: 17px;
+      font-weight: var(--ck-primary-button-font-weight, 500);
+      line-height: 20px;
+      text-align: var(--ck-body-button-text-align, left);
+      transition: 180ms ease;
+      transition-property: background, color, box-shadow, transform, opacity;
+      will-change: transform, box-shadow, background-color, color, opacity;
+
+      --fallback-color: var(--ck-primary-button-color);
+      --fallback-background: var(--ck-primary-button-background);
+      --fallback-box-shadow: var(--ck-primary-button-box-shadow);
+      --fallback-border-radius: var(--ck-primary-button-border-radius);
+
+      --color: var(--ck-primary-button-color, var(--fallback-color));
+      --background: var(
+        --ck-primary-button-background,
+        var(--fallback-background)
+      );
+      --box-shadow: var(
+        --ck-primary-button-box-shadow,
+        var(--fallback-box-shadow)
+      );
+      --border-radius: var(
+        --ck-primary-button-border-radius,
+        var(--fallback-border-radius)
+      );
+
+      --hover-color: var(--ck-primary-button-hover-color, var(--color));
+      --hover-background: var(
+        --ck-primary-button-hover-background,
+        var(--background)
+      );
+      --hover-box-shadow: var(
+        --ck-primary-button-hover-box-shadow,
+        var(--box-shadow)
+      );
+      --hover-border-radius: var(
+        --ck-primary-button-hover-border-radius,
+        var(--border-radius)
+      );
+
+      --active-color: var(--ck-primary-button-active-color, var(--hover-color));
+      --active-background: var(
+        --ck-primary-button-active-background,
+        var(--hover-background)
+      );
+      --active-box-shadow: var(
+        --ck-primary-button-active-box-shadow,
+        var(--hover-box-shadow)
+      );
+      --active-border-radius: var(
+        --ck-primary-button-active-border-radius,
+        var(--hover-border-radius)
+      );
+
+      color: var(--color);
+      background: var(--background);
+      box-shadow: var(--box-shadow);
+      border-radius: var(--border-radius);
+
+      &:disabled {
+        transition: 180ms ease;
+        opacity: 0.4;
+      }
+
+      --bg: var(--background);
+      &:not(:disabled) {
+        &:hover {
+          color: var(--hover-color);
+          background: var(--hover-background);
+          box-shadow: var(--hover-box-shadow);
+          border-radius: var(--hover-border-radius);
+          --bg: var(--hover-background, var(--background));
+        }
+        &:focus-visible {
+          transition-duration: 100ms;
+          color: var(--hover-color);
+          background: var(--hover-background);
+          box-shadow: var(--hover-box-shadow);
+          border-radius: var(--hover-border-radius);
+          --bg: var(--hover-background, var(--background));
+        }
+        &:active {
+          color: var(--active-color);
+          background: var(--active-background);
+          box-shadow: var(--active-box-shadow);
+          border-radius: var(--active-border-radius);
+          --bg: var(--active-background, var(--background));
+        }
+      }
+    `,
+        ConnectorLabel: css `
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      padding: 2px 0;
+      padding-right: 38px;
+    `,
+        ConnectorIcon: css `
+      position: absolute;
+      right: 20px;
+      width: 32px;
+      height: 32px;
+      overflow: hidden;
+      svg,
+      img {
+        display: block;
+        position: relative;
+        pointer-events: none;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+      }
+
+      &[data-shape="squircle"] {
+        border-radius: 22.5%;
+      }
+      &[data-shape="circle"] {
+        border-radius: 100%;
+      }
+      &[data-shape="square"] {
+        border-radius: 0;
+      }
+    `,
+    },
+    mobile: {
+        ConnectorButton: css `
+      text-align: center;
+      background: none;
+      max-width: 100%;
+      overflow: hidden;
+    `,
+        ConnectorLabel: css `
+      display: block;
+      text-overflow: ellipsis;
+      max-width: 100%;
+      overflow: hidden;
+      padding: 10px 0 0;
+      color: var(--ck-body-color);
+      font-size: 13px;
+      line-height: 15px;
+      font-weight: 500;
+      opacity: 0.75;
+    `,
+        ConnectorIcon: css `
+      position: relative;
+      margin: 0 auto;
+      width: 60px;
+      height: 60px;
+      overflow: hidden;
+      svg,
+      img {
+        display: block;
+        position: relative;
+        width: 100%;
+        height: auto;
+      }
+      &[data-small="true"] {
+        svg,
+        img {
+          transform: scale(0.8);
+        }
+      }
+
+      &[data-shape="squircle"] {
+        border-radius: 22.5%;
+        &:before {
+          content: "";
+          z-index: -1;
+          position: absolute;
+          inset: 0;
+          border-radius: inherit;
+          box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);
+        }
+      }
+      &[data-shape="circle"] {
+        border-radius: 100%;
+      }
+      &[data-shape="square"] {
+        border-radius: 0;
+      }
+    `,
+    },
+};
+const RecentlyUsedTag = styled(motion.span) `
+  position: relative;
+  top: var(--ck-recent-badge-top-offset, 0.5px);
+  display: inline-block;
+  padding: 10px 7px;
+  line-height: 0;
+  font-size: 13px;
+  font-weight: 400;
+  border-radius: var(--ck-recent-badge-border-radius, var(--border-radius));
+  color: var(
+    --ck-recent-badge-color,
+    var(--ck-accent-color, var(--ck-body-color-muted, currentColor))
+  );
+  background: var(--ck-recent-badge-background, transparent);
+  overflow: hidden;
+  span {
+    display: inline-block;
+    position: relative;
+  }
+  &:before {
+    z-index: 1;
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: 0.4;
+    box-shadow: var(--ck-recent-badge-box-shadow, inset 0 0 0 1px currentColor);
+    border-radius: inherit;
+  }
+  &:after {
+    z-index: 2;
+    content: "";
+    position: absolute;
+    inset: -10%;
+    top: -110%;
+    aspect-ratio: 1/1;
+    opacity: 0.7;
+    background: linear-gradient(
+      170deg,
+      transparent 10%,
+      var(--ck-recent-badge-background, var(--bg)) 50%,
+      transparent 90%
+    );
+    animation: ${Shimmer} 2s linear infinite;
+  }
+`;
+const ConnectorsContainer = styled.div `
+  transition: opacity 300ms ease;
+  min-width: fit-content;
+
+  ${(props) => props.$disabled &&
+    css `
+      pointer-events: none;
+      opacity: 0.4;
+    `}
+
+  ${(props) => !props.$mobile
+    ? css `
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+
+          ${ConnectorButton} {
+            ${styles.desktop.ConnectorButton}
+            ${ConnectorLabel} {
+              ${styles.desktop.ConnectorLabel}
+            }
+            ${ConnectorIcon} {
+              ${styles.desktop.ConnectorIcon}
+            }
+          }
+        `
+    : css `
+          display: flex;
+          align-items: flex-start;
+          justify-content: space-around;
+          gap: 22px 6px;
+          //margin: 0px -10px -20px;
+          padding: 14px 0px 28px;
+
+          ${ConnectorButton} {
+            flex-shrink: 0;
+            width: 80px;
+            ${styles.mobile.ConnectorButton}
+            ${ConnectorLabel} {
+              ${styles.mobile.ConnectorLabel}
+              ${RecentlyUsedTag} {
+                display: none;
+                width: fit-content;
+                margin: 0 auto;
+              }
+            }
+            ${ConnectorIcon} {
+              ${styles.mobile.ConnectorIcon}
+            }
+          }
+        `}
+`;
+
+export { ConnectorButton, ConnectorIcon, ConnectorLabel, ConnectorsContainer, RecentlyUsedTag };
+//# sourceMappingURL=styles.js.map

package/build/src/components/Common/ConnectorList/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Common/CopyToClipboard/CopyToClipboardIcon.js

@@ -0,0 +1,71 @@
+import { jsx } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+import { CopyToClipboardIcon as CopyToClipboardIcon$1 } from '../../../assets/icons.js';
+
+const IconContainer = styled(motion.div) `
+  transition: all 220ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  svg {
+    display: block;
+  }
+  svg,
+  svg path,
+  svg rect {
+    transition: inherit;
+  }
+  svg path:first-child {
+    transform-origin: 50% 50%;
+    fill: var(--bg);
+    stroke: var(--color);
+  }
+  svg rect {
+    transform-origin: 53% 63%;
+    fill: var(--bg);
+    stroke: var(--color);
+  }
+  svg path:last-child {
+    opacity: 0;
+    stroke: var(--bg);
+    transform: translate(11.75px, 10px) rotate(90deg) scale(0.6);
+  }
+  ${(props) => props.$clipboard
+    ? css `
+          --color: var(--ck-focus-color) !important;
+          --bg: var(--ck-body-background);
+          svg {
+            transition-delay: 0ms;
+            path:first-child {
+              opacity: 0;
+              transform: rotate(-90deg) scale(0.2);
+            }
+            rect {
+              rx: 10px;
+              fill: var(--color);
+              transform: rotate(-90deg) scale(1.45);
+            }
+            path:last-child {
+              transition-delay: 100ms;
+              opacity: 1;
+              transform: translate(7.75px, 9.5px);
+            }
+          }
+        `
+    : css `
+          &:hover {
+          }
+          &:hover:active {
+          }
+        `}
+`;
+const CopyToClipboardIcon = ({ copied, small, dark, }) => (jsx(IconContainer, { "$clipboard": copied, children: jsx(CopyToClipboardIcon$1, { style: {
+            transform: small ? "scale(1)" : "translateX(3px) scale(1.5)",
+            opacity: small || copied || dark ? 1 : 0.3,
+        } }) }));
+
+export { CopyToClipboardIcon as default };
+//# sourceMappingURL=CopyToClipboardIcon.js.map

package/build/src/components/Common/CopyToClipboard/CopyToClipboardIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyToClipboardIcon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}