Skip to content

Commit 1b396fc

Browse files
UyLeQuocUyLeQuoc
authored
Merge pull request #24 from CommandOSSLabs/feature/extend-blob-buy-suins
Feature/extend blob buy suins
2 parents 99640c0 + 76ff623 commit 1b396fc

16 files changed

Lines changed: 2514 additions & 241 deletions

File tree

‎apps/playground/components/PublishSection.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,24 +84,34 @@ export default function PublishSection({
8484
type="checkbox"
8585
id="sponsor-enabled"
8686
checked={sponsorEnabled}
87-
onChange={e => onSponsorConfigChange(e.target.checked, sponsorUrl)}
87+
onChange={e =>
88+
onSponsorConfigChange(e.target.checked, sponsorUrl)
89+
}
8890
className="w-4 h-4 bg-[#0C0F1D] border-2 border-[#97F0E599] rounded focus:outline-none focus:ring-0 focus:border-[#97F0E5] checked:bg-[#97F0E5] checked:border-[#97F0E5]"
8991
/>
90-
<label htmlFor="sponsor-enabled" className="text-sm font-medium text-[#F7F7F7]">
92+
<label
93+
htmlFor="sponsor-enabled"
94+
className="text-sm font-medium text-[#F7F7F7]"
95+
>
9196
Enable Transaction Sponsorship
9297
</label>
9398
</div>
9499
{sponsorEnabled && (
95100
<div>
96-
<label htmlFor="sponsor-url" className="block text-sm font-medium mb-1 text-[#F7F7F7]">
101+
<label
102+
htmlFor="sponsor-url"
103+
className="block text-sm font-medium mb-1 text-[#F7F7F7]"
104+
>
97105
Sponsor Backend URL
98106
</label>
99107
<input
100108
type="url"
101109
id="sponsor-url"
102110
className="w-full p-2 bg-[#0C0F1D] border-2 border-[#97F0E599] rounded-md focus:outline-none focus:ring-0 focus:border-[#97F0E5] text-[#F7F7F7]"
103111
value={sponsorUrl}
104-
onChange={e => onSponsorConfigChange(sponsorEnabled, e.target.value)}
112+
onChange={e =>
113+
onSponsorConfigChange(sponsorEnabled, e.target.value)
114+
}
105115
placeholder="http://localhost:8787"
106116
/>
107117
<p className="text-xs opacity-70 text-[#F7F7F7] mt-1">

‎packages/site-builder-react/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,17 @@
4141
}
4242
},
4343
"dependencies": {
44+
"@cetusprotocol/aggregator-sdk": "^1.4.2",
4445
"@nanostores/react": "^1.0.0",
4546
"@radix-ui/react-dialog": "^1.1.15",
4647
"@radix-ui/react-dropdown-menu": "^2.1.16",
48+
"bn.js": "^5.2.2",
4749
"lucide-react": "^0.562.0",
4850
"nanostores": "^1.1.0",
4951
"sonner": "^2.0.7"
5052
},
5153
"devDependencies": {
54+
"@types/bn.js": "^5.2.0",
5255
"@types/node": "catalog:",
5356
"@types/react": "^19.2.7",
5457
"@vanilla-extract/css": "^1.18.0",

‎packages/site-builder-react/src/components/PublishButton.tsx‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
type UseSitePublishingParams,
44
useSitePublishing
55
} from '~/hooks/useSitePublishing'
6+
import ExtendTimeDialog from './extend-time-dialog/ExtendTimeDialog'
67
import PublishMenu from './publish-menu/PublishMenu'
78
import PublishModal from './publish-modal/PublishModal'
89
import SuiNsModal from './suins-modal/SuiNsModal'
@@ -20,6 +21,7 @@ const PublishButton: FC<Props> = ({
2021
onUpdateSiteMetadata,
2122
onAssociatedDomain,
2223
onError,
24+
onExtendedBlobs,
2325
currentAccount,
2426
signAndExecuteTransaction,
2527
sponsorConfig,
@@ -33,18 +35,22 @@ const PublishButton: FC<Props> = ({
3335
handleOpenDomainDialog,
3436
handleRunDeploymentStep,
3537
handleSaveSiteMetadata,
36-
handleAssociateDomain
38+
handleAssociateDomain,
39+
handleExtendBlobs
3740
}
3841
} = useSitePublishing({
3942
siteId,
4043
assets,
4144
onUpdateSiteMetadata,
4245
onAssociatedDomain,
4346
onError,
47+
onExtendedBlobs,
4448
currentAccount,
4549
signAndExecuteTransaction,
4650
sponsorConfig,
47-
clients
51+
clients,
52+
portalDomain,
53+
portalHttps
4854
})
4955
const network = clients.suiClient.network
5056

@@ -67,6 +73,7 @@ const PublishButton: FC<Props> = ({
6773
assets={assets}
6874
onDeploy={handleRunDeploymentStep}
6975
onSaveMetadata={handleSaveSiteMetadata}
76+
onExtendBlobs={handleExtendBlobs}
7077
clients={clients}
7178
/>
7279
<SuiNsModal
@@ -76,6 +83,18 @@ const PublishButton: FC<Props> = ({
7683
portalDomain={portalDomain}
7784
portalHttps={portalHttps}
7885
clients={clients}
86+
signAndExecuteTransaction={signAndExecuteTransaction}
87+
sponsorConfig={sponsorConfig}
88+
/>
89+
<ExtendTimeDialog
90+
siteId={siteId}
91+
currentAccount={currentAccount}
92+
clients={clients}
93+
signAndExecuteTransaction={signAndExecuteTransaction}
94+
sponsorConfig={sponsorConfig}
95+
onSuccess={(message, digest) => {
96+
onExtendedBlobs?.(message, digest)
97+
}}
7998
/>
8099
</ThemeProvider>
81100
)

‎packages/site-builder-react/src/components/extend-time-dialog/ExtendTimeDialog.css.ts‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
import { keyframes, style } from '@vanilla-extract/css'
2+
import { themeVars } from '~/theme.css'
3+
4+
const spin = keyframes({
5+
'0%': { transform: 'rotate(0deg)' },
6+
'100%': { transform: 'rotate(360deg)' }
7+
})
8+
9+
export const overlay = style({
10+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
11+
position: 'fixed',
12+
inset: 0,
13+
zIndex: 50
14+
})
15+
16+
export const content = style({
17+
backgroundColor: themeVars.colors.background,
18+
borderRadius: themeVars.radius.lg,
19+
boxShadow:
20+
'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
21+
position: 'fixed',
22+
top: '50%',
23+
left: '50%',
24+
transform: 'translate(-50%, -50%)',
25+
width: '90vw',
26+
maxWidth: '42rem',
27+
maxHeight: '90vh',
28+
overflow: 'auto',
29+
zIndex: 51,
30+
border: `1px solid ${themeVars.colors.border}`,
31+
padding: themeVars.spacing.md,
32+
display: 'flex',
33+
flexDirection: 'column'
34+
})
35+
36+
export const loadingOverlay = style({
37+
position: 'absolute',
38+
inset: 0,
39+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
40+
backdropFilter: 'blur(4px)',
41+
display: 'flex',
42+
alignItems: 'center',
43+
justifyContent: 'center',
44+
zIndex: 100,
45+
borderRadius: themeVars.radius.lg
46+
})
47+
48+
export const loadingContent = style({
49+
display: 'flex',
50+
flexDirection: 'column',
51+
alignItems: 'center',
52+
gap: themeVars.spacing.md
53+
})
54+
55+
export const spinner = style({
56+
width: '2rem',
57+
height: '2rem',
58+
animation: `${spin} 1s linear infinite`,
59+
color: 'white'
60+
})
61+
62+
export const header = style({
63+
position: 'relative',
64+
marginBottom: themeVars.spacing.md
65+
})
66+
67+
export const title = style({
68+
fontSize: '1.125rem',
69+
fontWeight: 600,
70+
color: themeVars.colors.foreground,
71+
marginBottom: themeVars.spacing.xs
72+
})
73+
74+
export const description = style({
75+
fontSize: '0.875rem',
76+
color: themeVars.colors.mutedForeground
77+
})
78+
79+
export const closeButton = style({
80+
position: 'absolute',
81+
top: 0,
82+
right: 0,
83+
padding: '0.25rem',
84+
cursor: 'pointer',
85+
border: 'none',
86+
background: 'transparent',
87+
color: themeVars.colors.foreground,
88+
borderRadius: themeVars.radius.md,
89+
transition: 'background-color 0.2s',
90+
':hover': {
91+
backgroundColor: themeVars.colors.muted
92+
}
93+
})
94+
95+
export const body = style({
96+
display: 'flex',
97+
flexDirection: 'column',
98+
gap: themeVars.spacing.md,
99+
flex: 1,
100+
overflow: 'auto'
101+
})
102+
103+
export const formSection = style({
104+
display: 'flex',
105+
flexDirection: 'column',
106+
gap: themeVars.spacing.md
107+
})
108+
109+
export const fieldGroup = style({
110+
display: 'flex',
111+
flexDirection: 'column',
112+
gap: themeVars.spacing.xs
113+
})
114+
115+
export const dateInputWrapper = style({
116+
position: 'relative'
117+
})
118+
119+
export const dateIcon = style({
120+
position: 'absolute',
121+
left: '0.75rem',
122+
top: '50%',
123+
transform: 'translateY(-50%)',
124+
color: themeVars.colors.mutedForeground,
125+
pointerEvents: 'none'
126+
})
127+
128+
export const inputError = style({
129+
borderColor: themeVars.colors.destructive
130+
})
131+
132+
export const infoText = style({
133+
display: 'flex',
134+
alignItems: 'center',
135+
gap: '0.5rem',
136+
fontSize: '0.75rem',
137+
color: themeVars.colors.mutedForeground
138+
})
139+
140+
export const errorText = style({
141+
fontSize: '0.75rem',
142+
color: themeVars.colors.destructive
143+
})
144+
145+
export const summaryGrid = style({
146+
display: 'grid',
147+
gridTemplateColumns: 'repeat(2, 1fr)',
148+
gap: themeVars.spacing.md,
149+
'@media': {
150+
'(max-width: 768px)': {
151+
gridTemplateColumns: '1fr'
152+
}
153+
}
154+
})
155+
156+
export const summaryCard = style({
157+
borderRadius: themeVars.radius.md,
158+
border: `1px solid ${themeVars.colors.border}`,
159+
backgroundColor: `${themeVars.colors.muted}40`,
160+
padding: themeVars.spacing.md,
161+
display: 'flex',
162+
flexDirection: 'column',
163+
gap: themeVars.spacing.xs
164+
})
165+
166+
export const summaryHeader = style({
167+
display: 'flex',
168+
alignItems: 'center',
169+
gap: themeVars.spacing.xs,
170+
fontSize: '0.75rem',
171+
color: themeVars.colors.mutedForeground
172+
})
173+
174+
export const summaryContent = style({
175+
display: 'flex',
176+
flexDirection: 'column',
177+
gap: themeVars.spacing.xs
178+
})
179+
180+
export const summaryValue = style({
181+
fontSize: '0.875rem',
182+
fontWeight: 600,
183+
color: themeVars.colors.foreground
184+
})
185+
186+
export const summarySubtext = style({
187+
fontSize: '0.75rem',
188+
color: themeVars.colors.mutedForeground
189+
})
190+
191+
export const summaryError = style({
192+
fontSize: '0.75rem',
193+
color: themeVars.colors.destructive
194+
})
195+
196+
export const summaryList = style({
197+
display: 'flex',
198+
flexDirection: 'column',
199+
gap: themeVars.spacing.xs
200+
})
201+
202+
export const summaryRow = style({
203+
display: 'flex',
204+
alignItems: 'center',
205+
justifyContent: 'space-between',
206+
fontSize: '0.875rem',
207+
color: themeVars.colors.mutedForeground,
208+
paddingTop: themeVars.spacing.xs,
209+
borderTop: `1px solid ${themeVars.colors.border}50`,
210+
':first-child': {
211+
borderTop: 'none',
212+
paddingTop: 0
213+
}
214+
})
215+
216+
export const footer = style({
217+
display: 'flex',
218+
gap: themeVars.spacing.md,
219+
justifyContent: 'flex-end',
220+
marginTop: themeVars.spacing.md,
221+
paddingTop: themeVars.spacing.md
222+
})

0 commit comments

Comments
 (0)