tek-wallet 0.0.152 → 0.0.154

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.
@@ -52,7 +52,7 @@ var DepositFunction = (0, react_1.forwardRef)(function (props, ref) {
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
54
  var _b = (0, react_1.useState)(), selectedToken = _b[0], setSelectedToken = _b[1];
55
- // const [selectedNetwork, setSelectedNetwork] = useState<any>()
55
+ var _c = (0, react_1.useState)(), selectedNetwork = _c[0], setSelectedNetwork = _c[1];
56
56
  var tokens = (0, useWalletData_1.default)().tokens;
57
57
  var open = function () {
58
58
  var _a;
@@ -82,14 +82,21 @@ var DepositFunction = (0, react_1.forwardRef)(function (props, ref) {
82
82
  nextStep();
83
83
  }
84
84
  };
85
+ var handleSelectNetwork = function (network) {
86
+ console.warn("network", selectedNetwork);
87
+ setSelectedNetwork(network);
88
+ nextStep();
89
+ };
85
90
  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
91
  width: "100%",
92
+ paddingBottom: theme.mixins.customPadding.p16,
87
93
  display: "flex",
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) {
94
+ alignItems: "center",
95
+ }, 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, spaceBetween: 32 }, 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) {
89
96
  var stringifiedTokenData = JSON.stringify(__assign(__assign({}, item), { name: "Fake", fullname: "Fake fullname" }));
90
97
  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));
91
98
  }) }) }, 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) {
92
- return ((0, jsx_runtime_1.jsx)(NetworkSelection_1.default, { networkData: JSON.stringify({
99
+ return ((0, jsx_runtime_1.jsx)(NetworkSelection_1.default, { onClick: handleSelectNetwork, networkData: JSON.stringify({
93
100
  name: "network ".concat(item),
94
101
  icon: "https://via.placeholder.com/150",
95
102
  }) }, item));
@@ -97,85 +104,23 @@ var DepositFunction = (0, react_1.forwardRef)(function (props, ref) {
97
104
  display: "flex",
98
105
  flexDirection: "column",
99
106
  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: {
107
+ }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.mixins.column), { gap: theme.mixins.gaps.g12, backgroundColor: theme.palette.background.black24, borderRadius: theme.mixins.theBorderRadius.r16, padding: theme.mixins.customPadding.p16, alignItems: "flex-start", backdropFilter: "blur(10px)" }), id: "share-deposit-info", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4, color: "text.white", alignSelf: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: "Harry Andrew" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: "@user1234we" })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
108
+ width: "fit-content",
109
+ height: "fit-content",
124
110
  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: {
111
+ borderRadius: theme.mixins.theBorderRadius.r12,
112
+ overflow: "hidden",
113
+ }, children: (0, jsx_runtime_1.jsx)(QRCode_1.default, {}) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4, color: "text.white" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: "Network" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: "Ethereum (ERC20)" })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4, color: "text.white" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: "Address" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { wordBreak: "break-all" }), children: "tebfwe78w237dbyuc78wb4b3y8cbwebd8732w9bcubf638uegyg7dt63ged87dxi8w3gdyhf73" })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4, backgroundColor: theme.palette.background.white16, borderRadius: theme.mixins.theBorderRadius.r12, padding: theme.mixins.customPadding.p8 }), children: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), 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: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g12, justifyContent: "center" }), 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: {
165
114
  fontSize: theme.typography.fontSize12,
166
115
  fontWeight: theme.typography.fontWeight400,
167
116
  leading: "typography.leading150",
168
117
  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: {
170
- gap: "0.125rem",
171
- display: "flex",
172
- alignItems: "center",
173
- }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
118
+ }, 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: __assign({ gap: theme.mixins.gaps.g4 }, theme.mixins.row), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
174
119
  fontSize: theme.typography.fontSize12,
175
120
  fontWeight: theme.typography.fontWeight400,
176
121
  leading: "typography.leading150",
177
122
  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)] }, tokens === null || tokens === void 0 ? void 0 : tokens.length) }) }));
123
+ }, children: "Share" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("share"), width: 20 })] }) })] })] }) }, DepositStep.SHOW_QR_CODE)] }, tokens === null || tokens === void 0 ? void 0 : tokens.length) }) }));
179
124
  });
180
125
  DepositFunction.displayName = "DepositFunction";
181
126
  exports.default = DepositFunction;
@@ -2,6 +2,7 @@ import { GeneralProps } from "../../../types/ui";
2
2
  interface NetworkSelectionProps extends GeneralProps {
3
3
  active?: boolean;
4
4
  networkData?: string;
5
+ onClick?: (networkData?: NetworkData) => void;
5
6
  }
6
7
  export interface NetworkData {
7
8
  name: string;
@@ -35,19 +35,8 @@ var NetworkSelection = function (props) {
35
35
  var networkDataString = props.networkData, rest = __rest(props, ["networkData"]);
36
36
  var theme = (0, material_1.useTheme)();
37
37
  var networkData = (0, react_1.useMemo)(function () { return (0, parsePropsData_1.default)(networkDataString); }, [networkDataString]);
38
- return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({}, rest, { sx: {
39
- backgroundColor: "background.white16",
40
- padding: "0.5rem",
41
- borderRadius: theme.mixins.theBorderRadius.r12,
42
- border: "1px solid",
43
- borderColor: theme.palette.border.white,
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: {
45
- fontSize: theme.typography.fontSize14,
46
- fontWeight: theme.typography.fontWeight500,
47
- leading: theme.typography.leading140,
48
- color: "text.white",
49
- whiteSpace: "nowrap",
50
- textTransform: "capitalize",
51
- }, children: networkData === null || networkData === void 0 ? void 0 : networkData.name })] })));
38
+ return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({}, rest, { sx: __assign(__assign({}, theme.mixins.row), { backgroundColor: props.active
39
+ ? "background.secondary16"
40
+ : "background.white16", padding: "".concat(theme.mixins.customPadding.p16, " ").concat(theme.mixins.customPadding.p8), borderRadius: theme.mixins.theBorderRadius.r12, border: "1px solid", borderColor: props.active ? "border.secondary" : "border.white24", gap: theme.mixins.gaps.g8 }), onClick: function () { var _a; return (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, networkData); }, 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 }, width: 24 }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: "text.white", whiteSpace: "nowrap", textTransform: "capitalize" }), children: networkData === null || networkData === void 0 ? void 0 : networkData.name })] })));
52
41
  };
53
42
  exports.default = NetworkSelection;
@@ -1,18 +1,16 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
2
  Object.defineProperty(exports, "__esModule", { value: true });
6
3
  var jsx_runtime_1 = require("react/jsx-runtime");
7
4
  var qrcode_react_1 = require("qrcode.react");
8
- var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
5
+ // import getIcon from "../../../utils/getIcon";
9
6
  function QRCode() {
10
- return ((0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeCanvas, { className: "", value: "https://reactjs.org/", size: 160, imageSettings: {
11
- src: (0, getIcon_1.default)("eth"),
7
+ return ((0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeCanvas, { value: "https://picturesofpeoplescanningqrcodes.tumblr.com/", title: "Title for my QR Code", size: 128, bgColor: "#ffffff", fgColor: "#000000", level: "H", minVersion: 8, marginSize: 6, imageSettings: {
8
+ src: "https://static.zpao.com/favicon.png",
12
9
  x: undefined,
13
10
  y: undefined,
14
- height: 32,
15
- width: 32,
11
+ height: 24,
12
+ width: 24,
13
+ opacity: 1,
16
14
  excavate: true,
17
15
  } }));
18
16
  }
@@ -36,10 +36,8 @@ var TokenSelection = function (props) {
36
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
40
- // onClick={() => props?.onClick?.(tokenData)}
41
- , __assign({
42
- // onClick={() => props?.onClick?.(tokenData)}
43
- 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 }) })] })] })));
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: props.active
40
+ ? "background.secondary16"
41
+ : "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", alignItems: "end" }), 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 }) })] })] })));
44
42
  };
45
43
  exports.default = TokenSelection;
@@ -81,6 +81,10 @@ var pagePadding = {
81
81
  paddingBottom: "2rem",
82
82
  };
83
83
  var customPadding = {
84
+ p4: "0.25rem",
85
+ p6: "0.375rem",
86
+ p8: "0.5rem",
87
+ p10: "0.625rem",
84
88
  p12: "0.75rem",
85
89
  p16: "1rem",
86
90
  p20: "1.25rem",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tek-wallet",
3
- "version": "0.0.152",
3
+ "version": "0.0.154",
4
4
  "description": "A custom React provider with TypeScript support",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",