Using PINCodeInput from design-system

0xsequence · May 5, 2024 · 40bb7f3 · 40bb7f3
1 parent da57c3f
commit 40bb7f3
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 152 deletions.
diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/PINCodeInput.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/PINCodeInput.tsx
diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx
@@ -13,7 +13,8 @@ import {
   Spinner,
   Image,
   IconButton,
-  Tooltip
+  Tooltip,
+  PINCodeInput
 } from '@0xsequence/design-system'
 import { useConnect, useAccount, Connector, useConfig, Storage } from 'wagmi'
 import { LogoProps, sequenceWallet } from '@0xsequence/kit-connectors'
@@ -30,7 +31,6 @@ import { KitConnectProviderProps } from '../index'
 import { ExtendedConnector } from '../../../utils/getKitConnectWallets'
 
 import { useEmailAuth } from '../../../hooks/useWaasEmailAuth'
-import { PINCodeInput } from './PINCodeInput'
 import { getStorageItem } from '../../../utils/storage'
 
 interface ConnectWalletContentProps extends KitConnectProviderProps {

diff --git a/packages/kit/src/components/styles.css.ts b/packages/kit/src/components/styles.css.ts
@@ -1,5 +1,4 @@
-import { globalStyle, style } from '@vanilla-extract/css'
-import { textVariants, vars } from '@0xsequence/design-system'
+import { globalStyle } from '@vanilla-extract/css'
 
 globalStyle('#kit-provider *, #kit-provider::before *, #kit-provider *::after', {
   boxSizing: 'border-box'
@@ -8,35 +7,3 @@ globalStyle('#kit-provider *, #kit-provider::before *, #kit-provider *::after',
 globalStyle('#kit-wallet *, #kit-wallet::before *, #kit-wallet *::after', {
   boxSizing: 'border-box'
 })
-
-export const digitInput = style([
-  textVariants({ variant: 'large' }),
-  {
-    height: '48px',
-    width: '40px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: '10px',
-    border: `${vars.borderWidths.thick} solid ${vars.colors.borderNormal}`,
-    borderRadius: vars.radii.sm,
-    color: vars.colors.text100,
-    background: 'transparent',
-    textAlign: 'center',
-    caretColor: 'transparent',
-
-    boxShadow: 'none',
-
-    ':hover': {
-      borderColor: vars.colors.borderFocus
-    },
-
-    ':focus': {
-      borderColor: vars.colors.borderFocus
-    },
-
-    '::selection': {
-      background: 'transparent'
-    }
-  }
-])