Apply the new design to Wrap

.changelog/519.feature.md

@@ -0,0 +1 @@
+Use the newly added Oasis UI Library in wrap

ui/src/core/components/RainbowKitConnectButton/index.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
 import { ChevronDown, Wallet } from 'lucide-react'
-import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
+import { cn, Button } from '@oasisprotocol/ui-library/src'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -25,15 +25,34 @@ const TruncatedAddress: FC<{ address: string; className?: string }> = ({ address
 
 interface Props {
   onMobileClose?: () => void
+  className?: string
 }
 
+export const ConnectWalletButton: FC<Props> = ({ onMobileClose, className }) => (
+  <ConnectButton.Custom>
+    {({ openConnectModal }) => (
+      <Button
+        onClick={() => {
+          openConnectModal()
+          onMobileClose?.()
+        }}
+        variant="default"
+        className={cn('max-md:w-full', className)}
+      >
+        <Wallet className="w-4 h-4" />
+        Connect Wallet
+      </Button>
+    )}
+  </ConnectButton.Custom>
+)
+
 export const RainbowKitConnectButton: FC<Props> = ({ onMobileClose }) => {
   const isMobile = useIsMobile()
   const { disconnect } = useDisconnect()
 
   return (
     <ConnectButton.Custom>
-      {({ account, chain, openAccountModal, openChainModal, openConnectModal, mounted }) => {
+      {({ account, chain, openAccountModal, openChainModal, mounted }) => {
         const ready = mounted
         const connected = ready && account && chain
 
@@ -50,19 +69,7 @@ export const RainbowKitConnectButton: FC<Props> = ({ onMobileClose }) => {
           >
             {(() => {
               if (!connected) {
-                return (
-                  <Button
-                    onClick={() => {
-                      openConnectModal()
-                      onMobileClose?.()
-                    }}
-                    variant="secondary"
-                    className="max-md:w-full"
-                  >
-                    <Wallet className="w-4 h-4 mr-2" />
-                    Connect Wallet
-                  </Button>
-                )
+                return <ConnectWalletButton onMobileClose={onMobileClose} />
               }
 
               if (chain.unsupported) {

ui/src/core/components/icons/AppLogo.tsx

@@ -8,7 +8,7 @@ export const AppLogo = () => {
       <svg width="36" height="37" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M25.5671 2.42859C25.4864 2.38677 25.4043 2.34944 25.3207 2.31359C24.9309 2.14036 24.5381 1.97459 24.1349 1.82824C23.0074 1.41755 21.8276 1.11887 20.609 0.941156C19.7562 0.817203 18.8856 0.75 18 0.75C8.07484 0.75 0 8.82484 0 18.75C0 26.4828 4.90135 33.0897 11.7606 35.6329C12.567 35.9316 13.4018 36.1735 14.2575 36.3557C15.4657 36.6126 16.7172 36.75 18 36.75C24.8368 36.75 30.7955 32.9179 33.8405 27.2893C35.216 24.7475 35.9985 21.8384 35.9985 18.75C35.9985 13.8531 34.0302 9.40876 30.8463 6.15911C29.3349 4.61792 27.5473 3.35002 25.5671 2.42859ZM15.1267 33.3734C11.4066 33.3734 7.84784 31.55 5.36879 28.3795C3.24218 25.5749 2.11765 22.2266 2.11765 18.7007C2.11765 12.6793 5.45541 7.42253 10.3792 4.68512C10.5091 4.61194 10.639 4.78518 10.53 4.88822C10.0805 5.31235 9.64889 5.76485 9.23671 6.24573C6.3843 9.58199 4.74007 14.1219 4.72513 18.7007C4.72513 24.646 8.70207 31.0631 15.1282 31.0631C20.8629 31.0631 25.5268 25.5166 25.5268 18.7007C25.5268 15.4974 24.453 12.4224 22.6191 10.1405C22.5549 10.0599 22.6311 9.94638 22.7296 9.97476C25.8299 10.8917 28.1462 14.4565 28.1462 18.7007C28.1462 22.4492 26.7857 26.1797 24.4157 28.938C21.9575 31.7964 18.6586 33.3719 15.1267 33.3734ZM12.6312 18.6977C12.6312 14.452 14.6936 10.7872 17.6505 9.14293C18.0164 8.93834 18.4689 8.96522 18.8064 9.21163L19.4382 9.67309C22.0307 11.5652 23.6421 15.024 23.6421 18.7022C23.6421 22.948 21.5797 26.6128 18.6228 28.2585C18.2569 28.4631 17.8059 28.4377 17.4669 28.1898L16.8337 27.7283C14.2411 25.8362 12.6297 22.376 12.6297 18.6992L12.6312 18.6977ZM34.1571 18.6977C34.1571 24.7191 30.8179 29.9759 25.8956 32.7133C25.7657 32.7865 25.6358 32.6133 25.7448 32.5102C26.1943 32.0861 26.6259 31.6336 27.0381 31.1512C29.8905 27.815 31.5347 23.2765 31.5497 18.6962C31.5497 12.751 27.5727 6.33384 21.1466 6.33384C15.4134 6.33384 10.748 11.8803 10.748 18.6962C10.748 21.8996 11.8218 24.9745 13.6557 27.2579C13.7199 27.3386 13.6437 27.4521 13.5452 27.4237C10.4449 26.5067 8.12711 22.9435 8.12711 18.7007C8.12711 14.9538 9.4876 11.2232 11.8576 8.46493C14.3158 5.60506 17.6162 4.03101 21.1496 4.03101C24.8667 4.03101 28.4255 5.85296 30.912 9.03093C33.0371 11.8296 34.1586 15.1718 34.1557 18.6962L34.1571 18.6977Z"
-          fill="#03FFFF"
+          fill="white"
         />
       </svg>
     )
@@ -18,7 +18,7 @@ export const AppLogo = () => {
     <svg width="113" height="37" viewBox="0 0 113 37" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M25.5671 2.17859C25.4864 2.13677 25.4043 2.09944 25.3207 2.06359C24.9309 1.89036 24.5381 1.72459 24.1349 1.57824C23.0074 1.16755 21.8276 0.868871 20.609 0.691156C19.7562 0.567203 18.8856 0.5 18 0.5C8.07484 0.5 0 8.57484 0 18.5C0 26.2328 4.90135 32.8397 11.7606 35.3829C12.567 35.6816 13.4018 35.9235 14.2575 36.1057C15.4657 36.3626 16.7172 36.5 18 36.5C24.8368 36.5 30.7955 32.6679 33.8405 27.0393C35.216 24.4975 35.9985 21.5884 35.9985 18.5C35.9985 13.6031 34.0302 9.15876 30.8463 5.90911C29.3349 4.36792 27.5473 3.10002 25.5671 2.17859ZM15.1267 33.1234C11.4066 33.1234 7.84784 31.3 5.36879 28.1295C3.24218 25.3249 2.11765 21.9766 2.11765 18.4507C2.11765 12.4293 5.45541 7.17253 10.3792 4.43512C10.5091 4.36194 10.639 4.53518 10.53 4.63822C10.0805 5.06235 9.64889 5.51485 9.23671 5.99573C6.3843 9.33199 4.74007 13.8719 4.72513 18.4507C4.72513 24.396 8.70207 30.8131 15.1282 30.8131C20.8629 30.8131 25.5268 25.2666 25.5268 18.4507C25.5268 15.2474 24.453 12.1724 22.6191 9.89053C22.5549 9.80988 22.6311 9.69638 22.7296 9.72476C25.8299 10.6417 28.1462 14.2065 28.1462 18.4507C28.1462 22.1992 26.7857 25.9297 24.4157 28.688C21.9575 31.5464 18.6586 33.1219 15.1267 33.1234ZM12.6312 18.4477C12.6312 14.202 14.6936 10.5372 17.6505 8.89293C18.0164 8.68834 18.4689 8.71522 18.8064 8.96163L19.4382 9.42309C22.0307 11.3152 23.6421 14.774 23.6421 18.4522C23.6421 22.698 21.5797 26.3628 18.6228 28.0085C18.2569 28.2131 17.8059 28.1877 17.4669 27.9398L16.8337 27.4783C14.2411 25.5862 12.6297 22.126 12.6297 18.4492L12.6312 18.4477ZM34.1571 18.4477C34.1571 24.4691 30.8179 29.7259 25.8956 32.4633C25.7657 32.5365 25.6358 32.3633 25.7448 32.2602C26.1943 31.8361 26.6259 31.3836 27.0381 30.9012C29.8905 27.565 31.5347 23.0265 31.5497 18.4462C31.5497 12.501 27.5727 6.08384 21.1466 6.08384C15.4134 6.08384 10.748 11.6303 10.748 18.4462C10.748 21.6496 11.8218 24.7245 13.6557 27.0079C13.7199 27.0886 13.6437 27.2021 13.5452 27.1737C10.4449 26.2567 8.12711 22.6935 8.12711 18.4507C8.12711 14.7038 9.4876 10.9732 11.8576 8.21493C14.3158 5.35506 17.6162 3.78101 21.1496 3.78101C24.8667 3.78101 28.4255 5.60296 30.912 8.78093C33.0371 11.5796 34.1586 14.9218 34.1557 18.4462L34.1571 18.4477Z"
-        fill="#03FFFF"
+        fill="white"
       />
       <path
         d="M110.399 12.1528C111.817 12.2967 112.924 13.4944 112.924 14.9507V22.1772L112.91 22.4653C112.775 23.7889 111.723 24.8418 110.399 24.9761L110.112 24.9897H92.8677L92.5806 24.9761C91.2569 24.8418 90.2044 23.7889 90.0698 22.4653L90.0552 22.1772V14.9507C90.0552 13.4944 91.1623 12.2968 92.5806 12.1528L92.8677 12.1382H110.112L110.399 12.1528ZM69.2378 12.0122C70.0799 12.0122 70.8548 12.1717 71.561 12.4927C72.2659 12.8137 72.8398 13.2766 73.2788 13.8813C73.4475 14.1142 73.5863 14.3665 73.6938 14.6382C73.6953 14.6412 73.6958 14.6435 73.6958 14.645C73.8372 15.0122 73.5566 15.4075 73.1626 15.4077H71.605C71.4019 15.4077 71.2178 15.2953 71.1118 15.1206C71.091 15.0864 71.0683 15.0537 71.0444 15.021C70.8354 14.7358 70.5738 14.5194 70.2603 14.3716C69.9452 14.2238 69.6031 14.1489 69.2358 14.1489C68.7028 14.149 68.2591 14.2726 67.9097 14.522C67.5588 14.7714 67.3843 15.1274 67.3843 15.5903C67.3844 15.9232 67.5024 16.1906 67.7397 16.3921C67.9772 16.5937 68.2957 16.7559 68.6929 16.8813C69.09 17.0053 69.5258 17.1249 70.0005 17.2368C70.4753 17.3488 70.9476 17.4862 71.4165 17.646C71.8853 17.8058 72.3181 18.026 72.7153 18.3052C73.1126 18.5844 73.4338 18.9517 73.6772 19.4087C73.9192 19.8656 74.0415 20.4255 74.0415 21.1616C74.0415 21.8979 73.8402 22.5417 73.437 23.0942C73.0323 23.6452 72.4783 24.0795 71.772 24.3931C71.0671 24.7082 70.2619 24.8657 69.3599 24.8657C68.3624 24.8657 67.5021 24.6747 66.7778 24.2954C66.0535 23.9161 65.4953 23.3747 65.104 22.6743C64.9383 22.3787 64.808 22.0592 64.7124 21.7144C64.6124 21.35 64.88 20.9868 65.2593 20.9868H66.7095C66.9498 20.9869 67.1644 21.1379 67.2437 21.3647C67.3407 21.638 67.4752 21.8742 67.6499 22.0698C68.0412 22.5089 68.6107 22.728 69.3589 22.728C69.9651 22.728 70.4472 22.5921 70.8101 22.3188C71.1728 22.0456 71.3539 21.6668 71.354 21.1802C71.354 20.8248 71.2359 20.5392 70.9985 20.3257C70.7611 20.1121 70.4427 19.9362 70.0454 19.8003C69.6482 19.6644 69.2154 19.5369 68.7466 19.4175C68.2777 19.2995 67.8054 19.1565 67.3306 18.9907C66.8557 18.825 66.4192 18.6114 66.022 18.3501C65.6234 18.0903 65.3072 17.742 65.0698 17.3091C64.8324 16.876 64.7144 16.3501 64.7144 15.6616C64.7144 14.9732 64.9026 14.3538 65.2759 13.8013C65.6492 13.2502 66.1746 12.8123 66.8511 12.4927C67.5276 12.1716 68.3238 12.0122 69.2378 12.0122ZM57.8892 12.0103C58.9703 12.0103 59.9123 12.269 60.7202 12.7856C61.5281 13.3009 62.1569 14.0369 62.6079 14.9927C63.0589 15.9485 63.2847 17.1208 63.2847 18.438C63.2847 19.7551 63.0589 20.8943 62.6079 21.856C62.1569 22.8162 61.5267 23.5589 60.7202 24.0815C59.9124 24.6026 58.9702 24.8638 57.8892 24.8638C56.8079 24.8638 55.8608 24.6042 55.0483 24.0815C54.2345 23.5603 53.6057 22.8176 53.1606 21.856C52.7157 20.8943 52.4937 19.7669 52.4937 18.438C52.4937 17.1089 52.7156 15.9632 53.1606 15.0015C53.6056 14.0413 54.2346 13.3024 55.0483 12.7856C55.8622 12.2689 56.8079 12.0103 57.8892 12.0103ZM46.6626 12.2251C47.5286 12.2251 48.3006 12.3733 48.9771 12.6704C49.6536 12.9661 50.1855 13.3903 50.5708 13.9429C50.956 14.4939 51.1489 15.1619 51.1489 15.9458C51.1489 16.4324 51.0364 16.9041 50.811 17.3608C50.5856 17.8192 50.2585 18.2346 49.8315 18.6079C49.5821 18.8259 49.374 19.0169 49.1187 19.1812C48.8469 19.3559 48.7654 19.7189 48.937 19.9937L48.938 19.9927L51.2769 23.7437C51.5233 24.1394 51.2379 24.6519 50.772 24.6519H49.3589C49.1516 24.6517 48.9595 24.5442 48.8521 24.3667C48.3279 23.5051 46.7555 20.928 46.1997 20.0913C46.0892 19.9255 45.9032 19.8267 45.7046 19.8267H44.7974C44.4703 19.8267 44.2056 20.0914 44.2056 20.4185V24.0591C44.2055 24.3876 43.9394 24.6538 43.6108 24.6538H42.2183C41.8897 24.6538 41.6236 24.3876 41.6235 24.0591V12.8198C41.6235 12.4913 41.8897 12.2251 42.2183 12.2251H46.6626ZM84.8833 12.2271C85.213 12.2273 85.4798 12.494 85.48 12.8237V13.7651C85.4799 14.095 85.2131 14.3626 84.8833 14.3628H79.562C79.2321 14.3628 78.9645 14.6295 78.9644 14.9595V16.561C78.9646 16.8909 79.2321 17.1577 79.562 17.1577H82.6753C83.0053 17.1577 83.2729 17.4253 83.2729 17.7554V18.6958C83.2729 19.0258 83.0053 19.2935 82.6753 19.2935H79.562C79.232 19.2935 78.9644 19.5611 78.9644 19.8911V21.9204C78.9644 22.2505 79.232 22.5181 79.562 22.5181H84.9546C85.2845 22.5181 85.552 22.7849 85.5522 23.1147V24.0562C85.5522 24.3861 85.2846 24.6538 84.9546 24.6538H76.9614C76.6316 24.6536 76.3648 24.386 76.3647 24.0562V12.8237C76.365 12.494 76.6317 12.2273 76.9614 12.2271H84.8833ZM92.8677 13.5444C92.0912 13.5446 91.4614 14.1741 91.4614 14.9507V22.1772C91.4616 22.9537 92.0913 23.5833 92.8677 23.5835H110.112C110.888 23.5834 111.518 22.9537 111.518 22.1772V14.9507C111.518 14.1741 110.888 13.5445 110.112 13.5444H92.8677ZM57.8892 14.146C57.3665 14.146 56.8971 14.3148 56.4819 14.6538C56.0654 14.9928 55.7426 15.483 55.5112 16.1235C55.2799 16.7641 55.1636 17.5362 55.1636 18.438C55.1636 19.3398 55.2798 20.1119 55.5112 20.7524C55.7427 21.3945 56.0669 21.8832 56.4819 22.2222C56.8971 22.5612 57.3665 22.73 57.8892 22.73C58.4117 22.73 58.8775 22.5611 59.2866 22.2222C59.6958 21.8832 60.0171 21.3931 60.2485 20.7524C60.4785 20.1118 60.5952 19.3518 60.5952 18.438C60.5952 17.524 60.48 16.7485 60.2485 16.1138C60.0171 15.4778 59.6957 14.9927 59.2866 14.6538C58.8775 14.3149 58.4118 14.146 57.8892 14.146ZM98.3608 21.5796H97.2007L96.7856 20.1216H94.604L94.1851 21.5796H93.0513L94.8784 15.2974H96.5347L98.3608 21.5796ZM101.74 15.2974C102.208 15.2974 102.615 15.3814 102.963 15.5493C103.317 15.7113 103.591 15.9455 103.783 16.2515C103.975 16.5573 104.071 16.9141 104.071 17.3218C104.071 17.7356 103.972 18.0997 103.774 18.4116C103.576 18.7233 103.297 18.9663 102.937 19.1401C102.583 19.308 102.166 19.3921 101.686 19.3921H100.435V21.5796H99.3003V15.2974H101.74ZM107.593 15.2974C108.061 15.2974 108.469 15.3814 108.817 15.5493C109.171 15.7113 109.444 15.9455 109.636 16.2515C109.828 16.5573 109.924 16.9141 109.924 17.3218C109.924 17.7356 109.825 18.0997 109.627 18.4116C109.43 18.7233 109.15 18.9663 108.791 19.1401C108.437 19.308 108.019 19.3921 107.54 19.3921H106.289V21.5796H105.154V15.2974H107.593ZM95.3188 17.6284L94.8745 19.1763H96.5181L96.0757 17.6196L95.7065 16.1431L95.3188 17.6284ZM100.435 18.4468H101.677C102.043 18.4467 102.337 18.3448 102.559 18.1411C102.781 17.9312 102.892 17.6575 102.892 17.3218C102.892 16.998 102.786 16.7374 102.577 16.5396C102.367 16.3416 102.088 16.2427 101.74 16.2427H100.435V18.4468ZM106.289 18.4468H107.531C107.896 18.4467 108.191 18.3448 108.413 18.1411C108.634 17.9312 108.746 17.6575 108.746 17.3218C108.746 16.998 108.64 16.7374 108.43 16.5396C108.22 16.3416 107.941 16.2427 107.593 16.2427H106.289V18.4468ZM44.7983 14.3608C44.4699 14.3609 44.2046 14.6271 44.2046 14.9556V17.0972C44.2048 17.4255 44.47 17.6908 44.7983 17.6909H46.395C46.8102 17.6909 47.1718 17.6161 47.481 17.4683C47.7899 17.3204 48.0338 17.1162 48.2114 16.855C48.3891 16.5937 48.478 16.2917 48.478 15.9468C48.478 15.6273 48.3975 15.3482 48.2378 15.1108C48.078 14.8734 47.8616 14.6895 47.5884 14.5581C47.3152 14.4282 47.006 14.3628 46.6626 14.3628V14.3608H44.7983Z"