Skip to content

Commit

Permalink
Merge pull request #104 from Agoric/main
Browse files Browse the repository at this point in the history 
Deploy main to production
  • Loading branch information
@samsiegart
samsiegart authored Oct 12, 2023
2 parents 136badd + 9164cc3 commit 14b9326
Show file tree
Hide file tree
Showing 5 changed files with 135 additions and 148 deletions.
4 changes: 2 additions & 2 deletions src/components/AssetDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ import ListItem from 'components/ListItem';
import SkeletonListItem from 'components/SkeletonListItem';
import { displayFunctionsAtom } from 'store/app';
import type { Brand } from '@agoric/ertp/src/types';
import { anchorBrandsAtom } from 'store/swap';

const AssetDialog = ({
brands,
handleBrandSelected,
}: {
brands: Array<Brand>;
handleBrandSelected: (brand: Brand) => void;
}) => {
const brands = useAtomValue(anchorBrandsAtom);
const { displayBrandPetname } = useAtomValue(displayFunctionsAtom);
const brandSections =
brands && brands.length
Expand Down
48 changes: 26 additions & 22 deletions src/components/DialogSwap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,40 @@ import { AnimatePresence, motion } from 'framer-motion';
import { FiX, FiExternalLink } from 'react-icons/fi';
import AssetDialog from 'components/AssetDialog';
import type { Brand } from '@agoric/ertp/src/types';
import { useAtom, useAtomValue } from 'jotai';
import {
assetSelectionDialogOpenAtom,
selectedAnchorPetnameAtom,
} from 'store/swap';
import { displayFunctionsAtom } from 'store/app';

const DialogSwap = () => {
const { displayBrandPetname } = useAtomValue(displayFunctionsAtom);
const [selectedAnchorBrandPetname, setSelectedAnchorBrandPetname] = useAtom(
selectedAnchorPetnameAtom
);
const [assetSelectionDialogOpen, setAssetSelectionDialogOpen] = useAtom(
assetSelectionDialogOpenAtom
);

const handleBrandSelected = (brand: Brand | null) => {
setSelectedAnchorBrandPetname(displayBrandPetname(brand));
setAssetSelectionDialogOpen(false);
};
const close = () => setAssetSelectionDialogOpen(false);

const DialogSwap = ({
open,
handleClose,
brands,
selectedBrand,
handleBrandSelected,
}: {
open: boolean;
handleClose: () => void;
brands: Array<Brand>;
handleBrandSelected: (brand: Brand | null) => void;
selectedBrand?: Brand | null;
purseOnly?: boolean;
}) => {
return (
<AnimatePresence>
{open && (
{assetSelectionDialogOpen && (
<motion.div
key={selectedBrand ? 'purseDialog' : 'assetDialog'}
key={selectedAnchorBrandPetname ? 'purseDialog' : 'assetDialog'}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5 }}
className="fixed top-0 left-0 w-screen h-screen bg-black bg-opacity-10 flex items-center justify-center px-4 py-6 z-50"
>
<div className="absolute w-full h-full " onClick={handleClose} />
<div className="absolute w-full h-full" onClick={close} />
<motion.div
className="bg-white flex flex-col w-full max-w-md rounded-sm max-h-full z-50"
initial={{ scale: 0 }}
Expand All @@ -51,15 +58,12 @@ const DialogSwap = ({
</div>
<button
className="text-2xl hover:bg-gray-100 p-1 rounded-sm cursor-pointer"
onClick={handleClose}
onClick={close}
>
<FiX />
</button>
</div>
<AssetDialog
handleBrandSelected={handleBrandSelected}
brands={brands}
/>
<AssetDialog handleBrandSelected={handleBrandSelected} />
</motion.div>
</motion.div>
)}
Expand Down
133 changes: 55 additions & 78 deletions src/components/SectionSwap.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import { useState } from 'react';
import { motion } from 'framer-motion';
import { FiChevronDown } from 'react-icons/fi';
import { useAtomValue, useAtom } from 'jotai';
import { useAtomValue, useAtom, useSetAtom } from 'jotai';
import clsx from 'clsx';
import CustomInput from 'components/CustomInput';
import DialogSwap from 'components/DialogSwap';
import { displayFunctionsAtom, previewEnabledAtom } from 'store/app';
import { displayPetname } from 'utils/displayFunctions';
import {
Expand All @@ -16,11 +14,9 @@ import {
toPurseAtom,
swapDirectionAtom,
SwapDirection,
anchorBrandsAtom,
selectedAnchorPetnameAtom,
assetSelectionDialogOpenAtom,
} from 'store/swap';
import { AmountMath } from '@agoric/ertp';
import type { Brand } from '@agoric/ertp/src/types';

export enum SectionSwapType {
FROM = 'FROM',
Expand All @@ -34,13 +30,9 @@ const SectionSwap = ({ type }: { type: SectionSwapType }) => {
const toPurse = useAtomValue(toPurseAtom);
const [toAmount, setToAmount] = useAtom(toAmountAtom);
const [fromAmount, setFromAmount] = useAtom(fromAmountAtom);
const [open, setOpen] = useState(false);
const setAssetSelectionDialogOpen = useSetAtom(assetSelectionDialogOpenAtom);
const swapDirection = useAtomValue(swapDirectionAtom);
const previewEnabled = useAtomValue(previewEnabledAtom);
const brands = useAtomValue(anchorBrandsAtom);
const [_selectedAnchorBrandPetname, setSelectedAnchorBrandPetname] = useAtom(
selectedAnchorPetnameAtom
);

const isMinted =
(swapDirection === SwapDirection.WantMinted &&
Expand All @@ -51,11 +43,6 @@ const SectionSwap = ({ type }: { type: SectionSwapType }) => {
const value =
type === SectionSwapType.TO ? toAmount?.value : fromAmount?.value;

const handleBrandSelected = (brand: Brand | null) => {
setSelectedAnchorBrandPetname(displayBrandPetname(brand));
setOpen(false);
};

const purse = type === SectionSwapType.TO ? toPurse : fromPurse;
const brand = purse?.brand;

Expand All @@ -71,70 +58,60 @@ const SectionSwap = ({ type }: { type: SectionSwapType }) => {
};

return (
<>
<DialogSwap
open={open}
handleClose={() => setOpen(false)}
brands={brands}
selectedBrand={brand}
handleBrandSelected={handleBrandSelected}
/>
<motion.div
className="flex flex-col bg-alternative p-4 rounded-sm gap-2 select-none"
layout
>
<h3 className="text-xs uppercase text-gray-500 tracking-wide font-medium select-none">
Swap {type}
</h3>
<div className="flex gap-3 items-center">
<div className="w-8 h-8">
<img
className="w-8 h-8"
alt="brand icon"
src={displayBrandIcon(brand)}
/>
</div>
{purse ? (
<div
className={clsx(
'flex flex-col w-28 p-1 rounded-sm',
!isMinted && 'hover:bg-black cursor-pointer hover:bg-opacity-5'
)}
onClick={() => {
!isMinted && setOpen(true);
}}
>
<div className="flex items-center justify-between">
<h2 className="text-base font-medium">
{displayBrandPetname(brand)}
</h2>
{!isMinted && <FiChevronDown className="text-xl" />}
</div>
{previewEnabled && (
<h3 className="text-xs text-gray-500 font-semibold">
Purse:{' '}
<span>{displayPetname(purse?.pursePetname ?? '')}</span>{' '}
</h3>
)}
</div>
) : (
<button
className="btn-primary text-sm py-1 px-2 w-28"
onClick={() => setOpen(true)}
>
Select asset
</button>
)}
<CustomInput
value={value}
onChange={handleValueChange}
brand={brand}
purse={purse}
showMaxButton={type === SectionSwapType.FROM && !isMinted}
<motion.div
className="flex flex-col bg-alternative p-4 rounded-sm gap-2 select-none"
layout
>
<h3 className="text-xs uppercase text-gray-500 tracking-wide font-medium select-none">
Swap {type}
</h3>
<div className="flex gap-3 items-center">
<div className="w-8 h-8">
<img
className="w-8 h-8"
alt="brand icon"
src={displayBrandIcon(brand)}
/>
</div>
</motion.div>
</>
{purse ? (
<div
className={clsx(
'flex flex-col w-28 p-1 rounded-sm',
!isMinted && 'hover:bg-black cursor-pointer hover:bg-opacity-5'
)}
onClick={() => {
!isMinted && setAssetSelectionDialogOpen(true);
}}
>
<div className="flex items-center justify-between">
<h2 className="text-base font-medium">
{displayBrandPetname(brand)}
</h2>
{!isMinted && <FiChevronDown className="text-xl" />}
</div>
{previewEnabled && (
<h3 className="text-xs text-gray-500 font-semibold">
Purse: <span>{displayPetname(purse?.pursePetname ?? '')}</span>{' '}
</h3>
)}
</div>
) : (
<button
className="btn-primary text-sm py-1 px-2 w-28"
onClick={() => setAssetSelectionDialogOpen(true)}
>
Select asset
</button>
)}
<CustomInput
value={value}
onChange={handleValueChange}
brand={brand}
purse={purse}
showMaxButton={type === SectionSwapType.FROM && !isMinted}
/>
</div>
</motion.div>
);
};

Expand Down
96 changes: 50 additions & 46 deletions src/components/Swap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
} from 'store/swap';
import { makeSwapOffer } from 'services/swap';
import { provisionSmartWallet } from 'services/wallet';
import DialogSwap from './DialogSwap';

const Swap = () => {
const chainConnection = useAtomValue(chainConnectionAtom);
Expand Down Expand Up @@ -197,54 +198,57 @@ const Swap = () => {
);

return (
<motion.div
layout
initial={{ opacity: 0, boxShadow: 'none' }}
animate={{
opacity: 1,
boxShadow: '0px 0px 99px var(--color-glow)',
}}
transition={{ duration: 0.4 }}
className="h-fit flex flex-col p-4 rounded-sm gap-4 w-screen max-w-lg relative select-none overflow-hidden"
>
<motion.div className="flex justify-between items-center gap-8 " layout>
<h1 className="text-2xl font-semibold text-slate-800">IST Swap</h1>
<span className="text-2xl text-blue-500 hover:text-blue-700">
<a
href="https://docs.inter.trade/user-how-to/minting-ist/mainnet-minting-ist-using-the-psm"
target="psm_guide"
>
<FiHelpCircle />
</a>
</span>
</motion.div>
{chainConnection && isSmartWalletProvisioned !== undefined ? (
form
) : (
<CustomLoader text="Connect Keplr to continue" />
)}
<ContractInfo />
<motion.button
className={clsx(
'flex items-center justify-center bg-gray-100 hover:bg-gray-200 text-xl font-medium p-3 uppercase',
areAnchorsLoaded
? 'bg-primary hover:bg-primaryDark text-white'
: 'text-gray-500 cursor-not-allowed'
)}
disabled={isSmartWalletProvisioned === undefined}
onClick={isSmartWalletProvisioned === false ? provision : handleSwap}
<>
<motion.div
layout
initial={{ opacity: 0, boxShadow: 'none' }}
animate={{
opacity: 1,
boxShadow: '0px 0px 99px var(--color-glow)',
}}
transition={{ duration: 0.4 }}
className="h-fit flex flex-col p-4 rounded-sm gap-4 w-screen max-w-lg relative select-none overflow-hidden"
>
<motion.div className="relative flex flex-row w-full justify-center items-center">
<div className="w-6" />
<div className="text-white w-fit">
{isSmartWalletProvisioned === false
? 'Provision Smart Wallet'
: 'Swap'}
</div>
<motion.div className="flex justify-between items-center gap-8 " layout>
<h1 className="text-2xl font-semibold text-slate-800">IST Swap</h1>
<span className="text-2xl text-blue-500 hover:text-blue-700">
<a
href="https://docs.inter.trade/user-how-to/minting-ist/mainnet-minting-ist-using-the-psm"
target="psm_guide"
>
<FiHelpCircle />
</a>
</span>
</motion.div>
</motion.button>
{errorsToRender}
</motion.div>
{chainConnection && isSmartWalletProvisioned !== undefined ? (
form
) : (
<CustomLoader text="Connect Keplr to continue" />
)}
<ContractInfo />
<motion.button
className={clsx(
'flex items-center justify-center bg-gray-100 hover:bg-gray-200 text-xl font-medium p-3 uppercase',
areAnchorsLoaded
? 'bg-primary hover:bg-primaryDark text-white'
: 'text-gray-500 cursor-not-allowed'
)}
disabled={isSmartWalletProvisioned === undefined}
onClick={isSmartWalletProvisioned === false ? provision : handleSwap}
>
<motion.div className="relative flex flex-row w-full justify-center items-center">
<div className="w-6" />
<div className="text-white w-fit">
{isSmartWalletProvisioned === false
? 'Provision Smart Wallet'
: 'Swap'}
</div>
</motion.div>
</motion.button>
{errorsToRender}
</motion.div>
<DialogSwap />
</>
);
};

Expand Down
2 changes: 2 additions & 0 deletions src/store/swap.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ export enum SwapDirection {

export const selectedAnchorPetnameAtom = atom<string | null>(null);

export const assetSelectionDialogOpenAtom = atom(false);

export const anchorBrandAtom = atom(
get => get(metricsAtom)?.anchorPoolBalance?.brand
);
Expand Down

0 comments on commit 14b9326

Please sign in to comment.