Skip to content

Commit

Permalink
Update Transaction History, TransactionPreview, Connect wallet theme
Browse files Browse the repository at this point in the history
  • Loading branch information
toddkao committed Jul 17, 2024
1 parent 785a7ec commit ce2482c
Show file tree
Hide file tree
Showing 15 changed files with 102 additions and 38 deletions.
1 change: 1 addition & 0 deletions examples/nextjs/pages/web-component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const WebComponent: NextPage = () => {
}}
>
<skip-widget
class-name="test"
colors={JSON.stringify({
primary: '#FF4FFF',
})}
Expand Down
2 changes: 1 addition & 1 deletion packages/widget/src/ui/AssetSelect/AssetSelectContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ function AssetSelectContent({
<div className="isolate flex h-full flex-col p-6 pb-2 font-diatype">
<div className="mb-4 flex items-center gap-4">
<StyledPrimaryButton
className="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:bg-neutral-100"
className="flex h-8 w-8 items-center justify-center rounded-full transition-colors"
onClick={onClose}
>
<ArrowLeftIcon className="h-6 w-6" />
Expand Down
2 changes: 1 addition & 1 deletion packages/widget/src/ui/ChainSelect/ChainSelectContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function ChainSelectContent({ chains, onChange, onClose }: Props) {
<div className="isolate flex h-full flex-col p-6 pb-2 font-diatype">
<div className="mb-4 flex items-center gap-4">
<StyledPrimaryButton
className="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:bg-neutral-100"
className="flex h-8 w-8 items-center justify-center rounded-full transition-colors"
onClick={onClose}
>
<ArrowLeftIcon className="h-6 w-6" />
Expand Down
4 changes: 3 additions & 1 deletion packages/widget/src/ui/ChainSelect/ChainSelectTrigger.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ const ChainSelectTrigger = forwardRef<HTMLButtonElement, Props>(
<span className="flex-1">
{chain ? chain.prettyName : 'Select Chain'}
</span>
<ChevronDownIcon className="mt-0.5 h-4 w-4" />
<div>
<ChevronDownIcon className="mt-0.5 h-4 w-4" />
</div>
</StyledSecondaryButton>
);
}
Expand Down
7 changes: 4 additions & 3 deletions packages/widget/src/ui/ConnectedWalletButton.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { ComponentProps, forwardRef } from 'react';
import { cn } from '../utils/ui';
import { StyledPrimaryButton } from './StyledComponents/Buttons';

type Props = ComponentProps<'button'> & {
address: string;
Expand All @@ -11,10 +12,10 @@ export const ConnectedWalletButton = forwardRef<HTMLButtonElement, Props>(
function Component(props, ref) {
const { address, walletLogo, walletName, className, ...rest } = props;
return (
<button
<StyledPrimaryButton
className={cn(
'flex items-center gap-2 transition-colors focus:outline-none',
'rounded-lg border border-neutral-200 px-2 py-1.5 hover:border-neutral-300 hover:bg-neutral-50',
'rounded-lg border border-neutral-200 px-2 py-1.5 hover:border-neutral-300',
className
)}
{...rest}
Expand All @@ -32,7 +33,7 @@ export const ConnectedWalletButton = forwardRef<HTMLButtonElement, Props>(
<span className="font-diatypeMono text-xs font-semibold tabular-nums">
{address.slice(0, 8)}...{address.slice(-5)}
</span>
</button>
</StyledPrimaryButton>
);
}
//
Expand Down
5 changes: 1 addition & 4 deletions packages/widget/src/ui/HistoryDialog/DescriptionList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,7 @@ export const Row = ({ className, ...props }: ComponentProps<'div'>) => {

export const Dt = ({ className, ...props }: ComponentProps<'dt'>) => {
return (
<dt
className={cn('col-span-1 flex items-center text-black/60', className)}
{...props}
/>
<dt className={cn('col-span-1 flex items-center', className)} {...props} />
);
};

Expand Down
11 changes: 5 additions & 6 deletions packages/widget/src/ui/HistoryDialog/HistoryList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,7 @@ import { cn } from '../../utils/ui';
import { ChainSymbol } from '../ChainSymbol';
import { AssetValue } from '../AssetValue';
import { disclosure } from '../../store/disclosures';
import { useSwapWidgetUIStore } from '../../store/swap-widget';
import { css } from '@emotion/css';
import { StyledSecondaryButton } from '../StyledComponents/Buttons';

type RootProps = Omit<Accordion.AccordionSingleProps, 'type'>;

Expand Down Expand Up @@ -117,7 +116,7 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(function Item(
<Accordion.Header
className={cn(
'relative flex flex-col items-stretch space-y-2',
'rounded-md p-2 transition-colors hover:bg-neutral-100'
'rounded-md p-2 transition-colors'
)}
ref={headingRef}
>
Expand Down Expand Up @@ -246,9 +245,9 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(function Item(
</DescriptionList.Row>
</DescriptionList.Root>
<div className="flex space-x-1">
<button
<StyledSecondaryButton
className={cn(
'rounded-md border bg-neutral-100 px-2 py-1 text-xs transition-colors hover:bg-neutral-200',
'rounded-md border px-2 py-1 text-xs transition-colors',
'flex flex-grow items-center justify-center space-x-1'
)}
onClick={() => {
Expand All @@ -257,7 +256,7 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(function Item(
>
<TrashIcon className="h-3 w-3" />
<span>Delete</span>
</button>
</StyledSecondaryButton>
</div>
</Accordion.Content>
</Accordion.Item>
Expand Down
12 changes: 7 additions & 5 deletions packages/widget/src/ui/HistoryDialog/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,7 @@ export const HistoryDialog = () => {
<HistoryClearButton />
</div>
<StyledScrollAreaRoot
className={cn(
'relative isolate -mx-4 overflow-hidden',
'before:absolute before:inset-x-0 before:bottom-0 before:z-10 before:h-2'
)}
className={cn('relative isolate -mx-4 overflow-hidden')}
>
<ScrollArea.Viewport className="h-full w-full px-4">
<HistoryList.Root>
Expand All @@ -55,7 +52,12 @@ export const HistoryDialog = () => {
</span>
)}
{entries?.map(([id, data]) => (
<HistoryList.Item key={id} id={id} data={data} />
<StyledPrimaryButton
as={HistoryList.Item}
key={id}
id={id}
data={data}
/>
))}
{!isReady && (
<div className="p-4 text-center opacity-60">
Expand Down
2 changes: 1 addition & 1 deletion packages/widget/src/ui/JsonDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const JsonDialog = () => {
<div className="h-full overflow-y-auto px-4 py-6 scrollbar-hide">
<div className="flex items-center gap-4 pb-2">
<StyledPrimaryButton
className="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:bg-neutral-100"
className="flex h-8 w-8 items-center justify-center rounded-full transition-colors"
onClick={close}
>
<ArrowLeftIcon className="h-6 w-6" />
Expand Down
24 changes: 18 additions & 6 deletions packages/widget/src/ui/PreviewRoute/ChainStep.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,11 @@ import {
import { cn } from '../../utils/ui';
import { ExpandArrow } from '../Icon/ExpandArrow';
import { useSwapWidgetUIStore } from '../../store/swap-widget';
import { css } from '@emotion/css';
import { useAssets } from '../../provider/assets';
import { StyledPrimaryDiv } from '../StyledComponents/Theme';
import { lightOrDark, nameToRgba } from '../../utils/color';
import { useTheme } from 'styled-components';
import { StyledPrimaryButton } from '../StyledComponents/Buttons';

export const ChainStep = ({
chainID,
Expand Down Expand Up @@ -75,6 +78,7 @@ export const ChainStep = ({
chainAddresses: ChainAddresses;
setChainAddresses: (v: SetChainAddressesParam) => void;
}) => {
const theme = useTheme();
const { data: chain } = useChainByID(chainID);

const totalChains = chainIDsWithAction.length;
Expand Down Expand Up @@ -228,7 +232,7 @@ export const ChainStep = ({
isError && 'bg-red-600'
)}
>
<div className="flex h-full w-full items-center justify-center rounded-full bg-white p-1">
<StyledPrimaryDiv className="flex h-full w-full items-center justify-center rounded-full p-1">
<img
src={
chain?.logoURI || 'https://api.dicebear.com/6.x/shapes/svg'
Expand All @@ -238,7 +242,7 @@ export const ChainStep = ({
className={cn('rounded-full object-cover')}
alt={chainID}
/>
</div>
</StyledPrimaryDiv>
{signRequired && (
<SimpleTooltip label={`Require signing`} type="default">
<div
Expand All @@ -263,6 +267,14 @@ export const ChainStep = ({
bridge?.logoURI ||
'https://api.dicebear.com/6.x/shapes/svg'
}
style={{
filter:
lightOrDark(
nameToRgba(theme.primary.backgroundColor)
) === 'dark'
? 'invert(1)'
: undefined,
}}
height={16}
width={16}
className={cn(
Expand Down Expand Up @@ -290,12 +302,12 @@ export const ChainStep = ({
</div>
)}
{!isExpanded && (
<button
className="absolute top-[18px] rounded-full border-2 border-neutral-200 bg-white p-1 text-neutral-400 transition-transform hover:scale-110"
<StyledPrimaryButton
className="absolute top-[18px] rounded-full border-2 border-neutral-200 p-1 text-neutral-400 transition-transform hover:scale-110"
onClick={() => setIsExpanded(true)}
>
<ExpandArrow className="h-4 w-4" />
</button>
</StyledPrimaryButton>
)}

<div
Expand Down
2 changes: 1 addition & 1 deletion packages/widget/src/ui/PreviewRoute/SetAddressDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export const SetAddressDialog = ({
<div className="relative flex justify-between">
<StyledPrimaryButton
className={cn(
'flex h-8 w-8 items-center justify-between rounded-full transition-colors hover:bg-neutral-100'
'flex h-8 w-8 items-center justify-between rounded-full transition-colors'
)}
onClick={() => onOpen(false)}
>
Expand Down
11 changes: 7 additions & 4 deletions packages/widget/src/ui/PreviewRoute/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,10 @@ import { cn } from '../../utils/ui';
import { trackWallet, TrackWalletCtx } from '../../store/track-wallet';
import { CraftedBySkip } from '../CraftedBySkip';
import { styled } from 'styled-components';
import { StyledPrimaryBrandDiv } from '../StyledComponents/Theme';
import {
StyledPrimaryBrandDiv,
StyledPrimaryDiv,
} from '../StyledComponents/Theme';
import { StyledPrimaryButton } from '../StyledComponents/Buttons';

export interface Wallet {
Expand Down Expand Up @@ -394,13 +397,13 @@ export const PreviewRoute = ({
};

return (
<div className="absolute inset-0 animate-fade-zoom-in bg-white">
<StyledPrimaryDiv className="absolute inset-0 animate-fade-zoom-in">
<div className="flex h-full flex-col space-y-6 overflow-y-auto p-6 scrollbar-hide">
<div>
<div className="flex items-center justify-between pr-1">
<div className="flex items-center gap-4">
<StyledPrimaryButton
className="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:bg-neutral-100"
className="flex h-8 w-8 items-center justify-center rounded-full transition-colors"
onClick={control.close}
>
<ArrowLeftIcon className="h-6 w-6" />
Expand Down Expand Up @@ -605,7 +608,7 @@ export const PreviewRoute = ({
<CraftedBySkip />
</div>
</div>
</div>
</StyledPrimaryDiv>
);
};

Expand Down
2 changes: 1 addition & 1 deletion packages/widget/src/ui/PriceImpactWarning.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const PriceImpactWarning = ({
</div>
<div className="flex items-end gap-2">
<button
className="w-full rounded-lg border border-neutral-400 py-4 font-semibold text-neutral-500 transition-colors hover:bg-neutral-100"
className="w-full rounded-lg border border-neutral-400 py-4 font-semibold text-neutral-500 transition-colors"
onClick={() => control.close()}
>
Continue
Expand Down
7 changes: 3 additions & 4 deletions packages/widget/src/ui/WalletModal/WalletModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,9 @@ export function WalletModal({ chainType, onClose, wallets }: Props) {
'data-[unsupported=true]:before:absolute data-[unsupported=true]:before:inset-0 data-[unsupported=true]:before:cursor-not-allowed'
)}
>
<button
<StyledPrimaryButton
className={cn(
'flex w-full items-center gap-2 rounded-lg p-2 transition-colors focus:-outline-offset-2',
'group-hover:bg-[#000000]/5'
'flex w-full items-center gap-2 rounded-lg p-2 transition-colors focus:-outline-offset-2'
)}
onClick={() => onWalletConnect(wallet)}
disabled={chainType === 'svm' && wallet.isAvailable !== true}
Expand All @@ -111,7 +110,7 @@ export function WalletModal({ chainType, onClose, wallets }: Props) {
? 'Metamask (Leap Snap)'
: wallet.walletPrettyName}
</p>
</button>
</StyledPrimaryButton>
{wallet.isWalletConnected && (
<button
aria-label={`Disconnect ${wallet.walletPrettyName}`}
Expand Down
48 changes: 48 additions & 0 deletions packages/widget/src/utils/color.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
export function nameToRgba(name: string) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
if (context) {
context.fillStyle = name;
context.fillRect(0, 0, 1, 1);
}
const rgbaArray = context?.getImageData(0, 0, 1, 1).data;
return rgbaArray ? Uint8ClampedArrayToRGBAString(rgbaArray) : undefined;
}

function Uint8ClampedArrayToRGBAString(array: Uint8ClampedArray) {
if (array.length !== 4) {
throw new Error('Array length must be 4 to convert to RGBA string');
}

const [r, g, b, a] = array;

return `rgba(${r}, ${g}, ${b}, ${a / 255})`;
}

export function lightOrDark(color: any) {
let r: number, g: number, b: number, hsp: number;

if (color.match(/^rgb/)) {
color = color.match(
/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/
);

r = color[1];
g = color[2];
b = color[3];
} else {
color = +('0x' + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));

r = color >> 16;
g = (color >> 8) & 255;
b = color & 255;
}

hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));

if (hsp > 127.5) {
return 'light';
} else {
return 'dark';
}
}

0 comments on commit ce2482c

Please sign in to comment.