Merge pull request #47 from family/update-1.0.1

adds: localisations

.gitignore

@@ -1,4 +1,5 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# running the build command copies the root README.md to the connectkit directory for npm release
+packages/connectkit/README.md
 
 # dependencies
 node_modules

CHANGELOG.md

@@ -1,4 +1,16 @@
-# 0.0.3
+# 1.0.1
+
+This update introduces localisations to ConnectKit.
+
+## New
+
+- Added a `language` option under `options` that allows developers to include localisation support—starting with options for `Spanish`, `French`, `Japanese` and `Chinese (Simplified)`.
+
+## Fixed
+
+- Removed layered background on the injected connectors flow to allow for transparent modal background colors ([issue #41](https://github.com/family/connectkit/issues/41)).
+
+# 1.0.0
 
 This update introduces Sign In With Ethereum and other helpful changes and additions to make your app better than ever.
 

examples/testbench/src/TestbenchProvider.tsx

@@ -39,7 +39,7 @@ export const TestBenchProvider: React.FC<TestBenchProviderProps> = ({
   customTheme = {},
   mode = 'light',
   options = {
-    language: 'en',
+    language: 'en-US',
     hideTooltips: false,
     hideQuestionMarkCTA: false,
     hideNoWalletCTA: false,

examples/testbench/src/pages/_app.tsx

@@ -46,6 +46,10 @@ function MyApp(appProps: AppProps) {
           name="viewport"
           content="width=device-width, initial-scale=1, maximum-scale=1"
         />
+        <link
+          href="https://fonts.cdnfonts.com/css/pt-root-ui"
+          rel="stylesheet"
+        />
       </Head>
       <WagmiConfig client={client}>
         <TestBenchProvider

examples/testbench/src/pages/index.tsx

@@ -39,7 +39,13 @@ const modes: SelectProps[] = [
   { label: 'Light', value: 'light' },
   { label: 'Dark', value: 'dark' },
 ];
-const languages: SelectProps[] = [{ label: 'English (US)', value: 'en' }];
+const languages: SelectProps[] = [
+  { label: 'English (US)', value: 'en-US' },
+  { label: 'French', value: 'fr-FR' },
+  { label: 'Spanish', value: 'es-ES' },
+  { label: 'Japanese', value: 'ja-JP' },
+  { label: 'Chinese', value: 'zh-CN' },
+];
 
 const AccountInfo = () => {
   const { isConnected, address, connector } = useAccount();
@@ -200,11 +206,11 @@ const Home: NextPage = () => {
       <main>
         <p>Connect Button</p>
         <ConnectKitButton label={label} />
-        
+
         <hr />
         <p>Sign In With Ethereum</p>
         <SIWEButton showSignOutButton />
-        
+
         <hr />
         <AccountInfo />
 
@@ -289,10 +295,13 @@ const Home: NextPage = () => {
         />
         <Select
           label="Language"
-          value={options.lang}
+          value={options.language}
           options={languages}
           onChange={(e) =>
-            setOptions({ ...options, lang: e.target.value as Types.Languages })
+            setOptions({
+              ...options,
+              language: e.target.value as Types.Languages,
+            })
           }
         />
         <h3>options</h3>

package.json

@@ -15,7 +15,7 @@
     "dev:nextjs": "yarn workspace nextjs run dev",
     "dev:vite": "yarn workspace vite run dev",
     "dev:testbench": "yarn workspace testbench run dev",
-    "build": "yarn workspace connectkit run build",
+    "build": "yarn workspace connectkit run build && cp README.md packages/connectkit/README.md",
     "build:connectkit-next-siwe": "yarn workspace connectkit-next-siwe run build",
     "build:cra": "yarn build && yarn workspace cra build",
     "build:nextjs": "yarn build && yarn workspace nextjs build",

packages/connectkit-next-siwe/package.json

@@ -9,7 +9,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/family/connectkit.git",
-    "directory": "packages/connectkit"
+    "directory": "packages/connectkit-next-siwe"
   },
   "module": "build/index.es.js",
   "types": "build/index.d.ts",

packages/connectkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "connectkit",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "Family",
   "homepage": "https://docs.family.co/connectkit",
   "license": "BSD-2-Clause license",
@@ -39,6 +39,7 @@
     "qrcode": "^1.5.0",
     "react-transition-state": "^1.1.4",
     "react-use-measure": "^2.1.1",
+    "resize-observer-polyfill": "^1.5.1",
     "styled-components": "^5.3.5"
   },
   "peerDependencies": {

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

@@ -10,8 +10,11 @@ import {
   DownloadArrow,
   DownloadArrowInner,
   SpinnerContainer,
+  ButtonContainerInner,
 } from './styles';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence } from 'framer-motion';
+import { flattenChildren } from '../../../utils';
+import FitText from '../FitText';
 
 const transition = {
   duration: 0.4,
@@ -77,22 +80,30 @@ const Button: React.FC<ButtonProps> = ({
   style,
   onClick,
 }) => {
+  const key =
+    typeof children === 'string'
+      ? children
+      : flattenChildren(children).join(''); // Need to generate a string for the key so we can automatically animate between content
+
+  const hrefUrl =
+    typeof href === 'string' ? href : flattenChildren(href).join(''); // Need to have a flat string for the href
+
   return (
     <ButtonContainer
       as={href ? 'a' : undefined}
       onClick={(event: any) => {
         if (!disabled && onClick) onClick(event);
       }}
-      href={href}
+      href={hrefUrl}
       target={href && '_blank'}
       rel={href && 'noopener noreferrer'}
       disabled={disabled}
       $variant={variant}
       style={style}
     >
       <AnimatePresence initial={false}>
-        <motion.div
-          key={typeof children === 'string' ? children : 'content'}
+        <ButtonContainerInner
+          key={key}
           initial={{ opacity: 0, y: -10 }}
           animate={{
             opacity: 1,
@@ -143,7 +154,9 @@ const Button: React.FC<ButtonProps> = ({
               </DownloadArrowInner>
             </DownloadArrow>
           )}
-          <InnerContainer>{children}</InnerContainer>
+          <InnerContainer style={{ paddingLeft: arrow ? 6 : 0 }}>
+            <FitText>{children}</FitText>
+          </InnerContainer>
           {icon && iconPosition === 'right' && (
             <IconContainer $rounded={roundedIcon}>{icon}</IconContainer>
           )}
@@ -172,7 +185,7 @@ const Button: React.FC<ButtonProps> = ({
               />
             </Arrow>
           )}
-        </motion.div>
+        </ButtonContainerInner>
         {waiting && <Spinner />}
       </AnimatePresence>
     </ButtonContainer>

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

@@ -58,6 +58,13 @@ export const DownloadArrowInner = styled.div`
   }
 `;
 
+export const ButtonContainerInner = styled(motion.div)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  height: 100%;
+`;
 export const ButtonContainer = styled.button<{
   disabled?: boolean;
   $variant?: 'primary' | 'secondary' | 'tertiary';
@@ -181,9 +188,7 @@ export const ButtonContainer = styled.button<{
   user-select: none;
   min-width: fit-content;
   width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display:block;
   text-align: center;
   height: 48px;
   margin: 12px 0 0;
@@ -253,10 +258,16 @@ export const ButtonContainer = styled.button<{
   }
 `;
 
-export const InnerContainer = styled.span`
+export const InnerContainer = styled.div`
+  transform: translateZ(0); // Shifting fix
+  position: relative;
   display: inline-block;
   vertical-align: middle;
-  transform: translateZ(0);
+  max-width: calc(100% - 42px);
+  /*
+  overflow: hidden;
+  text-overflow: ellipsis;
+  */
 `;
 
 export const IconContainer = styled(motion.div)<{ $rounded?: boolean }>`

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

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { routes, useContext } from './../../ConnectKit';
 
 import { useNetwork } from 'wagmi';
-import supportedChains from './../../../constants/supportedChains';
 
 import { isMobile } from './../../../utils';
 
@@ -14,6 +13,7 @@ import { motion } from 'framer-motion';
 import Tooltip from '../Tooltip';
 import ChainSelectDropdown from '../ChainSelectDropdown';
 import Chain from '../Chain';
+import useLocales from '../../../hooks/useLocales';
 
 import Logos from '../../../assets/chains';
 
@@ -139,6 +139,10 @@ const ChainSelector: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
   const { chain, chains } = useNetwork();
 
+  const locales = useLocales({
+    CHAIN: chain?.name,
+  });
+
   const mobile = isMobile() || window?.innerWidth < defaultTheme.mobileWidth;
 
   useEffect(() => {
@@ -156,7 +160,7 @@ const ChainSelector: React.FC = () => {
           onClose={() => setIsOpen(false)}
         >
           <SwitchChainButton
-            aria-label="Change Network"
+            aria-label={locales.switchNetworks}
             disabled={disabled}
             onClick={() => {
               if (mobile) {
@@ -167,11 +171,7 @@ const ChainSelector: React.FC = () => {
             }}
           >
             {disabled ? (
-              <Tooltip
-                message={`${chain?.name} Network`}
-                xOffset={-6}
-                delay={0.01}
-              >
+              <Tooltip message={locales.chainNetwork} xOffset={-6} delay={0.01}>
                 <Chain id={chain?.id} unsupported={chain?.unsupported} />
               </Tooltip>
             ) : (

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

@@ -13,54 +13,18 @@ import ChainSelectList from './../ChainSelectList';
 
 import Portal from './../Portal';
 import { ResetContainer } from './../../../styles';
-
-import styled from 'styled-components';
-import { AnimatePresence, motion } from 'framer-motion';
+import {
+  DropdownWindow,
+  DropdownOverlay,
+  DropdownContainer,
+  DropdownHeading,
+} from './styles';
+
+import { AnimatePresence } from 'framer-motion';
 import { useThemeContext } from './../../ConnectKitThemeProvider/ConnectKitThemeProvider';
 import FocusTrap from './../../../hooks/useFocusTrap';
 import useLockBodyScroll from './../../../hooks/useLockBodyScroll';
-
-const DropdownWindow = styled(motion.div)`
-  z-index: 2147483647;
-  position: fixed;
-  inset: 0;
-`;
-const DropdownOverlay = styled(motion.div)`
-  position: absolute;
-  inset: 0;
-`;
-const DropdownContainer = styled(motion.div)`
-  --shadow: 0px 2px 15px rgba(0, 0, 0, 0.15);
-  --background: var(--ck-dropdown-background, var(--ck-tooltip-background));
-  --border-radius: var(
-    --ck-dropdown-border-radius,
-    var(--ck-tooltip-border-radius, 12px)
-  );
-
-  pointer-events: auto;
-  z-index: 2147483647;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  max-width: fit-content;
-  padding: 14px 16px 16px;
-  color: var(--ck-dropdown-color, var(--ck-tooltip-color));
-  background: var(--background);
-  box-shadow: var(
-    --ck-dropdown-box-shadow,
-    var(--ck-tooltip-shadow, var(--shadow))
-  );
-  border-radius: var(--border-radius);
-`;
-const DropdownHeading = styled(motion.div)`
-  padding: 0 0 6px;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 400;
-  user-select: none;
-  color: var(--ck-dropdown-color, var(--ck-tooltip-color));
-`;
+import useLocales from '../../../hooks/useLocales';
 
 const ChainSelectDropdown: React.FC<{
   children?: React.ReactNode;
@@ -72,6 +36,8 @@ const ChainSelectDropdown: React.FC<{
   const context = useContext();
   const themeContext = useThemeContext();
 
+  const locales = useLocales();
+
   const [offset, setOffset] = useState({ x: 0, y: 0 });
 
   useLockBodyScroll(open);
@@ -248,7 +214,7 @@ const ChainSelectDropdown: React.FC<{
                       },
                     }}
                   >
-                    <DropdownHeading>Switch Networks</DropdownHeading>
+                    <DropdownHeading>{locales.switchNetworks}</DropdownHeading>
                     <ChainSelectList />
                   </DropdownContainer>
                 </DropdownWindow>