tek-wallet 0.0.142 → 0.0.143

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.
Files changed (6) hide show
  1. package/dist/components/ui/DepositFunction/index.js +101 -93
  2. package/dist/components/ui/ModalLayout/index.d.ts +2 -1
  3. package/dist/components/ui/TokenSelection/index.js +2 -14
  4. package/dist/theme/mui/theme.js +8 -0
  5. package/dist/types/ui.d.ts +1 -1
  6. package/package.json +1 -1
package/dist/components/ui/DepositFunction/index.js CHANGED
@@ -51,6 +51,7 @@ var DepositFunction = (0, react_1.forwardRef)(function (props, ref) {
51
51
  var swiperRef = (0, react_1.useRef)(null);
52
52
  var theme = (0, material_1.useTheme)();
53
53
  var _a = (0, react_1.useState)(DepositStep.SELECT_TOKEN), currentStep = _a[0], setCurrentStep = _a[1];
54
+ var _b = (0, react_1.useState)(), selectedToken = _b[0], setSelectedToken = _b[1];
54
55
  var tokens = (0, useWalletData_1.default)().tokens;
55
56
  var open = function () {
56
57
  var _a;
@@ -60,7 +61,7 @@ var DepositFunction = (0, react_1.forwardRef)(function (props, ref) {
60
61
  var _a;
61
62
  (_a = drawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
62
63
  };
63
- var prevStep = function () {
64
+ var handleBack = function () {
64
65
  var _a;
65
66
  (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.prev();
66
67
  setCurrentStep(currentStep - 1);
@@ -69,105 +70,112 @@ var DepositFunction = (0, react_1.forwardRef)(function (props, ref) {
69
70
  open: open,
70
71
  close: close,
71
72
  }); });
72
- 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, { title: DEPOSIT_STEP_NAME[currentStep], onClose: close, children: (0, jsx_runtime_1.jsxs)(SwiperControlled_1.default, { ref: swiperRef, children: [(0, jsx_runtime_1.jsxs)(react_2.SwiperSlide, { children: [(0, jsx_runtime_1.jsx)(BackHeader_1.default, { sx: { paddingBottom: "1rem" }, hideBack: true, children: (0, jsx_runtime_1.jsx)(ModalTitle_1.default, { children: "Select token" }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { color: "red" }, onClick: function () { return console.warn(tokens); }, children: "Click" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
73
- display: "flex",
74
- flexDirection: "column",
75
- gap: theme.mixins.gaps.g16,
76
- }, children: tokens === null || tokens === void 0 ? void 0 : tokens.map(function (item) {
77
- var stringifiedTokenData = JSON.stringify(__assign(__assign({}, item), { name: "Fake", fullname: "Fake fullname" }));
78
- return ((0, jsx_runtime_1.jsx)(TokenSelection_1.default, { tokenData: stringifiedTokenData }, item.id));
79
- }) })] }, DepositStep.SELECT_TOKEN), (0, jsx_runtime_1.jsxs)(react_2.SwiperSlide, { children: [(0, jsx_runtime_1.jsx)(BackHeader_1.default, { sx: { paddingBottom: "1rem" }, overrideBack: prevStep, children: (0, jsx_runtime_1.jsx)(ModalTitle_1.default, { children: "Select network" }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
80
- display: "flex",
81
- alignItems: "center",
82
- gap: theme.mixins.gaps.g12,
83
- }, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (item) {
84
- return ((0, jsx_runtime_1.jsx)(NetworkSelection_1.default, { networkData: JSON.stringify({
85
- name: "network ".concat(item),
86
- icon: "https://via.placeholder.com/150",
87
- }) }, item));
88
- }) })] }, DepositStep.SELECT_NETWORK), (0, jsx_runtime_1.jsxs)(react_2.SwiperSlide, { children: [(0, jsx_runtime_1.jsx)(BackHeader_1.default, { sx: { paddingBottom: "1rem" }, overrideBack: prevStep, children: (0, jsx_runtime_1.jsx)(ModalTitle_1.default, { children: "Scan QR code" }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
89
- display: "flex",
90
- flexDirection: "column",
91
- gap: theme.mixins.gaps.g16,
92
- }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
93
- width: "100%",
94
- display: "flex",
95
- flexDirection: "column",
96
- gap: "0.75rem",
97
- backgroundColor: "ui-background-222",
98
- borderRadius: "0.75rem",
99
- padding: "1.5rem",
100
- alignItems: "flex-start",
101
- }, id: "share-deposit-info", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
102
- display: "flex",
103
- flexDirection: "column",
104
- gap: "0.125rem",
105
- color: "text.white",
106
- alignSelf: "center",
107
- }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
108
- fontSize: theme.typography.fontSize12,
109
- fontWeight: theme.typography.fontWeight500,
110
- leading: "typography.leading150",
111
- }, children: "Harry Andrew" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
73
+ var handleSelectToken = function (token) {
74
+ var _a;
75
+ setSelectedToken(token);
76
+ if (!!token) {
77
+ (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.next();
78
+ }
79
+ };
80
+ 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, { title: (0, jsx_runtime_1.jsx)(BackHeader_1.default, { overrideBack: handleBack, hideBack: currentStep === DepositStep.SELECT_TOKEN, children: (0, jsx_runtime_1.jsx)(ModalTitle_1.default, { children: DEPOSIT_STEP_NAME[currentStep] }) }), 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: {
81
+ display: "flex",
82
+ flexDirection: "column",
83
+ gap: theme.mixins.gaps.g16,
84
+ }, children: tokens === null || tokens === void 0 ? void 0 : tokens.map(function (item) {
85
+ var stringifiedTokenData = JSON.stringify(__assign(__assign({}, item), { name: "Fake", fullname: "Fake fullname" }));
86
+ 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));
87
+ }) }) }, DepositStep.SELECT_TOKEN), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
88
+ display: "flex",
89
+ alignItems: "center",
90
+ gap: theme.mixins.gaps.g12,
91
+ }, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (item) {
92
+ return ((0, jsx_runtime_1.jsx)(NetworkSelection_1.default, { networkData: JSON.stringify({
93
+ name: "network ".concat(item),
94
+ icon: "https://via.placeholder.com/150",
95
+ }) }, item));
96
+ }) }) }, DepositStep.SELECT_NETWORK), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
97
+ display: "flex",
98
+ flexDirection: "column",
99
+ gap: theme.mixins.gaps.g16,
100
+ }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
101
+ width: "100%",
102
+ display: "flex",
103
+ flexDirection: "column",
104
+ gap: "0.75rem",
105
+ backgroundColor: "ui-background-222",
106
+ borderRadius: "0.75rem",
107
+ padding: "1.5rem",
108
+ alignItems: "flex-start",
109
+ }, id: "share-deposit-info", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
110
+ display: "flex",
111
+ flexDirection: "column",
112
+ gap: "0.125rem",
113
+ color: "text.white",
114
+ alignSelf: "center",
115
+ }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
116
+ fontSize: theme.typography.fontSize12,
117
+ fontWeight: theme.typography.fontWeight500,
118
+ leading: "typography.leading150",
119
+ }, children: "Harry Andrew" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
120
+ fontSize: theme.typography.fontSize12,
121
+ fontWeight: theme.typography.fontWeight400,
122
+ leading: "typography.leading150",
123
+ }, children: "@user1234we" })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
124
+ alignSelf: "center",
125
+ padding: "0.75rem",
126
+ backgroundColor: "ui-background-white",
127
+ }, children: (0, jsx_runtime_1.jsx)(QRCode_1.default, {}) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
128
+ display: "flex",
129
+ flexDirection: "column",
130
+ gap: "0.125rem",
131
+ color: "text.white",
132
+ }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
133
+ fontSize: theme.typography.fontSize10,
134
+ leading: "typography.leading150",
135
+ }, children: "Network" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
136
+ fontSize: theme.typography.fontSize13,
137
+ fontWeight: theme.typography.fontWeight500,
138
+ leading: "typography.leading150",
139
+ }, children: "Ethereum (ERC20)" })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
140
+ display: "flex",
141
+ flexDirection: "column",
142
+ gap: "0.125rem",
143
+ color: "text.white",
144
+ }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
145
+ fontSize: theme.typography.fontSize10,
146
+ leading: "typography.leading150",
147
+ }, children: "Address" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
148
+ fontSize: theme.typography.fontSize13,
149
+ fontWeight: theme.typography.fontWeight500,
150
+ leading: "typography.leading150",
151
+ wordBreak: "break-all",
152
+ }, children: "tebfwe78w237dbyuc78wb4b3y8cbwebd8732w9bcubf638uegyg7dt63ged87dxi8w3gdyhf73" })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
153
+ display: "flex",
154
+ alignItems: "center",
155
+ gap: "8px",
156
+ backgroundColor: "ui-background-white-16",
157
+ borderRadius: "12px",
158
+ padding: "8px 12px",
159
+ }, children: (0, jsx_runtime_1.jsxs)(Text_1.default, { className: "text-11 text-ui-text-white leading-140", children: ["Deposit min ", (0, jsx_runtime_1.jsx)("strong", { children: "0.001" }), " ETH and select the correct network, ", "or you'll lose your assets."] }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
160
+ display: "flex",
161
+ alignItems: "center",
162
+ gap: "0.75rem",
163
+ justifyContent: "center",
164
+ }, children: [(0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: "https://reactjs.org/", children: (0, jsx_runtime_1.jsxs)(Button_1.default.Secondary, { className: "gap-1.5 flex items-center", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
112
165
  fontSize: theme.typography.fontSize12,
113
166
  fontWeight: theme.typography.fontWeight400,
114
167
  leading: "typography.leading150",
115
- }, children: "@user1234we" })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
116
- alignSelf: "center",
117
- padding: "0.75rem",
118
- backgroundColor: "ui-background-white",
119
- }, children: (0, jsx_runtime_1.jsx)(QRCode_1.default, {}) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
120
- display: "flex",
121
- flexDirection: "column",
168
+ textTransform: "capitalize",
169
+ }, children: "Copy" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("copy"), width: 20 })] }) }), (0, jsx_runtime_1.jsx)(Share_1.default, { elementId: "share-deposit-info", children: (0, jsx_runtime_1.jsxs)(Button_1.default.Secondary, { sx: {
122
170
  gap: "0.125rem",
123
- color: "text.white",
124
- }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
125
- fontSize: theme.typography.fontSize10,
126
- leading: "typography.leading150",
127
- }, children: "Network" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
128
- fontSize: theme.typography.fontSize13,
129
- fontWeight: theme.typography.fontWeight500,
130
- leading: "typography.leading150",
131
- }, children: "Ethereum (ERC20)" })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
132
171
  display: "flex",
133
- flexDirection: "column",
134
- gap: "0.125rem",
135
- color: "text.white",
172
+ alignItems: "center",
136
173
  }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
137
- fontSize: theme.typography.fontSize10,
138
- leading: "typography.leading150",
139
- }, children: "Address" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
140
- fontSize: theme.typography.fontSize13,
141
- fontWeight: theme.typography.fontWeight500,
174
+ fontSize: theme.typography.fontSize12,
175
+ fontWeight: theme.typography.fontWeight400,
142
176
  leading: "typography.leading150",
143
- wordBreak: "break-all",
144
- }, children: "tebfwe78w237dbyuc78wb4b3y8cbwebd8732w9bcubf638uegyg7dt63ged87dxi8w3gdyhf73" })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
145
- display: "flex",
146
- alignItems: "center",
147
- gap: "8px",
148
- backgroundColor: "ui-background-white-16",
149
- borderRadius: "12px",
150
- padding: "8px 12px",
151
- }, children: (0, jsx_runtime_1.jsxs)(Text_1.default, { className: "text-11 text-ui-text-white leading-140", children: ["Deposit min ", (0, jsx_runtime_1.jsx)("strong", { children: "0.001" }), " ETH and select the correct network, ", "or you'll lose your assets."] }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
152
- display: "flex",
153
- alignItems: "center",
154
- gap: "0.75rem",
155
- justifyContent: "center",
156
- }, children: [(0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: "https://reactjs.org/", children: (0, jsx_runtime_1.jsxs)(Button_1.default.Secondary, { className: "gap-1.5 flex items-center", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
157
- fontSize: theme.typography.fontSize12,
158
- fontWeight: theme.typography.fontWeight400,
159
- leading: "typography.leading150",
160
- textTransform: "capitalize",
161
- }, children: "Copy" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("copy"), width: 20 })] }) }), (0, jsx_runtime_1.jsx)(Share_1.default, { elementId: "share-deposit-info", children: (0, jsx_runtime_1.jsxs)(Button_1.default.Secondary, { sx: {
162
- gap: "0.125rem",
163
- display: "flex",
164
- alignItems: "center",
165
- }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
166
- fontSize: theme.typography.fontSize12,
167
- fontWeight: theme.typography.fontWeight400,
168
- leading: "typography.leading150",
169
- textTransform: "capitalize",
170
- }, children: "Share" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("copy"), width: 20 })] }) })] })] })] }, DepositStep.SHOW_QR_CODE)] }) }) }));
177
+ textTransform: "capitalize",
178
+ }, children: "Share" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("copy"), width: 20 })] }) })] })] }) }, DepositStep.SHOW_QR_CODE)] }) }) }));
171
179
  });
172
180
  DepositFunction.displayName = "DepositFunction";
173
181
  exports.default = DepositFunction;
package/dist/components/ui/ModalLayout/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { GeneralProps } from "../../../types/ui";
2
+ import { ReactNode } from "react";
2
3
  interface ModalLayoutProps extends GeneralProps {
3
- title?: string;
4
+ title?: ReactNode;
4
5
  onClose?: () => void;
5
6
  hideHeader?: boolean;
6
7
  }
package/dist/components/ui/TokenSelection/index.js CHANGED
@@ -33,21 +33,9 @@ var Text_1 = __importDefault(require("../Text"));
33
33
  var Icon_1 = __importDefault(require("../Icon"));
34
34
  var material_1 = require("@mui/material");
35
35
  var TokenSelection = function (props) {
36
- var tokenDataString = props.tokenData, rest = __rest(props, ["tokenData"]);
36
+ var tokenDataString = props.tokenData, sx = props.sx, rest = __rest(props, ["tokenData", "sx"]);
37
37
  var theme = (0, material_1.useTheme)();
38
38
  var tokenData = (0, react_1.useMemo)(function () { return (0, parsePropsData_1.default)(tokenDataString); }, [tokenDataString]);
39
- return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: {
40
- backgroundColor: "background.white16",
41
- border: "1px solid",
42
- borderColor: props.active ? "border.secondary" : "transparent",
43
- borderRadius: theme.mixins.theBorderRadius.r12,
44
- padding: theme.mixins.customPadding.p12,
45
- display: "flex",
46
- alignItems: "center",
47
- } }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
48
- display: "flex",
49
- alignItems: "center",
50
- gap: "0.25rem",
51
- }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { className: "size-4 rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { className: "text-14 font-500 leading-140 text-ui-text-white", children: tokenData === null || tokenData === void 0 ? void 0 : tokenData.name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right ml-auto", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { className: "text-14 font-500 leading-140 text-ui-text-white", children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: 20000 }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { className: "text-11 font-500 leading-140 text-ui-text-b1b1b1", children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: 2000 }) })] })] })));
39
+ return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ onClick: function () { var _a; return (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, tokenData); }, sx: __assign({ backgroundColor: "background.white16", border: "1px solid", borderColor: props.active ? "border.secondary" : "transparent", borderRadius: theme.mixins.theBorderRadius.r12, padding: theme.mixins.customPadding.p12, display: "flex", alignItems: "center", cursor: "pointer" }, sx) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { width: 20 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.column), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: theme.mixins.value, children: tokenData === null || tokenData === void 0 ? void 0 : tokenData.name }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: theme.mixins.valueDescription, children: "tokenData.name" })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { marginLeft: "auto" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: theme.mixins.value, children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: 20000 }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: theme.mixins.valueDescription, children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: 2000 }) })] })] })));
52
40
  };
53
41
  exports.default = TokenSelection;
package/dist/theme/mui/theme.js CHANGED
@@ -107,6 +107,14 @@ var theme = (0, styles_1.createTheme)({
107
107
  g32: "2rem",
108
108
  g40: "2.5rem",
109
109
  },
110
+ row: {
111
+ display: "flex",
112
+ alignItems: "center",
113
+ },
114
+ column: {
115
+ display: "flex",
116
+ flexDirection: "column",
117
+ },
110
118
  headerTitle: {
111
119
  color: "text.white",
112
120
  fontWeight: "typography.fontWeight500",
package/dist/types/ui.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { SxProps } from "@mui/system";
2
- export type UnknownFunction = (data?: unknown) => unknown;
2
+ export type UnknownFunction = (data?: any) => any;
3
3
  export type GeneralProps = {
4
4
  children?: React.ReactNode;
5
5
  onClick?: UnknownFunction;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tek-wallet",
3
- "version": "0.0.142",
3
+ "version": "0.0.143",
4
4
  "description": "A custom React provider with TypeScript support",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",