tek-wallet 0.0.151 → 0.0.152

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.
@@ -82,9 +82,10 @@ var DepositFunction = (0, react_1.forwardRef)(function (props, ref) {
82
82
  nextStep();
83
83
  }
84
84
  };
85
- return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, onOpen: props.onOpen, onClose: props.onClose, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { overrideHeader: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
85
+ return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, onOpen: props.onOpen, onClose: props.onClose, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { overrideHeader: (0, jsx_runtime_1.jsx)(BackHeader_1.default, { sx: {
86
+ width: "100%",
86
87
  display: "flex",
87
- }, children: (0, jsx_runtime_1.jsx)(BackHeader_1.default, { overrideBack: handleBack, hideBack: currentStep === DepositStep.SELECT_TOKEN, center: DEPOSIT_STEP_NAME[currentStep], children: (0, jsx_runtime_1.jsx)(CloseModal_1.default, { sx: { marginLeft: "auto" }, onClick: props.onClose }) }) }), onClose: close, children: (0, jsx_runtime_1.jsxs)(SwiperControlled_1.default, { ref: swiperRef, swiperProps: { autoHeight: true }, children: [(0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, height: "fit-content" }), children: tokens === null || tokens === void 0 ? void 0 : tokens.map(function (item) {
88
+ }, overrideBack: handleBack, hideBack: currentStep === DepositStep.SELECT_TOKEN, center: DEPOSIT_STEP_NAME[currentStep], children: (0, jsx_runtime_1.jsx)(CloseModal_1.default, { sx: { marginLeft: "auto" }, onClick: props.onClose }) }), onClose: close, children: (0, jsx_runtime_1.jsxs)(SwiperControlled_1.default, { ref: swiperRef, swiperProps: { autoHeight: true }, children: [(0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, height: "fit-content" }), children: tokens === null || tokens === void 0 ? void 0 : tokens.map(function (item) {
88
89
  var stringifiedTokenData = JSON.stringify(__assign(__assign({}, item), { name: "Fake", fullname: "Fake fullname" }));
89
90
  return ((0, jsx_runtime_1.jsx)(TokenSelection_1.default, { onClick: handleSelectToken, tokenData: stringifiedTokenData, active: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.id) != "kf" }, item.id));
90
91
  }) }) }, DepositStep.SELECT_TOKEN), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (item) {
@@ -21,7 +21,7 @@ var material_1 = require("@mui/material");
21
21
  var getImage_1 = __importDefault(require("../../../utils/getImage"));
22
22
  var ModalLayout = function (props) {
23
23
  var theme = (0, material_1.useTheme)();
24
- return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ borderTop: "2px ".concat(theme.palette.secondary.main, " solid"), borderRadius: "1.5rem 1.5rem 0 0", maxHeight: "100dvh", backgroundImage: "url(".concat((0, getImage_1.default)("modal-bg", "jpg"), ")"), backgroundSize: "cover", backgroundPosition: "top", backgroundRepeat: "no-repeat", display: "flex", flexDirection: "column" }, theme.mixins.pagePadding), children: [!props.hideHeader && !props.overrideHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
24
+ return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ borderTop: "2px ".concat(theme.palette.secondary.main, " solid"), borderRadius: "1.5rem 1.5rem 0 0", maxHeight: "100dvh", backgroundImage: "url(".concat((0, getImage_1.default)("modal-bg", "jpg"), ")"), backgroundSize: "cover", backgroundPosition: "top", backgroundRepeat: "no-repeat", display: "flex", flexDirection: "column" }, theme.mixins.pagePadding), props.sx), children: [!props.hideHeader && !props.overrideHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
25
25
  width: "100%",
26
26
  position: "relative",
27
27
  }, children: [(0, jsx_runtime_1.jsx)(ModalTitle_1.default, { children: props.title }), (0, jsx_runtime_1.jsx)(CloseModal_1.default, { sx: {
@@ -38,12 +38,13 @@ var NetworkSelection = function (props) {
38
38
  return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({}, rest, { sx: {
39
39
  backgroundColor: "background.white16",
40
40
  padding: "0.5rem",
41
- borderRadius: "0.75rem",
42
- border: "1px solid border.white16",
41
+ borderRadius: theme.mixins.theBorderRadius.r12,
42
+ border: "1px solid",
43
+ borderColor: theme.palette.border.white,
43
44
  }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: networkData === null || networkData === void 0 ? void 0 : networkData.icon, sx: { borderRadius: theme.mixins.theBorderRadius.full } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
44
- fontSize: "typography.fontSize14",
45
- fontWeight: "typography.fontWeight500",
46
- leading: "140%",
45
+ fontSize: theme.typography.fontSize14,
46
+ fontWeight: theme.typography.fontWeight500,
47
+ leading: theme.typography.leading140,
47
48
  color: "text.white",
48
49
  whiteSpace: "nowrap",
49
50
  textTransform: "capitalize",
@@ -1,6 +1,98 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  var styles_1 = require("@mui/material/styles");
4
+ var typography = {
5
+ fontSize10: "0.625rem",
6
+ fontSize11: "0.6875rem",
7
+ fontSize12: "0.75rem",
8
+ fontSize13: "0.8125rem",
9
+ fontSize14: "0.875rem",
10
+ fontSize15: "0.9375rem",
11
+ fontSize16: "1rem",
12
+ fontSize17: "1.0625rem",
13
+ fontSize18: "1.125rem",
14
+ fontSize19: "1.1875rem",
15
+ fontSize20: "1.25rem",
16
+ fontSize21: "1.3125rem",
17
+ fontSize22: "1.375rem",
18
+ fontSize24: "1.5rem",
19
+ leading100: "100%",
20
+ leading120: "120%",
21
+ leading140: "140%",
22
+ leading160: "160%",
23
+ leading180: "180%",
24
+ leading200: "200%",
25
+ fontWeight300: 300,
26
+ fontWeight400: 400,
27
+ fontWeight500: 500,
28
+ fontWeight600: 600,
29
+ fontWeight700: 700,
30
+ };
31
+ var background = {
32
+ white: "#ffffff",
33
+ white64: "rgba(255, 255, 255, 0.64)",
34
+ white24: "rgba(255, 255, 255, 0.24)",
35
+ white16: "rgba(255, 255, 255, 0.16)",
36
+ black: "#000000",
37
+ black64: "rgba(0, 0, 0, 0.64)",
38
+ black24: "rgba(0, 0, 0, 0.24)",
39
+ black16: "rgba(0, 0, 0, 0.16)",
40
+ secondary: "#01FFFF",
41
+ secondary16: "rgba(1, 255, 255, 0.16)",
42
+ };
43
+ var border = {
44
+ white: "#ffffff",
45
+ white64: "rgba(255, 255, 255, 0.64)",
46
+ white24: "rgba(255, 255, 255, 0.24)",
47
+ white16: "rgba(255, 255, 255, 0.16)",
48
+ black: "#000000",
49
+ black64: "rgba(0, 0, 0, 0.64)",
50
+ black24: "rgba(0, 0, 0, 0.24)",
51
+ black16: "rgba(0, 0, 0, 0.16)",
52
+ secondary: "#01FFFF",
53
+ secondary16: "rgba(1, 255, 255, 0.16)",
54
+ };
55
+ var text = {
56
+ white: "#ffffff",
57
+ white80: "rgba(255, 255, 255, 0.8)",
58
+ white64: "rgba(255, 255, 255, 0.64)",
59
+ white24: "rgba(255, 255, 255, 0.24)",
60
+ successStatus: "#01FF00",
61
+ errorStatus: "#FE6565",
62
+ loadingStatus: "#01FFFF",
63
+ };
64
+ var gaps = {
65
+ g2: "0.125rem",
66
+ g4: "0.25rem",
67
+ g6: "0.375rem",
68
+ g8: "0.5rem",
69
+ g10: "0.625rem",
70
+ g12: "0.75rem",
71
+ g16: "1rem",
72
+ g20: "1.25rem",
73
+ g24: "1.5rem",
74
+ g32: "2rem",
75
+ g40: "2.5rem",
76
+ };
77
+ var pagePadding = {
78
+ paddingLeft: "1rem",
79
+ paddingRight: "1rem",
80
+ paddingTop: "1rem",
81
+ paddingBottom: "2rem",
82
+ };
83
+ var customPadding = {
84
+ p12: "0.75rem",
85
+ p16: "1rem",
86
+ p20: "1.25rem",
87
+ p24: "1.5rem",
88
+ p32: "2rem",
89
+ p40: "2.5rem",
90
+ p48: "3rem",
91
+ };
92
+ var theBorderRadius = {
93
+ full: "999px",
94
+ r12: "0.75rem",
95
+ };
4
96
  var theme = (0, styles_1.createTheme)({
5
97
  palette: {
6
98
  primary: {
@@ -11,102 +103,17 @@ var theme = (0, styles_1.createTheme)({
11
103
  main: "#01FFFF",
12
104
  contrastText: "#01FFFF",
13
105
  },
14
- background: {
15
- white: "#ffffff",
16
- white64: "rgba(255, 255, 255, 0.64)",
17
- white24: "rgba(255, 255, 255, 0.24)",
18
- white16: "rgba(255, 255, 255, 0.16)",
19
- black: "#000000",
20
- black64: "rgba(0, 0, 0, 0.64)",
21
- black24: "rgba(0, 0, 0, 0.24)",
22
- black16: "rgba(0, 0, 0, 0.16)",
23
- secondary: "#01FFFF",
24
- secondary16: "rgba(1, 255, 255, 0.16)",
25
- },
26
- border: {
27
- white: "#ffffff",
28
- white64: "rgba(255, 255, 255, 0.64)",
29
- white24: "rgba(255, 255, 255, 0.24)",
30
- white16: "rgba(255, 255, 255, 0.16)",
31
- black: "#000000",
32
- black64: "rgba(0, 0, 0, 0.64)",
33
- black24: "rgba(0, 0, 0, 0.24)",
34
- black16: "rgba(0, 0, 0, 0.16)",
35
- secondary: "#01FFFF",
36
- secondary16: "rgba(1, 255, 255, 0.16)",
37
- },
38
- text: {
39
- white: "#ffffff",
40
- white80: "rgba(255, 255, 255, 0.8)",
41
- white64: "rgba(255, 255, 255, 0.64)",
42
- white24: "rgba(255, 255, 255, 0.24)",
43
- successStatus: "#01FF00",
44
- errorStatus: "#FE6565",
45
- loadingStatus: "#01FFFF",
46
- },
106
+ background: background,
107
+ border: border,
108
+ text: text,
47
109
  divider: "rgba(255, 255, 255, 0.16)",
48
110
  },
49
- typography: {
50
- fontSize10: "0.625rem",
51
- fontSize11: "0.6875rem",
52
- fontSize12: "0.75rem",
53
- fontSize13: "0.8125rem",
54
- fontSize14: "0.875rem",
55
- fontSize15: "0.9375rem",
56
- fontSize16: "1rem",
57
- fontSize17: "1.0625rem",
58
- fontSize18: "1.125rem",
59
- fontSize19: "1.1875rem",
60
- fontSize20: "1.25rem",
61
- fontSize21: "1.3125rem",
62
- fontSize22: "1.375rem",
63
- fontSize24: "1.5rem",
64
- leading100: "100%",
65
- leading120: "120%",
66
- leading140: "140%",
67
- leading160: "160%",
68
- leading180: "180%",
69
- leading200: "200%",
70
- fontWeight300: 300,
71
- fontWeight400: 400,
72
- fontWeight500: 500,
73
- fontWeight600: 600,
74
- fontWeight700: 700,
75
- },
76
- spacing: 8,
111
+ typography: typography,
77
112
  mixins: {
78
- pagePadding: {
79
- paddingLeft: "1rem",
80
- paddingRight: "1rem",
81
- paddingTop: "1rem",
82
- paddingBottom: "2rem",
83
- },
84
- customPadding: {
85
- p12: "0.75rem",
86
- p16: "1rem",
87
- p20: "1.25rem",
88
- p24: "1.5rem",
89
- p32: "2rem",
90
- p40: "2.5rem",
91
- p48: "3rem",
92
- },
93
- theBorderRadius: {
94
- full: "999px",
95
- r12: "0.75rem",
96
- },
97
- gaps: {
98
- g2: "0.125rem",
99
- g4: "0.25rem",
100
- g6: "0.375rem",
101
- g8: "0.5rem",
102
- g10: "0.625rem",
103
- g12: "0.75rem",
104
- g16: "1rem",
105
- g20: "1.25rem",
106
- g24: "1.5rem",
107
- g32: "2rem",
108
- g40: "2.5rem",
109
- },
113
+ pagePadding: pagePadding,
114
+ customPadding: customPadding,
115
+ theBorderRadius: theBorderRadius,
116
+ gaps: gaps,
110
117
  row: {
111
118
  display: "flex",
112
119
  alignItems: "center",
@@ -117,31 +124,31 @@ var theme = (0, styles_1.createTheme)({
117
124
  },
118
125
  headerTitle: {
119
126
  color: "text.white",
120
- fontWeight: "typography.fontWeight500",
121
- fontSize: "typography.fontSize16",
127
+ fontWeight: typography.fontWeight500,
128
+ fontSize: typography.fontSize16,
122
129
  textAlign: "center",
123
130
  },
124
131
  sessionTitle: {
125
132
  color: "#ffffff",
126
- fontWeight: "typography.fontWeight600",
127
- fontSize: "typography.fontSize18",
133
+ fontWeight: typography.fontWeight600,
134
+ fontSize: typography.fontSize18,
128
135
  textAlign: "center",
129
136
  },
130
137
  sessionDescription: {
131
- color: "text.white64",
132
- fontWeight: "typography.fontWeight400",
133
- fontSize: "typography.fontSize14",
138
+ color: text.white64,
139
+ fontWeight: typography.fontWeight400,
140
+ fontSize: typography.fontSize14,
134
141
  textAlign: "center",
135
142
  },
136
143
  noteContent: {
137
- color: "text.white64",
138
- fontWeight: "typography.fontWeight400",
139
- fontSize: "typography.fontSize12",
144
+ color: text.white64,
145
+ fontWeight: typography.fontWeight400,
146
+ fontSize: typography.fontSize12,
140
147
  },
141
148
  fieldTitle: {
142
149
  color: "text.white",
143
- fontWeight: "typography.fontWeight500",
144
- fontSize: "typography.fontSize14",
150
+ fontWeight: typography.fontWeight500,
151
+ fontSize: typography.fontSize14,
145
152
  },
146
153
  center: {
147
154
  position: "absolute",
@@ -151,15 +158,15 @@ var theme = (0, styles_1.createTheme)({
151
158
  },
152
159
  value: {
153
160
  color: "text.white",
154
- fontWeight: "typography.fontWeight500",
155
- fontSize: "typography.fontSize14",
156
- lineHeight: "typography.leading140",
161
+ fontWeight: typography.fontWeight500,
162
+ fontSize: typography.fontSize14,
163
+ lineHeight: typography.leading140,
157
164
  },
158
165
  valueDescription: {
159
- color: "text.white64",
160
- fontWeight: "typography.fontWeight400",
161
- fontSize: "typography.fontSize12",
162
- lineHeight: "typography.leading140",
166
+ color: text.white64,
167
+ fontWeight: typography.fontWeight400,
168
+ fontSize: typography.fontSize12,
169
+ lineHeight: typography.leading140,
163
170
  },
164
171
  },
165
172
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tek-wallet",
3
- "version": "0.0.151",
3
+ "version": "0.0.152",
4
4
  "description": "A custom React provider with TypeScript support",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",