Skip to content

Commit

Permalink
Release v0.3.9
Browse files Browse the repository at this point in the history
  • Loading branch information
@dash-yuga
dash-yuga committed Nov 5, 2024
1 parent 18b55d0 commit f92fbeb
Show file tree
Hide file tree
Showing 15 changed files with 216 additions and 165 deletions.
6 changes: 4 additions & 2 deletions example/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,16 @@ import { arbitrum, mainnet } from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ConnectButton, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { ApePortalWrapper } from './ApePortalWrapper';
import { apeChain } from 'viem/chains';
import { apeChain, curtis } from 'viem/chains';
import React from 'react';

export const wagmiConfig = createConfig({
chains: [apeChain, mainnet, arbitrum],
chains: [apeChain, mainnet, arbitrum, curtis],
transports: {
[apeChain.id]: http(),
[mainnet.id]: http(),
[arbitrum.id]: http(),
[curtis.id]: http(),
},
});
const queryClient = new QueryClient();
Expand Down
2 changes: 2 additions & 0 deletions lib/components/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@

.decent-dialog .box-popular-token-row {
gap: 10px !important;
transition: all 0.3s ease;
}

.decent-dialog .box-token-row {
Expand All @@ -167,6 +168,7 @@
text-align: left;
padding-left: 0.5rem;
padding-right: 0.5rem;
transition: all 0.3s ease;
}

.aw-font-dmmono {
Expand Down
86 changes: 42 additions & 44 deletions lib/components/ui/ChainSelectorModule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,50 +105,48 @@ export const ChainSelectorModule = ({
<ModalWrapper
title="Select Network"
renderContent={({ setModalOpen }) => (
<div className="aw-flex aw-size-full aw-flex-col aw-items-center aw-justify-center aw-gap-y-3 aw-overflow-auto aw-p-4 aw-scrollbar aw-scrollbar-track-black/70 aw-scrollbar-thumb-blue-700/80">
<div className="aw-inline-flex aw-size-full aw-flex-col aw-items-start aw-justify-start aw-gap-2.5 aw-rounded aw-border aw-border-white/20 aw-bg-apeCtaBlue/50 aw-p-5">
<p
className={
'aw-mb-2 aw-font-dmsans aw-font-medium aw-leading-normal aw-tracking-wide'
}
>
Select Network
</p>
{hasPopularChains && (
<>
<p className={headerTextClasses}>Popular Networks:</p>
<div
className={
'aw-mb-3 aw-flex aw-flex-row aw-flex-wrap aw-gap-2'
}
>
{popularChains.map((chain) => {
return (
<ChainPillButton
key={chain}
chain={chain}
setSelectorChain={(chainId: ChainId) => {
setSelectorChain(chainId, setModalOpen);
}}
selectorChain={sourceToken.token.chainId}
/>
);
})}
</div>
</>
)}
{hasPopularChains && (
<p className={headerTextClasses}>All Networks:</p>
)}
<ChainDropdown
setSelectorChain={(chainId: ChainId) => {
setSelectorChain(chainId, setModalOpen);
}}
selectorChain={sourceToken.token.chainId}
chains={otherChains}
condensed={false}
/>
</div>
<div className="aw-inline-flex aw-size-full aw-flex-col aw-items-start aw-justify-start aw-gap-2.5 aw-rounded aw-border aw-border-white/20 aw-bg-apeCtaBlue/50 aw-p-5">
<p
className={
'aw-mb-2 aw-font-dmsans aw-font-medium aw-leading-normal aw-tracking-wide'
}
>
Select Network
</p>
{hasPopularChains && (
<>
<p className={headerTextClasses}>Popular Networks:</p>
<div
className={
'aw-mb-3 aw-flex aw-flex-row aw-flex-wrap aw-gap-2'
}
>
{popularChains.map((chain) => {
return (
<ChainPillButton
key={chain}
chain={chain}
setSelectorChain={(chainId: ChainId) => {
setSelectorChain(chainId, setModalOpen);
}}
selectorChain={sourceToken.token.chainId}
/>
);
})}
</div>
</>
)}
{hasPopularChains && (
<p className={headerTextClasses}>All Networks:</p>
)}
<ChainDropdown
setSelectorChain={(chainId: ChainId) => {
setSelectorChain(chainId, setModalOpen);
}}
selectorChain={sourceToken.token.chainId}
chains={otherChains}
condensed={false}
/>
</div>
)}
disabled={loading || disabled}
Expand Down
4 changes: 2 additions & 2 deletions lib/components/ui/SlippageInputModule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export const SlippageInputModule = () => {
className="aw-z-100 aw-flex aw-flex-col"
>
{({ close }) => (
<div className="aw-inline-flex aw-min-h-[164px] aw-w-[303px] aw-flex-col aw-items-start aw-justify-center aw-gap-3 aw-rounded-[10px] aw-border aw-border-white/20 aw-bg-[#002775] aw-px-5 aw-py-[17px]">
<div className="aw-inline-flex aw-min-h-[164px] aw-w-[320px] aw-flex-col aw-items-start aw-justify-center aw-gap-3 aw-rounded-[10px] aw-border aw-border-white/20 aw-bg-[#002775] aw-px-5 aw-py-[17px]">
<div className="aw-inline-flex aw-items-start aw-justify-between aw-self-stretch">
<div className="aw-text-center aw-font-dmsans aw-text-sm aw-font-bold aw-leading-[18px] aw-text-white">
Max slippage
Expand Down Expand Up @@ -184,7 +184,7 @@ export const SlippageInputModule = () => {
onClick={() => {
handleApplyChanges(close);
}}
className="aw-inline-flex aw-items-center aw-justify-center aw-gap-2.5 aw-self-stretch aw-rounded aw-bg-[#0054fa] aw-px-2.5 aw-py-[9px] aw-text-center aw-font-dmsans aw-text-[13px] aw-font-bold aw-leading-[18px] aw-text-white"
className="aw-inline-flex aw-items-center aw-justify-center aw-gap-2.5 aw-self-stretch aw-rounded aw-bg-[#0054fa] aw-px-2.5 aw-py-[9px] aw-text-center aw-font-dmsans aw-text-[13px] aw-font-bold aw-leading-[18px] aw-text-white aw-transition-colors aw-duration-200 hover:aw-bg-[#053389]"
>
Apply changes
</button>
Expand Down
153 changes: 76 additions & 77 deletions lib/components/ui/TransactionStatus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,89 +163,88 @@ function TransactionStatus({
resetBridgeTransactionHash();
}}
showCloseButton={!isTxProcessing && !waitingForSignature}
centerContents
renderContent={() => (
<div className="aw-flex aw-size-full aw-animate-fade-in aw-flex-col aw-items-center aw-justify-center aw-gap-y-3 aw-overflow-auto aw-p-4 aw-scrollbar aw-scrollbar-track-black/70 aw-scrollbar-thumb-blue-700/80">
<div className="aw-flex aw-h-full aw-flex-col aw-items-center aw-justify-center">
<div className="aw-mt-12 aw-px-20 aw-text-center aw-text-[25px] aw-leading-[38px] aw-text-white md:aw-px-24 md:aw-text-[35px] md:aw-leading-[40px]">
{status}
</div>
<h2 className="aw-mt-8 aw-text-[16px] aw-text-white">
{statusSecondary}
</h2>
<div className="aw-flex aw-h-full aw-flex-col aw-items-center aw-justify-center">
<div className="aw-mt-12 aw-px-20 aw-text-center aw-text-[25px] aw-leading-[38px] aw-text-white md:aw-px-24 md:aw-text-[35px] md:aw-leading-[40px]">
{status}
</div>
<h2 className="aw-mt-8 aw-text-[16px] aw-text-white">
{statusSecondary}
</h2>
<div
className={
'aw-relative aw-mt-8 aw-flex aw-w-4/5 aw-flex-row aw-justify-center aw-gap-x-4'
}
>
<motion.div
initial={{ width: '60%' }}
animate={status}
variants={variants}
className={cn(
'aw-relative aw-flex aw-h-20 aw-w-full aw-flex-row aw-items-center aw-justify-evenly aw-rounded-full',
{
'aw-animated-gradient': isTxProcessing,
},
)}
>
<TokenDisplay
token={sourceToken.token}
amount={sourceAmount}
amountUsd={sourceToken.amountUsd}
animationVisible={isTxProcessing}
showChain={!isSwap}
left
/>
{statusElement}
<TokenDisplay
token={destinationToken.token}
amount={destinationAmount}
amountUsd={destinationToken.amountUsd}
animationVisible={isTxProcessing}
showChain={!isSwap}
/>
</motion.div>
</div>
<div className="aw-mb-10 aw-mt-2 aw-w-full aw-px-3 aw-pb-3 aw-text-center md:aw-mb-0">
<div
className={
'aw-relative aw-mt-8 aw-flex aw-w-4/5 aw-flex-row aw-justify-center aw-gap-x-4'
}
className={cn(
'aw-mb-8 aw-mt-24 aw-flex aw-flex-col aw-font-dmsans aw-text-[13px] aw-leading-[18px] aw-tracking-[0.13px] aw-text-white',
{
'aw-invisible':
status === BridgeState.COMPLETED ||
status === BridgeState.FAILED ||
!estimatedTxTimeReadable,
},
)}
>
<motion.div
initial={{ width: '60%' }}
animate={status}
variants={variants}
className={cn(
'aw-relative aw-flex aw-h-20 aw-w-full aw-flex-row aw-items-center aw-justify-evenly aw-rounded-full',
{
'aw-animated-gradient': isTxProcessing,
},
)}
>
<TokenDisplay
token={sourceToken.token}
amount={sourceAmount}
amountUsd={sourceToken.amountUsd}
animationVisible={isTxProcessing}
showChain={!isSwap}
left
<div className="aw-flex aw-min-h-5 aw-justify-center aw-font-normal aw-opacity-50">
Estimated Time:
</div>
<div className="aw-flex aw-min-h-5 aw-justify-center aw-font-bold">
{estimatedTxTimeReadable}
</div>
</div>
<div className="aw-flex aw-flex-col">
{waitingForSignature ? (
<ActionButton
disabled={true}
portal={isSwap ? PortalType.Swap : PortalType.Bridge}
action={() => {}}
/>
{statusElement}
<TokenDisplay
token={destinationToken.token}
amount={destinationAmount}
amountUsd={destinationToken.amountUsd}
animationVisible={isTxProcessing}
showChain={!isSwap}
) : (
<LinkButton
text={'View Transaction'}
url={viewTransactionUrl}
/>
</motion.div>
</div>
<div className="aw-mb-10 aw-mt-2 aw-w-full aw-px-3 aw-pb-3 aw-text-center md:aw-mb-0">
<div
className={cn(
'aw-mb-8 aw-mt-24 aw-flex aw-flex-col aw-font-dmsans aw-text-[13px] aw-leading-[18px] aw-tracking-[0.13px] aw-text-white',
{
'aw-invisible':
status === BridgeState.COMPLETED ||
status === BridgeState.FAILED ||
!estimatedTxTimeReadable,
},
)}
)}
<a
href={LINK_SUPPORT}
target="_blank"
className="aw-mt-3 aw-text-center aw-font-mono aw-text-[13px] aw-tracking-wide aw-text-white/70 aw-underline"
>
<div className="aw-flex aw-min-h-5 aw-justify-center aw-font-normal aw-opacity-50">
Estimated Time:
</div>
<div className="aw-flex aw-min-h-5 aw-justify-center aw-font-bold">
{estimatedTxTimeReadable}
</div>
</div>
<div className="aw-flex aw-flex-col">
{waitingForSignature ? (
<ActionButton
disabled={true}
portal={isSwap ? PortalType.Swap : PortalType.Bridge}
action={() => {}}
/>
) : (
<LinkButton
text={'View Transaction'}
url={viewTransactionUrl}
/>
)}
<a
href={LINK_SUPPORT}
target="_blank"
className="aw-mt-3 aw-text-center aw-font-mono aw-text-[13px] aw-tracking-wide aw-text-white/70 aw-underline"
>
{isSwap ? 'Swap' : 'Bridge'} Support
</a>
</div>
{isSwap ? 'Swap' : 'Bridge'} Support
</a>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion lib/components/ui/buttons/ChainPillButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const ChainPillButton = ({
setSelectorChain(chain);
}}
className={cn(
'aw-flex aw-h-[40px] aw-items-center aw-justify-center aw-gap-2 aw-rounded-[55px] aw-bg-apeBlue aw-pl-2 aw-pr-2.5 aw-py-1 hover:aw-bg-apeDarkBlue aw-border',
'aw-flex aw-h-[40px] aw-items-center aw-justify-center aw-gap-2 aw-rounded-[55px] aw-bg-apeBlue aw-pl-2 aw-pr-2.5 aw-py-1 hover:aw-bg-apeDarkBlue aw-border aw-transition-all aw-duration-300 aw-ease-in-out',
chain === selectorChain
? 'aw-border-white/50'
: 'aw-border-transparent',
Expand Down
4 changes: 2 additions & 2 deletions lib/components/ui/buttons/CloseButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ function CloseButton({ className }: { className?: string }) {
return (
<div
className={cn(
'aw-absolute aw-right-2 aw-top-2 aw-rounded-full aw-bg-apeAccent',
'aw-absolute aw-right-2 aw-top-2 aw-rounded-full aw-bg-apeAccent aw-duration-700 hover:aw-scale-125',
className,
)}
>
<CrossIcon size={28} className={'aw-duration-700 hover:aw-scale-125'} />
<CrossIcon size={28} />
</div>
);
}
Expand Down
4 changes: 2 additions & 2 deletions lib/components/ui/modal/ChainTokenSelectModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export const ChainTokenSelectModal = ({
const instructionPrefix = isSwap ? '' : '2. ';

return (
<div className="aw-flex aw-size-full aw-flex-col aw-gap-y-3 aw-overflow-auto aw-p-4 aw-scrollbar aw-scrollbar-track-black/70 aw-scrollbar-thumb-blue-700/80">
<>
{!isSwap && (
<div className="aw-flex aw-w-full aw-flex-col aw-items-start aw-justify-start aw-gap-2.5 aw-rounded aw-border aw-border-white/20 aw-bg-apeCtaBlue/50 aw-p-3 md:aw-px-5">
<p
Expand Down Expand Up @@ -170,6 +170,6 @@ export const ChainTokenSelectModal = ({
selectTokens={enabledTokens}
/>
</div>
</div>
</>
);
};
15 changes: 5 additions & 10 deletions lib/components/ui/modal/ConsentModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { WarningIcon } from '../../icons/WarningIcon';
import { BaseButton } from '../buttons/BaseButton.tsx';
import ModalWarningText from './ModalText.tsx';
import { ModalWrapper } from './ModalWrapper.tsx';

export type ConsentModalProps = {
Expand All @@ -26,20 +26,15 @@ export default function ConsentModal({
externalModalOpenState={visible}
title={'User Consent Required'}
showCloseButton={false}
centerContents
renderContent={() => (
<div className="aw-flex aw-size-full aw-animate-fade-in aw-flex-col aw-items-center aw-justify-center aw-gap-y-3 aw-overflow-auto aw-p-4 aw-scrollbar aw-scrollbar-track-black/70 aw-scrollbar-thumb-blue-700/80">
<WarningIcon size={53} isError={false} className="aw-opacity-60" />
<h2 className="aw-px-20 aw-text-center aw-font-dmsans aw-text-[30px] aw-leading-[38px] aw-text-white md:aw-px-32">
{title}
</h2>
<p className="aw-max-h-[40%] aw-w-full aw-overflow-auto aw-px-6 aw-text-center aw-text-sm aw-leading-6 aw-tracking-wide aw-text-[#9FBFFE] md:aw-px-20">
{description}
</p>
<>
<ModalWarningText title={title} description={description} />
<div className="aw-mt-2.5 aw-flex aw-w-1/2 aw-gap-x-8">
<BaseButton onClick={onReject}>{rejectText || 'No'}</BaseButton>
<BaseButton onClick={onAccept}>{acceptText || 'Yes'}</BaseButton>
</div>
</div>
</>
)}
/>
);
Expand Down
Loading

0 comments on commit f92fbeb

Please sign in to comment.