Skip to content

Commit 1c96dff

Browse files
marcel-bymarcel-by
committed
Embedded Unlock checkout
1 parent 0335fff commit 1c96dff

File tree

2 files changed

+27
-10
lines changed

2 files changed

+27
-10
lines changed

‎public/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,25 @@
33

44
<head>
55
<script src="../src/index.js"></script>
6+
<script>
7+
(function (d, s) {
8+
var js = d.createElement(s),
9+
sc = d.getElementsByTagName(s)[0];
10+
js.src = "https://paywall.unlock-protocol.com/static/unlock.latest.min.js";
11+
sc.parentNode.insertBefore(js, sc);
12+
}(document, "script"));
13+
</script>
14+
15+
<script>
16+
var unlockProtocolConfig = {
17+
"network": 137, // Network ID (1 is for mainnet, 4 for rinkeby, 100 for xDai, etc)
18+
"locks": {
19+
"0x0000000000000000000000000000000000000000": {
20+
"name": "Null Address"
21+
}
22+
}
23+
}
24+
</script>
625
</head>
726

827
<body>

‎src/views/Profile.js

+8-10
Original file line numberDiff line numberDiff line change
@@ -113,12 +113,10 @@ const Profile = () => {
113113
}
114114
},
115115
title: lock.name,
116-
pessimistic: true
116+
// pessimistic: true
117117
}
118118

119-
//TODO change to domain
120-
const uri = 'https://app.unlock-protocol.com/checkout?redirectUri=' + 'https://raindrop-gold.vercel.app/' + location.pathname + '&paywallConfig=' + encodeURIComponent(JSON.stringify(paywallConfig));
121-
window.location.href = uri;
119+
window.unlockProtocol && window.unlockProtocol.loadCheckoutModal(paywallConfig)
122120
}
123121

124122
const checkVerification = async () => {
@@ -249,9 +247,9 @@ const Profile = () => {
249247
borderBottom='1px solid'
250248
borderColor='brand.500'
251249
>
252-
<Flex mt='15px' flexDirection='column' alignItems='center' position='absolute' left='30px'>
250+
<Flex zIndex={2} mt='15px' flexDirection='column' alignItems='center' position='absolute' left='30px' top='60px'>
253251
<Text borderRadius='7px' py='4px' px='8px' border='1px solid' borderColor='brand.500'>{lock ? '$' + ethers.utils.formatUnits(lock.price, DECIMALS[lock.chain]) : 'N/A'}</Text>
254-
<Text mt='5px' color='#ADADAD'>Per Month</Text>
252+
<Text mt='2px' fontSize='small' color='#ADADAD'>Per Month</Text>
255253
</Flex>
256254

257255
{/*Center profile*/}
@@ -268,17 +266,17 @@ const Profile = () => {
268266
</Tooltip>
269267
}
270268
{lock && <Text>Creator</Text>}
271-
<Text w='100%' align='center' pb='20px'>{user && user.details.profile && user.details.profile.description || "No description found"}</Text>
269+
<Text w='90%' align='center' pb='20px'>{user && user.details.profile && user.details.profile.description || "No description found"}</Text>
272270
</Flex>
273271

274272
{myProfile ?
275-
<Flex mt='15px' flexDirection='column' alignItems='center' position='absolute' right='30px'>
273+
<Flex zIndex={2} mt='15px' flexDirection='column' alignItems='center' position='absolute' right='30px' top='60px'>
276274
<Text borderRadius='7px' py='4px' px='8px' border='1px solid' borderColor='brand.500' fontWeight='semibold'>$N/A</Text>
277-
<Text mt='5px' color='#ADADAD'>Earned USDC</Text>
275+
<Text mt='5px' fontSize='small' color='#ADADAD'>Earned USDC</Text>
278276
</Flex>
279277
:
280278
lock && (!balance?.gt(0)) &&
281-
<Flex mt='15px' flexDirection='column' alignItems='center' position='absolute' right='30px'>
279+
<Flex zIndex={2} mt='15px' flexDirection='column' alignItems='center' position='absolute' right='30px' top='60px'>
282280
<Button colorScheme='brand' borderRadius='70px' onClick={handleSubscribe}>Subscribe</Button>
283281
<Text mt='2px' fontSize='x-small' color='#ADADAD'>On {CHAIN_NAMES[lock.chain]}</Text>
284282
</Flex>

0 commit comments

Comments
 (0)