-
-
-
-
-
-
-
- {versions.map((v, i) => {
- return (
- {
- setSolidityVersion(v)
- }}
- >
- {v}
-
- )
- })}
-
-
-
-
-
-
-
-
+
+
ALPHA
+
Using {pluginVersion}
)
}
diff --git a/plugin/src/features/Header/style.css b/plugin/src/features/Header/style.css
new file mode 100644
index 00000000..a2a267a7
--- /dev/null
+++ b/plugin/src/features/Header/style.css
@@ -0,0 +1,45 @@
+.plugin-version {
+ border: none;
+
+ /* make uppercase */
+
+ /* XS Body-Regular */
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px; /* 150% */
+
+ padding: 2px;
+
+ margin: 0;
+}
+
+.plugin-version-wrapper {
+ display: flex;
+ flex-direction: row;
+ margin: 0 16px;
+ padding-top: 3px;
+ border-top: 1px solid var(--light);
+ gap: 8px;
+}
+
+.plugin-version-label {
+ font-size: 10px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 18px; /* 180% */
+ letter-spacing: 0.6px;
+
+ background-color: var(--light);
+ padding: 2px;
+
+ border-radius: 3px;
+
+ margin: 0;
+}
+
+.text-no-break {
+ overflow-wrap: break-word;
+ word-break: keep-all;
+ hyphens: none;
+}
diff --git a/plugin/src/features/Plugin/index.tsx b/plugin/src/features/Plugin/index.tsx
index faac64d1..f82c26b8 100644
--- a/plugin/src/features/Plugin/index.tsx
+++ b/plugin/src/features/Plugin/index.tsx
@@ -1,14 +1,8 @@
import React, { useEffect, useState } from 'react'
import { useAtom, useAtomValue, useSetAtom } from 'jotai'
import { ethers } from 'ethers'
-import {
- Environment,
- Compilation,
- Deployment,
- Interaction,
- TransactionHistory,
- SolidityVersion as CompilerVersion
-} from '@/features'
+import * as Tabs from '@radix-ui/react-tabs'
+import { Environment, Compilation, Deployment, Interaction, TransactionHistory, Header, Footer } from '@/features'
import Accordian, { AccordianItem, AccordionContent, AccordionTrigger } from '@/ui_components/Accordian'
import StateAction from '@/components/StateAction'
import BackgroundNotices from '@/components/BackgroundNotices'
@@ -18,13 +12,20 @@ import { initializeRemixClient, isLoadedAtom, remixClientAtom } from '@/stores/r
import storage from '@/utils/storage'
import useAsync from '@/hooks/useAsync'
import { type AccordianTabs } from '@/types/common'
+import { FullScreenOverlay, Loader } from '@/ui_components'
import './styles.css'
+import { Settings } from '@/components/Settings'
export const Plugin = () => {
const { status: compileStatus, errorMessages: compileErrorMessages } = useAtomValue(compilationAtom)
const [isLoaded, setIsLoaded] = useAtom(isLoadedAtom)
const setRemixClient = useSetAtom(remixClientAtom)
const setHashDir = useSetAtom(hashDirAtom)
+ const { deployStatus } = useAtomValue(deploymentAtom)
+
+ const [interactionStatus] = useState<'loading' | 'success' | 'error' | ''>('')
+
+ const [currentAccordian, setCurrentAccordian] = useState
('compile')
useAsync(async () => {
const client = await initializeRemixClient()
@@ -45,14 +46,6 @@ export const Plugin = () => {
}
}, [setHashDir])
- // Deployment Context state variables
- const { deployStatus } = useAtomValue(deploymentAtom)
-
- // Interaction state variables
- const [interactionStatus] = useState<'loading' | 'success' | 'error' | ''>('')
-
- const [currentAccordian, setCurrentAccordian] = useState('compile')
-
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const handleTabView = (clicked: AccordianTabs) => {
if (currentAccordian === clicked) {
@@ -67,101 +60,108 @@ export const Plugin = () => {
<>
-
-
-
- {
- handleTabView('compile')
- }}
- >
-
- Compile
- 0
- ? `${compileErrorMessages[0]} ${compileErrorMessages[1] ?? ''}. check terminal logs for more info.`
- : ''
- }
- />
-
-
-
-
-
-
-
- {
- handleTabView('deploy')
- }}
- >
-
- Deploy
-
-
-
-
-
-
-
-
- {
- handleTabView('interaction')
- }}
- >
-
- Interact
-
-
-
-
-
-
-
-
- {/* Transactions start */}
-
- {
- handleTabView('transactions')
- }}
- >
-
- Transactions
-
-
-
-
-
-
-
- {
- handleTabView('notices')
- }}
- >
-
- Notices
-
-
-
-
-
-
-
+
+
+
+
+
+ Home
+
+
+ Transactions
+
+
+ Info
+
+
+ Settings
+
+
+
+
+
+ {
+ handleTabView('compile')
+ }}
+ >
+
+ 1
+ Compile
+ 0
+ ? `${compileErrorMessages[0]} ${compileErrorMessages[1] ?? ''}. check terminal logs for more info.`
+ : ''
+ }
+ />
+
+
+
+
+
+
+
+ {
+ handleTabView('deploy')
+ }}
+ >
+
+ 2
+ Deploy
+
+
+
+
+
+
+
+
+ {
+ handleTabView('interaction')
+ }}
+ >
+
+ 3
+ Interact
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
) : (
- Loading...
+
+
+
)
)
}
diff --git a/plugin/src/features/Plugin/styles.css b/plugin/src/features/Plugin/styles.css
index 6bef8939..fadc8ba6 100644
--- a/plugin/src/features/Plugin/styles.css
+++ b/plugin/src/features/Plugin/styles.css
@@ -1,33 +1,50 @@
-
.plugin-wrapper {
- height: 100%;
- display: grid;
- grid-template-rows: 1fr auto;
- max-height: 100vh;
- background-color: var(--body-bg);
+ height: 100%;
+ display: grid;
+ grid-template-rows: 1fr auto;
+ max-height: 100vh;
+ background-color: var(--body-bg);
}
-
.plugin-main-wrapper {
- overflow-y: scroll;
- height: 100%;
+ overflow-y: scroll;
+ height: 100%;
}
.max-w-300 {
- max-width: 300px;
+ max-width: 300px;
}
.width-full {
- width: 100%;
+ width: 100%;
}
.text-truncate {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
}
.overflow-hidden {
- overflow: hidden;
-}
\ No newline at end of file
+ overflow: hidden;
+}
+
+.tabs-trigger[data-state='active'] {
+ border-bottom: 2px solid var(--info);
+ transition: border-bottom 0.3s ease;
+ color: var(--info);
+}
+
+.tabs-trigger:focus {
+ outline: none;
+}
+
+.tabs-trigger {
+ width: auto;
+ height: 100%;
+ text-align: center;
+ padding: 0.5rem 0.3rem;
+ border-bottom: 3px solid transparent;
+ transition: border-bottom 0.3s ease;
+}
diff --git a/plugin/src/features/TransactionHistory/TransactionCard.tsx b/plugin/src/features/TransactionHistory/TransactionCard.tsx
index 34afe27e..6beea5e9 100644
--- a/plugin/src/features/TransactionHistory/TransactionCard.tsx
+++ b/plugin/src/features/TransactionHistory/TransactionCard.tsx
@@ -1,19 +1,15 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
import { type Transaction } from '../../types/transaction'
+import { getShortenedHash } from '../../utils/utils'
import './transactioncard.css'
-
interface TagType {
type: 'deploy' | 'declare' | 'invoke' | 'deployAccount'
}
-const Tag: React.FC = ({ type }) => {
+const Tag = ({ type }: TagType) => {
return {type === 'deployAccount' ? 'deploy account' : type}
}
-interface NetworkTypeTag {
- type: string
-}
-
const transformTypeToText = (type: string): string => {
switch (type) {
case 'localDevnet':
@@ -25,18 +21,16 @@ const transformTypeToText = (type: string): string => {
}
}
-const NetworkTag: React.FC = ({ type }) => {
+const NetworkTag = ({ type }: { type: string }) => {
return {transformTypeToText(type)}
}
-interface TransactionCardProps {
- transaction: Transaction
- // explorer: keyof typeof networkExplorerUrls
-}
-
-export const TransactionCard: React.FC = ({ transaction }) => {
- const { account, txId, env, chain } = transaction
- const [address, setAddress] = useState(undefined)
+export const TransactionCard = ({ transaction }: { transaction: Transaction }) => {
+ const cardRef = useRef(null)
+ const [address, setAddress] = useState()
+ const { account, txId: txnHash, env, chain } = transaction
+ const isEnvLocalOrRemote = env === 'localDevnet' || env === 'remoteDevnet'
+ const txnHashShort = getShortenedHash(txnHash, 8, 6)
useEffect(() => {
const fetchAddress = async (): Promise => {
@@ -47,52 +41,53 @@ export const TransactionCard: React.FC = ({ transaction })
fetchAddress().catch(console.error)
}, [account])
- const cardRef = useRef(null)
+ const accountShort = useMemo(() => getShortenedHash(address || '', 8, 6), [address])
return (
-
-
-
-
-
-
Transaction ID
- {env === 'localDevnet' || env === 'remoteDevnet' ? (
-
- {txId}
-
- ) : (
-
- {txId}
-
- )}
+
-
- {env === 'localDevnet' || env === 'remoteDevnet' ?
Network
:
Chain
}
-
+
)
diff --git a/plugin/src/features/TransactionHistory/index.tsx b/plugin/src/features/TransactionHistory/index.tsx
index 06100816..ff041559 100644
--- a/plugin/src/features/TransactionHistory/index.tsx
+++ b/plugin/src/features/TransactionHistory/index.tsx
@@ -1,27 +1,18 @@
import React from 'react'
-import Container from '../../ui_components/Container'
+import Container from '@/ui_components/Container'
import { TransactionCard } from './TransactionCard'
import { useAtomValue } from 'jotai'
-import { transactionsAtom } from '../../atoms/transaction'
+import { transactionsAtom } from '@/atoms'
-export const TransactionHistory: React.FC = () => {
+export const TransactionHistory = () => {
const transactions = useAtomValue(transactionsAtom)
-
return (
-
+
{transactions.length === 0 ? (
-
No transactions yet
+
No transactions yet
) : (
- transactions.map((transaction) => {
- return
- })
+ transactions.map((transaction) =>
)
)}
diff --git a/plugin/src/features/TransactionHistory/transactioncard.css b/plugin/src/features/TransactionHistory/transactioncard.css
index 55dae93a..38edf90f 100644
--- a/plugin/src/features/TransactionHistory/transactioncard.css
+++ b/plugin/src/features/TransactionHistory/transactioncard.css
@@ -1,116 +1,138 @@
/* Card Css */
.maincard {
- border: 1px solid var(--secondary);
- display: grid;
- padding: 1rem;
- gap: 0.5rem;
- border-radius: 0.5rem;
- grid-template-areas:
- 'a a b b'
- 'c c c c'
- 'd d d d';
+ display: grid;
+ grid-template-columns: 55% 45%;
+ background: var(--light);
+ border-radius: 6px;
+ white-space: nowrap;
+ align-items: center;
}
.tag-wrapper {
- grid-area: a;
- display: flex;
- flex-wrap: wrap;
+ grid-area: a;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.txn-info-1 {
+ font-size: 14px;
+ align-content: center;
+ align-items: center;
+}
+
+.txn-info-2 {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ align-content: center;
+ padding: 10px;
+ gap: 4px;
+ font-size: 10px;
+}
+
+.tag {
+ margin-top: 3px;
}
.account-wrapper {
- grid-area: b;
- width: 100%;
- max-width: 100%;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- overflow: hidden;
- gap: 0.5rem;
+ grid-area: b;
+ width: 100%;
+ max-width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ overflow: hidden;
+ gap: 0.5rem;
+}
+
+.account-wrapper,
+.txn-wrapper {
+ padding: 0.5rem;
}
.account-wrapper p {
- text-overflow: ellipsis;
- margin: 0;
- display: block;
- font-weight: 600;
+ text-overflow: ellipsis;
+ margin: 0;
+ display: block;
}
.account-wrapper a {
- overflow: hidden;
- text-overflow: ellipsis;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.account-wrapper a:hover {
- cursor: pointer;
+ cursor: pointer;
}
.txn-wrapper {
- grid-area: c;
- display: flex;
- flex-direction: column;
- max-width: 100%;
- overflow: hidden;
+ grid-area: c;
+ display: flex;
+ max-width: 100%;
+ overflow: hidden;
+ justify-content: space-between;
+}
+
+.txn-wrapper,
+.account-wrapper {
+ align-content: center;
+}
+
+.label-tx {
+ font-weight: bold;
}
.txn-wrapper p {
- margin: 0;
+ margin: 0;
}
.txn-wrapper a {
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 600;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-weight: 600;
}
.txn-network {
- grid-area: d;
- display: flex;
- align-items: center;
- justify-content: space-between;
+ grid-area: d;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
}
.txn-network > p {
- margin: 0;
+ margin: 0;
}
/* Tag Css */
.tag {
- border: 1px solid;
- border-color: var(--white);
- border-radius: 0.5rem;
- font-size: 0.8rem;
- text-transform: uppercase;
+ border: 1px solid;
+ border-radius: 0.5rem;
+ font-size: 0.5rem;
+ text-transform: uppercase;
}
.tag-declare {
- border-color: var(--green);
- color: var(--green);
+ border-color: var(--green);
}
.tag-invoke {
- border-color: var(--indigo);
- color: var(--indigo);
+ border-color: var(--indigo);
}
.tag-deploy {
- border-color: var(--teal);
- color: var(--teal);
+ border-color: var(--teal);
}
.tag-deployAccount {
- border-color: var(--yellow);
- color: var(--yellow);
+ border-color: var(--yellow);
}
-
.tag-localDevnet {
- border-color: var(--orange);
- color: var(--orange);
+ background: var(--bgPrimary);
}
.tag-remoteDevnet {
- border-color: var(--yellow);
- color: var(--yellow);
+ background: var(--bgPrimary);
}
diff --git a/plugin/src/features/index.ts b/plugin/src/features/index.ts
index b4aba79b..a9415447 100644
--- a/plugin/src/features/index.ts
+++ b/plugin/src/features/index.ts
@@ -1,7 +1,8 @@
export * from './Compilation'
-export * from './CompilerVersion'
+export * from './Header'
export * from './Deployment'
export * from './Environment'
export * from './Interaction'
export * from './Plugin'
export * from './TransactionHistory'
+export * from './Footer'
diff --git a/plugin/src/hooks/useIcons.ts b/plugin/src/hooks/useIcons.ts
new file mode 100644
index 00000000..95a93fc4
--- /dev/null
+++ b/plugin/src/hooks/useIcons.ts
@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react'
+import { remixClientAtom } from '@/stores/remixClient'
+import { useAtomValue } from 'jotai'
+
+export const useIcon = (name: string): string => {
+ const remixClient = useAtomValue(remixClientAtom)
+ const [remixTheme, setRemixTheme] = useState('dark')
+
+ useEffect(() => {
+ const loadTheme = async (): Promise
=> {
+ try {
+ const currentTheme = await remixClient.call('theme', 'currentTheme')
+ setRemixTheme(currentTheme.quality ?? 'dark')
+ } catch (error) {
+ console.error(error)
+ }
+ }
+
+ const updateTheme = (theme: any): void => {
+ setRemixTheme(theme.quality)
+ }
+
+ loadTheme().catch(console.error)
+
+ remixClient.on('theme', 'themeChanged', updateTheme)
+
+ return () => {
+ remixClient.off('theme', 'themeChanged')
+ }
+ }, [remixClient])
+
+ return `/${remixTheme}-${name}`
+}
diff --git a/plugin/src/ui_components/Accordian/accordian.css b/plugin/src/ui_components/Accordian/accordian.css
index c3890a78..daf611af 100644
--- a/plugin/src/ui_components/Accordian/accordian.css
+++ b/plugin/src/ui_components/Accordian/accordian.css
@@ -1,109 +1,109 @@
/* reset */
button,
h3 {
- all: unset;
+ all: unset;
}
.AccordionRoot {
- border-radius: 6px;
- width: 100%;
- box-shadow: 0 2px 10px var(--secondary);
+ border-radius: 6px;
+ width: 100%;
+ /* box-shadow: 0 2px 10px var(--secondary); */
}
.AccordionItem {
- overflow: hidden;
- margin-top: 1px;
- box-shadow: 0 0 0 2px var(--secondary);
+ overflow: hidden;
+ margin-top: 1px;
+ box-shadow: 0 0 0 2px var(--secondary);
}
.AccordionItem:first-child {
- margin-top: 0;
- border-top-left-radius: 4px;
- border-top-right-radius: 4px;
+ margin-top: 0;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
}
.AccordionItem:last-child {
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
}
.AccordionItem:focus-within {
- position: relative;
- z-index: 1;
- box-shadow: 0 0 0 2px var(--secondary);
+ position: relative;
+ z-index: 1;
+ box-shadow: 0 0 0 2px var(--secondary);
}
.AccordionHeader {
- display: flex;
+ display: flex;
}
.AccordionTrigger {
- font-family: inherit;
- min-height: 45px;
- padding: 0 20px;
- height: 45px;
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-size: 1rem;
- font-weight: bold;
- line-height: 1;
- color: var(--text);
- transition: all 0.1s ease;
- box-shadow: 0 1px 0 var(--secondary);
+ font-family: inherit;
+ min-height: 45px;
+ padding: 0 20px;
+ height: 45px;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 1rem;
+ font-weight: bold;
+ line-height: 1;
+ color: var(--text);
+ transition: all 0.1s ease;
+ box-shadow: 0 1px 0 var(--secondary);
}
.AccordionTrigger:hover {
- background-color: var(--secondary) !important;
- color: var(--text);
+ background-color: var(--secondary) !important;
+ color: var(--text);
}
.AccordionTrigger:focus {
- outline: none;
+ outline: none;
}
.AccordionContent {
- overflow: hidden;
- font-size: 1rem;
- color: var(--text);
+ overflow: hidden;
+ font-size: 1rem;
+ color: var(--text);
}
.AccordionContent[data-state='open'] {
- animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+ animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
}
.AccordionContent[data-state='closed'] {
- animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+ animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
}
.AccordionContentText {
- padding: 15px 20px;
+ padding: 15px 20px;
}
.AccordionChevron {
- color: var(--textPrimary);
- transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+ color: var(--textPrimary);
+ transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
}
.AccordionTrigger[data-state='open'] > .AccordionChevron {
- transform: rotate(180deg);
+ transform: rotate(180deg);
}
@keyframes slideDown {
- from {
- height: 0;
- }
- to {
- height: var(--radix-accordion-content-height);
- }
+ from {
+ height: 0;
+ }
+ to {
+ height: var(--radix-accordion-content-height);
+ }
}
@keyframes slideUp {
- from {
- height: var(--radix-accordion-content-height);
- }
- to {
- height: 0;
- }
+ from {
+ height: var(--radix-accordion-content-height);
+ }
+ to {
+ height: 0;
+ }
}
diff --git a/plugin/src/ui_components/Container/index.tsx b/plugin/src/ui_components/Container/index.tsx
index c0f9456c..1b6262b2 100644
--- a/plugin/src/ui_components/Container/index.tsx
+++ b/plugin/src/ui_components/Container/index.tsx
@@ -1,12 +1,14 @@
import React from 'react'
import './container.css'
+import clsx from 'clsx'
interface IContainer {
children?: React.ReactNode
+ className?: string
}
-export const Container = ({ children }: IContainer) => {
- return {children}
+export const Container = ({ children, className }: IContainer) => {
+ return {children}
}
export default Container
diff --git a/plugin/src/ui_components/Dropdown/dropdown.css b/plugin/src/ui_components/Dropdown/dropdown.css
index 56819aeb..c96dd316 100644
--- a/plugin/src/ui_components/Dropdown/dropdown.css
+++ b/plugin/src/ui_components/Dropdown/dropdown.css
@@ -1,181 +1,182 @@
/* reset */
button {
- all: unset;
+ all: unset;
}
.DropdownMenuContent,
.DropdownMenuSubContent {
- min-width: 220px;
- border: 1px solid var(--secondary);
- border-radius: 6px;
- padding: 5px;
- box-shadow: 0 10px 38px -10px var(--secondary),
+ width: var(--radix-dropdown-menu-trigger-width);
+ border: 1px solid var(--secondary);
+ border-radius: 6px;
+ padding: 5px;
+ box-shadow:
+ 0 10px 38px -10px var(--secondary),
0 10px 20px -15px var(--secondary);
- animation-duration: 400ms;
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
- will-change: transform, opacity;
+ animation-duration: 400ms;
+ animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+ will-change: transform, opacity;
}
.DropdownMenuContent[data-side='top'],
.DropdownMenuSubContent[data-side='top'] {
- animation-name: slideDownAndFade;
+ animation-name: slideDownAndFade;
}
.DropdownMenuContent[data-side='right'],
.DropdownMenuSubContent[data-side='right'] {
- animation-name: slideLeftAndFade;
+ animation-name: slideLeftAndFade;
}
.DropdownMenuContent[data-side='bottom'],
.DropdownMenuSubContent[data-side='bottom'] {
- animation-name: slideUpAndFade;
+ animation-name: slideUpAndFade;
}
.DropdownMenuContent[data-side='left'],
.DropdownMenuSubContent[data-side='left'] {
- animation-name: slideRightAndFade;
+ animation-name: slideRightAndFade;
}
.DropdownMenuItem,
.DropdownMenuCheckboxItem,
.DropdownMenuRadioItem,
.DropdownMenuSubTrigger {
- font-size: 13px;
- line-height: 1;
- color: var(--text);
- border-radius: 3px;
- display: flex;
- align-items: center;
- height: 25px;
- padding: 0 5px;
- position: relative;
- user-select: none;
- outline: none;
+ font-size: 13px;
+ line-height: 1;
+ color: var(--text);
+ border-radius: 3px;
+ display: flex;
+ align-items: center;
+ height: 25px;
+ padding: 0 5px;
+ position: relative;
+ user-select: none;
+ outline: none;
}
.DropdownMenuSubTrigger[data-state='open'] {
- color: var(--text);
+ color: var(--text);
}
.DropdownMenuItem[data-disabled],
.DropdownMenuCheckboxItem[data-disabled],
.DropdownMenuRadioItem[data-disabled],
.DropdownMenuSubTrigger[data-disabled] {
- color: var(--text);
- pointer-events: none;
+ color: var(--text);
+ pointer-events: none;
}
.DropdownMenuItem[data-highlighted],
.DropdownMenuCheckboxItem[data-highlighted],
.DropdownMenuRadioItem[data-highlighted],
.DropdownMenuSubTrigger[data-highlighted] {
- color: var(--text);
+ color: var(--text);
}
.DropdownMenuItem:hover {
- background: var(--secondary) !important;
+ background: var(--secondary) !important;
}
.DropdownMenuLabel {
- padding-left: 25px;
- font-size: 12px;
- line-height: 25px;
- color: var(--text);
+ padding-left: 25px;
+ font-size: 12px;
+ line-height: 25px;
+ color: var(--text);
}
.DropdownMenuSeparator {
- height: 1px;
- background-color: var(--primary);
- margin: 5px;
+ height: 1px;
+ background-color: var(--primary);
+ margin: 5px;
}
.DropdownMenuItemIndicator {
- position: absolute;
- left: 0;
- width: 25px;
- display: inline-flex;
- align-items: center;
- justify-content: center;
+ position: absolute;
+ left: 0;
+ width: 25px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
}
.DropdownMenuArrow {
- fill: white;
+ fill: white;
}
.IconButton {
- font-family: inherit;
- border-radius: 100%;
- height: 35px;
- width: 35px;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- color: var(--text);
- box-shadow: 0 2px 10px var(--blackA7);
+ font-family: inherit;
+ border-radius: 100%;
+ height: 35px;
+ width: 35px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--text);
+ box-shadow: 0 2px 10px var(--blackA7);
}
.IconButton:hover {
- background-color: var(--secondary);
+ background-color: var(--secondary);
}
.IconButton:focus {
- box-shadow: 0 0 0 2px black;
+ box-shadow: 0 0 0 2px black;
}
.RightSlot {
- margin-left: auto;
- padding-left: 20px;
- color: var(--text);
+ margin-left: auto;
+ padding-left: 20px;
+ color: var(--text);
}
[data-highlighted] > .RightSlot {
- color: white;
+ color: white;
}
[data-disabled] .RightSlot {
- color: var(--text);
+ color: var(--text);
}
@keyframes slideUpAndFade {
- from {
- opacity: 0;
- transform: translateY(2px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
+ from {
+ opacity: 0;
+ transform: translateY(2px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
@keyframes slideRightAndFade {
- from {
- opacity: 0;
- transform: translateX(-2px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
+ from {
+ opacity: 0;
+ transform: translateX(-2px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
}
@keyframes slideDownAndFade {
- from {
- opacity: 0;
- transform: translateY(-2px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
+ from {
+ opacity: 0;
+ transform: translateY(-2px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
@keyframes slideLeftAndFade {
- from {
- opacity: 0;
- transform: translateX(2px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
+ from {
+ opacity: 0;
+ transform: translateX(2px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
}
diff --git a/plugin/src/ui_components/Tooltip/tooltip.css b/plugin/src/ui_components/Tooltip/tooltip.css
index a0dda3f1..375e42a8 100644
--- a/plugin/src/ui_components/Tooltip/tooltip.css
+++ b/plugin/src/ui_components/Tooltip/tooltip.css
@@ -1,103 +1,104 @@
/* reset */
button {
- all: unset;
+ all: unset;
}
.TooltipContent {
- z-index: 1060;
- width: 800px;
- border-radius: 4px;
- padding: 4px 8px;
- font-size: var(--font-sm);
- line-height: 1.5;
- color: var(--text);
- background-color: var(--primary);
- border: 1px solid var(--primary);
- box-shadow: hsl(206 22% 7% / 35%) 0 10px 38px -10px,
+ z-index: 1060;
+ width: 800px;
+ border-radius: 4px;
+ padding: 4px 8px;
+ font-size: var(--font-sm);
+ line-height: 1.5;
+ color: #ffffff;
+ font-weight: bold;
+ background-color: var(--secondary);
+ border: 1px solid var(--secondary);
+ box-shadow:
+ hsl(206 22% 7% / 35%) 0 10px 38px -10px,
hsl(206 22% 7% / 20%) 0 10px 20px -15px;
- user-select: none;
- animation-duration: 400ms;
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
- will-change: transform, opacity;
+ user-select: none;
+ animation-duration: 400ms;
+ animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+ will-change: transform, opacity;
}
.TooltipContent[data-state='delayed-open'][data-side='top'] {
- animation-name: slideDownAndFade;
+ animation-name: slideDownAndFade;
}
.TooltipContent[data-state='delayed-open'][data-side='right'] {
- animation-name: slideLeftAndFade;
+ animation-name: slideLeftAndFade;
}
.TooltipContent[data-state='delayed-open'][data-side='bottom'] {
- animation-name: slideUpAndFade;
+ animation-name: slideUpAndFade;
}
.TooltipContent[data-state='delayed-open'][data-side='left'] {
- animation-name: slideRightAndFade;
+ animation-name: slideRightAndFade;
}
.TooltipArrow {
- fill: var(--primary);
+ fill: var(--secondary);
}
.TooltipIconButton {
- font-family: inherit;
- border-radius: 100%;
- height: 35px;
- width: 35px;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- color: var(--textPrimary);
- background-color: transparent;
+ font-family: inherit;
+ border-radius: 100%;
+ height: 35px;
+ width: 35px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--textPrimary);
+ background-color: transparent;
}
-
.TooltipIconButton:focus {
- box-shadow: 0 0 0 2px var(--primary);
+ box-shadow: 0 0 0 2px var(--primary);
}
@keyframes slideUpAndFade {
- from {
- opacity: 0;
- transform: translateY(2px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
+ from {
+ opacity: 0;
+ transform: translateY(2px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
@keyframes slideRightAndFade {
- from {
- opacity: 0;
- transform: translateX(-2px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
+ from {
+ opacity: 0;
+ transform: translateX(-2px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
}
@keyframes slideDownAndFade {
- from {
- opacity: 0;
- transform: translateY(-2px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
+ from {
+ opacity: 0;
+ transform: translateY(-2px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
@keyframes slideLeftAndFade {
- from {
- opacity: 0;
- transform: translateX(2px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
+ from {
+ opacity: 0;
+ transform: translateX(2px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
}
diff --git a/plugin/src/utils/constants.ts b/plugin/src/utils/constants.ts
index 0d492fa6..a66e67be 100644
--- a/plugin/src/utils/constants.ts
+++ b/plugin/src/utils/constants.ts
@@ -49,6 +49,12 @@ const licenses = [
export const FILES_NOT_IN_CONTRACTS_MESSAGE =
'Warning: Only files within the /contracts/* folder structure are included in the project compilation. The following smart contracts defined outside this structure will not be available for deployment:'
+
+export const PLUGIN_INFO_CONTENT_ARRAY = [
+ 'The zkSync Remix Plugin is in Alpha',
+ 'Solidity contracts are compiled on a server hosted by Nethermind'
+ ]
+
export { devnetUrl, networks, networkExplorerUrls, licenses }
export type { Network }
diff --git a/plugin/theme/components/button.css b/plugin/theme/components/button.css
index 67543f7b..88a0ccd9 100644
--- a/plugin/theme/components/button.css
+++ b/plugin/theme/components/button.css
@@ -1,110 +1,46 @@
:root {
- .btn {
- all: unset;
- padding: var(--space-sm);
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all 0.1s ease-in-out;
- }
-
- .btn:hover {
- cursor: pointer;
- }
-
- .btn label {
- padding: 0;
- margin: 0;
- }
-
- .btn-primary {
- color: var(--light);
- background-color: var(--info);
- }
-
- .btn-primary.disabled,
- .btn-primary.disabled:hover {
- color: var(--text);
- background-color: var(--primary);
- }
-
- .btn-primary:hover {
- background-color: var(--secondary);
- }
-
- .btn-secondary {
- color: var(--text);
- background-color: var(--secondary);
- }
-
- .btn-secondary.disabled,
- .btn-secondary.disabled:hover {
- color: var(--text);
- background-color: var(--secondary);
- }
-
- .btn-secondary:hover {
- background-color: var(--secondary);
- }
-
- .btn-success {
- color: var(--text);
- background-color: var(--success);
- }
-
- .btn-success.disabled,
- .btn-success.disabled:hover {
- color: var(--text);
- background-color: var(--success);
- }
-
- .btn-success:hover {
- background-color: var(--success);
- }
-
- .btn-information {
- color: var(--text);
- background-color: var(--info);
- }
-
- .btn-information.disabled,
- .btn-information.disabled:hover {
- color: var(--text);
- background-color: var(--info);
- }
-
- .btn-information:hover {
- background-color: var(--info);
- }
-
- .btn-warning {
- color: var(--light);
- background-color: var(--warning);
- }
-
- .btn-warning.disabled,
- .btn-warning.disabled:hover {
- color: var(--light);
- background-color: var(--warning);
- }
-
- .btn-warning:hover {
- background-color: var(--secondary);
- }
-
- .btn-error {
- color: var(--text);
- background-color: var(--error);
- }
-
- .btn-error.disabled,
- .btn-error.disabled:hover {
- color: var(--text);
- background-color: var(--error);
- }
-
- .btn-error:hover {
- background-color: var(--error);
- }
-
+ .btn-success {
+ color: var(--text);
+ background-color: var(--success);
+ }
+
+ .btn-success.disabled,
+ .btn-success.disabled:hover {
+ color: var(--text);
+ background-color: var(--success);
+ }
+
+ .btn-success:hover {
+ background-color: var(--success);
+ }
+
+ .btn-information {
+ color: var(--text);
+ background-color: var(--info);
+ }
+
+ .btn-information.disabled,
+ .btn-information.disabled:hover {
+ color: var(--text);
+ background-color: var(--info);
+ }
+
+ .btn-information:hover {
+ background-color: var(--info);
+ }
+
+ .btn-error {
+ color: var(--text);
+ background-color: var(--error);
+ }
+
+ .btn-error.disabled,
+ .btn-error.disabled:hover {
+ color: var(--text);
+ background-color: var(--error);
+ }
+
+ .btn-error:hover {
+ background-color: var(--error);
+ }
}
})
)
}
diff --git a/plugin/src/components/NM/styles.css b/plugin/src/components/NM/styles.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/plugin/src/components/Settings/index.tsx b/plugin/src/components/Settings/index.tsx
new file mode 100644
index 00000000..1780d019
--- /dev/null
+++ b/plugin/src/components/Settings/index.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import { BsChevronDown } from 'react-icons/bs'
+import { useAtom, useAtomValue } from 'jotai'
+import { solidityVersionAtom, versionsAtom } from '@/atoms'
+import * as Dropdown from '@/ui_components/Dropdown'
+import './settings.css'
+
+export const Settings = () => {
+ const [solidityVersion, setSolidityVersion] = useAtom(solidityVersionAtom)
+ const versions = useAtomValue(versionsAtom)
+
+ return (
+ ++ ) +} diff --git a/plugin/src/components/Settings/settings.css b/plugin/src/components/Settings/settings.css new file mode 100644 index 00000000..1440cd71 --- /dev/null +++ b/plugin/src/components/Settings/settings.css @@ -0,0 +1,36 @@ +.settings-wrapper { + padding: 16px; + margin: 0; + display: flex; + flex-direction: column; + + gap: 16px; +} + +.settings-box { + display: grid; + grid-template-columns: 3fr 1fr 4fr; + + align-items: center; + font-size: 14px; + + border-bottom: 1px solid var(--light); + + padding: 8px; + + width: 100%; +} + +.settings-box-header { + font-weight: bold; +} + +.settings-box-content { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + font-size: 12px; + + width: 100%; +} diff --git a/plugin/src/features/Compilation/index.tsx b/plugin/src/features/Compilation/index.tsx index 5325a155..37853c6c 100644 --- a/plugin/src/features/Compilation/index.tsx +++ b/plugin/src/features/Compilation/index.tsx @@ -121,13 +121,9 @@ export const Compilation = ({ setAccordian }: CompilationProps) => { } return ( -Settings+++zksolc Version+ +++++