@ludo.ninja/components 2.3.87 → 2.3.89
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/build/dto/common/ItemType/index.d.ts +11 -10
- package/build/dto/common/ItemType/index.js +10 -10
- package/build/entities/labelCreationType/data.js +5 -0
- package/build/entities/labelCreationType/types.d.ts +11 -10
- package/build/entities/labelCreationType/types.js +10 -10
- package/build/modules/opportunity/OpportunityCard.d.ts +11 -4
- package/build/modules/opportunity/OpportunityCard.js +111 -31
- package/build/system/Cards/CardContent/CardCategory/index.js +25 -4
- package/package.json +2 -2
|
@@ -8,24 +8,24 @@ declare enum LabelKeys {
|
|
|
8
8
|
airdrop = "TOKEN_AIRDROP"
|
|
9
9
|
}
|
|
10
10
|
declare enum LabelBackground {
|
|
11
|
-
asset = "
|
|
11
|
+
asset = "transparent",
|
|
12
12
|
collection = "#CDE4FF",
|
|
13
13
|
event = "#CDF8D9",
|
|
14
|
-
gallery = "
|
|
15
|
-
favorites = "
|
|
14
|
+
gallery = "transparent",
|
|
15
|
+
favorites = "transparent",
|
|
16
16
|
likelist = "#CDCFF8",
|
|
17
|
-
opportunity = "
|
|
18
|
-
airdrop = "
|
|
17
|
+
opportunity = "transparent",
|
|
18
|
+
airdrop = "transparent"
|
|
19
19
|
}
|
|
20
20
|
declare enum LabelColor {
|
|
21
|
-
asset = "#
|
|
21
|
+
asset = "#FF7E6A",
|
|
22
22
|
collection = "#6E86C3",
|
|
23
23
|
event = "#77B179",
|
|
24
|
-
gallery = "#
|
|
25
|
-
favorites = "#
|
|
24
|
+
gallery = "#1FCCAF",
|
|
25
|
+
favorites = "#7B76FF",
|
|
26
26
|
likelist = "#7779B1",
|
|
27
|
-
opportunity = "#
|
|
28
|
-
airdrop = "#
|
|
27
|
+
opportunity = "#5FD068",
|
|
28
|
+
airdrop = "#CF4CFF"
|
|
29
29
|
}
|
|
30
30
|
declare enum LabelText {
|
|
31
31
|
asset = "nft",
|
|
@@ -41,6 +41,7 @@ type LabelType = {
|
|
|
41
41
|
backgroundColor: LabelBackground;
|
|
42
42
|
text: LabelText;
|
|
43
43
|
color: LabelColor;
|
|
44
|
+
borderColor?: string;
|
|
44
45
|
};
|
|
45
46
|
type LabelItem = {
|
|
46
47
|
[key in LabelKeys]: LabelType;
|
|
@@ -13,25 +13,25 @@ var LabelKeys;
|
|
|
13
13
|
})(LabelKeys || (exports.LabelKeys = LabelKeys = {}));
|
|
14
14
|
var LabelBackground;
|
|
15
15
|
(function (LabelBackground) {
|
|
16
|
-
LabelBackground["asset"] = "
|
|
16
|
+
LabelBackground["asset"] = "transparent";
|
|
17
17
|
LabelBackground["collection"] = "#CDE4FF";
|
|
18
18
|
LabelBackground["event"] = "#CDF8D9";
|
|
19
|
-
LabelBackground["gallery"] = "
|
|
20
|
-
LabelBackground["favorites"] = "
|
|
19
|
+
LabelBackground["gallery"] = "transparent";
|
|
20
|
+
LabelBackground["favorites"] = "transparent";
|
|
21
21
|
LabelBackground["likelist"] = "#CDCFF8";
|
|
22
|
-
LabelBackground["opportunity"] = "
|
|
23
|
-
LabelBackground["airdrop"] = "
|
|
22
|
+
LabelBackground["opportunity"] = "transparent";
|
|
23
|
+
LabelBackground["airdrop"] = "transparent";
|
|
24
24
|
})(LabelBackground || (exports.LabelBackground = LabelBackground = {}));
|
|
25
25
|
var LabelColor;
|
|
26
26
|
(function (LabelColor) {
|
|
27
|
-
LabelColor["asset"] = "#
|
|
27
|
+
LabelColor["asset"] = "#FF7E6A";
|
|
28
28
|
LabelColor["collection"] = "#6E86C3";
|
|
29
29
|
LabelColor["event"] = "#77B179";
|
|
30
|
-
LabelColor["gallery"] = "#
|
|
31
|
-
LabelColor["favorites"] = "#
|
|
30
|
+
LabelColor["gallery"] = "#1FCCAF";
|
|
31
|
+
LabelColor["favorites"] = "#7B76FF";
|
|
32
32
|
LabelColor["likelist"] = "#7779B1";
|
|
33
|
-
LabelColor["opportunity"] = "#
|
|
34
|
-
LabelColor["airdrop"] = "#
|
|
33
|
+
LabelColor["opportunity"] = "#5FD068";
|
|
34
|
+
LabelColor["airdrop"] = "#CF4CFF";
|
|
35
35
|
})(LabelColor || (exports.LabelColor = LabelColor = {}));
|
|
36
36
|
var LabelText;
|
|
37
37
|
(function (LabelText) {
|
|
@@ -6,6 +6,7 @@ const labelsData = {
|
|
|
6
6
|
backgroundColor: types_1.LabelBackground.asset,
|
|
7
7
|
color: types_1.LabelColor.asset,
|
|
8
8
|
text: types_1.LabelText.asset,
|
|
9
|
+
borderColor: types_1.LabelColor.asset,
|
|
9
10
|
},
|
|
10
11
|
[types_1.LabelKeys.collection]: {
|
|
11
12
|
backgroundColor: types_1.LabelBackground.collection,
|
|
@@ -16,11 +17,13 @@ const labelsData = {
|
|
|
16
17
|
backgroundColor: types_1.LabelBackground.gallery,
|
|
17
18
|
color: types_1.LabelColor.gallery,
|
|
18
19
|
text: types_1.LabelText.gallery,
|
|
20
|
+
borderColor: types_1.LabelColor.gallery,
|
|
19
21
|
},
|
|
20
22
|
[types_1.LabelKeys.favorites]: {
|
|
21
23
|
backgroundColor: types_1.LabelBackground.favorites,
|
|
22
24
|
color: types_1.LabelColor.favorites,
|
|
23
25
|
text: types_1.LabelText.favorites,
|
|
26
|
+
borderColor: types_1.LabelColor.favorites,
|
|
24
27
|
},
|
|
25
28
|
[types_1.LabelKeys.likelist]: {
|
|
26
29
|
backgroundColor: types_1.LabelBackground.likelist,
|
|
@@ -31,11 +34,13 @@ const labelsData = {
|
|
|
31
34
|
backgroundColor: types_1.LabelBackground.opportunity,
|
|
32
35
|
color: types_1.LabelColor.opportunity,
|
|
33
36
|
text: types_1.LabelText.opportunity,
|
|
37
|
+
borderColor: types_1.LabelColor.opportunity,
|
|
34
38
|
},
|
|
35
39
|
[types_1.LabelKeys.airdrop]: {
|
|
36
40
|
backgroundColor: types_1.LabelBackground.airdrop,
|
|
37
41
|
color: types_1.LabelColor.airdrop,
|
|
38
42
|
text: types_1.LabelText.airdrop,
|
|
43
|
+
borderColor: types_1.LabelColor.airdrop,
|
|
39
44
|
},
|
|
40
45
|
};
|
|
41
46
|
exports.default = labelsData;
|
|
@@ -8,24 +8,24 @@ declare enum LabelKeys {
|
|
|
8
8
|
airdrop = "TOKEN_AIRDROP"
|
|
9
9
|
}
|
|
10
10
|
declare enum LabelBackground {
|
|
11
|
-
asset = "
|
|
11
|
+
asset = "transparent",
|
|
12
12
|
collection = "#CDE4FF",
|
|
13
13
|
event = "#CDF8D9",
|
|
14
|
-
gallery = "
|
|
15
|
-
favorites = "
|
|
14
|
+
gallery = "transparent",
|
|
15
|
+
favorites = "transparent",
|
|
16
16
|
likelist = "#CDCFF8",
|
|
17
|
-
opportunity = "
|
|
18
|
-
airdrop = "
|
|
17
|
+
opportunity = "transparent",
|
|
18
|
+
airdrop = "transparent"
|
|
19
19
|
}
|
|
20
20
|
declare enum LabelColor {
|
|
21
|
-
asset = "#
|
|
21
|
+
asset = "#FF7E6A",
|
|
22
22
|
collection = "#6E86C3",
|
|
23
23
|
event = "#77B179",
|
|
24
|
-
gallery = "#
|
|
25
|
-
favorites = "#
|
|
24
|
+
gallery = "#1FCCAF",
|
|
25
|
+
favorites = "#7B76FF",
|
|
26
26
|
likelist = "#7779B1",
|
|
27
|
-
opportunity = "#
|
|
28
|
-
airdrop = "#
|
|
27
|
+
opportunity = "#5FD068",
|
|
28
|
+
airdrop = "#CF4CFF"
|
|
29
29
|
}
|
|
30
30
|
declare enum LabelText {
|
|
31
31
|
asset = "nft",
|
|
@@ -41,6 +41,7 @@ type LabelType = {
|
|
|
41
41
|
backgroundColor: LabelBackground;
|
|
42
42
|
text: LabelText;
|
|
43
43
|
color: LabelColor;
|
|
44
|
+
borderColor?: string;
|
|
44
45
|
};
|
|
45
46
|
type LabelItem = {
|
|
46
47
|
[key in LabelKeys]: LabelType;
|
|
@@ -13,25 +13,25 @@ var LabelKeys;
|
|
|
13
13
|
})(LabelKeys || (exports.LabelKeys = LabelKeys = {}));
|
|
14
14
|
var LabelBackground;
|
|
15
15
|
(function (LabelBackground) {
|
|
16
|
-
LabelBackground["asset"] = "
|
|
16
|
+
LabelBackground["asset"] = "transparent";
|
|
17
17
|
LabelBackground["collection"] = "#CDE4FF";
|
|
18
18
|
LabelBackground["event"] = "#CDF8D9";
|
|
19
|
-
LabelBackground["gallery"] = "
|
|
20
|
-
LabelBackground["favorites"] = "
|
|
19
|
+
LabelBackground["gallery"] = "transparent";
|
|
20
|
+
LabelBackground["favorites"] = "transparent";
|
|
21
21
|
LabelBackground["likelist"] = "#CDCFF8";
|
|
22
|
-
LabelBackground["opportunity"] = "
|
|
23
|
-
LabelBackground["airdrop"] = "
|
|
22
|
+
LabelBackground["opportunity"] = "transparent";
|
|
23
|
+
LabelBackground["airdrop"] = "transparent";
|
|
24
24
|
})(LabelBackground || (exports.LabelBackground = LabelBackground = {}));
|
|
25
25
|
var LabelColor;
|
|
26
26
|
(function (LabelColor) {
|
|
27
|
-
LabelColor["asset"] = "#
|
|
27
|
+
LabelColor["asset"] = "#FF7E6A";
|
|
28
28
|
LabelColor["collection"] = "#6E86C3";
|
|
29
29
|
LabelColor["event"] = "#77B179";
|
|
30
|
-
LabelColor["gallery"] = "#
|
|
31
|
-
LabelColor["favorites"] = "#
|
|
30
|
+
LabelColor["gallery"] = "#1FCCAF";
|
|
31
|
+
LabelColor["favorites"] = "#7B76FF";
|
|
32
32
|
LabelColor["likelist"] = "#7779B1";
|
|
33
|
-
LabelColor["opportunity"] = "#
|
|
34
|
-
LabelColor["airdrop"] = "#
|
|
33
|
+
LabelColor["opportunity"] = "#5FD068";
|
|
34
|
+
LabelColor["airdrop"] = "#CF4CFF";
|
|
35
35
|
})(LabelColor || (exports.LabelColor = LabelColor = {}));
|
|
36
36
|
var LabelText;
|
|
37
37
|
(function (LabelText) {
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import { TOpportunity } from './type';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import { IProject } from "@ludo.ninja/api/build/graphql_tools/__generated__/opportunitiesHost/schema";
|
|
3
|
+
import { Maybe } from "graphql/jsutils/Maybe";
|
|
4
|
+
type OpportunityBackground = "green" | "blue" | "pink" | "orange" | "blue_pink" | "green_blue" | "yellow" | "blue_gray" | "gray";
|
|
5
|
+
export declare const HEADER_BACKGROUNDS: OpportunityBackground[];
|
|
6
|
+
export declare const HEADER_BACKGROUNDS_MAP: Record<string, OpportunityBackground>;
|
|
7
|
+
export declare const OpportunityCard: ({ opportunity, toolsForRemove, headColorImage, }: {
|
|
8
|
+
opportunity: TOpportunity & {
|
|
9
|
+
project?: Maybe<Pick<IProject, "symbol" | "name" | "contract" | "originalMediaUrl" | "mediaUrl">>;
|
|
10
|
+
};
|
|
5
11
|
toolsForRemove?: ((itemType: "asset" | "collection" | "opportunity") => void) | undefined;
|
|
6
|
-
headColorImage?:
|
|
12
|
+
headColorImage?: OpportunityBackground;
|
|
7
13
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export {};
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.OpportunityCard = exports.HEADER_BACKGROUNDS = void 0;
|
|
6
|
+
exports.OpportunityCard = exports.HEADER_BACKGROUNDS_MAP = exports.HEADER_BACKGROUNDS = void 0;
|
|
7
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
8
|
const useDislikeOpportunity_1 = require("../../api/server-opportunities/mutations/useDislikeOpportunity");
|
|
9
9
|
const useLikeOpportunity_1 = require("../../api/server-opportunities/mutations/useLikeOpportunity");
|
|
@@ -31,39 +31,61 @@ const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
|
|
|
31
31
|
const colors_2 = require("@ludo.ninja/ui/build/styles/colors");
|
|
32
32
|
const boxShadow_1 = __importDefault(require("@ludo.ninja/ui/build/styles/mixins/boxShadow"));
|
|
33
33
|
const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
34
|
+
const utils_1 = require("@ludo.ninja/utils");
|
|
34
35
|
const moment_1 = __importDefault(require("moment/moment"));
|
|
35
36
|
const react_1 = require("react");
|
|
36
37
|
const sanitize_html_1 = __importDefault(require("sanitize-html"));
|
|
37
38
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
38
|
-
exports.HEADER_BACKGROUNDS = [
|
|
39
|
+
exports.HEADER_BACKGROUNDS = [
|
|
40
|
+
"green",
|
|
41
|
+
"blue",
|
|
42
|
+
"pink",
|
|
43
|
+
"orange",
|
|
44
|
+
"blue_pink",
|
|
45
|
+
"green_blue",
|
|
46
|
+
"yellow",
|
|
47
|
+
"blue_gray",
|
|
48
|
+
"gray",
|
|
49
|
+
];
|
|
50
|
+
exports.HEADER_BACKGROUNDS_MAP = {
|
|
51
|
+
DePin: "green",
|
|
52
|
+
GameFi: "pink",
|
|
53
|
+
DeFi: "blue",
|
|
54
|
+
MemeCoins: "orange",
|
|
55
|
+
"All Projects": "blue_pink",
|
|
56
|
+
"AI Agents": "green_blue",
|
|
57
|
+
RWA: "yellow",
|
|
58
|
+
Other: "blue_gray",
|
|
59
|
+
"Token Graveyard": "gray",
|
|
60
|
+
};
|
|
39
61
|
const SWrapperLink = styled_components_1.default.a `
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
62
|
+
position: relative;
|
|
63
|
+
background-color: ${colors_2.WhiteColor};
|
|
64
|
+
border-radius: 6px;
|
|
65
|
+
${boxShadow_1.default};
|
|
66
|
+
${boxTransform_1.default};
|
|
67
|
+
width: 252px;
|
|
68
|
+
overflow: hidden;
|
|
69
|
+
display: flex;
|
|
70
|
+
flex-direction: column;
|
|
49
71
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
72
|
+
&:hover ${Headicons_1.default} {
|
|
73
|
+
transition: 0.2s opacity ease-in;
|
|
74
|
+
opacity: 1 !important;
|
|
75
|
+
}
|
|
54
76
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
77
|
+
// ${ScreenWidth_1.mediaQuery.maxWidthTablet} {
|
|
78
|
+
// width: 164px;
|
|
79
|
+
// }
|
|
58
80
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
81
|
+
${ScreenWidth_1.mediaQuery.mobile} {
|
|
82
|
+
width: 100%;
|
|
83
|
+
}
|
|
62
84
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
85
|
+
${ScreenWidth_1.mediaQuery.minWidthFourK} {
|
|
86
|
+
width: ${(0, _4k_1.adaptiveValueCalc)(252)};
|
|
87
|
+
border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
|
|
88
|
+
}
|
|
67
89
|
`;
|
|
68
90
|
const StyledCardHead = styled_components_1.default.div `
|
|
69
91
|
position: relative;
|
|
@@ -85,7 +107,7 @@ const StyledCardHead = styled_components_1.default.div `
|
|
|
85
107
|
// width: 164px;
|
|
86
108
|
//}
|
|
87
109
|
|
|
88
|
-
${ScreenWidth_1.mediaQuery.mobile}
|
|
110
|
+
${ScreenWidth_1.mediaQuery.mobile} {
|
|
89
111
|
height: 40px;
|
|
90
112
|
width: 100%;
|
|
91
113
|
}
|
|
@@ -98,12 +120,13 @@ const StyledCardHead = styled_components_1.default.div `
|
|
|
98
120
|
const OpportunityName = styled_components_1.default.div `
|
|
99
121
|
${typography_1.FH5};
|
|
100
122
|
color: ${colors_2.WhiteColor};
|
|
123
|
+
text-shadow: 0 2px 4px rgba(72, 45, 167, 0.4);
|
|
101
124
|
font-weight: 700;
|
|
102
125
|
padding: 6px 16px;
|
|
103
126
|
overflow: hidden;
|
|
104
127
|
text-overflow: ellipsis;
|
|
105
128
|
white-space: nowrap;
|
|
106
|
-
|
|
129
|
+
|
|
107
130
|
${ScreenWidth_1.mediaQuery.minWidthFourK} {
|
|
108
131
|
padding: ${(0, _4k_1.adaptiveValueCalc)(6)} ${(0, _4k_1.adaptiveValueCalc)(16)};
|
|
109
132
|
}
|
|
@@ -115,6 +138,7 @@ const StyledCardContent = styled_components_1.default.div `
|
|
|
115
138
|
min-height: 212px;
|
|
116
139
|
//max-height: 212px;
|
|
117
140
|
flex-grow: 1;
|
|
141
|
+
|
|
118
142
|
${ScreenWidth_1.mediaQuery.mobile} {
|
|
119
143
|
min-height: 172px;
|
|
120
144
|
//max-height: 84px;
|
|
@@ -174,7 +198,10 @@ const StyledCardContent = styled_components_1.default.div `
|
|
|
174
198
|
}
|
|
175
199
|
|
|
176
200
|
.btnClaim {
|
|
177
|
-
|
|
201
|
+
background: #eaedfc;
|
|
202
|
+
color: ${colors_1.AccentColor};
|
|
203
|
+
border-radius: 5px;
|
|
204
|
+
padding: 5px 14px;
|
|
178
205
|
}
|
|
179
206
|
|
|
180
207
|
.date {
|
|
@@ -220,7 +247,8 @@ const StyledCardContent = styled_components_1.default.div `
|
|
|
220
247
|
}
|
|
221
248
|
|
|
222
249
|
.btnClaim {
|
|
223
|
-
border-radius: ${(0, _4k_1.adaptiveValueCalc)(
|
|
250
|
+
border-radius: ${(0, _4k_1.adaptiveValueCalc)(5)};
|
|
251
|
+
padding: ${(0, _4k_1.adaptiveValueCalc)(5)} ${(0, _4k_1.adaptiveValueCalc)(14)};
|
|
224
252
|
}
|
|
225
253
|
|
|
226
254
|
.date {
|
|
@@ -234,6 +262,51 @@ const SImage = styled_components_1.default.img `
|
|
|
234
262
|
height: 100%;
|
|
235
263
|
object-fit: cover;
|
|
236
264
|
`;
|
|
265
|
+
const ProjectBlock = styled_components_1.default.div `
|
|
266
|
+
display: flex;
|
|
267
|
+
align-items: center;
|
|
268
|
+
gap: 6px;
|
|
269
|
+
margin-bottom: 8px;
|
|
270
|
+
|
|
271
|
+
.name {
|
|
272
|
+
display: flex;
|
|
273
|
+
gap: 4px;
|
|
274
|
+
align-items: center;
|
|
275
|
+
flex: 0;
|
|
276
|
+
|
|
277
|
+
.project-name {
|
|
278
|
+
overflow: hidden;
|
|
279
|
+
text-overflow: ellipsis;
|
|
280
|
+
white-space: nowrap;
|
|
281
|
+
max-width: 125px;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.icon {
|
|
286
|
+
width: 20px;
|
|
287
|
+
height: 20px;
|
|
288
|
+
aspect-ratio: 1/1;
|
|
289
|
+
border-radius: 50%;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
${ScreenWidth_1.mediaQuery.minWidthFourK} {
|
|
293
|
+
gap: ${(0, _4k_1.adaptiveValueCalc)(6)};
|
|
294
|
+
margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(8)};
|
|
295
|
+
|
|
296
|
+
.name {
|
|
297
|
+
gap: ${(0, _4k_1.adaptiveValueCalc)(4)};
|
|
298
|
+
|
|
299
|
+
.project-name {
|
|
300
|
+
max-width: ${(0, _4k_1.adaptiveValueCalc)(125)};
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.icon {
|
|
305
|
+
width: ${(0, _4k_1.adaptiveValueCalc)(20)};
|
|
306
|
+
height: ${(0, _4k_1.adaptiveValueCalc)(20)};
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
`;
|
|
237
310
|
const OpportunityImage = ({ src, alt }) => {
|
|
238
311
|
return ((0, jsx_runtime_1.jsx)(ImageInterceptor_1.ImageInterceptor, { className: "imgWrapper", children: (0, jsx_runtime_1.jsx)(SImage, { src: src, alt: alt, width: 252, height: 152 }) }));
|
|
239
312
|
};
|
|
@@ -264,10 +337,11 @@ const OpportunityLike = ({ isDefaultLiked, opportunityId, toolsForRemove, }) =>
|
|
|
264
337
|
pointerEvents: isLoadingMutation ? "none" : "unset",
|
|
265
338
|
}, children: (0, jsx_runtime_1.jsx)(heart_svg_1.default, {}) }));
|
|
266
339
|
};
|
|
267
|
-
const OpportunityCard = ({ opportunity, toolsForRemove, headColorImage }) => {
|
|
340
|
+
const OpportunityCard = ({ opportunity, toolsForRemove, headColorImage, }) => {
|
|
268
341
|
const { NEXT_PUBLIC_ENV_VALUE } = (0, env_1.useEnvStore)((state) => ({
|
|
269
342
|
NEXT_PUBLIC_ENV_VALUE: state.NEXT_PUBLIC_ENV_VALUE,
|
|
270
343
|
}));
|
|
344
|
+
const [isProjectIconErrorLoading, setIsProjectIconErrorLoading] = (0, react_1.useState)(false);
|
|
271
345
|
const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
|
|
272
346
|
const { openOpportunityAction } = (0, useOpenOpportunity_1.default)();
|
|
273
347
|
const isMobile = !!(windowDimensions?.windowWidth && windowDimensions.windowWidth <= ScreenWidth_1.ScreenWidth.DESKTOP);
|
|
@@ -287,7 +361,13 @@ const OpportunityCard = ({ opportunity, toolsForRemove, headColorImage }) => {
|
|
|
287
361
|
const sanitizedHtml = (0, sanitize_html_1.default)(opportunity?.description || "", {
|
|
288
362
|
allowedTags: ["b", "i", "em", "strong", "br", "div"],
|
|
289
363
|
});
|
|
290
|
-
return ((0, jsx_runtime_1.jsxs)(SWrapperLink, { href: opportunityLink, target: "_blank", onClick: () => openOpportunityAction({ opportunityId: opportunity.opportunityId }), children: [(0, jsx_runtime_1.jsx)(StyledCardHead, { backgroundImage: headColorImage
|
|
364
|
+
return ((0, jsx_runtime_1.jsxs)(SWrapperLink, { href: opportunityLink, target: "_blank", onClick: () => openOpportunityAction({ opportunityId: opportunity.opportunityId }), children: [(0, jsx_runtime_1.jsx)(StyledCardHead, { backgroundImage: headColorImage ||
|
|
365
|
+
exports.HEADER_BACKGROUNDS_MAP[opportunity?.categoryName || "Other"] ||
|
|
366
|
+
exports.HEADER_BACKGROUNDS_MAP["Other"], children: (0, jsx_runtime_1.jsx)(OpportunityName, { title: opportunity.name, children: opportunity.name }) }), (0, jsx_runtime_1.jsxs)(StyledCardContent, { children: [(0, jsx_runtime_1.jsx)("div", { className: "cardContent", children: (0, jsx_runtime_1.jsxs)("div", { className: "cardContentWrapper", children: [opportunity?.project && ((0, jsx_runtime_1.jsxs)(ProjectBlock, { children: [Boolean(opportunity?.project?.mediaUrl) && !isProjectIconErrorLoading && ((0, jsx_runtime_1.jsx)("img", { className: "icon", src: opportunity?.project?.mediaUrl
|
|
367
|
+
? `${getMediaENVDomain()}/projects/${opportunity?.project.mediaUrl}`
|
|
368
|
+
: opportunity?.project?.originalMediaUrl || "", alt: opportunity?.project?.name || opportunity?.projectContract, onError: () => {
|
|
369
|
+
setIsProjectIconErrorLoading(true);
|
|
370
|
+
} })), (0, jsx_runtime_1.jsxs)("div", { className: "name", children: [(0, jsx_runtime_1.jsx)(index_1.H6, { className: "project-name", color: "#12183A", children: opportunity?.project?.name || (0, utils_1.shortenedText)(opportunity?.projectContract) }), (0, jsx_runtime_1.jsx)(index_1.H6, { color: "#696F90", children: opportunity?.project?.symbol })] })] })), (0, jsx_runtime_1.jsx)("p", { className: `mainName`, dangerouslySetInnerHTML: { __html: sanitizedHtml } }), (0, jsx_runtime_1.jsxs)("div", { className: `categoryName`, children: [opportunity.categoryName, (0, jsx_runtime_1.jsx)(OpportunityDropDown_1.OpportunityDropDown, { opportunity: opportunity })] })] }) }), (0, jsx_runtime_1.jsxs)(index_1.Flex, { alignItems: "end", justifyContent: "space-between", className: `categoryFooter`, children: [(0, jsx_runtime_1.jsx)(CardCategory_1.default, { label: data_1.default[opportunity.opportunityType] || data_1.default.opportunity }), isAirdrop && !opportunity.subscribed ? ((0, jsx_runtime_1.jsx)(MainButton_1.default, { className: "btnClaim", variant: "primaryXS", text: "Claim", onClick: () => {
|
|
291
371
|
window.location.replace(opportunityLink);
|
|
292
372
|
} })) : (opportunity.activeUntil && ((0, jsx_runtime_1.jsx)("div", { className: "date", children: `till ${(0, moment_1.default)(opportunity.activeUntil).format("LL")}` })))] })] })] }));
|
|
293
373
|
};
|
|
@@ -1,13 +1,33 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
4
24
|
};
|
|
5
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
26
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
27
|
const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
|
|
8
28
|
const typography_1 = require("../../../../styles/typography");
|
|
9
29
|
const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
10
|
-
const styled_components_1 =
|
|
30
|
+
const styled_components_1 = __importStar(require("styled-components"));
|
|
11
31
|
// Styles
|
|
12
32
|
const StyledCardCategory = styled_components_1.default.div `
|
|
13
33
|
display: flex;
|
|
@@ -26,6 +46,7 @@ const StyledCardCategory = styled_components_1.default.div `
|
|
|
26
46
|
user-select: none;
|
|
27
47
|
border-radius: 2px;
|
|
28
48
|
text-transform: uppercase;
|
|
49
|
+
${(props) => props.borderColor && (0, styled_components_1.css) `border: 1px solid ${props.borderColor}`};
|
|
29
50
|
}
|
|
30
51
|
}
|
|
31
52
|
|
|
@@ -48,7 +69,7 @@ const StyledCardCategory = styled_components_1.default.div `
|
|
|
48
69
|
const CardCategory = ({ label }) => {
|
|
49
70
|
if (!label)
|
|
50
71
|
return null;
|
|
51
|
-
return ((0, jsx_runtime_1.jsx)(StyledCardCategory, { background: label.backgroundColor, color: label.color, children: (0, jsx_runtime_1.jsx)("div", { className: "category", children: (0, jsx_runtime_1.jsx)("span", { className: "label", children: label.text }) }) }));
|
|
72
|
+
return ((0, jsx_runtime_1.jsx)(StyledCardCategory, { background: label.backgroundColor, color: label.color, borderColor: label.borderColor, children: (0, jsx_runtime_1.jsx)("div", { className: "category", children: (0, jsx_runtime_1.jsx)("span", { className: "label", children: label.text }) }) }));
|
|
52
73
|
};
|
|
53
74
|
// Export
|
|
54
75
|
exports.default = CardCategory;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ludo.ninja/components",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.89",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"publish": "npm publish --access public -workspace @ludo.ninja/components"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@ludo.ninja/api": "^3.2.
|
|
26
|
+
"@ludo.ninja/api": "^3.2.41",
|
|
27
27
|
"@next/third-parties": "^15.3.4",
|
|
28
28
|
"@react-three/drei": "^9.68.3",
|
|
29
29
|
"@react-three/fiber": "^8.13.0",
|