From d30760e64228c1b49b766d10e86cf006108c1f6d Mon Sep 17 00:00:00 2001
From: Serkan Reis <serkanreis@gmail.com>
Date: Mon, 27 Feb 2023 18:33:57 +0300
Subject: [PATCH] Update Mint Rule: By Minter badge creation summary

---
 pages/badges/create.tsx | 151 +++++++++++++++++++++++++++-------------
 1 file changed, 101 insertions(+), 50 deletions(-)

diff --git a/pages/badges/create.tsx b/pages/badges/create.tsx
index 3b8af69..e4707bf 100644
--- a/pages/badges/create.tsx
+++ b/pages/badges/create.tsx
@@ -149,7 +149,7 @@ const BadgeCreationPage: NextPage = () => {
               }
             : mintRule === 'by_minter'
             ? {
-                by_minter: designatedMinterState.value,
+                by_minter: designatedMinterState.value.trim(),
               }
             : {
                 by_keys: [keyState.value],
@@ -284,52 +284,106 @@ const BadgeCreationPage: NextPage = () => {
       </div>
       <div className="mx-10" ref={scrollRef}>
         <Conditional test={badgeId !== null}>
-          <Alert className="mt-5" type="info">
-            <div className="flex flex-row">
-              <div>
-                <div className="w-[384px] h-[384px]" ref={qrRef}>
-                  <QRCodeSVG
-                    className="mx-auto"
-                    level="H"
-                    size={384}
-                    value={`${
-                      NETWORK === 'testnet' ? 'https://badges.publicawesome.dev' : 'https://badges.stargaze.zone'
-                    }/?id=${badgeId as string}&key=${createdBadgeKey as string}`}
-                  />
+          <Conditional test={mintRule === 'by_key'}>
+            <Alert className="mt-5" type="info">
+              <div className="flex flex-row">
+                <div>
+                  <div className="w-[384px] h-[384px]" ref={qrRef}>
+                    <QRCodeSVG
+                      className="mx-auto"
+                      level="H"
+                      size={384}
+                      value={`${
+                        NETWORK === 'testnet' ? 'https://badges.publicawesome.dev' : 'https://badges.stargaze.zone'
+                      }/?id=${badgeId as string}&key=${createdBadgeKey as string}`}
+                    />
+                  </div>
+                  <div className="grid grid-cols-2 gap-2 mt-2 w-[384px]">
+                    <Button
+                      className="items-center w-full text-sm text-center rounded"
+                      leftIcon={<FaSave />}
+                      onClick={() => void handleDownloadQr()}
+                    >
+                      Download QR Code
+                    </Button>
+                    <Button
+                      className="w-full text-sm text-center rounded"
+                      isWide
+                      leftIcon={<FaCopy />}
+                      onClick={() => void copyClaimURL()}
+                      variant="solid"
+                    >
+                      Copy Claim URL
+                    </Button>
+                  </div>
                 </div>
-                <div className="grid grid-cols-2 gap-2 mt-2 w-[384px]">
-                  <Button
-                    className="items-center w-full text-sm text-center rounded"
-                    leftIcon={<FaSave />}
-                    onClick={() => void handleDownloadQr()}
-                  >
-                    Download QR Code
-                  </Button>
-                  <Button
-                    className="w-full text-sm text-center rounded"
-                    isWide
-                    leftIcon={<FaCopy />}
-                    onClick={() => void copyClaimURL()}
-                    variant="solid"
-                  >
-                    Copy Claim URL
-                  </Button>
+                <div className="ml-4 text-lg">
+                  Badge ID:{` ${badgeId as string}`}
+                  <br />
+                  Private Key:
+                  <Tooltip label="Click to copy the private key">
+                    <button
+                      className="group flex space-x-2 font-mono text-base text-white/50 hover:underline"
+                      onClick={() => void copy(createdBadgeKey as string)}
+                      type="button"
+                    >
+                      <span>{truncateMiddle(createdBadgeKey ? createdBadgeKey : '', 32)}</span>
+                      <FaCopy className="opacity-50 group-hover:opacity-100" />
+                    </button>
+                  </Tooltip>
+                  <br />
+                  Transaction Hash: {'  '}
+                  <Conditional test={NETWORK === 'testnet'}>
+                    <Anchor
+                      className="text-stargaze hover:underline"
+                      external
+                      href={`${BLOCK_EXPLORER_URL}/tx/${transactionHash as string}`}
+                    >
+                      {transactionHash}
+                    </Anchor>
+                  </Conditional>
+                  <Conditional test={NETWORK === 'mainnet'}>
+                    <Anchor
+                      className="text-stargaze hover:underline"
+                      external
+                      href={`${BLOCK_EXPLORER_URL}/txs/${transactionHash as string}`}
+                    >
+                      {transactionHash}
+                    </Anchor>
+                  </Conditional>
+                  <br />
+                  <div className="text-base">
+                    <div className="flex-row pt-4 mt-4 border-t-2">
+                      <span>
+                        You may click{' '}
+                        <Anchor
+                          className="text-stargaze hover:underline"
+                          external
+                          href={`${
+                            NETWORK === 'testnet' ? 'https://badges.publicawesome.dev' : 'https://badges.stargaze.zone'
+                          }/?id=${badgeId as string}&key=${createdBadgeKey as string}`}
+                        >
+                          here
+                        </Anchor>{' '}
+                        or scan the QR code to claim a badge.
+                      </span>
+                    </div>
+                    <br />
+                    <span className="mt-4">
+                      You may download the QR code or copy the claim URL to share with others.
+                    </span>
+                  </div>
+                  <br />
                 </div>
               </div>
+            </Alert>
+          </Conditional>
+          <Conditional test={mintRule === 'by_minter'}>
+            <Alert className="mt-5" type="info">
               <div className="ml-4 text-lg">
                 Badge ID:{` ${badgeId as string}`}
                 <br />
-                Private Key:
-                <Tooltip label="Click to copy the private key">
-                  <button
-                    className="group flex space-x-2 font-mono text-base text-white/50 hover:underline"
-                    onClick={() => void copy(createdBadgeKey as string)}
-                    type="button"
-                  >
-                    <span>{truncateMiddle(createdBadgeKey ? createdBadgeKey : '', 32)}</span>
-                    <FaCopy className="opacity-50 group-hover:opacity-100" />
-                  </button>
-                </Tooltip>
+                Designated Minter Address: {` ${designatedMinterState.value}`}
                 <br />
                 Transaction Hash: {'  '}
                 <Conditional test={NETWORK === 'testnet'}>
@@ -358,22 +412,19 @@ const BadgeCreationPage: NextPage = () => {
                       <Anchor
                         className="text-stargaze hover:underline"
                         external
-                        href={`${
-                          NETWORK === 'testnet' ? 'https://badges.publicawesome.dev' : 'https://badges.stargaze.zone'
-                        }/?id=${badgeId as string}&key=${createdBadgeKey as string}`}
+                        href={`/badges/actions/?badgeHubContractAddress=${BADGE_HUB_ADDRESS}&badgeId=${
+                          badgeId as string
+                        }`}
                       >
                         here
                       </Anchor>{' '}
-                      or scan the QR code to claim a badge.
+                      and select Actions {'>'} Mint By Minter to mint a badge.
                     </span>
                   </div>
-                  <br />
-                  <span className="mt-4">You may download the QR code or copy the claim URL to share with others.</span>
                 </div>
-                <br />
               </div>
-            </div>
-          </Alert>
+            </Alert>
+          </Conditional>
         </Conditional>
       </div>