add: "recent" badge (#176)

* localstorage abstraction

* uselocalstorage hook

* "recent wallet" tag

* change random ID generation to support node14

* recent page animation

* update useConnect wrapper

* useWalletConnectUri to use useConnect abstraction

* shimmer animation adjustments

* use accent color

* add hideRecentBadge option

* nudge and lighten tone

* lighten

* softer shimmer

* badge styles

* slight opacity tweaks

* tweak badge

* stronker shineys

* remove half-pixel

* text offset

* further cleanup

Author: lochie

examples/testbench/src/components/inputs.tsx

@@ -56,9 +56,20 @@ export const Select = ({
   onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 }) => {
   return (
-    <label className="select">
+    <label
+      className="select"
+      style={{
+        width: '100%',
+      }}
+    >
       <span>{label}</span>
-      <select value={value} onChange={onChange}>
+      <select
+        value={value}
+        onChange={onChange}
+        style={{
+          boxShadow: '0 0 0 1px #ccc',
+        }}
+      >
         {options.map((option) => (
           <option key={option.value} value={option.value}>
             {option.label}

examples/testbench/src/pages/_app.tsx

@@ -7,6 +7,7 @@ import { mainnet, polygon } from 'wagmi/chains';
 import { ConnectKitProvider, getDefaultClient, SIWESession } from 'connectkit';
 import { TestBenchProvider, useTestBench } from '../TestbenchProvider';
 import { siweClient } from '../utils/siweClient';
+import { useEffect } from 'react';
 
 const client = createClient(
   getDefaultClient({
@@ -22,9 +23,15 @@ const client = createClient(
 function App({ Component, pageProps }: AppProps) {
   const { theme, mode, options, customTheme } = useTestBench();
 
+  const key = JSON.stringify({ customTheme });
+
   // SIWE provider needs to be the outer-most provider because the connect kit
   // provider depends on some of the state
 
+  useEffect(() => {
+    console.log('App rendered');
+  }, [customTheme]);
+
   return (
     <siweClient.Provider
       onSignIn={(data?: SIWESession) => {
@@ -35,6 +42,7 @@ function App({ Component, pageProps }: AppProps) {
       }}
     >
       <ConnectKitProvider
+        key={key}
         theme={theme}
         mode={mode}
         options={options}

examples/testbench/src/pages/index.tsx

@@ -448,15 +448,40 @@ const Home: NextPage = () => {
         />
         <Checkbox
           label="Custom Font"
-          value="customTheme"
+          value="customFont"
           checked={customTheme['--ck-font-family'] !== undefined}
           onChange={() => {
-            setCustomTheme(
-              customTheme['--ck-font-family'] !== undefined
-                ? {}
-                : { '--ck-font-family': 'monospace' }
-            );
+            const name = '--ck-font-family';
+            if (customTheme[name] !== undefined) {
+              const { [name]: _, ...rest } = customTheme;
+              setCustomTheme(rest);
+            } else {
+              setCustomTheme({
+                ...customTheme,
+                [name]: 'monospace',
+              });
+            }
+          }}
+        />
+        <Select
+          label={'Custom Accent'}
+          value={customTheme['--ck-accent-color'] ?? ''}
+          onChange={(e) => {
+            const name = '--ck-accent-color';
+            setCustomTheme({
+              ...customTheme,
+              [name]: e.target.value,
+            });
           }}
+          options={[
+            { label: 'none', value: '' },
+            { label: 'red', value: 'red' },
+            { label: 'blue', value: 'blue' },
+            { label: 'green', value: 'green' },
+            { label: 'yellow', value: 'yellow' },
+            { label: 'purple', value: 'purple' },
+            { label: 'orange', value: 'orange' },
+          ]}
         />
         <Checkbox
           label="reduceMotion"

packages/connectkit/src/components/ConnectKit.tsx

@@ -73,6 +73,7 @@ export type ConnectKitOptions = {
   hideTooltips?: boolean;
   hideQuestionMarkCTA?: boolean;
   hideNoWalletCTA?: boolean;
+  hideRecentBadge?: boolean;
   walletConnectCTA?: 'link' | 'modal' | 'both';
   avoidLayoutShift?: boolean; // Avoids layout shift when the ConnectKit modal is open by adding padding to the body
   embedGoogleFonts?: boolean; // Automatically embeds Google Font of the current theme. Does not work with custom themes
@@ -132,6 +133,7 @@ export const ConnectKitProvider: React.FC<ConnectKitProviderProps> = ({
     hideQuestionMarkCTA: false,
     hideNoWalletCTA: false,
     walletConnectCTA: 'link',
+    hideRecentBadge: false,
     avoidLayoutShift: true,
     embedGoogleFonts: false,
     truncateLongENSAddress: true,

packages/connectkit/src/components/ConnectModal/ConnectWithInjector/index.tsx

@@ -9,8 +9,6 @@ import {
   Content,
 } from './styles';
 
-import { useContext } from '../../ConnectKit';
-import { useConnect } from '../../../hooks/useConnect';
 import supportedConnectors from '../../../constants/supportedConnectors';
 
 import {
@@ -33,6 +31,7 @@ import BrowserIcon from '../../Common/BrowserIcon';
 import { AlertIcon, TickIcon } from '../../../assets/icons';
 import { detectBrowser, isWalletConnectConnector } from '../../../utils';
 import useLocales from '../../../hooks/useLocales';
+import { useConnect } from '../../../hooks/useConnect';
 
 export const states = {
   CONNECTED: 'connected',
@@ -78,8 +77,6 @@ const ConnectWithInjector: React.FC<{
   switchConnectMethod: (id?: string) => void;
   forceState?: typeof states;
 }> = ({ connectorId, switchConnectMethod, forceState }) => {
-  const context = useContext();
-
   const { connect, connectors } = useConnect({
     onMutate: (connector?: any) => {
       if (connector.connector) {
@@ -170,9 +167,7 @@ const ConnectWithInjector: React.FC<{
 
     const con: any = connectors.find((c) => c.id === id);
     if (con) {
-      connect({
-        connector: con,
-      });
+      connect({ connector: con });
     } else {
       setStatus(states.UNAVAILABLE);
     }

packages/connectkit/src/components/Pages/Connectors/index.tsx

@@ -33,6 +33,7 @@ import {
   MobileConnectorIcon,
   InfoBox,
   InfoBoxButtons,
+  ConnectorRecentlyUsed,
 } from './styles';
 
 import { isMobile, isAndroid } from '../../../utils';
@@ -41,6 +42,7 @@ import Button from '../../Common/Button';
 import useDefaultWallets from '../../../wallets/useDefaultWallets';
 import { Connector } from 'wagmi';
 import useLocales from '../../../hooks/useLocales';
+import { useLastConnector } from '../../../hooks/useLastConnector';
 import { useWalletConnectUri } from '../../../hooks/connectors/useWalletConnectUri';
 
 const Wallets: React.FC = () => {
@@ -50,6 +52,7 @@ const Wallets: React.FC = () => {
 
   const { uri: wcUri } = useWalletConnectUri();
   const { connectAsync, connectors } = useConnect();
+  const { lastConnectorId } = useLastConnector();
 
   const openDefaultConnect = async (connector: Connector) => {
     // @TODO: use the MetaMask config
@@ -241,7 +244,15 @@ const Wallets: React.FC = () => {
                   }}
                 >
                   <ConnectorIcon>{logo}</ConnectorIcon>
-                  <ConnectorLabel>{name}</ConnectorLabel>
+                  <ConnectorLabel>
+                    {name}
+                    {!context.options?.hideRecentBadge &&
+                      lastConnectorId === connector.id && (
+                        <ConnectorRecentlyUsed>
+                          <span>Recent</span>
+                        </ConnectorRecentlyUsed>
+                      )}
+                  </ConnectorLabel>
                 </ConnectorButton>
               );
             })}

packages/connectkit/src/components/Pages/Connectors/styles.ts

@@ -1,7 +1,14 @@
 import styled from './../../../styles/styled';
+import { keyframes } from 'styled-components';
+
 import { motion } from 'framer-motion';
 import { ModalBody } from '../../Common/Modal/styles';
 
+const Shimmer = keyframes`
+  0%{ transform: translate(-100%) rotate(-45deg); }
+  100%{ transform: translate(100%) rotate(-80deg); }
+`;
+
 export const InfoBox = styled.div`
   padding: 24px 24px 28px;
   border-radius: var(--ck-tertiary-border-radius, 24px);
@@ -150,34 +157,87 @@ export const ConnectorButton = styled(motion.button)`
     transition: 180ms ease;
   }
 
+  --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));
     }
   }
 `;
+export const ConnectorRecentlyUsed = 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;
+  }
+`;
 
 export const ConnectorLabel = styled(motion.span)`
+  display: flex;
+  align-items: center;
+  gap: 9px;
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  padding: 2px 0;
   padding-right: 38px;
 `;
 

packages/connectkit/src/hooks/connectors/useWalletConnectUri.ts

@@ -1,7 +1,8 @@
 import { useState, useEffect } from 'react';
 
-import { Connector, useAccount, useConnect } from 'wagmi';
+import { Connector, useAccount } from 'wagmi';
 import { useContext } from '../../components/ConnectKit';
+import { useConnect } from '../useConnect';
 import { useWalletConnectConnector } from './../useConnectors';
 
 export function useWalletConnectUri() {
@@ -13,12 +14,7 @@ export function useWalletConnectUri() {
   const isWalletConnectLegacy = connector?.id === 'walletConnectLegacy';
 
   const { isConnected } = useAccount();
-  const { connectAsync } = useConnect({
-    onError: (error: any) => log('error', error),
-    onSuccess: (result: any) => log('success', result),
-    onMutate: () => log('mutate'),
-    onSettled: () => log('settled'),
-  });
+  const { connectAsync } = useConnect();
 
   useEffect(() => {
     async function handleMessage({ type, data }: any) {

packages/connectkit/src/hooks/useConnect.tsx

@@ -1,9 +1,21 @@
+/**
+ * This is a wrapper around wagmi's useConnect hook that adds some
+ * additional functionality.
+ */
+
 import { useConnect as wagmiUseConnect } from 'wagmi';
 import { useContext } from '../components/ConnectKit';
+import { useLastConnector } from './useLastConnector';
 
-export function useConnect(...props) {
+export function useConnect({ ...props } = {}) {
   const context = useContext();
 
+  const connectProps = {
+    chainId: context.options?.initialChainId,
+  };
+
+  const { updateLastConnectorId } = useLastConnector();
+
   const { connect, connectAsync, connectors, ...rest } = wagmiUseConnect({
     onError(err) {
       if (err.message) {
@@ -14,6 +26,9 @@ export function useConnect(...props) {
         context.log(`Could not connect.`, err);
       }
     },
+    onSuccess(data: any) {
+      updateLastConnectorId(data?.connector?.id ?? '');
+    },
     ...props,
     /*
     onSuccess: (data) => {
@@ -27,16 +42,16 @@ export function useConnect(...props) {
   });
 
   return {
-    connect: ({ ...props }) => {
+    connect: ({ ...opts }) => {
       return connect({
-        ...props,
-        chainId: context.options?.initialChainId,
+        ...opts,
+        ...connectProps,
       });
     },
-    connectAsync: async ({ ...props }) => {
+    connectAsync: async ({ ...opts }) => {
       return await connectAsync({
-        ...props,
-        chainId: context.options?.initialChainId,
+        ...opts,
+        ...connectProps,
       });
     },
     connectors,