Update purse

src/App.tsx

@@ -116,11 +116,11 @@ export function App(): JSX.Element
     if(!WebGL.isWebGLAvailable())
     {
         dispatchMainEvent(new NitroEvent(Nitro.WEBGL_UNAVAILABLE));
-
-        return;
     }
-
-    Nitro.instance.core.configuration.init();
+    else
+    {
+        Nitro.instance.core.configuration.init();
+    }
     
     return (
         <div>

src/views/purse/PurseView.tsx

@@ -1,6 +1,5 @@
 import { Map } from 'immutable';
-import { UserCreditsEvent, UserCurrencyEvent, UserCurrencyUpdateEvent } from 'nitro-renderer';
-import { UserCurrencyComposer } from 'nitro-renderer/src/nitro/communication/messages/outgoing/user/inventory/currency/UserCurrencyComposer';
+import { Nitro, UserCreditsEvent, UserCurrencyComposer, UserCurrencyEvent, UserCurrencyUpdateEvent } from 'nitro-renderer';
 import { useEffect, useState } from 'react';
 import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
 import { FadeTransition } from '../../transitions/FadeTransition';
@@ -50,12 +49,16 @@ export function PurseView(props: PurseViewProps): JSX.Element
         SendMessageHook(new UserCurrencyComposer());
     }, []);
 
+    const displayedCurrencies = Nitro.instance.getConfiguration<number[]>('system.currency.types', []);
+
     return (
         <FadeTransition inProp={ isReady } timeout={ 300 }>
-            <div className="grid-container mb-1">
-                <div className="grid-items grid-2">
+            <div className="nitro-purse position-relative mb-1">
+                <div className="row px-0 mx-0">
                     { currencies && currencies.entrySeq().map(([ key, value ]) =>
                         {
+                            if(displayedCurrencies.indexOf(parseInt(key)) === -1) return null;
+
                             return <CurrencyView key={ key } type={ parseInt(key) } amount={ value } />
                         }) }
                 </div>

src/views/purse/currency/CurrencyView.scss

@@ -1,31 +1,9 @@
-.purse-item {
+.nitro-purse-item {
     flex: 46%;
-    margin-bottom: 3px;
-    padding: 0.23rem;
     margin-right: 3px;
 
     &:nth-child(2n),
     &:last-child {
         margin-right: 0;
     }
-
-    .item-value {
-        font-size: $font-size-sm;
-        padding: 2px 5px;
-    }
-
-    .item-icon {
-        position: relative;
-        width: 25px;
-        height: 25px;
-        border-radius: $card-border-radius;
-
-        .currency-icon {
-            position: absolute;
-            background-position: center;
-            background-repeat: no-repeat;
-            width: 100%;
-            height: 100%;
-        }
-    }
 }

src/views/purse/currency/CurrencyView.tsx

@@ -1,3 +1,4 @@
+import { CurrencyIcon } from '../../../utils/currency-icon/CurrencyIcon';
 import { CurrencyViewProps } from './CurrencyView.types';
 
 export function CurrencyView(props: CurrencyViewProps): JSX.Element
@@ -5,9 +6,9 @@ export function CurrencyView(props: CurrencyViewProps): JSX.Element
     const { type = -1, amount = 0 } = props;
 
     return (
-        <div className="d-flex item-detail bg-primary rounded border border-black shadow p-1">
-            <div className="flex-grow-1 item-value">{ amount }</div>
-            <div className="item-icon p-1 rounded bg-secondary">{ type }</div>
+        <div className="d-flex bg-primary rounded shadow border border-black mb-1 p-1 nitro-purse-item">
+            <div className="d-flex flex-grow-1 align-items-center justify-content-end detail-value">{ amount }</div>
+            <div className="bg-secondary rounded ml-1"><CurrencyIcon type={ type } /></div>
         </div>
     );
 }

src/views/right-side/RightSideView.scss

@@ -2,5 +2,6 @@
     position: absolute;
     top: 10px;
     right: 10px;
+    width: 200px;
     z-index: $rightside-zindex;
 }