@huma-finance/widgets 0.0.59-beta.491 → 0.0.59-beta.494

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@huma-finance/widgets",
3
- "version": "0.0.59-beta.491+36c4380",
3
+ "version": "0.0.59-beta.494+6f95cfb",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -30,7 +30,7 @@
30
30
  "@ethersproject/experimental": "^5.7.0",
31
31
  "@ethersproject/providers": "^5.6.0",
32
32
  "@ethersproject/units": "^5.6.0",
33
- "@huma-finance/sdk": "^0.0.59-beta.491+36c4380",
33
+ "@huma-finance/sdk": "^0.0.58",
34
34
  "@huma-finance/shared": "^0.0.58",
35
35
  "@mui/icons-material": "^5.3.0",
36
36
  "@mui/material": "^5.0.6",
@@ -193,5 +193,5 @@
193
193
  "optionalDependencies": {
194
194
  "encoding": "^0.1.13"
195
195
  },
196
- "gitHead": "36c43808e9958be54f33a026f11486f6cde31d4e"
196
+ "gitHead": "6f95cfb0c84875a8e823e25133b37bc7cab0abdc"
197
197
  }
@@ -107,11 +107,10 @@ export function Activity({
107
107
  title: css`
108
108
  font-weight: 800;
109
109
  font-size: 24px;
110
- color: #6b6572;
110
+ color: ${theme.palette.text.primary};
111
111
  margin-bottom: ${theme.spacing(2)};
112
112
  `,
113
113
  tableWrapper: css`
114
- background: #ffffff;
115
114
  box-shadow: 0px 4px 40px 8px rgba(0, 0, 0, 0.04);
116
115
  border-radius: 24px;
117
116
  padding: ${getPadding()};
@@ -72,7 +72,7 @@ export function ApproveAllowanceModal({
72
72
  margin-top: ${theme.spacing(4)};
73
73
  font-weight: 400;
74
74
  font-size: 16px;
75
- color: #a8a1b2;
75
+ color: ${theme.palette.text.secondary};
76
76
  padding: ${theme.spacing(0, 1)};
77
77
  `,
78
78
  }
@@ -68,7 +68,7 @@ export function ApproveAllowanceModalV2({
68
68
  margin-top: ${theme.spacing(4)};
69
69
  font-weight: 400;
70
70
  font-size: 16px;
71
- color: #a8a1b2;
71
+ color: ${theme.palette.text.secondary};
72
72
  padding: ${theme.spacing(0, 1)};
73
73
  `,
74
74
  }
@@ -66,7 +66,7 @@ export function ChooseAmountModal({
66
66
  ${theme.cssMixins.rowCentered};
67
67
  font-weight: 400;
68
68
  font-size: 16px;
69
- color: #a8a1b2;
69
+ color: ${theme.palette.text.secondary};
70
70
  margin-top: ${theme.spacing(2)};
71
71
  `,
72
72
  chosenAmountWrapper: css`
@@ -154,7 +154,7 @@ export function ChooseAmountModal({
154
154
  font-weight: 400;
155
155
  ${theme.cssMixins.rowSpaceBetweened};
156
156
  font-size: 16px;
157
- color: #423b46;
157
+ color: ${theme.palette.text.secondary};
158
158
  `,
159
159
  divider: css`
160
160
  margin: ${theme.spacing(2, 0)};
@@ -171,7 +171,7 @@ export function ChooseAmountModal({
171
171
  ${theme.cssMixins.rowHCentered};
172
172
  font-weight: 400;
173
173
  font-size: 12px;
174
- color: #a8a1b2;
174
+ color: ${theme.palette.text.secondary};
175
175
  margin-top: ${theme.spacing(1)};
176
176
  letter-spacing: 0px;
177
177
  width: 100%;
@@ -188,8 +188,11 @@ export function ChooseAmountModal({
188
188
  event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
189
189
  ) => {
190
190
  setInputTouched(true)
191
- // @ts-ignore
192
- handleChangeAmount(event.target.value)
191
+ if (!event.target.value) {
192
+ handleChangeAmount(0)
193
+ } else {
194
+ handleChangeAmount(Number(event.target.value))
195
+ }
193
196
  }
194
197
 
195
198
  const handleSetMax = () => {
@@ -38,7 +38,7 @@ export function ConfirmTransferModal({
38
38
  description: css`
39
39
  font-weight: 400;
40
40
  font-size: 16px;
41
- color: #49505b;
41
+ color: ${theme.palette.text.secondary};
42
42
  margin-top: ${theme.spacing(4)};
43
43
  text-align: center;
44
44
  `,
@@ -53,7 +53,7 @@ export function ConfirmTransferModal({
53
53
  background: #f9f8fa;
54
54
  border-radius: 4px;
55
55
  font-size: 16px;
56
- color: #49505b;
56
+ color: ${theme.palette.text.primary};
57
57
  padding: ${theme.spacing(3, 2)};
58
58
  margin-bottom: ${theme.spacing(1)};
59
59
  position: relative;
@@ -70,7 +70,7 @@ export function Evaluation({
70
70
  font-weight: 400;
71
71
  font-size: 16px;
72
72
  line-height: 24px;
73
- color: #49505b;
73
+ color: ${theme.palette.text.secondary};
74
74
  margin-bottom: ${theme.spacing(8)};
75
75
  `,
76
76
  checkWrapper: css`
@@ -81,7 +81,7 @@ export function Evaluation({
81
81
  border-radius: 4px;
82
82
  font-weight: 400;
83
83
  font-size: 16px;
84
- color: #49505b;
84
+ color: ${theme.palette.text.secondary};
85
85
  `,
86
86
  checkIcon: css`
87
87
  ${theme.cssMixins.rowCentered}
@@ -55,13 +55,6 @@ export function ErrorModal({
55
55
  width: 100%;
56
56
  display: inline-table;
57
57
  padding: ${theme.spacing(2, 0)};
58
- background: linear-gradient(
59
- 0deg,
60
- rgba(255, 255, 255, 0.9),
61
- rgba(255, 255, 255, 0.9)
62
- ),
63
- #d32f2f;
64
- border-radius: 4px;
65
58
  position: relative;
66
59
  margin-top: ${theme.spacing(9)};
67
60
  height: 79px;
@@ -73,7 +66,7 @@ export function ErrorModal({
73
66
  margin: ${theme.spacing(0, 2)};
74
67
  `,
75
68
  messageWrapper: css`
76
- color: #541313;
69
+ color: ${theme.palette.text.primary};
77
70
  font-weight: 400;
78
71
  font-size: 16px;
79
72
  padding-left: ${theme.spacing(6)};
@@ -82,7 +75,7 @@ export function ErrorModal({
82
75
  margin-top: ${theme.spacing(0.5)};
83
76
  font-size: 14px;
84
77
  font-weight: 400;
85
- color: #541313;
78
+ color: ${theme.palette.text.primary};
86
79
  cursor: pointer;
87
80
  display: -webkit-box;
88
81
  line-height: 16px;
@@ -77,10 +77,8 @@ export function InputAmountModal({
77
77
  justify-content: center;
78
78
  align-items: center;
79
79
  border-radius: 32px;
80
- background: #f7f1ff;
81
80
  padding: 4px 10px;
82
81
  gap: 8px;
83
- color: #b246ff;
84
82
  font-weight: 700;
85
83
  font-size: 13px;
86
84
  line-height: 22px;
@@ -133,7 +131,11 @@ export function InputAmountModal({
133
131
  </Button>
134
132
  </Box>
135
133
  ) : (
136
- <Button css={styles.max} onClick={setMaxAmount}>
134
+ <Button
135
+ variant='contained'
136
+ css={styles.max}
137
+ onClick={setMaxAmount}
138
+ >
137
139
  {maxAmountText}
138
140
  </Button>
139
141
  ),
@@ -40,7 +40,7 @@ export function EvaluationEA({
40
40
  padding: ${theme.spacing(0, 2)};
41
41
  font-weight: 400;
42
42
  font-size: 16px;
43
- color: #a8a1b2;
43
+ color: ${theme.palette.text.secondary};
44
44
  `,
45
45
  }
46
46
 
@@ -117,7 +117,7 @@ export function EvaluationKYC({
117
117
  padding: ${theme.spacing(0, 2)};
118
118
  font-weight: 400;
119
119
  font-size: 16px;
120
- color: #a8a1b2;
120
+ color: ${theme.palette.text.secondary};
121
121
  `,
122
122
  }
123
123
 
@@ -81,7 +81,7 @@ export function Evaluation({
81
81
  padding: ${theme.spacing(0, 2)};
82
82
  font-weight: 400;
83
83
  font-size: 16px;
84
- color: #a8a1b2;
84
+ color: ${theme.palette.text.secondary};
85
85
  `,
86
86
  }
87
87
 
@@ -160,7 +160,7 @@ export function NotifiSubscriptionModal({
160
160
  ${theme.cssMixins.rowCentered};
161
161
  font-weight: 400;
162
162
  font-size: 16px;
163
- color: #a8a1b2;
163
+ color: ${theme.palette.text.secondary};
164
164
  margin-top: ${theme.spacing(6)};
165
165
  `,
166
166
  inputField: css`
@@ -27,7 +27,7 @@ export function SignIn(): React.ReactElement {
27
27
  font-weight: 400;
28
28
  font-size: 16px;
29
29
  line-height: 24px;
30
- color: #49505b;
30
+ color: ${theme.palette.text.secondary};
31
31
  margin-bottom: ${theme.spacing(8)};
32
32
  `,
33
33
  }
@@ -35,7 +35,7 @@ export function TxDoneModal({
35
35
  ${theme.cssMixins.colVCentered};
36
36
  font-weight: 400;
37
37
  font-size: 18px;
38
- color: #423b46;
38
+ color: ${theme.palette.text.secondary};
39
39
  margin-top: ${theme.spacing(8)};
40
40
  text-align: center;
41
41
  `,
@@ -31,7 +31,7 @@ export function WrapperModal({
31
31
  font-weight: 400;
32
32
  font-size: 16px;
33
33
  line-height: 24px;
34
- color: #49505b;
34
+ color: ${theme.palette.text.secondary};
35
35
  `,
36
36
  bottom: css`
37
37
  & .MuiButtonBase-root {
@@ -3,8 +3,6 @@ import { Dialog } from '@mui/material'
3
3
  import { useMQ } from '@huma-finance/shared'
4
4
  import React from 'react'
5
5
 
6
- import { white } from '../../theme/palette'
7
-
8
6
  type HumaModalType = {
9
7
  children?: React.ReactNode
10
8
  isOpen: boolean
@@ -54,7 +52,9 @@ export function HumaModal({
54
52
  open={isOpen}
55
53
  PaperProps={{
56
54
  style: {
57
- background: white,
55
+ border: '1px solid #202020',
56
+ background: 'rgba(255, 255, 255, 0.05)',
57
+ backdropFilter: 'blur(50px)',
58
58
  borderRadius: '16px',
59
59
  overflow: overflow || 'inherit',
60
60
  overflowY: overflowY || 'inherit',
@@ -44,7 +44,8 @@ export function components(theme: Theme): ThemeOptions['components'] {
44
44
  textTransform: 'none',
45
45
  '&.Mui-disabled': {
46
46
  border: 'none',
47
- background: 'rgba(0, 0, 0, 0.12)',
47
+ background:
48
+ 'linear-gradient(232.71deg, rgba(178, 70, 255, 0.25) 5%, rgba(255, 106, 138, 0.25) 175%)',
48
49
  boxShadow: 'unset',
49
50
  },
50
51
  },
@@ -45,9 +45,9 @@ const yellow = {
45
45
 
46
46
  const grey = {
47
47
  100: '#CBD6DE',
48
- 200: '#6B6B6B',
49
- 300: '#606060',
50
- 400: '#5E7485',
48
+ 200: '#BDB5C8',
49
+ 300: '#d3ccdd',
50
+ 400: '#EAE6F0',
51
51
  600: '#395062',
52
52
  700: '#6B6572',
53
53
  800: '#4A4A4A',
@@ -136,9 +136,9 @@ export const paletteCore: ThemeOptions['palette'] = {
136
136
  main: green[200],
137
137
  },
138
138
  text: {
139
- primary: black[5],
140
- secondary: black[6],
141
- tertiary: black[3],
139
+ primary: grey[400],
140
+ secondary: grey[200],
141
+ tertiary: grey[300],
142
142
  quaternary: grey[400],
143
143
  },
144
144
  warning: {
@@ -97,7 +97,6 @@ export const typography: ThemeOptions['typography'] = {
97
97
  fontWeight: 500,
98
98
  letterSpacing: coreThemeConstants.letterSpacing.sm,
99
99
  lineHeight: coreThemeConstants.lineHeight.md,
100
- color: 'rgba(0, 0, 0, 0.87)',
101
100
  },
102
101
  labsSmall: {
103
102
  fontSize: '0.75rem',