@rockerone/xprnkit 0.3.0

package/build/components/identity/index.d.ts

@@ -0,0 +1,4 @@
+export * from './xprn-identity';
+export * from './xprn-avatar';
+export * from './xprn-session-actor';
+export * from './xprn-session-name';

package/build/components/identity/index.js

@@ -0,0 +1,4 @@
+export * from './xprn-identity';
+export * from './xprn-avatar';
+export * from './xprn-session-actor';
+export * from './xprn-session-name';

package/build/components/identity/xprn-avatar.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+declare const XPRNAvatarWrapper: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const XPRNAvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const XPRNAvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+type XPRNAvatarProps = React.HTMLAttributes<HTMLDivElement>;
+declare const XPRNAvatar: React.FunctionComponent<XPRNAvatarProps>;
+export { XPRNAvatarWrapper, XPRNAvatar, XPRNAvatarImage, XPRNAvatarFallback };

package/build/components/identity/xprn-avatar.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "./../../lib/utils";
+const XPRNAvatarWrapper = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className), ...props })));
+XPRNAvatarWrapper.displayName = AvatarPrimitive.Root.displayName;
+const XPRNAvatarImage = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Image, { ref: ref, className: cn("aspect-square h-full w-full", className), ...props })));
+XPRNAvatarImage.displayName = AvatarPrimitive.Image.displayName;
+const XPRNAvatarFallback = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Fallback, { ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full ", className), ...props })));
+XPRNAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+import classNames from "classnames";
+import { useXPRN } from "../../providers/XPRNProvider";
+const XPRNAvatar = ({ className, ...props }) => {
+    const { profile, session } = useXPRN();
+    const rootClasses = classNames({
+        [`${className}`]: className,
+    });
+    if (!session)
+        return;
+    return (_jsxs(XPRNAvatarWrapper, { className: rootClasses, ...props, children: [_jsx(XPRNAvatarFallback, { children: session.auth.actor.toString()[0] }), profile && profile.avatar && (_jsx(XPRNAvatarImage, { src: `data:image/png;base64,${profile.avatar}`, sizes: "" }))] }));
+};
+export { XPRNAvatarWrapper, XPRNAvatar, XPRNAvatarImage, XPRNAvatarFallback };

package/build/components/identity/xprn-identity.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+type XPRNIdentityProps = React.HTMLAttributes<HTMLDivElement> & {
+    showLogout?: boolean;
+    activeSessionClassName?: string;
+    dropdownClassName?: string;
+    avatarClassName?: string;
+};
+export declare const XPRNIdentity: React.FunctionComponent<XPRNIdentityProps>;
+export {};

package/build/components/identity/xprn-identity.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import * as React from "react";
+import { XPRNAvatar } from "./xprn-avatar";
+import { XPRNSessionActor } from "./xprn-session-actor";
+import { XPRNSessionName } from "./xprn-session-name";
+import { useXPRN } from "../../providers/XPRNProvider";
+import { XPRNConnectButton } from "./../xprn-session";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "./../ui/dropdown";
+export const XPRNIdentity = ({ children, className, showLogout, activeSessionClassName, dropdownClassName, avatarClassName, }) => {
+    const rootClasses = classNames({
+        "grid grid-cols-[min-content,1fr] gap-4 items-center inline": true,
+        [`${className}`]: className,
+    });
+    const activeSessionClasses = classNames({
+        "flex flex-row items-center gap-2": true,
+        [`${activeSessionClassName}`]: activeSessionClassName,
+    });
+    const dropdownClasses = classNames({
+        "flex flex-col items-center gap-2": true,
+        [`${dropdownClassName}`]: dropdownClassName,
+    });
+    const { session, profile, disconnect, authentication } = useXPRN();
+    const handleDisconnect = React.useCallback((e) => {
+        e.preventDefault();
+        disconnect();
+    }, [disconnect]);
+    return (_jsx(_Fragment, { children: session ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "inline w-auto flex-grow-0", children: _jsxs("div", { className: activeSessionClasses, children: [_jsx("div", { className: "w-10 h-10", children: _jsx(XPRNAvatar, { className: avatarClassName }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx(XPRNSessionName, { className: "text-md font-bold" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(XPRNSessionActor, { className: "text-md" }), showLogout && (_jsx("a", { href: "#", className: "underline", onClick: e => handleDisconnect(e), children: "Log out" }))] })] })] }) }), children && (_jsx(DropdownMenuContent, { className: dropdownClasses, children: children }))] })) : (_jsx(XPRNConnectButton, { className: rootClasses, children: "Connect" })) }));
+};

package/build/components/identity/xprn-session-actor.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+type XPRNSessionActorProps = React.HTMLAttributes<HTMLHeadElement> & {};
+export declare const XPRNSessionActor: React.FunctionComponent<XPRNSessionActorProps>;
+export {};

package/build/components/identity/xprn-session-actor.js

@@ -0,0 +1,13 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useXPRN } from '../../providers/XPRNProvider';
+export const XPRNSessionActor = ({ children, className }) => {
+    const { session } = useXPRN();
+    const rootClasses = classNames({
+        [`${className}`]: className,
+    });
+    if (!session)
+        return _jsx(_Fragment, {});
+    return _jsxs("h3", { className: `${rootClasses}`, children: ["@", session.auth.actor.toString()] });
+};

package/build/components/identity/xprn-session-name.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+type XPRNSessionNameProps = React.HTMLAttributes<HTMLHeadElement> & {};
+export declare const XPRNSessionName: React.FunctionComponent<XPRNSessionNameProps>;
+export {};

package/build/components/identity/xprn-session-name.js

@@ -0,0 +1,14 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useXPRN } from "../../providers/XPRNProvider";
+export const XPRNSessionName = ({ children, className, }) => {
+    const { profile, authentication } = useXPRN();
+    const rootClasses = classNames({
+        "flex gap-2 items-center justify-center": true,
+        [`${className}`]: className,
+    });
+    if (!profile)
+        return _jsx(_Fragment, {});
+    return (_jsxs("div", { className: `${rootClasses}`, children: [_jsxs("h3", { children: ["@", profile.displayName.toString()] }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-badge-check", children: [_jsx("path", { d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" }), _jsx("path", { d: "m9 12 2 2 4-4" })] }), authentication && (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-id-card", children: [_jsx("path", { d: "M16 10h2" }), _jsx("path", { d: "M16 14h2" }), _jsx("path", { d: "M6.17 15a3 3 0 0 1 5.66 0" }), _jsx("circle", { cx: "9", cy: "11", r: "2" }), _jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2" })] }))] }));
+};

package/build/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './swap';
+export * from './identity';
+export * from './xprn-session';
+export * from './xprn-container';
+export * from './xprn-transaction';

package/build/components/index.js

@@ -0,0 +1,5 @@
+export * from './swap';
+export * from './identity';
+export * from './xprn-session';
+export * from './xprn-container';
+export * from './xprn-transaction';

package/build/components/swap/index.d.ts

@@ -0,0 +1,46 @@
+import type { LinkSession } from '@proton/web-sdk';
+export type XPRNMarketProviderResult = {
+    pair: string;
+    baseToken: string;
+    baseContract: string;
+    basePrecision: number;
+    quoteToken: string;
+    quoteContract: string;
+    quotePrecision: number;
+    minBuy: number;
+    minSell: number;
+    askName: string;
+    bidName: string;
+    ask: number;
+    bid: number;
+    lastPrice: number;
+    baseTransactionMemo?: string;
+    quoteTransactionMemo?: string;
+};
+export type XPRNSwapSide = 'buy' | 'sell';
+export type XPRNMarketProvider = {
+    endpoint: string;
+    name: string;
+    default?: boolean;
+    parse: (results: any[]) => XPRNMarketProviderResult[];
+    getTransaction: (swapPair: XPRNMarketProviderResult, volume: number, price: number, side: XPRNSwapSide, session?: LinkSession) => any[];
+};
+export type XPRNMarketProviderQuoteFilter = {
+    baseSymbol?: string;
+    quoteSymbol?: string;
+};
+export type XPRNSwapValues = {
+    base: number;
+    quote: number;
+    volume: number;
+    lastMutated: "base" | "quote";
+};
+export * from './xprn-swap-provider';
+export * from './xprn-swap-markets-selector';
+export * from './xprn-swap-pair-selector';
+export * from './xprn-swap-layout';
+export * from './xprn-swap-field';
+export * from './xprn-swap-fields';
+export * from './xprn-swap-fields-group';
+export * from './xprn-swap-side-button';
+export * from './xprn-swap';

package/build/components/swap/index.js

@@ -0,0 +1,9 @@
+export * from './xprn-swap-provider';
+export * from './xprn-swap-markets-selector';
+export * from './xprn-swap-pair-selector';
+export * from './xprn-swap-layout';
+export * from './xprn-swap-field';
+export * from './xprn-swap-fields';
+export * from './xprn-swap-fields-group';
+export * from './xprn-swap-side-button';
+export * from './xprn-swap';

package/build/components/swap/xprn-swap-button.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { type XPRNTransactionButtonProps } from "../xprn-transaction";
+type XPRNSwapButtonProps = Omit<XPRNTransactionButtonProps, 'actions'>;
+export declare const XPRNSwapButton: React.FunctionComponent<XPRNSwapButtonProps>;
+export {};

package/build/components/swap/xprn-swap-button.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { XPRNTransaction, } from "../xprn-transaction";
+import { useXPRNSwap } from "./xprn-swap-provider";
+export const XPRNSwapButton = ({ children, className, }) => {
+    const { currentSwapPair, swapTransaction, swapSide } = useXPRNSwap();
+    const rootClasses = classNames({
+        [`${className}`]: className,
+    });
+    const swapSymbolsLabel = React.useMemo(() => {
+        if (!currentSwapPair)
+            return `Swap`;
+        if (swapSide == 'buy')
+            return `Swap ${currentSwapPair.quoteToken} / ${currentSwapPair.baseToken}`;
+        if (swapSide == 'sell')
+            return `Swap ${currentSwapPair.quoteToken} / ${currentSwapPair.baseToken}`;
+    }, []);
+    return (_jsx(XPRNTransaction, { className: "w-full", actions: swapTransaction, children: swapSymbolsLabel }));
+};

package/build/components/swap/xprn-swap-field.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type XPRNSwapFieldProps = React.HTMLAttributes<HTMLDivElement> & {
+    type: "quote" | "base";
+};
+export declare const XPRNSwapField: React.FunctionComponent<XPRNSwapFieldProps>;
+export {};

package/build/components/swap/xprn-swap-field.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import classNames from "classnames";
+import { Input } from "../ui/input";
+import { useXPRNSwap } from "./xprn-swap-provider";
+import { toPrecision } from "../../utils";
+export const XPRNSwapField = ({ children, className, type, }) => {
+    const { currentSwapPair, swapValues, updateSwapValues, swapVolume } = useXPRNSwap();
+    const rootClasses = classNames({
+        "swap-field grid grid-cols-[1fr,max-content] items-center gap-2": true,
+        [`${className}`]: className,
+    });
+    const fieldClass = classNames({
+        "swap-field_field text-xl font-bold border-0 px-0 placeholder:text-current placeholder:text-opacity-50 focus:border-0 outline-none": true,
+    });
+    const [value, setValue] = React.useState();
+    const [isFocus, setFocus] = React.useState();
+    const onSwapValueChange = React.useCallback((value) => {
+        setValue(value);
+        if (!currentSwapPair)
+            return;
+        if (type == "base") {
+            const prevSwapValue = { ...swapValues, base: parseFloat(value) };
+            updateSwapValues(prevSwapValue.base, prevSwapValue.quote, type);
+        }
+        if (type == "quote") {
+            const prevSwapValue = { ...swapValues, quote: parseFloat(value) };
+            updateSwapValues(prevSwapValue.base, prevSwapValue.quote, type);
+        }
+    }, [currentSwapPair, type, swapValues]);
+    const onFocus = React.useCallback(() => {
+        setFocus(true);
+    }, [setFocus]);
+    const normalizeValuePrecision = React.useCallback(() => {
+        if (!currentSwapPair)
+            return;
+        if (type == "base")
+            setValue(toPrecision(swapValues.base, currentSwapPair.basePrecision));
+        if (type == "quote")
+            setValue(toPrecision(swapValues.quote, currentSwapPair.quotePrecision));
+        setFocus(false);
+    }, [swapValues, currentSwapPair, type, setValue, setFocus]);
+    const swapSymbol = React.useMemo(() => {
+        if (!currentSwapPair)
+            return "    ";
+        if (type == "base")
+            return currentSwapPair.baseToken;
+        if (type == "quote")
+            return currentSwapPair.quoteToken;
+    }, [currentSwapPair, type]);
+    React.useEffect(() => {
+        if (!currentSwapPair)
+            return;
+        if (isFocus)
+            return;
+        if (!swapValues)
+            return;
+        if (type !== swapValues.lastMutated) {
+            if (type == 'quote')
+                setValue(toPrecision(swapValues.quote, currentSwapPair.quotePrecision));
+            if (type == 'base')
+                setValue(toPrecision(swapValues.base, currentSwapPair.basePrecision));
+        }
+    }, [currentSwapPair, type, setValue, swapValues, isFocus, setValue]);
+    return (_jsxs("div", { className: rootClasses, children: [_jsx(Input, { className: fieldClass, placeholder: "0.0", onBlur: () => normalizeValuePrecision(), onFocus: () => onFocus(), onChange: e => {
+                    onSwapValueChange(e.target.value);
+                }, value: value }), _jsx("p", { className: "swap-field_dormant text-xl opacity-50 ", children: swapSymbol })] }));
+};

package/build/components/swap/xprn-swap-fields-group.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type XPRNSwapFieldsGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+    horizontal?: boolean;
+};
+export declare const XPRNSwapFieldsGroup: React.FunctionComponent<XPRNSwapFieldsGroupProps>;
+export {};

package/build/components/swap/xprn-swap-fields-group.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useXPRNSwap } from "./xprn-swap-provider";
+export const XPRNSwapFieldsGroup = ({ children, className, horizontal }) => {
+    const { swapSide, config } = useXPRNSwap();
+    const rootClasses = classNames({
+        "flex gap-4": true,
+        "flex-col": !horizontal,
+        "flex-row": horizontal,
+        "flex-col-reverse": swapSide == "sell" && !horizontal,
+        "flex-row-reverse": swapSide == "sell" && horizontal,
+        [`${className}`]: className,
+    });
+    return (_jsx("div", { className: `${rootClasses} `, children: children }));
+};

package/build/components/swap/xprn-swap-fields.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+type XPRNSwapFieldsProps = React.HTMLAttributes<HTMLDivElement> & {};
+export declare const XPRNSwapFields: React.FunctionComponent<XPRNSwapFieldsProps>;
+export {};

package/build/components/swap/xprn-swap-fields.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useXPRNSwap } from "./xprn-swap-provider";
+import { XPRNSwapField } from "./xprn-swap-field";
+import { XPRNSwapSideButton } from "./xprn-swap-side-button";
+import { XPRNSwapFieldsGroup } from "./xprn-swap-fields-group";
+export const XPRNSwapFields = ({ children, className, }) => {
+    const { swapSide, config } = useXPRNSwap();
+    return (_jsxs(XPRNSwapFieldsGroup, { children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("p", { children: swapSide == "buy" ? "Sell" : "Buy" }), _jsx("div", { className: "grid grid-cols-[1fr,max-content] items-center gap-2", children: _jsx(XPRNSwapField, { type: "quote" }) }), _jsx("p", { className: "opacity-50", children: "Balance" })] }), config && config.sides && config.sides.length == 1 ? (_jsx("div", { className: "w-full border-t opacity-50 relative" })) : (_jsxs("div", { className: "w-full grid grid-cols-[1fr,min-content,1fr] items-center gap-2", children: [_jsx("div", { className: "w-full border-t opacity-50 relative" }), _jsx(XPRNSwapSideButton, {}), _jsx("div", { className: "w-full border-t opacity-50 relative" })] })), _jsxs("div", { className: "flex flex-col", children: [_jsx("p", { children: swapSide == "sell" ? "Sell" : "Buy" }), _jsx("div", { className: "grid grid-cols-[1fr,max-content] items-center gap-2", children: _jsx(XPRNSwapField, { className: "swap-fields__quote", type: "base" }) }), _jsx("p", { className: "opacity-50", children: "Balance" })] })] }));
+};

package/build/components/swap/xprn-swap-layout.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { type XPRNMarketProviderQuoteFilter } from ".";
+type XPRNSwapLayoutProps = React.HTMLAttributes<HTMLDivElement> & {
+    filters?: XPRNMarketProviderQuoteFilter;
+};
+export declare const XPRNSwapLayout: React.FunctionComponent<XPRNSwapLayoutProps>;
+export {};

package/build/components/swap/xprn-swap-layout.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { XPRNSwapMarketsSelector } from "./xprn-swap-markets-selector";
+import { useXPRNSwap } from "./xprn-swap-provider";
+import { XPRNPairsSelector } from "./xprn-swap-pair-selector";
+import { XPRNSwapFields } from "./xprn-swap-fields";
+import { XPRNSwapButton } from "./xprn-swap-button";
+export const XPRNSwapLayout = ({ children, className, filters, }) => {
+    const { swapTransaction, currentMarketPairs, currentSwapPair, marketProviders, swapSide } = useXPRNSwap();
+    const rootClasses = classNames({
+        "grid grid-col-1 gap-4 rounded-md border border-white p-4": true,
+        [`${className}`]: className,
+    });
+    const headerClass = classNames({
+        "grid grid-cols-6 gap-4": marketProviders.length > 1,
+        hidden: marketProviders.length <= 1 && currentMarketPairs.length <= 1,
+        [`${className}`]: className,
+    });
+    return (_jsxs("div", { className: `${rootClasses} `, children: [_jsxs("div", { className: headerClass, children: [_jsx(XPRNSwapMarketsSelector, { className: "col-span-2" }), _jsx(XPRNPairsSelector, { className: "col-span-4" })] }), _jsx(XPRNSwapFields, {}), _jsx("div", { children: _jsx(XPRNSwapButton, {}) })] }));
+};

package/build/components/swap/xprn-swap-markets-selector.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+type XPRNSwapMarketsSelectorProps = React.HTMLAttributes<HTMLDivElement> & {};
+export declare const XPRNSwapMarketsSelector: React.FunctionComponent<XPRNSwapMarketsSelectorProps>;
+export {};

package/build/components/swap/xprn-swap-markets-selector.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { Select, SelectItem, SelectContent, SelectTrigger, SelectValue } from "../ui/select";
+import { useXPRNSwap } from ".";
+import { useEffect, useMemo, useState } from "react";
+import { DEFAULT_SWAP_SERVICES } from "./xprn-swap-markets";
+export const XPRNSwapMarketsSelector = ({ children, className }) => {
+    const rootClasses = classNames({
+        [`${className}`]: className,
+    });
+    const { marketProviders } = useXPRNSwap();
+    const [services, setServices] = useState();
+    const defaultServices = useMemo(() => {
+        return DEFAULT_SWAP_SERVICES;
+    }, []);
+    const defaultService = useMemo(() => {
+        let foundService = defaultServices.findLast(service => {
+            return service.default;
+        });
+        if (foundService)
+            return foundService;
+        return defaultServices[0];
+    }, [services, defaultServices]);
+    useEffect(() => { }, [defaultService]);
+    if (marketProviders.length <= 1)
+        return;
+    return (_jsx("div", { className: `${rootClasses}`, children: _jsxs(Select, { value: defaultService.endpoint, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Theme" }) }), _jsx(SelectContent, { children: defaultServices.map((service, index) => {
+                        return (_jsx(SelectItem, { value: service.endpoint, children: service.name }, index));
+                    }) })] }) }));
+};

package/build/components/swap/xprn-swap-markets.d.ts

@@ -0,0 +1,8 @@
+import type { XPRNMarketProvider } from ".";
+export declare enum DEFAULT_SERVICE_NAMES {
+    ALCOR = "Alcor",
+    METALX = "MetalX",
+    XPRSWAP = "XPR Network Swap"
+}
+export declare const DEFAULT_SWAP_SERVICES: XPRNMarketProvider[];
+export declare function getSwapMarkets(filters?: string[]): XPRNMarketProvider[];

package/build/components/swap/xprn-swap-markets.js

@@ -0,0 +1,93 @@
+import { toPrecision } from "../../utils";
+export var DEFAULT_SERVICE_NAMES;
+(function (DEFAULT_SERVICE_NAMES) {
+    DEFAULT_SERVICE_NAMES["ALCOR"] = "Alcor";
+    DEFAULT_SERVICE_NAMES["METALX"] = "MetalX";
+    DEFAULT_SERVICE_NAMES["XPRSWAP"] = "XPR Network Swap";
+})(DEFAULT_SERVICE_NAMES || (DEFAULT_SERVICE_NAMES = {}));
+export const DEFAULT_SWAP_SERVICES = [
+    {
+        name: DEFAULT_SERVICE_NAMES.ALCOR,
+        endpoint: "https://proton.alcor.exchange/api/markets",
+        default: true,
+        parse: (result) => {
+            return result.map(res => {
+                return {
+                    pair: `${res.quote_token.symbol.name}/${res.base_token.symbol.name}`,
+                    askName: `${res.quote_token.symbol.name}/${res.base_token.symbol.name}`,
+                    bidName: `${res.base_token.name}/${res.quote_token.symbol.name}`,
+                    baseToken: res.base_token.symbol.name,
+                    basePrecision: res.base_token.symbol.precision,
+                    baseContract: res.base_token.contract,
+                    baseTransactionMemo: res.base_token.str,
+                    quoteToken: res.quote_token.symbol.name,
+                    quotePrecision: res.quote_token.symbol.precision,
+                    quoteContract: res.quote_token.contract,
+                    quoteTransactionMemo: res.quote_token.str,
+                    ask: res.ask,
+                    bid: res.bid,
+                    lastPrice: res.last_price,
+                    minBuy: res.min_buy,
+                    minSell: res.min_sell,
+                };
+            });
+        },
+        getTransaction(swapPair, volume, price, side, session) {
+            if (!session)
+                return [];
+            const contract = side == 'buy' ? swapPair.baseContract : swapPair.quoteContract;
+            const symbol = side == 'buy' ? swapPair.baseToken : swapPair.quoteToken;
+            const precision = side == 'buy' ? swapPair.basePrecision : swapPair.quotePrecision;
+            const memoBase = side == 'buy' ? swapPair.quoteTransactionMemo : swapPair.baseTransactionMemo;
+            return [
+                {
+                    account: contract,
+                    name: "transfer",
+                    authorization: [
+                        {
+                            actor: session.auth.actor.toString(),
+                            permission: session.auth.permission.toString(),
+                        },
+                    ],
+                    data: {
+                        from: session.auth.actor.toString(),
+                        to: "alcor",
+                        quantity: `${toPrecision(volume, precision, "none", true)} ${symbol}`,
+                        memo: `${toPrecision(price, precision, "none", true)} ${memoBase}`
+                    },
+                },
+            ];
+        },
+    },
+    // Need info 
+    // {
+    //   name: "MetalX",
+    //   endpoint: "",
+    //   parse: (result: any[]): XPRNMarketProviderResult[] => { 
+    //     return []
+    //   },
+    //   getTransaction(swapPair, volume, side, session) {
+    //     return []
+    //   },
+    // },
+    // {
+    //   name: "XPR Network",
+    //   endpoint: "",
+    //   parse: (result: any[]): XPRNMarketProviderResult[]=>{ 
+    //     return []
+    //   },
+    //   getTransaction(swapPair, volume, side, session) {
+    //     return []
+    //   },
+    // }
+];
+export function getSwapMarkets(filters) {
+    if (!filters)
+        return DEFAULT_SWAP_SERVICES;
+    return DEFAULT_SWAP_SERVICES.reduce((prev, current) => {
+        const foundInFilter = filters.findIndex(filter => current.name == filter);
+        if (foundInFilter >= 0)
+            prev.push(current);
+        return prev;
+    }, []);
+}

package/build/components/swap/xprn-swap-pair-selector.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+type XPRNPairsSelectorProps = React.HTMLAttributes<HTMLDivElement> & {
+    contentClassName?: string;
+    itemsClassName?: string;
+};
+export declare const XPRNPairsSelector: React.FunctionComponent<XPRNPairsSelectorProps>;
+export {};

package/build/components/swap/xprn-swap-pair-selector.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import classNames from "classnames";
+import { useXPRNSwap } from "./xprn-swap-provider";
+import { Select, SelectItem, SelectContent, SelectTrigger, SelectValue, } from "../ui/select";
+export const XPRNPairsSelector = ({ children, className, contentClassName, itemsClassName }) => {
+    const rootClasses = classNames({
+        [`${className}`]: className,
+    });
+    const contentClasses = classNames({
+        "bg-white": true,
+        [`${contentClassName}`]: className,
+    });
+    const itemsClasses = classNames({
+        "text-black": true,
+        [`${itemsClassName}`]: className,
+    });
+    const { currentMarketPairs, refreshStatus, setCurrentSwapPair, currentSwapPair } = useXPRNSwap();
+    const [defaultValue, setDefaultValue] = React.useState();
+    const onPairSelected = React.useCallback((pairName) => {
+        const foundPair = currentMarketPairs.findLast(pair => {
+            return pair.pair == pairName;
+        });
+        if (foundPair)
+            setCurrentSwapPair(foundPair);
+    }, [currentMarketPairs]);
+    React.useEffect(() => {
+        if (currentSwapPair)
+            setDefaultValue(currentSwapPair.pair);
+    }, [currentSwapPair]);
+    if (currentMarketPairs.length <= 1)
+        return;
+    return (_jsxs(_Fragment, { children: [refreshStatus == "idle" && (_jsx(_Fragment, { children: _jsxs(Select, { value: defaultValue, onValueChange: pair => onPairSelected(pair), children: [_jsx(SelectTrigger, { className: `${rootClasses}`, children: _jsx(SelectValue, { placeholder: "Pairs" }) }), _jsx(SelectContent, { className: contentClasses, children: currentMarketPairs.map((pair, index) => {
+                                return (_jsx(SelectItem, { value: pair.pair, className: itemsClasses, children: pair.askName }, index));
+                            }) })] }) })), refreshStatus == "pending" && _jsx(_Fragment, { children: "Loading Pairs" }), refreshStatus == "fail" && _jsx(_Fragment, { children: "Pairs shit" })] }));
+};

package/build/components/swap/xprn-swap-provider.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import type { XPRNMarketProvider, XPRNMarketProviderQuoteFilter, XPRNMarketProviderResult, XPRNSwapSide, XPRNSwapValues } from ".";
+import type { ServiceStatus } from "../../interfaces/service-status";
+export type XPRNSwapProviderConfig = {
+    filters?: XPRNMarketProviderQuoteFilter;
+    marketFilters?: string[];
+    sides?: XPRNSwapSide[];
+};
+type XPRNProviderProps = {
+    children: React.ReactNode | React.ReactNode[];
+    config?: XPRNSwapProviderConfig;
+};
+type XPRNSwapProviderContext = {
+    marketProviders: XPRNMarketProvider[];
+    currentMarketProvider: XPRNMarketProvider | null;
+    setCurrentMarketProvider: (marketProvider: XPRNMarketProvider) => void;
+    refreshMarketPairs: () => void;
+    currentMarketPairs: XPRNMarketProviderResult[];
+    refreshStatus: ServiceStatus;
+    setCurrentSwapPair: (pair: XPRNMarketProviderResult) => void;
+    currentSwapPair: XPRNMarketProviderResult | null;
+    currentSwapValues: XPRNSwapValues | null;
+    setCurrentSwapValues: (value: XPRNSwapValues) => void;
+    swapVolume: number;
+    setSwapVolume: (value: number) => void;
+    config?: XPRNSwapProviderConfig;
+    swapTransaction: any[];
+    setSwapSide: (value: XPRNSwapSide) => void;
+    swapSide: XPRNSwapSide;
+    swapValues: XPRNSwapValues;
+    updateSwapValues: (base: number, quote: number, lastMutated: "base" | "quote") => void;
+};
+export declare const XPRNSwapProvider: React.FunctionComponent<XPRNProviderProps>;
+export declare function useXPRNSwap(): XPRNSwapProviderContext;
+export {};