Skip to content

Commit e5121d2

Browse files
Agilulfo1820Agilulfo1820
committed
feat: add chakra theme
1 parent 31e3c49 commit e5121d2

File tree

10 files changed

+173
-55
lines changed

10 files changed

+173
-55
lines changed

‎packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/DAppKitPrivyProvider.tsx‎

Lines changed: 49 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { PrivyProvider as BasePrivyProvider } from '@privy-io/react-auth';
33
import { DAppKitProvider, DAppKitUIOptions } from '@vechain/dapp-kit-react';
44
import { SmartAccountProvider } from './hooks';
55
import { ChakraProvider } from '@chakra-ui/react';
6+
import { Theme } from './theme';
67

78
type Props = {
89
children: ReactNode;
@@ -78,51 +79,67 @@ export const DAppKitPrivyProvider = ({
7879
feeDelegationConfig,
7980
dappKitConfig,
8081
}: Props) => {
81-
// Join login methods and ecosystemAppsID, but ecosystemAppsID needs to be written as "privy:appID"
8282
const loginMethods = [
8383
...privyConfig.loginMethods,
8484
...(privyConfig.ecosystemAppsID ?? []).map((appID) => `privy:${appID}`),
8585
];
8686

87+
// Set the color mode in localStorage to match the Privy theme
88+
if (
89+
!localStorage.getItem('chakra-ui-color-mode') ||
90+
localStorage.getItem('chakra-ui-color-mode') !==
91+
privyConfig.appearance.theme
92+
) {
93+
localStorage.setItem(
94+
'chakra-ui-color-mode',
95+
privyConfig.appearance.theme,
96+
);
97+
localStorage.setItem('chakra-ui-color-mode-default', 'set');
98+
}
99+
87100
return (
88101
<DAppKitPrivyContext.Provider
89102
value={{ privyConfig, feeDelegationConfig, dappKitConfig }}
90103
>
91-
<BasePrivyProvider
92-
appId={privyConfig.appId}
93-
clientId={privyConfig.clientId}
94-
config={{
95-
loginMethodsAndOrder: {
96-
// @ts-ignore
97-
primary: loginMethods,
98-
},
99-
appearance: privyConfig.appearance,
100-
embeddedWallets: {
101-
createOnLogin:
102-
privyConfig.embeddedWallets?.createOnLogin ??
103-
'all-users',
104-
},
105-
}}
106-
>
107-
<DAppKitProvider
108-
nodeUrl={dappKitConfig.nodeUrl}
109-
genesis={dappKitConfig.genesis}
110-
usePersistence
111-
walletConnectOptions={dappKitConfig.walletConnectOptions}
112-
themeMode={dappKitConfig.themeMode}
113-
themeVariables={{}}
104+
<ChakraProvider theme={Theme}>
105+
<BasePrivyProvider
106+
appId={privyConfig.appId}
107+
clientId={privyConfig.clientId}
108+
config={{
109+
loginMethodsAndOrder: {
110+
// @ts-ignore
111+
primary: loginMethods,
112+
},
113+
appearance: privyConfig.appearance,
114+
embeddedWallets: {
115+
createOnLogin:
116+
privyConfig.embeddedWallets?.createOnLogin ??
117+
'all-users',
118+
},
119+
}}
114120
>
115-
<SmartAccountProvider
121+
<DAppKitProvider
116122
nodeUrl={dappKitConfig.nodeUrl}
117-
delegatorUrl={feeDelegationConfig.delegatorUrl}
118-
delegateAllTransactions={
119-
feeDelegationConfig.delegateAllTransactions
123+
genesis={dappKitConfig.genesis}
124+
usePersistence
125+
walletConnectOptions={
126+
dappKitConfig.walletConnectOptions
120127
}
128+
themeMode={dappKitConfig.themeMode}
129+
themeVariables={{}}
121130
>
122-
<ChakraProvider>{children}</ChakraProvider>
123-
</SmartAccountProvider>
124-
</DAppKitProvider>
125-
</BasePrivyProvider>
131+
<SmartAccountProvider
132+
nodeUrl={dappKitConfig.nodeUrl}
133+
delegatorUrl={feeDelegationConfig.delegatorUrl}
134+
delegateAllTransactions={
135+
feeDelegationConfig.delegateAllTransactions
136+
}
137+
>
138+
{children}
139+
</SmartAccountProvider>
140+
</DAppKitProvider>
141+
</BasePrivyProvider>
142+
</ChakraProvider>
126143
</DAppKitPrivyContext.Provider>
127144
);
128145
};

‎packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectButton/AccountModal.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,12 +66,11 @@ export const AccountModal = ({ isOpen, onClose }: Props) => {
6666
onClose={onClose}
6767
isCentered
6868
size={'sm'}
69-
variant={'connectModalVariant'}
7069
>
7170
<ModalOverlay />
7271
<ModalContent {...(_modalContentProps as ModalContentProps)}>
7372
<ModalHeader
74-
fontSize={'sm'}
73+
fontSize={'md'}
7574
fontWeight={'400'}
7675
textAlign={'center'}
7776
color={isDark ? '#dfdfdd' : '#4d4d4d'}

‎packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectButton/AddressDisplay.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,14 @@ export const AddressDisplay = ({ address, label, domain }: Props) => {
4444
</HStack>
4545
<Text fontSize={'sm'}>
4646
{'('}
47-
{humanAddress(address, 4, 4)}
47+
{humanAddress(address, 6, 4)}
4848
{')'}
4949
</Text>
5050
</VStack>
5151
) : (
5252
<HStack>
5353
<Text fontSize={'sm'}>
54-
{humanAddress(address, 4, 4)}
54+
{humanAddress(address, 6, 4)}
5555
</Text>
5656
<Icon
5757
boxSize={3}

‎packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectButton/ConnectButton.tsx‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, Image, useDisclosure } from '@chakra-ui/react';
1+
import { Button, HStack, Image, Text, useDisclosure } from '@chakra-ui/react';
22
import { useWallet } from '../../hooks';
33
import { ConnectModal } from '../ConnectModal';
44
import { AccountModal } from './AccountModal';
@@ -15,8 +15,8 @@ export const ConnectButton = () => {
1515
} = useWallet();
1616

1717
const addressOrDomain = isConnectedWithPrivy
18-
? humanDomain(smartAccount.address ?? '', 4, 4)
19-
: humanAddress(connectedAccount ?? '', 4, 4);
18+
? humanDomain(smartAccount.address ?? '', 6, 4)
19+
: humanAddress(connectedAccount ?? '', 6, 4);
2020

2121
const walletImage = getPicassoImage(
2222
isConnectedWithPrivy
@@ -37,22 +37,17 @@ export const ConnectButton = () => {
3737
<>
3838
{isConnected ? (
3939
<Button onClick={accountModal.onOpen}>
40-
{isLoadingConnection || !isConnected ? (
41-
'Loading...'
42-
) : (
43-
<>
44-
<Image
45-
className="address-icon mobile"
46-
src={walletImage}
47-
alt="wallet"
48-
width={23}
49-
height={23}
50-
borderRadius="50%"
51-
marginRight={2}
52-
/>
53-
{addressOrDomain}
54-
</>
55-
)}
40+
<HStack>
41+
<Image
42+
className="address-icon mobile"
43+
src={walletImage}
44+
alt="wallet"
45+
width={23}
46+
height={23}
47+
borderRadius="50%"
48+
/>
49+
<Text fontSize="sm">{addressOrDomain}</Text>
50+
</HStack>
5651
</Button>
5752
) : (
5853
<Button onClick={connectModal.onOpen}>Login</Button>

‎packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/ConnectModal.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ export const ConnectModal = ({ isOpen, onClose, logo }: Props) => {
102102
</HStack>
103103
<VStack spacing={4} w={'full'}>
104104
<Button
105+
variant={'loginIn'}
105106
fontSize={'14px'}
106107
fontWeight={'400'}
107108
backgroundColor={
@@ -145,6 +146,7 @@ export const ConnectModal = ({ isOpen, onClose, logo }: Props) => {
145146
0 && (
146147
<>
147148
<Button
149+
variant={'loginIn'}
148150
fontSize={'14px'}
149151
fontWeight={'400'}
150152
backgroundColor={

‎packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/theme/button.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
2+
3+
const baseStyle = defineStyle({
4+
borderRadius: '12px',
5+
});
6+
7+
const variants = {
8+
loginIn: defineStyle(() => ({
9+
bg: '#f2f2f2',
10+
color: '#2a2a2a',
11+
_hover: {
12+
bg: '#eaeaea',
13+
},
14+
_dark: {
15+
bg: '#1f1f1e',
16+
color: '#ffffff',
17+
_hover: {
18+
bg: '#3c3c39',
19+
},
20+
border: '1px solid #5e5e5e',
21+
},
22+
})),
23+
};
24+
25+
export const buttonTheme = defineStyleConfig({
26+
baseStyle,
27+
variants,
28+
});

‎packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/theme/card.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { modalAnatomy as parts } from '@chakra-ui/anatomy';
2+
import {
3+
StyleFunctionProps,
4+
createMultiStyleConfigHelpers,
5+
} from '@chakra-ui/react';
6+
7+
const { definePartsStyle, defineMultiStyleConfig } =
8+
createMultiStyleConfigHelpers(parts.keys);
9+
10+
const variants = {
11+
base: (props: StyleFunctionProps) =>
12+
definePartsStyle({
13+
body: {
14+
borderRadius: '12px',
15+
backgroundColor:
16+
props.colorMode === 'dark' ? '#1f1f1e' : 'white',
17+
border:
18+
props.colorMode === 'dark'
19+
? '1px solid #2d2d2d'
20+
: '1px solid #eaeaea',
21+
},
22+
}),
23+
};
24+
25+
export const cardTheme = defineMultiStyleConfig({
26+
variants,
27+
defaultProps: {
28+
variant: 'base', // default is solid
29+
},
30+
});

‎packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/theme/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './theme';

‎packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/theme/modal.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { modalAnatomy as parts } from '@chakra-ui/anatomy';
2+
import {
3+
StyleFunctionProps,
4+
createMultiStyleConfigHelpers,
5+
} from '@chakra-ui/react';
6+
7+
const { definePartsStyle, defineMultiStyleConfig } =
8+
createMultiStyleConfigHelpers(parts.keys);
9+
10+
const variants = {
11+
base: (props: StyleFunctionProps) =>
12+
definePartsStyle({
13+
dialog: {
14+
borderRadius: '24px',
15+
backgroundColor:
16+
props.colorMode === 'dark' ? '#1f1f1e' : 'white',
17+
},
18+
closeButton: {
19+
borderRadius: '50%',
20+
},
21+
}),
22+
};
23+
24+
export const modalTheme = defineMultiStyleConfig({
25+
variants,
26+
defaultProps: {
27+
variant: 'base', // default is solid
28+
},
29+
});

‎packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/theme/theme.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { ThemeConfig, extendTheme } from '@chakra-ui/react';
2+
import { modalTheme } from './modal';
3+
import { cardTheme } from './card';
4+
import { buttonTheme } from './button';
5+
6+
const themeConfig: ThemeConfig = {
7+
// 2. Add your color mode config
8+
useSystemColorMode: false,
9+
10+
// @ts-ignore
11+
components: {
12+
Modal: modalTheme,
13+
Card: cardTheme,
14+
Button: buttonTheme,
15+
},
16+
};
17+
export const Theme = extendTheme(themeConfig);

0 commit comments

Comments
 (0)