add: family connector (#456)

* locales

* family support

* add logo

* Update CHANGELOG.md

* clean up

* cleanup

Author: lochie

CHANGELOG.md

@@ -1,3 +1,19 @@
+# 1.9.0
+
+We're thrilled to announce a major upgrade to ConnectKit—designed to make onboarding and navigating Ethereum simpler and safer than ever.
+
+Introducing [Family Accounts](https://app.family.co), simplified onboarding for new users.
+
+Learn more by reading the announcement [here](https://family.co/blog/family-accounts).
+
+## New
+
+- Support for [Family Accounts](https://app.family.co).
+
+## Improved
+
+- Updates chain logos for `zora`, `base`, `optimism` and `lens`.
+
 # 1.8.2
 
 This update includes improvements to the `CoinbaseWalletSDK` connect popup and `MockConnector`.

examples/testbench/src/components/Web3Provider.tsx

@@ -41,6 +41,7 @@ export const ckConfig = getDefaultConfig({
   appName: 'ConnectKit testbench',
   appIcon: '/app.png',
   walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
+  //enableFamily: false,
 });
 const customConfig = {
   ...ckConfig,

packages/connectkit/package.json

@@ -41,6 +41,7 @@
   "dependencies": {
     "buffer": "^6.0.3",
     "detect-browser": "^5.3.0",
+    "family": "^0.1.1",
     "framer-motion": "^6.3.11",
     "qrcode": "^1.5.0",
     "react-transition-state": "^1.1.4",

packages/connectkit/src/assets/logos.tsx

@@ -22,24 +22,40 @@ import {
 } from '../../../utils';
 import { useLastConnector } from '../../../hooks/useLastConnector';
 import { useConnect } from '../../../hooks/useConnect';
+import {
+  useFamilyAccountsConnector,
+  useFamilyConnector,
+} from '../../../hooks/useConnectors';
+import { isFamily } from '../../../utils/wallets';
 
 const ConnectorList = () => {
   const context = useContext();
   const isMobile = useIsMobile();
 
   const wallets = useWallets();
   const { lastConnectorId } = useLastConnector();
+  const familyConnector = useFamilyConnector();
+  const familyAccountsConnector = useFamilyAccountsConnector();
+
+  let filteredWallets = wallets.filter(
+    (wallet) => wallet.id !== familyAccountsConnector?.id
+  );
+  if (familyConnector && isFamily()) {
+    filteredWallets = filteredWallets.filter(
+      (wallet) => wallet.id !== familyConnector?.id
+    );
+  }
 
   const walletsToDisplay =
     context.options?.hideRecentBadge || lastConnectorId === 'walletConnect' // do not hoist walletconnect to top of list
-      ? wallets
+      ? filteredWallets
       : [
           // move last used wallet to top of list
           // using .filter and spread to avoid mutating original array order with .sort
-          ...wallets.filter(
+          ...filteredWallets.filter(
             (wallet) => lastConnectorId === wallet.connector.id
           ),
-          ...wallets.filter(
+          ...filteredWallets.filter(
             (wallet) => lastConnectorId !== wallet.connector.id
           ),
         ];
@@ -134,6 +150,7 @@ const ConnectorItem = ({
       <ConnectorIcon
         data-small={wallet.iconShouldShrink}
         data-shape={wallet.iconShape}
+        data-background={redirectToMoreWallets}
       >
         {wallet.iconConnector ?? wallet.icon}
       </ConnectorIcon>

packages/connectkit/src/components/Common/ConnectorList/index.tsx

@@ -212,6 +212,12 @@ const styles = {
       &[data-shape='square'] {
         border-radius: 0;
       }
+
+      &[data-background='true'] {
+        border-radius: 22.5%;
+        background: var(--ck-body-background-tertiary);
+        padding: 8%;
+      }
     `,
   },
 };

packages/connectkit/src/components/Common/ConnectorList/styles.ts

@@ -0,0 +1,41 @@
+import {
+  ButtonContainer,
+  InnerContainer,
+  IconContainer,
+  ButtonContainerInner,
+} from './styles';
+import FitText from '../FitText';
+import useLocales from '../../../hooks/useLocales';
+
+const FamilyLogo = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.0204 1.00451C19.6474 1.63141 19.9997 2.4816 20 3.36818C20.0008 4.14967 19.726 4.90643 19.2239 5.50535C18.7218 6.10427 18.0246 6.50698 17.2549 6.64267V6.70894C18.019 6.85794 18.7076 7.26796 19.2026 7.86877C19.6976 8.46958 19.9683 9.2238 19.9683 10.0022C19.9683 10.7807 19.6976 11.5349 19.2026 12.1357C18.7076 12.7365 18.019 13.1465 17.2549 13.2955V13.3613C18.0719 13.5195 18.8007 13.9762 19.2994 14.6424C19.798 15.3086 20.0308 16.1365 19.9523 16.9649C19.8738 17.7933 19.4896 18.5628 18.8747 19.1234C18.2598 19.6841 17.4581 19.9958 16.626 19.9977C15.0203 19.9977 13.6632 18.8411 13.3487 17.3187H13.266C13.1161 18.0763 12.707 18.7581 12.1091 19.247C11.5112 19.7358 10.7617 20.0013 9.98928 19.9977C8.38358 19.9977 7.02654 18.8411 6.71207 17.3187H6.62934C6.5085 17.9135 6.22824 18.4642 5.81854 18.912C5.40885 19.3597 4.88513 19.6877 4.3034 19.8609C3.72166 20.034 3.1038 20.0458 2.5159 19.8949C1.92799 19.7441 1.39216 19.4362 0.965705 19.0044C0.539251 18.5726 0.238219 18.0329 0.0948058 17.4432C-0.0486071 16.8535 -0.0290062 16.2359 0.151512 15.6565C0.332031 15.0771 0.666676 14.5576 1.11966 14.1537C1.57264 13.7497 2.12691 13.4765 2.7232 13.3632V13.2974C1.95907 13.1484 1.27053 12.7384 0.775518 12.1376C0.280502 11.5368 0.0098111 10.7826 0.0098111 10.0041C0.0098111 9.22568 0.280502 8.47147 0.775518 7.87065C1.27053 7.26984 1.95907 6.85982 2.7232 6.71082V6.64455C2.12752 6.52895 1.57437 6.2539 1.12271 5.84872C0.671047 5.44354 0.337805 4.92342 0.158498 4.34378C-0.0208088 3.76414 -0.0394594 3.14672 0.104534 2.55732C0.248527 1.96792 0.549768 1.42863 0.976148 0.996935C1.40253 0.565238 1.93807 0.257312 2.52569 0.105976C3.11331 -0.0453591 3.73098 -0.0344317 4.31288 0.137594C4.89478 0.309619 5.41909 0.636296 5.82993 1.0828C6.24077 1.52931 6.52274 2.07892 6.64579 2.67304H6.72852C6.8865 1.9201 7.29921 1.24463 7.89713 0.760429C8.49504 0.276232 9.2416 0.0129149 10.011 0.0148468C10.7804 0.0167787 11.5257 0.283841 12.1211 0.771035C12.7166 1.25823 13.1259 1.93577 13.2801 2.68949H13.3629C13.6952 1.16716 15.0348 0.00860963 16.6565 0.0250597C17.5432 0.0253088 18.3935 0.377609 19.0204 1.00451ZM5.93783 5.07571C5.33116 5.0757 4.84252 5.57305 4.85166 6.17966C4.86836 7.28867 4.89073 9.01161 4.89073 10.2871C4.89073 11.5614 4.8684 13.2824 4.8517 14.3916C4.84255 14.9997 5.3327 15.4985 5.94094 15.4985H14.2263C14.8345 15.4985 15.3247 14.9997 15.3155 14.3916C15.2988 13.2824 15.2765 11.5614 15.2765 10.2871C15.2765 9.01161 15.2988 7.28867 15.3155 6.17966C15.3247 5.57305 14.8367 5.0757 14.23 5.07571L9.99998 5.07576L5.93783 5.07571Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const FamilyAccountsButton = ({ onClick }: { onClick: () => void }) => {
+  const locales = useLocales();
+  return (
+    <ButtonContainer onClick={onClick}>
+      <ButtonContainerInner>
+        <IconContainer>
+          <FamilyLogo />
+        </IconContainer>
+        <InnerContainer>
+          <FitText>{locales.continueWithFamily}</FitText>
+        </InnerContainer>
+      </ButtonContainerInner>
+    </ButtonContainer>
+  );
+};

packages/connectkit/src/components/Common/FamilyAccountsButton/index.tsx

@@ -0,0 +1,79 @@
+import { motion } from 'framer-motion';
+import styled from './../../../styles/styled';
+
+export const ButtonContainerInner = styled(motion.div)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  height: 100%;
+`;
+export const ButtonContainer = styled.button`
+  --color: #ffffff;
+  --background: var(--ck-family-accounts-brand);
+  --box-shadow: var(--ck-primary-button-box-shadow);
+  --border-radius: var(--ck-primary-button-border-radius);
+  --font-weight: var(--ck-primary-button-font-weight, 500);
+
+  --hover-color: var(--ck-button-primary-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)
+  );
+  --hover-font-weight: var(--ck-primary-button-font-weight, var(--font-weight));
+
+  appearance: none;
+  cursor: pointer;
+  user-select: none;
+  min-width: fit-content;
+  width: 100%;
+  display: block;
+  text-align: center;
+  height: 48px;
+  margin: 18px 0 2px;
+  line-height: 48px;
+  padding: 0 4px;
+  font-size: 16px;
+  font-weight: var(--font-weight, 500);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: 100ms ease;
+  transition-property: box-shadow, background-color;
+  color: var(--color);
+  background: var(--background);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  will-change: transform, box-shadow, background-color, color;
+`;
+
+export const InnerContainer = styled.div`
+  transform: translateZ(0); // Shifting fix
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: calc(100% - 42px);
+  transition: opacity 300ms ease;
+`;
+
+export const IconContainer = styled.div`
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 20px;
+  max-height: 20px;
+  margin: 0 12px 0 0;
+  svg {
+    display: block;
+    position: relative;
+    max-width: 100%;
+    height: auto;
+  }
+`;

packages/connectkit/src/components/Common/FamilyAccountsButton/styles.ts

@@ -697,10 +697,16 @@ const Page: React.FC<PageProps> = ({
   );
 };
 
-export const OrDivider = ({ children }: { children?: React.ReactNode }) => {
+export const OrDivider = ({
+  children,
+  hideHr,
+}: {
+  children?: React.ReactNode;
+  hideHr?: boolean;
+}) => {
   const locales = useLocales();
   return (
-    <TextWithHr>
+    <TextWithHr $disableHr={hideHr}>
       <span>{children ?? locales.or}</span>
     </TextWithHr>
   );

packages/connectkit/src/components/Common/Modal/index.tsx

@@ -71,7 +71,9 @@ export const PageContent = styled(motion.div)`
   padding-top: 48px;
 `;
 
-export const TextWithHr = styled(motion.div)`
+export const TextWithHr = styled(motion.div)<{
+  $disableHr?: boolean;
+}>`
   user-select: none;
   position: relative;
   display: block;
@@ -90,6 +92,9 @@ export const TextWithHr = styled(motion.div)`
     background: var(--ck-body-background);
     transition: background-color 200ms ease;
   }
+  ${(props) =>
+    !props.$disableHr &&
+    `
   &:before {
     z-index: 2;
     content: '';
@@ -102,6 +107,7 @@ export const TextWithHr = styled(motion.div)`
     background: var(--ck-body-divider);
     box-shadow: var(--ck-body-divider-box-shadow);
   }
+    `}
 `;
 export const ModalHeading = styled(motion.div)`
   z-index: 3;