+ className="lg:min-w-[237px] relative flex flex-col border border-brightGreen rounded-xl justify-center items-start bg-extraDark p-6 lg:p-12 self-stretch">
{usedSponsorships}
diff --git a/apps/web/app/res-routes/guilds/GuildId_Index.js b/apps/web/app/res-routes/guilds/GuildId_Index.js
index 036f5c4..4ba9c2a 100644
--- a/apps/web/app/res-routes/guilds/GuildId_Index.js
+++ b/apps/web/app/res-routes/guilds/GuildId_Index.js
@@ -1,12 +1,14 @@
// Generated by ReScript, PLEASE EDIT WITH CARE
import * as React from "react";
+import * as Wagmi from "wagmi";
import * as Js_exn from "../../../../../node_modules/rescript/lib/es6/js_exn.js";
import * as AuthServer from "../../AuthServer.js";
import * as AdminButton from "../../components/AdminButton.js";
import * as Caml_option from "../../../../../node_modules/rescript/lib/es6/caml_option.js";
import * as Core__Array from "../../../../../node_modules/@rescript/core/src/Core__Array.js";
import * as Core__Option from "../../../../../node_modules/@rescript/core/src/Core__Option.js";
+import ReactLottie from "react-lottie";
import * as Decode$Shared from "../../../node_modules/@brightidbot/shared/src/Decode.js";
import * as DiscordServer from "../../DiscordServer.js";
import * as SidebarToggle from "../../components/SidebarToggle.js";
@@ -15,7 +17,6 @@ import * as $$Node from "@remix-run/node";
import * as ReactHotToast from "react-hot-toast";
import ReactHotToast$1 from "react-hot-toast";
import * as React$1 from "@remix-run/react";
-import * as SponsorshipsPopup from "../../components/SponsorshipsPopup.js";
import * as JsxRuntime from "react/jsx-runtime";
import * as Caml_js_exceptions from "../../../../../node_modules/rescript/lib/es6/caml_js_exceptions.js";
import * as DiscordLoginButton from "../../components/DiscordLoginButton.js";
@@ -32,6 +33,89 @@ var defaultLoader = {
discordGuildPromise: defaultLoader_discordGuildPromise
};
+var Lottie = {};
+
+var assignSPYellow = (require("~/lotties/assignSPYellow.json"));
+
+var assignSPRed = (require("~/lotties/assignSPRed.json"));
+
+var assignSPBlue = (require("~/lotties/assignSPBlue.json"));
+
+function makeLottieOptions(animationData) {
+ return {
+ loop: true,
+ autoplay: true,
+ animationData: animationData,
+ rendererSettings: {
+ preserveAspectRatio: "xMidYMid slice"
+ }
+ };
+}
+
+function GuildId_Index$AssignSponsorships(props) {
+ var transition = React$1.useTransition();
+ return JsxRuntime.jsx("div", {
+ children: props.maybeAddress !== undefined ? (
+ transition.state === "submitting" ? JsxRuntime.jsxs("div", {
+ children: [
+ JsxRuntime.jsx(ReactLottie, {
+ options: makeLottieOptions(assignSPYellow),
+ style: {
+ width: "25vw"
+ }
+ }),
+ JsxRuntime.jsx("p", {
+ children: "Assigning Sponsorships to Server",
+ className: "text-white font-bold text-24"
+ })
+ ]
+ }) : JsxRuntime.jsxs(React$1.Form, {
+ className: "flex flex-col width-full height-full",
+ children: [
+ JsxRuntime.jsxs("div", {
+ children: [
+ JsxRuntime.jsx("label", {
+ children: "ID SP",
+ className: "text-white font-bold text-32"
+ }),
+ JsxRuntime.jsx("p", {
+ children: "1000",
+ className: "text-white font-bold text-24"
+ }),
+ JsxRuntime.jsx("label", {
+ children: "Mainnet SP",
+ className: "text-white font-bold text-32"
+ }),
+ JsxRuntime.jsx("p", {
+ children: "1000",
+ className: "text-white font-bold text-24"
+ })
+ ],
+ className: "flex justify-around p-10"
+ }),
+ JsxRuntime.jsx("input", {
+ defaultValue: "1",
+ className: "appearance-none text-white bg-transparent text-3xl text-center p-5",
+ name: "sponsorships",
+ type: "number"
+ }),
+ JsxRuntime.jsx("button", {
+ children: "Assign",
+ className: "text-white p-5",
+ type: "submit"
+ })
+ ]
+ })
+ ) : JsxRuntime.jsx(Rainbowkit.ConnectButton, {}),
+ className: "flex flex-1 width-full height-full justify-center items-center"
+ });
+}
+
+var AssignSponsorships = {
+ makeLottieOptions: makeLottieOptions,
+ make: GuildId_Index$AssignSponsorships
+};
+
async function loader(param) {
var guildId = Core__Option.getWithDefault(param.params["guildId"], "");
var maybeUser;
@@ -58,11 +142,15 @@ async function loader(param) {
try {
var discordGuildPromise = DiscordServer.fetchDiscordGuildFromId(guildId);
var userId = Caml_option.valFromOption(maybeUser).profile.id;
- var guildMember = await DiscordServer.fetchGuildMemberFromId(guildId, userId);
+ var match = await Promise.all([
+ DiscordServer.fetchGuildMemberFromId(guildId, userId),
+ DiscordServer.fetchGuildRoles(guildId)
+ ]);
+ var guildMember = match[0];
var memberRoles = (guildMember == null) ? [] : guildMember.roles;
var guildRoles;
try {
- guildRoles = await DiscordServer.fetchGuildRoles(guildId);
+ guildRoles = match[1];
}
catch (raw_exn$1){
var exn$1 = Caml_js_exceptions.internalToOCamlException(raw_exn$1);
@@ -83,7 +171,7 @@ async function loader(param) {
var e = Caml_js_exceptions.internalToOCamlException(raw_e);
if (e.RE_EXN_ID === Js_exn.$$Error) {
console.error(e._1);
- return defaultLoader;
+ return $$Node.defer(defaultLoader);
}
throw e;
}
@@ -172,6 +260,7 @@ function $$default(param) {
var maybeUser = match.maybeUser;
var context = React$1.useOutletContext();
var matches = React$1.useMatches();
+ var match$1 = Wagmi.useAccount(undefined);
var id = Core__Option.map(matches[matches.length - 1 | 0], (function (match) {
return match.id;
}));
@@ -212,7 +301,7 @@ function $$default(param) {
className: "text-3xl text-white font-poppins p-4"
}))
});
- var showPopup = Core__Option.getWithDefault(Core__Array.reverse(Core__Option.getWithDefault(id, "").split("/"))[0], "") === "$guildId";
+ Core__Option.getWithDefault(Core__Array.reverse(Core__Option.getWithDefault(id, "").split("/"))[0], "") === "$guildId";
return JsxRuntime.jsxs("div", {
children: [
JsxRuntime.jsx(ReactHotToast.Toaster, {}),
@@ -236,15 +325,76 @@ function $$default(param) {
maybeUser !== undefined ? JsxRuntime.jsxs(JsxRuntime.Fragment, {
children: [
guildHeader,
- JsxRuntime.jsxs("div", {
- children: [
- JsxRuntime.jsx("section", {
- children: JsxRuntime.jsx(React$1.Outlet, {}),
- className: "width-full flex flex-col md:flex-row justify-around items-center w-full"
- }),
- showPopup ? JsxRuntime.jsx(SponsorshipsPopup.make, {}) : JsxRuntime.jsx(JsxRuntime.Fragment, {})
- ],
- className: "flex flex-1 flex-col justify-around items-center text-center relative"
+ JsxRuntime.jsx("div", {
+ children: JsxRuntime.jsxs("section", {
+ children: [
+ JsxRuntime.jsxs("div", {
+ children: [
+ JsxRuntime.jsxs("div", {
+ children: [
+ JsxRuntime.jsx("img", {
+ className: "pb-4 h-14 w-14",
+ src: "/assets/verified_icon.svg"
+ }),
+ JsxRuntime.jsx("p", {
+ children: "0",
+ className: "text-5xl text-brightOrange py-2"
+ }),
+ JsxRuntime.jsx("p", {
+ children: "Verified Users",
+ className: "text-sm text-white"
+ })
+ ],
+ className: "flex flex-col flex-start flex-1 border-r-2 lg:border-b-2 border-extraDark p-5 bg-dark"
+ }),
+ JsxRuntime.jsxs("div", {
+ children: [
+ JsxRuntime.jsx("img", {
+ className: "pb-4 h-14 w-14",
+ src: "/assets/gift_icon.svg"
+ }),
+ JsxRuntime.jsx("p", {
+ children: "0",
+ className: "text-5xl text-brightBlue py-2"
+ }),
+ JsxRuntime.jsx("p", {
+ children: "Available Sponsorships",
+ className: "text-sm text-white"
+ })
+ ],
+ className: "flex flex-col flex-start flex-1 border-r-2 lg:border-b-2 border-extraDark p-5 bg-dark"
+ }),
+ JsxRuntime.jsxs("div", {
+ children: [
+ JsxRuntime.jsx("img", {
+ className: "pb-4 h-14 w-14",
+ src: "/assets/unlock_icon.svg"
+ }),
+ JsxRuntime.jsx("p", {
+ children: "0",
+ className: "text-5xl text-brightGreen py-2"
+ }),
+ JsxRuntime.jsx("p", {
+ children: "Used Sponsorships",
+ className: "text-sm text-white"
+ })
+ ],
+ className: "flex flex-col flex-start border-r-2 border-extraDark flex-1 p-5 bg-dark"
+ })
+ ],
+ className: "flex flex-row flex-start lg:flex-col flex-1 h-full w-full border-b-2 lg:border-r-2 border-dark "
+ }),
+ JsxRuntime.jsx("div", {
+ children: JsxRuntime.jsx(GuildId_Index$AssignSponsorships, {
+ maybeAddress: match$1.address
+ }),
+ className: "flex-2"
+ }),
+ JsxRuntime.jsx(React$1.Outlet, {})
+ ],
+ className: "relative w-full lg:w-[90%] flex flex-col lg:flex-row justify-around items-center border-y-2 lg:border-4 border-extraDark lg:rounded-xl max-w-4xl "
+ }),
+ className: "flex flex-1 flex-col justify-around items-center relative"
})
]
}) : JsxRuntime.jsxs("div", {
@@ -270,6 +420,11 @@ function $$default(param) {
export {
Await ,
defaultLoader ,
+ Lottie ,
+ assignSPYellow ,
+ assignSPRed ,
+ assignSPBlue ,
+ AssignSponsorships ,
loader ,
action ,
$$default ,
diff --git a/apps/web/app/res-routes/guilds/GuildId_Index.res b/apps/web/app/res-routes/guilds/GuildId_Index.res
index 2f181d5..8b17c92 100644
--- a/apps/web/app/res-routes/guilds/GuildId_Index.res
+++ b/apps/web/app/res-routes/guilds/GuildId_Index.res
@@ -32,6 +32,70 @@ let defaultLoader = {
discordGuildPromise: Promise.resolve(Nullable.null),
}
+module Lottie = {
+ @react.component @module("react-lottie")
+ external make: (
+ ~options: {
+ "animationData": JSON.t,
+ "loop": bool,
+ "autoplay": bool,
+ "rendererSettings": {"preserveAspectRatio": string},
+ },
+ ~style: 'a=?,
+ ~className: string=?,
+ ) => React.element = "default"
+}
+
+let assignSPYellow = %raw(`require("~/lotties/assignSPYellow.json")`)
+let assignSPRed = %raw(`require("~/lotties/assignSPRed.json")`)
+let assignSPBlue = %raw(`require("~/lotties/assignSPBlue.json")`)
+module AssignSponsorships = {
+ let makeLottieOptions = animationData =>
+ {
+ "loop": true,
+ "autoplay": true,
+ "animationData": animationData,
+ "rendererSettings": {
+ "preserveAspectRatio": "xMidYMid slice",
+ },
+ }
+
+ @react.component
+ let make = (~maybeAddress) => {
+ let transition = Remix.useTransition()
+
+ {switch maybeAddress {
+ | None =>
+ | Some(_) =>
+ transition->Remix.Transition.state === "submitting"
+ ?
+
+
+ {React.string(`Assigning Sponsorships to Server`)}
+
+
+ :
+
+
+
{React.string(`${"1000"}`)}
+
+
{React.string(`${"1000"}`)}
+
+ }}
+
+ }
+}
+
let loader: Remix.loaderFunction
= async ({request, params}) => {
open DiscordServer
@@ -52,13 +116,17 @@ let loader: Remix.loaderFunction = async ({request, params}) => {
let discordGuildPromise = fetchDiscordGuildFromId(~guildId)
let userId = user->RemixAuth.User.getProfile->RemixAuth.User.getId
- let guildMember = await fetchGuildMemberFromId(~guildId, ~userId)
+
+ let (guildMember, guildRoles) = await Promise.all2((
+ fetchGuildMemberFromId(~guildId, ~userId),
+ fetchGuildRoles(~guildId),
+ ))
let memberRoles = switch guildMember->Nullable.toOption {
| None => []
| Some(guildMember) => guildMember.roles
}
- let guildRoles = switch await fetchGuildRoles(~guildId) {
+ let guildRoles = switch guildRoles {
| data => data
| exception JsError(_) => []
}
@@ -75,7 +143,7 @@ let loader: Remix.loaderFunction = async ({request, params}) => {
} catch {
| Exn.Error(e) =>
Console.error(e)
- defaultLoader
+ defer(defaultLoader)
}
}
}
@@ -124,6 +192,7 @@ let default = () => {
let context = useOutletContext()
let matches = useMatches()
+ let {address: maybeAddress} = Wagmi.useAccount()
let id = matches[matches->Array.length - 1]->Option.map(match => match.id)
@@ -191,16 +260,39 @@ let default = () => {
+
+ className="relative w-full lg:w-[90%] flex flex-col lg:flex-row justify-around items-center border-y-2 lg:border-4 border-extraDark lg:rounded-xl max-w-4xl ">
+
+
+
+
{"0"->React.string}
+
{"Verified Users"->React.string}
+
+
+
+
{"0"->React.string}
+
{"Available Sponsorships"->React.string}
+
+
+
+
{"0"->React.string}
+
{"Used Sponsorships"->React.string}
+
+
- {showPopup ?
: <> }
+ // {showPopup ?
: <> }
}}
diff --git a/apps/web/app/res-routes/guilds/sponsorships/Guilds_AssignSponsorships.js b/apps/web/app/res-routes/guilds/sponsorships/Guilds_AssignSponsorships.js
index c1e7676..d856702 100644
--- a/apps/web/app/res-routes/guilds/sponsorships/Guilds_AssignSponsorships.js
+++ b/apps/web/app/res-routes/guilds/sponsorships/Guilds_AssignSponsorships.js
@@ -1,177 +1,2 @@
// Generated by ReScript, PLEASE EDIT WITH CARE
-
-import * as Curry from "../../../../../../node_modules/rescript/lib/es6/curry.js";
-import * as React from "react";
-import * as Wagmi from "wagmi";
-import * as Core__Option from "../../../../../../node_modules/@rescript/core/src/Core__Option.js";
-import ReactLottie from "react-lottie";
-import * as Caml_exceptions from "../../../../../../node_modules/rescript/lib/es6/caml_exceptions.js";
-import * as React$1 from "@remix-run/react";
-import * as Constants$Shared from "../../../../node_modules/@brightidbot/shared/src/Constants.js";
-import * as JsxRuntime from "react/jsx-runtime";
-import * as Rainbowkit from "@rainbow-me/rainbowkit";
-
-var NoAccountAddress = /* @__PURE__ */Caml_exceptions.create("Guilds_AssignSponsorships.NoAccountAddress");
-
-function Guilds_AssignSponsorships$Modal(props) {
- var match = React.useState(function () {
- return true;
- });
- if (!match[0]) {
- return JsxRuntime.jsx(JsxRuntime.Fragment, {});
- }
- var setShowModal = match[1];
- return JsxRuntime.jsxs(JsxRuntime.Fragment, {
- children: [
- JsxRuntime.jsx("div", {
- children: JsxRuntime.jsx("div", {
- children: props.children,
- className: "relative w-auto my-6 max-w-3xl "
- }),
- className: "justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none flex-1"
- }),
- JsxRuntime.jsx("div", {
- className: "opacity-25 fixed inset-0 z-40 bg-black",
- onClick: (function (param) {
- Curry._1(setShowModal, (function (param) {
- return false;
- }));
- })
- })
- ]
- });
-}
-
-var Modal = {
- make: Guilds_AssignSponsorships$Modal
-};
-
-var Lottie = {};
-
-var assignSPYellow = (require("~/lotties/assignSPYellow.json"));
-
-var assignSPRed = (require("~/lotties/assignSPRed.json"));
-
-var assignSPBlue = (require("~/lotties/assignSPBlue.json"));
-
-var abi = (require("~/../../packages/shared/src/abi/SP.json"));
-
-function Guilds_AssignSponsorships$default(props) {
- React$1.useParams();
- var transition = React$1.useTransition();
- var match = Wagmi.useAccount(undefined);
- var maybeAddress = match.address;
- var address = Core__Option.getWithDefault(maybeAddress, "");
- var mainnetSP = Wagmi.useBalance({
- address: address,
- token: Constants$Shared.contractAddressETH,
- chainId: 1
- });
- var idSP = Wagmi.useBalance({
- address: address,
- token: Constants$Shared.contractAddressID,
- chainId: 74
- });
- var match$1 = mainnetSP.status;
- var formattedMainnetSP = match$1 === "error" ? "Error" : (
- match$1 === "loading" ? "Loading" : (
- match$1 === "success" ? Core__Option.getWithDefault(Core__Option.map(mainnetSP.data, (function (data) {
- return data.formatted;
- })), "0") : "unknown"
- )
- );
- var match$2 = idSP.status;
- var formattedIDSP = match$2 === "error" ? "Error" : (
- match$2 === "loading" ? "Loading" : (
- match$2 === "success" ? Core__Option.getWithDefault(Core__Option.map(idSP.data, (function (data) {
- return data.formatted;
- })), "0") : "unknown"
- )
- );
- var makeDefaultOptions = function (animationData) {
- return {
- loop: true,
- autoplay: true,
- animationData: animationData,
- rendererSettings: {
- preserveAspectRatio: "xMidYMid slice"
- }
- };
- };
- return JsxRuntime.jsx("div", {
- children: maybeAddress !== undefined ? (
- transition.state === "submitting" ? JsxRuntime.jsxs("div", {
- children: [
- JsxRuntime.jsx(ReactLottie, {
- options: makeDefaultOptions(assignSPYellow),
- style: {
- width: "25vw"
- }
- }),
- JsxRuntime.jsx("p", {
- children: "Assigning Sponsorships to Server",
- className: "text-white font-bold text-24"
- })
- ]
- }) : JsxRuntime.jsxs(React$1.Form, {
- className: "flex flex-col width-full height-full",
- children: [
- JsxRuntime.jsxs("div", {
- children: [
- JsxRuntime.jsx("label", {
- children: "ID SP",
- className: "text-white font-bold text-32"
- }),
- JsxRuntime.jsx("p", {
- children: "" + formattedIDSP + "",
- className: "text-white font-bold text-24"
- }),
- JsxRuntime.jsx("label", {
- children: "Mainnet SP",
- className: "text-white font-bold text-32"
- }),
- JsxRuntime.jsx("p", {
- children: "" + formattedMainnetSP + "",
- className: "text-white font-bold text-24"
- })
- ],
- className: "flex justify-around p-10"
- }),
- JsxRuntime.jsx("input", {
- defaultValue: "1",
- className: "appearance-none text-white bg-transparent text-3xl text-center p-5",
- name: "sponsorships",
- type: "number"
- }),
- JsxRuntime.jsx("button", {
- children: "Assign",
- className: "text-white p-5",
- type: "submit"
- })
- ]
- })
- ) : JsxRuntime.jsx(Rainbowkit.ConnectButton, {}),
- className: "flex flex-1 width-full height-full justify-center items-center"
- });
-}
-
-var contractAddressID = Constants$Shared.contractAddressID;
-
-var contractAddressETH = Constants$Shared.contractAddressETH;
-
-var $$default = Guilds_AssignSponsorships$default;
-
-export {
- NoAccountAddress ,
- Modal ,
- Lottie ,
- contractAddressID ,
- contractAddressETH ,
- assignSPYellow ,
- assignSPRed ,
- assignSPBlue ,
- abi ,
- $$default ,
- $$default as default,
-}
-/* assignSPYellow Not a pure module */
+/* This output is empty. Its source's type definitions, externals and/or unused code got optimized away. */
diff --git a/apps/web/app/res-routes/guilds/sponsorships/Guilds_AssignSponsorships.res b/apps/web/app/res-routes/guilds/sponsorships/Guilds_AssignSponsorships.res
index 1db263c..99f67d7 100644
--- a/apps/web/app/res-routes/guilds/sponsorships/Guilds_AssignSponsorships.res
+++ b/apps/web/app/res-routes/guilds/sponsorships/Guilds_AssignSponsorships.res
@@ -1,138 +1,133 @@
-exception NoAccountAddress(string)
-
-module Modal = {
- @react.component @react.component
- let make = (~children) => {
- let (showModal, setShowModal) = React.useState(_ => true)
-
- {
- showModal
- ? <>
-
-
setShowModal(_ => false)}
- />
-
- : <>
- }
- }
-}
-
-module Lottie = {
- @react.component @module("react-lottie")
- external make: (
- ~options: {
- "animationData": JSON.t,
- "loop": bool,
- "autoplay": bool,
- "rendererSettings": {"preserveAspectRatio": string},
- },
- ~style: 'a=?,
- ~className: string=?,
- ) => React.element = "default"
-}
-
-let {contractAddressID, contractAddressETH} = module(Shared.Constants)
-
-type params = {guildId: string}
-
-let assignSPYellow = %raw(`require("~/lotties/assignSPYellow.json")`)
-let assignSPRed = %raw(`require("~/lotties/assignSPRed.json")`)
-let assignSPBlue = %raw(`require("~/lotties/assignSPBlue.json")`)
-
-let abi: Shared.ABI.t = %raw(`require("~/../../packages/shared/src/abi/SP.json")`)
-
-// let loader = () => {()}
-
-// let action = () => {()}
-
-@react.component
-let default = () => {
- let {guildId} = Remix.useParams()
- let transition = Remix.useTransition()
- let {address: maybeAddress} = Wagmi.useAccount()
-
- let address = maybeAddress->Option.getWithDefault("")
-
- let mainnetSP = Wagmi.useBalance({
- "address": address,
- "token": contractAddressETH,
- "chainId": 1,
- })
-
- let idSP = Wagmi.useBalance({
- "address": address,
- "token": contractAddressID,
- "chainId": 74,
- })
-
- let formattedMainnetSP = switch mainnetSP["status"] {
- | #success =>
- mainnetSP["data"]->Option.map(data => data["formatted"])->Option.getWithDefault("0")
- | #loading => "Loading"
- | #error => "Error"
- | _ => "unknown"
- }
-
- let formattedIDSP = switch idSP["status"] {
- | #success =>
- idSP["data"]->Option.map(data => data["formatted"])->Option.getWithDefault("0")
- | #loading => "Loading"
- | #error => "Error"
- | _ => "unknown"
- }
-
- let makeDefaultOptions = animationData =>
- {
- "loop": true,
- "autoplay": true,
- "animationData": animationData,
- "rendererSettings": {
- "preserveAspectRatio": "xMidYMid slice",
- },
- }
-
- //TODO This is too slow to use if we navigate here directly
- // let guildName = switch context["guilds"]->Array.findIndexOpt(guild => guild.id === guildId) {
- // | None => ""
- // | Some(index) =>
- // switch context["guilds"]->Array.get(index) {
- // | Some({name: Some(name)}) => name
- // | _ => ""
- // }
- // }
-
- {switch maybeAddress {
- | None =>
- | Some(_) =>
- transition->Remix.Transition.state === "submitting"
- ?
-
-
- {React.string(`Assigning Sponsorships to Server`)}
-
-
- :
-
-
-
{React.string(`${formattedIDSP}`)}
-
-
- {React.string(`${formattedMainnetSP}`)}
-
-
- }}
-
-}
+// exception NoAccountAddress(string)
+
+// module Modal = {
+// @react.component @react.component
+// let make = (~children) => {
+// let (showModal, setShowModal) = React.useState(_ => true)
+
+// {
+// showModal
+// ? <>
+//
+//
setShowModal(_ => false)}
+// />
+//
+// : <>
+// }
+// }
+// }
+
+// module Lottie = {
+// @react.component @module("react-lottie")
+// external make: (
+// ~options: {
+// "animationData": JSON.t,
+// "loop": bool,
+// "autoplay": bool,
+// "rendererSettings": {"preserveAspectRatio": string},
+// },
+// ~style: 'a=?,
+// ~className: string=?,
+// ) => React.element = "default"
+// }
+
+// let {contractAddressID, contractAddressETH} = module(Shared.Constants)
+
+// type params = {guildId: string}
+
+// let abi: Shared.ABI.t = %raw(`require("~/../../packages/shared/src/abi/SP.json")`)
+
+// // let loader = () => {()}
+
+// // let action = () => {()}
+
+// @react.component
+// let default = () => {
+// let {guildId} = Remix.useParams()
+// let transition = Remix.useTransition()
+// let {address: maybeAddress} = Wagmi.useAccount()
+
+// let address = maybeAddress->Option.getWithDefault("")
+
+// let mainnetSP = Wagmi.useBalance({
+// "address": address,
+// "token": contractAddressETH,
+// "chainId": 1,
+// })
+
+// let idSP = Wagmi.useBalance({
+// "address": address,
+// "token": contractAddressID,
+// "chainId": 74,
+// })
+
+// let formattedMainnetSP = switch mainnetSP["status"] {
+// | #success => mainnetSP["data"]->Option.map(data => data["formatted"])->Option.getWithDefault("0")
+// | #loading => "Loading"
+// | #error => "Error"
+// | _ => "unknown"
+// }
+
+// let formattedIDSP = switch idSP["status"] {
+// | #success => idSP["data"]->Option.map(data => data["formatted"])->Option.getWithDefault("0")
+// | #loading => "Loading"
+// | #error => "Error"
+// | _ => "unknown"
+// }
+
+// let makeDefaultOptions = animationData =>
+// {
+// "loop": true,
+// "autoplay": true,
+// "animationData": animationData,
+// "rendererSettings": {
+// "preserveAspectRatio": "xMidYMid slice",
+// },
+// }
+
+// //TODO This is too slow to use if we navigate here directly
+// // let guildName = switch context["guilds"]->Array.findIndexOpt(guild => guild.id === guildId) {
+// // | None => ""
+// // | Some(index) =>
+// // switch context["guilds"]->Array.get(index) {
+// // | Some({name: Some(name)}) => name
+// // | _ => ""
+// // }
+// // }
+//
+// {switch maybeAddress {
+// | None =>
+// | Some(_) =>
+// transition->Remix.Transition.state === "submitting"
+// ?
+//
+//
+// {React.string(`Assigning Sponsorships to Server`)}
+//
+//
+// :
+//
+//
+//
{React.string(`${formattedIDSP}`)}
+//
+//
+// {React.string(`${formattedMainnetSP}`)}
+//
+//
+// }}
+//
+// }
+
diff --git a/apps/web/app/styles/app.css b/apps/web/app/styles/app.css
index 7f1bd5f..6cd11db 100644
--- a/apps/web/app/styles/app.css
+++ b/apps/web/app/styles/app.css
@@ -639,6 +639,10 @@ video {
height: 6rem;
}
+.h-14{
+ height: 3.5rem;
+}
+
.w-72{
width: 18rem;
}
@@ -671,6 +675,10 @@ video {
width: 1rem;
}
+.w-14{
+ width: 3.5rem;
+}
+
.w-auto{
width: auto;
}
@@ -679,6 +687,10 @@ video {
max-width: 64rem;
}
+.max-w-4xl{
+ max-width: 56rem;
+}
+
.max-w-3xl{
max-width: 48rem;
}
@@ -687,6 +699,10 @@ video {
flex: 1 1 0%;
}
+.flex-2{
+ flex: 2 2 0%;
+}
+
@keyframes pulse{
50%{
opacity: .5;
@@ -805,10 +821,6 @@ video {
border-radius: 9999px;
}
-.rounded-3xl{
- border-radius: 1.5rem;
-}
-
.rounded-xl{
border-radius: 0.75rem;
}
@@ -821,6 +833,10 @@ video {
border-radius: 0.375rem;
}
+.rounded-3xl{
+ border-radius: 1.5rem;
+}
+
.rounded{
border-radius: 0.25rem;
}
@@ -833,18 +849,21 @@ video {
border-width: 1px;
}
+.border-y-2{
+ border-top-width: 2px;
+ border-bottom-width: 2px;
+}
+
.border-b{
border-bottom-width: 1px;
}
-.border-brightid{
- --tw-border-opacity: 1;
- border-color: rgb(237 122 92 / var(--tw-border-opacity));
+.border-r-2{
+ border-right-width: 2px;
}
-.border-discord{
- --tw-border-opacity: 1;
- border-color: rgb(88 101 242 / var(--tw-border-opacity));
+.border-b-2{
+ border-bottom-width: 2px;
}
.border-brightOrange{
@@ -852,11 +871,21 @@ video {
border-color: rgb(236 96 65 / var(--tw-border-opacity));
}
+.border-discord{
+ --tw-border-opacity: 1;
+ border-color: rgb(88 101 242 / var(--tw-border-opacity));
+}
+
.border-white{
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
+.border-brightid{
+ --tw-border-opacity: 1;
+ border-color: rgb(237 122 92 / var(--tw-border-opacity));
+}
+
.border-\[\#FFFFFF\]{
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
@@ -872,6 +901,16 @@ video {
border-color: rgb(68 236 65 / var(--tw-border-opacity));
}
+.border-extraDark{
+ --tw-border-opacity: 1;
+ border-color: rgb(18 18 18 / var(--tw-border-opacity));
+}
+
+.border-dark{
+ --tw-border-opacity: 1;
+ border-color: rgb(30 30 30 / var(--tw-border-opacity));
+}
+
.border-b-black{
--tw-border-opacity: 1;
border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -967,10 +1006,6 @@ video {
background-clip: text;
}
-.p-4{
- padding: 1rem;
-}
-
.p-6{
padding: 1.5rem;
}
@@ -983,6 +1018,10 @@ video {
padding: 0.75rem;
}
+.p-4{
+ padding: 1rem;
+}
+
.p-1{
padding: 0.25rem;
}
@@ -1087,6 +1126,16 @@ video {
line-height: 2.5rem;
}
+.text-5xl{
+ font-size: 3rem;
+ line-height: 1;
+}
+
+.text-sm{
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+}
+
.text-6xl{
font-size: 3.75rem;
line-height: 1;
@@ -1108,9 +1157,9 @@ video {
letter-spacing: -0.025em;
}
-.text-white{
+.text-brightOrange{
--tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
+ color: rgb(236 96 65 / var(--tw-text-opacity));
}
.text-discord{
@@ -1118,9 +1167,9 @@ video {
color: rgb(88 101 242 / var(--tw-text-opacity));
}
-.text-brightOrange{
+.text-white{
--tw-text-opacity: 1;
- color: rgb(236 96 65 / var(--tw-text-opacity));
+ color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-black{
@@ -1204,14 +1253,14 @@ video {
background: transparent !important;
}
-.hover\:bg-discord:hover{
+.hover\:bg-brightOrange:hover{
--tw-bg-opacity: 1;
- background-color: rgb(88 101 242 / var(--tw-bg-opacity));
+ background-color: rgb(236 96 65 / var(--tw-bg-opacity));
}
-.hover\:bg-brightOrange:hover{
+.hover\:bg-discord:hover{
--tw-bg-opacity: 1;
- background-color: rgb(236 96 65 / var(--tw-bg-opacity));
+ background-color: rgb(88 101 242 / var(--tw-bg-opacity));
}
.hover\:bg-dark:hover{
@@ -1254,10 +1303,6 @@ video {
justify-content: flex-end;
}
- .md\:gap-0{
- gap: 0px;
- }
-
.md\:rounded-xl{
border-radius: 0.75rem;
}
@@ -1283,6 +1328,10 @@ video {
width: 100%;
}
+ .lg\:w-\[90\%\]{
+ width: 90%;
+ }
+
.lg\:min-w-\[237px\]{
min-width: 237px;
}
@@ -1291,6 +1340,30 @@ video {
flex-direction: row;
}
+ .lg\:flex-col{
+ flex-direction: column;
+ }
+
+ .lg\:gap-0{
+ gap: 0px;
+ }
+
+ .lg\:rounded-xl{
+ border-radius: 0.75rem;
+ }
+
+ .lg\:border-4{
+ border-width: 4px;
+ }
+
+ .lg\:border-b-2{
+ border-bottom-width: 2px;
+ }
+
+ .lg\:border-r-2{
+ border-right-width: 2px;
+ }
+
.lg\:p-12{
padding: 3rem;
}
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index 63113df..83224f7 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -30,6 +30,9 @@ module.exports = {
textscroll: 'bg 25s linear infinite',
},
aspectRatio: { '87/74': 87 / 74 },
+ flex: {
+ 2: '2 2 0%',
+ },
},
},
variants: {