chore: make single hook for connections and fix some ui details

Envoy-VC · Sep 7, 2024 · 8916f3d · 8916f3d
1 parent 918a807
commit 8916f3d
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 64 deletions.
diff --git a/packages/connect-kit/src/components/connect-wallet/mobile.tsx b/packages/connect-kit/src/components/connect-wallet/mobile.tsx
@@ -44,7 +44,7 @@ export const MobileConnectButton = () => {
   }
 
   return (
-    <div className='!ck-rounded-3xl !ck-px-0 ck-w-full ck-py-0 ck-gap-4 ck-border ck-bg-background ck-p-6 ck-shadow-lg sm:ck-rounded-lg ck-max-w-[22rem]'>
+    <div className='!ck-rounded-3xl !ck-px-0 !ck-w-full ck-gap-4 ck-border ck-bg-background ck-p-6 ck-shadow-lg ck-max-w-[22rem] ck-py-3'>
       <MobileLayout>
         <WalletScreen />
       </MobileLayout>

diff --git a/packages/connect-kit/src/components/connect-wallet/wallet-select/button.tsx b/packages/connect-kit/src/components/connect-wallet/wallet-select/button.tsx
@@ -1,17 +1,10 @@
-import { nillionTestnet } from '~/lib/chain';
-
 import { type supportedWallets } from '~/providers';
 import type { WalletType } from '~/types';
-import { useConnectKitStore, useConnectWallet } from '~/lib/hooks';
-import { cn, errorHandler } from '~/lib/utils';
+import { useGraz } from '~/lib/hooks';
+import { cn } from '~/lib/utils';
 
 import { type Variants, motion } from 'framer-motion';
-import {
-  type WalletType as GrazWalletType,
-  checkWallet,
-  useConnect,
-  useSuggestChainAndConnect,
-} from 'graz';
+import { type WalletType as GrazWalletType, checkWallet } from 'graz';
 
 import { buttonVariants } from '~/components/ui/button';
 
@@ -22,11 +15,7 @@ interface WalletButtonProps {
 }
 
 export const WalletButton = ({ type, wallet, index }: WalletButtonProps) => {
-  const { setActiveWalletType, setError, setActiveScreen } =
-    useConnectKitStore();
-  const { chainOptions } = useConnectWallet();
-  const { suggestAndConnectAsync } = useSuggestChainAndConnect();
-  const { connectAsync } = useConnect();
+  const { connect } = useGraz();
 
   const variants: Variants = {
     initial: {
@@ -63,40 +52,7 @@ export const WalletButton = ({ type, wallet, index }: WalletButtonProps) => {
         buttonVariants({ variant: 'secondary' })
       )}
       onClick={async () => {
-        try {
-          setError(null);
-          setActiveWalletType(type);
-          setActiveScreen('connecting');
-
-          const chainInfo = chainOptions.chainInfos.find(
-            (i) => i.chainId === chainOptions.defaultChain
-          );
-
-          let res;
-
-          if (chainInfo) {
-            res = await suggestAndConnectAsync({
-              chainInfo: nillionTestnet,
-              walletType: type as GrazWalletType,
-            });
-          } else {
-            res = await connectAsync({
-              chainId: chainOptions.defaultChain,
-              walletType: type as GrazWalletType,
-            });
-          }
-
-          const address =
-            res.accounts[chainOptions.defaultChain]?.bech32Address;
-          if (!address) {
-            throw new Error('Failed to connect');
-          }
-        } catch (error) {
-          const serialized = errorHandler(error);
-          console.log(serialized);
-          setError(serialized.message ?? 'An Unknown Error Occurred');
-          setActiveScreen('error');
-        }
+        await connect(type);
       }}
     >
       <div className='ck-flex ck-flex-row ck-items-center ck-gap-[10px]'>
@@ -108,7 +64,7 @@ export const WalletButton = ({ type, wallet, index }: WalletButtonProps) => {
         <div className='ck-text-base ck-font-medium'>{wallet.prettyName}</div>
       </div>
       {isWalletReady ? (
-        <div className='ck-rounded-lg ck-bg-green-100 ck-px-2 ck-py-[2px] ck-text-[10px] ck-uppercase ck-tracking-tight ck-text-green-500'>
+        <div className='ck-rounded-lg ck-bg-[#DAF0E4] ck-px-[6px] ck-py-[2px] ck-text-[10px] ck-uppercase ck-tracking-tight ck-text-[#26b562] ck-font-semibold'>
           installed
         </div>
       ) : null}

diff --git a/packages/connect-kit/src/components/connect-wallet/wallet-select/index.tsx b/packages/connect-kit/src/components/connect-wallet/wallet-select/index.tsx
@@ -57,7 +57,10 @@ export const WalletSelectList = () => {
               }}
             >
               <div className='ck-flex ck-flex-row ck-items-center ck-gap-[10px]'>
-                <WalletIcon className='ck-h-6 ck-w-6' />
+                <WalletIcon
+                  className='ck-h-7 ck-w-9 ck-text-primary'
+                  strokeWidth={1.5}
+                />
                 <div className='ck-text-base ck-font-medium'>
                   {showAllWallets ? 'Show less' : 'Show all Wallets'}
                 </div>

diff --git a/packages/connect-kit/src/components/icons/index.ts b/packages/connect-kit/src/components/icons/index.ts
@@ -5,3 +5,4 @@ export { ICON as CosmostationExtensionIcon } from './cosmostation';
 export { ICON as StationExtensionIcon } from './station';
 export { ICON as XDEFIExtensionLogo } from './xdefi';
 export { ICON as CompassExtentionLogo } from './compass';
+export * from './welcome';
diff --git a/packages/connect-kit/src/components/layouts/desktop.tsx b/packages/connect-kit/src/components/layouts/desktop.tsx
@@ -12,11 +12,11 @@ export const DesktopLayout = ({ children }: PropsWithChildren) => {
     return (
       <AnimateChangeInHeight>
         <div className='ck-pt-5 ck-pb-3'>
-          <div className='ck-relative ck-text-center ck-px-3'>
+          <div className='ck-relative ck-text-center'>
             <div className='ck-font-semibold ck-text-base px-2 ck-text-center'>
               {modalOptions.title}
             </div>
-            <div className='absolute ck-top-1/2 ck--translate-y-1/2 ck-w-full'>
+            <div className='absolute ck-top-1/2 ck--translate-y-1/2 ck-w-full ck-px-3'>
               <Navigation />
             </div>
           </div>

diff --git a/packages/connect-kit/src/components/layouts/mobile.tsx b/packages/connect-kit/src/components/layouts/mobile.tsx
@@ -9,12 +9,12 @@ export const MobileLayout = ({ children }: PropsWithChildren) => {
 
   return (
     <AnimateChangeInHeight>
-      <div className='ck-pb-2'>
+      <div className='ck-py-2 ck-w-full'>
         <div className='ck-relative ck-text-center ck-px-3'>
           <div className='ck-font-semibold ck-text-base px-2 ck-text-center'>
             {modalOptions.title}
           </div>
-          <div className='absolute ck-top-1/2 ck--translate-y-1/2 ck-w-full'>
+          <div className='absolute ck-top-1/2 ck--translate-y-1/2 ck-w-full ck-px-5'>
             <Navigation />
           </div>
         </div>

diff --git a/packages/connect-kit/src/components/navigation.tsx b/packages/connect-kit/src/components/navigation.tsx
@@ -17,13 +17,13 @@ export const Navigation = () => {
   return (
     <div
       className={cn(
-        'ck-w-full ck-flex ck-flex-row ck-items-center ck-px-3',
+        'ck-w-full ck-flex ck-flex-row ck-items-center',
         activeWalletType ? 'ck-justify-between' : 'ck-justify-end'
       )}
     >
       {activeWalletType ? (
         <Button
-          className='ck-m-0 ck-p-0 ck-cursor-pointer'
+          className='!ck-m-0 !ck-p-0 ck-cursor-pointer hover:ck-bg-neutral-100 !ck-rounded-xl ck-w-9 ck-h-9 ck-transition-all ck-duration-300 ck-ease-in-out'
           variant='link'
           onClick={() => {
             setActiveWalletType(null);
@@ -37,7 +37,7 @@ export const Navigation = () => {
 
       {mode === 'modal' && (
         <Button
-          className='ck-m-0 ck-p-0 ck-cursor-pointer'
+          className='!ck-m-0 !ck-p-0 ck-cursor-pointer hover:ck-bg-neutral-100 !ck-rounded-xl ck-w-9 ck-h-9 ck-transition-all ck-duration-300 ck-ease-in-out'
           variant='link'
           onClick={async () => {
             setIsModalOpen(false);
@@ -48,7 +48,7 @@ export const Navigation = () => {
             setActiveScreen('home');
           }}
         >
-          <X size={16} strokeWidth={3} />
+          <X size={18} strokeWidth={3} />
         </Button>
       )}
     </div>

diff --git a/packages/connect-kit/src/components/screens/connecting.tsx b/packages/connect-kit/src/components/screens/connecting.tsx
@@ -1,10 +1,12 @@
-import { useConnectKitStore } from '~/lib/hooks';
+import { useConnectKitStore, useGraz } from '~/lib/hooks';
 import { AnimateSlide } from '../animate-slide';
 import { cn } from '~/lib/utils';
-import { X } from 'lucide-react';
+import { RotateCcwIcon, X } from 'lucide-react';
 
 export const ConnectingScreen = () => {
   const { supportedWallets, activeWalletType, error } = useConnectKitStore();
+  const { connect } = useGraz();
+
   if (!activeWalletType) return null;
 
   const wallet = supportedWallets[activeWalletType];
@@ -39,6 +41,18 @@ export const ConnectingScreen = () => {
           <div className='ck-text-sm ck-font-medium ck-text-neutral-500'>
             Accept Connect request in wallet
           </div>
+          {error ? (
+            <button
+              className='ck-bg-[#F0F1FF] ck-text-[#677DFF] ck-border-[#E3E4F2] ck-h-8 ck-w-fit ck-px-4 !ck-rounded-full ck-text-sm ck-font-semibold ck-my-4 ck-mx-auto ck-flex ck-flex-row ck-items-center ck-gap-2'
+              type='button'
+              onClick={async () => {
+                await connect(activeWalletType);
+              }}
+            >
+              <RotateCcwIcon size={16} strokeWidth={3} />
+              Try again
+            </button>
+          ) : null}
         </div>
       </div>
     </AnimateSlide>

diff --git a/packages/connect-kit/src/lib/hooks/index.ts b/packages/connect-kit/src/lib/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from './use-connect-kit-store';
 export * from './use-is-mobile';
 export * from './use-connect-wallet';
+export * from './use-graz';
diff --git a/packages/connect-kit/src/lib/hooks/use-graz.tsx b/packages/connect-kit/src/lib/hooks/use-graz.tsx
@@ -0,0 +1,58 @@
+import {
+  useConnect,
+  useSuggestChainAndConnect,
+  type WalletType as GrazWalletType,
+} from 'graz';
+import { useConnectWallet } from './use-connect-wallet';
+import { useIsMobile } from './use-is-mobile';
+import { useConnectKitStore } from './use-connect-kit-store';
+import type { WalletType } from '~/types';
+import { nillionTestnet } from '../chain';
+import { errorHandler } from '../utils';
+
+export const useGraz = () => {
+  const { isMobile } = useIsMobile();
+  const isMobileDevice = isMobile();
+
+  const { setActiveWalletType, setError, setActiveScreen } =
+    useConnectKitStore();
+  const { chainOptions } = useConnectWallet();
+  const { suggestAndConnectAsync } = useSuggestChainAndConnect();
+  const { connectAsync } = useConnect();
+
+  const connect = async (type: WalletType) => {
+    try {
+      setError(null);
+      setActiveWalletType(type);
+      setActiveScreen('connecting');
+
+      const chainInfo = chainOptions.chainInfos.find(
+        (i) => i.chainId === chainOptions.defaultChain
+      );
+
+      let res;
+
+      if (chainInfo && !isMobileDevice) {
+        res = await suggestAndConnectAsync({
+          chainInfo: nillionTestnet,
+          walletType: type as GrazWalletType,
+        });
+      } else {
+        res = await connectAsync({
+          chainId: chainOptions.defaultChain,
+          walletType: type as GrazWalletType,
+        });
+      }
+
+      const address = res.accounts[chainOptions.defaultChain]?.bech32Address;
+      if (!address) {
+        throw new Error('Failed to connect');
+      }
+    } catch (error) {
+      const serialized = errorHandler(error);
+      setError(serialized.message ?? 'An Unknown Error Occurred');
+    }
+  };
+
+  return { connect };
+};
diff --git a/packages/connect-kit/src/styles/globals.css b/packages/connect-kit/src/styles/globals.css
@@ -4,13 +4,15 @@
 
 @layer base {
   :root {
+    -webkit-tap-highlight-color: transparent;
+
     --ck-background: rgb(255, 255, 255);
     --ck-foreground: rgb(10, 10, 10);
 
     --ck-primary: rgb(23, 23, 23);
     --ck-primary-foreground: rgb(250, 250, 250);
 
-    --ck-secondary: rgb(242, 239, 243, 0);
+    --ck-secondary: rgba(242, 239, 243, 0.25);
     --ck-secondary-hover: rgb(242, 239, 243);
     --secondary-foreground: rgb(23, 23, 23);
 

diff --git a/packages/connect-kit/src/types/index.ts b/packages/connect-kit/src/types/index.ts
@@ -37,7 +37,7 @@ export interface ConnectWalletProps {
 }
 
 export type WalletType = keyof typeof supportedWallets;
-export type Screen = 'home' | 'connecting' | 'error';
+export type Screen = 'home' | 'connecting';
 
 export interface PartialConnectWalletProps {
   chainOptions?: {